【WV.8】WordPressのJSおよびCSSを最適化する – Capital P – WordPressメディア
Core Web Vitalの連載第8回では、JSおよびCSSの最適化について説明しよう。配信の最適化（Gzip圧縮、CDN、ブラウザキャッシュ）についてはすでに第1回「リソース配信の最適化」で説明したのでそちらを参照して欲しい。今回最適化するのは次の項目である。 不要な読み込みをなくす（特にプラグイン）CSS・JS自体を分割し、必要な時だけ読み込む。 この作業はかなり面倒くさく、サイトごとにチューニングが必要になる作業なので、運用歴の長い既存サイトで導入するのはかなり骨が折れるだろう。だが、最終的にはこの作業をやらないと「使用していないCSS / JavaScriptの削減」という項目をなくすことができない。 なにより、ユーザーに余計なデータをダウンロードさせないことは、ユーザー体験の向上につながるだろう。 不要なJS/CSSの読み込みを停止 まずは不要なCSSとJSの読み込みを停止する
WordPress：Gutenbergでデフォルト表示されているブロックをブラックリスト形式で非表示にする方法 - NxWorld
July 24, 2021 追記 バージョンアップによってフック変更・新ブロック追加・ブロックスラッグの変更などあったために、ここで紹介している内容をそのまま利用できない部分があります。 Ver 5.8以降でのブロック表示制御については、「WordPress：Gutenbergのデフォルトブロックを非表示にする方法（Ver 5.8対応）」を参考にしてください。 以前このブログで紹介した「WordPress：Gutenbergでデフォルト表示されているブロックを非表示にする方法」は、使いたいブロックを指定するホワイトリスト形式でしたが、逆に使いたくないブロックを指定するブラックリスト形式でブロックを非表示にする方法です。 ホワイトリスト形式での指定はPHPを利用しましたがブラックリスト形式の場合はJavaScriptを利用し、それぞれ下記のように指定することで対象ブロックを非表示にできます。
レンダリングを妨げるリソースの除外/CSSを非同期で読み込む
レンダリングを妨げるリソースの除外/CSSを非同期で読み込む PageSpeed Insights や Chrome の拡張機能 Lighthouse を使ってページをテストすると「レンダリングを妨げるリソースの除外」という項目が表示されることがあります。 この項目が表示される原因の1つは CSS ファイルの読み込みなどのレンダリングブロックによる表示の遅延です。 以下はレンダリングをブロックする CSS ファイルの読み込みを最適化してページの表示速度を改善させる方法と WordPress で CSS を非同期で読み込む方法の覚書です。 レンダリングのブロック 以下はあるサイトのページを PageSpeed Insights でテストした結果の一部抜粋です（同様のテストは Chrome の拡張機能 Lighthouse でも可能です）。 「改善できる項目」が複数表示されていて、その中に「レ
JSやCSSに自動で付与されるバージョン番号を非表示に
WordPressでは、JSやCSSがロードされる際にlinkタグやscriptタグ内にWordpressやプラグインもしくはスクリプトそのもののバージョン番号が付与されます。「?ver=」で検索してみてください。 バージョン番号を消すことは、セキュリティ的な観点から本当に意味があるのかどうかは議論が分かれるところですが(どうせ中身に書いてあるし...バージョンなんか見ずに無差別爆撃が最近でしょうから)、余計なものはできるだけ出力しないほうがいいと考え消すことにしました。このブログで挙動に関してある一定期間様子をみて他のブログに適用していこうと思います。 方法は、以下のサイトを参考にさせてもらいました。(Thank you!) How to remove WordPress version parameter from JS and CSS files どちらか選択して、functions
WordPressでカスタムフィールドを使って任意のコードやファイルをhead内に読み込ませる – bl6.jp
以前「WordPressで特定の記事やページにカスタムフィールドで指定したCSS・JSファイルを読み込む」という記事を書いたんですが、こちらは指定したファイルを読み込ませるものでした。で、今回はカスタムフィールドに設定した値をそのままhead内に読み込ませるカスタマイズです。なので、フルパスで何かを読み込ませてもいいし、CSSやJavaScriptを直書きしても反映してくれるようにしてみます。 [ads_center] カスタムフィールドの値を読み込ませる 以下をfunctions.phpに記述します。 // header内に任意のコードを読み込む function head_original_load(){ if(is_single() || is_page()){ if($head_original_code = get_post_meta(get_the_ID(), 'head_lo
コンタクトフォーム7で郵便番号から住所を自動入力させる方法｜WEB TIPS～ホームページ制作の覚え書き
コンタクトフォーム7で一番よくやる（やれと言われる）カスタマイズの１つが、郵便番号からの住所自動入力ではないかと思います。 前置きが短めですが、今回は郵便番号を入力すると住所が勝手に表示されるようにカスタマイズしてみたいと思います。 2020-05-26 都道府県の入力欄にセレクトボックス（ドロップダウン）を使用する方法を追記しました。 郵便番号ライブラリの読み込み 今回はYubinBangoライブラリを利用します。以前はajaxzip3をよく使いましたが、YubinBangoライブラリの前身がajaxzip3というような立ち位置です。名前はダサめですが、こっちの方が新しいのです。。 読み込みは基本的に、下のコードを使用中のテーマのfunctions.phpに貼り付ければOKです。もし最終行に、?>が記述されていたら、その前の行に貼り付けます。 wp_enqueue_script('yub
WordPressテーマのCSSとJSをfunctions.phpで読み込む方法
WordPressテーマでは、CSSやJSなどの外部ファイルをfunctions.phpで読み込むことが推奨されています。外部ファイルの読み込みにはwp_enqueue_style関数、wp_enqueue_script関数を呼び出すアクションフックを作成します。 wp_head関数でCSSとJSを読み込むサンプルソース 下記のようにfunctions.phpに追記します。 functions.php /* CSSの読み込み ---------------------------------------------------------- */ function register_stylesheet() { //読み込むCSSを登録する wp_register_style('reset', get_template_directory_uri().'/css/reset.css');
Contact Form 7のJavaScriptとCSSを必要なページでのみ読み込む方法
Contact Form 7のJavaScriptとCSSを必要なページでのみ読み込む方法 適用しているテーマのfunctions.phpに以下を追加します。 //Contact Form 7のJavaScriptとCSSの読み込みを停止 function wpcf7_js_css_disable() { add_filter( 'wpcf7_load_js', '__return_false' ); add_filter( 'wpcf7_load_css', '__return_false' ); } add_action( 'after_setup_theme', 'wpcf7_js_css_disable' ); //特定の固定ページでのみJavaScriptとCSSを読み込む function wpcf7_js_css_enable() { if( is_page('contact
コードを覚えなくてもWordPress編集ができるようになるためのカンペコレクション
WordPressには、いくつかのプログラム言語が利用されています。 主に使うものといえば、以下のような言語です。 WordPress関数（PHP） PHP HTML CSS JavaScript（jQuery） ただ、これだけの言語があると、初めてWordpressに触れる人には、覚えるのが大変なのではないかと思います。 というか、ある程度プログラム経験がある僕でも、揮発性の高い脳を利用しているため、全く覚えられません。 ということで今回は、Wordpressで「これどうすればいいんだったっけ？」「あれなんて関数だったっけ？」なんて時に見ると便利なカンニングペーパー（チートシート）の紹介です。 WordPressチートシート WordPressで重要な部分の覚え書きというか、これだけ覚えておけばある程度Wordpressを使えるようになるチートシートです。 日本語版 WordPress
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
サイト表示を少しでも早く！WordPressでJavascriptファイルを非同期にする方法 | さんぽずかん
【WordPress】wp_footerにスクリプトブロックを出力する - イソップブログ
wp_footerでJavaScriptファイルを読み込む