Nakamura0WordPressのテーマやプラグインをカスタマイズしてJavaScriptやCSS(スタイルシート)をインクルードする「正しい」方法をご紹介します。jQueryやBootstrapなど自分のテーマやプラグインで使いたいことってあると思います。そのとき、まず思いつくのがファイルを直接いじる方法です。/>と追加すればいいじゃない、と。確かにこれでも一応は動きます。Practiceです。WordPressには様々なテーマやプラグインが存在しています。ユーザーが自由にそれらを選択することで、デザインを切り替えたり、機能を追加したり、柔軟性があるフレームワークを実現しています。開発者からすると、いろいろな組み合わせで使われる可能性があるということでもあるんですね。各々のテーマやプラグインが好き勝手にインクルードしまくったら、コンフリクト(衝突)を起こし正常に動作しなくなる可能性があります。あなたのプラグインがjQueryをインクルードして、別のプラグインが(jQueryとコンフリクトを起こす)prototype.jsなどをインクルードしていたら。他のテーマやプラグインがどんなものをインクルードするのか分からない以上、好き勝手にインクルードするのはリスクが生じるわけです。いうコンフリクトを避けるために、WordPressではお作法が存在します。みんながハッピーになるためには、みんながお行儀良くお作法に従わないといけません。Codexで推奨されているJavaScriptやCSS(スタイルシート)をインクルードするお作法をご紹介します。WordPressでインクルードする手順WordPressでは、インクルードするJavaScriptやCSS(スタイルシート)はWordPress側で一元管理しています。インクルードさせたいスクリプトを以下の手順でWordPressに教えてあげる必要があります。インクルードしたいファイルの情報を登録するインクルード待ちリスト(キュー)に追加するJavaScriptをインクルードしてみよう百聞は一見にしかず。ソースをご紹介します。テーマもしくはプラグインの中に追記して、インクルードしたいファイル名をWordPressに登録します。);wp_register_scriptという関数が出てきました。これはJavaScript情報を登録する関数です。WordPressにJavaScriptの存在を教えてあげることができます。);$handleスクリプトのハンドル名(自分で自由に付けられます)$srcスクリプトのソースパス$deps依存するスクリプトのハンドル名が格納された配列$verスクリプトのバージョン。ブラウザキャッシュの制御のために使います。デフォルトではWordPressのバージョンになります。$in_footetフッター内でロードするか?デフォルトではfalseでヘッダー内でロードします。プラグインからインクルードする場合と、テーマからインクルードする場合で、スクリプトのURLパスを取得する方法が若干異なっています。プラグインフォルダにある’/js/custom-script.js’のURLを取得しています。テンプレートフォルダの中にある’/js/custom-script.js’のURLをを取得しています。'/js/custom-script.js'いずれの場合も、取得したスクリプトパスを’custom-script’というハンドル名でWordPressに登録しています。次に、登録した’custom-script’というスクリプトをインクルードしてもらうために、待ちリスト(キュー)に追加します。);これであとはWordPressが自動的にスクリプトを読み込んでくれます。↓のように、HTMLのヘッダーからJavaScriptがインクルードされるようになりました。src="http://hogehoge.com/wp-content/plugins/hogeplugin/js/custom-script.js?ver=3.3.1"></script>CSS(スタイルシート)をインクルードしてみようCSSの場合もほとんど同じです。関数名が少し違うだけ。);wp_register_styleという関数はCSS(スタイルシート)情報を登録する関数です。);使い方はwp_register_scriptとほとんど同じですが、最後の$media引数だけが違っています。$mediaメディアのタイプを指定します。’all’、’screen’、’handheld’、’print’、またはW3Cで認められているその他のタイプがサポートされています。↓のように、HTMLのヘッダーからCSSがインクルードされるようになりました。/>タグを埋め込むやり方は、記述が分散するだけでなく、他のプラグインや子テーマと組み合わせた場合、思わぬ問題が発生しかねません。WordPressのAPIを使うことで、他のプラグインやテーマとコンフリクトすることなく、安全にJavaScriptやCSSのインクルードできるようになります。ヘッダーで読み込むか、フッターで読み込むかについてもAPIなら簡単に変更できます。他のファイルとの依存性やバージョンの情報などを登録することで、常に適切にインクルードされることが保障されます。functions.phpなどにまとめて記述するだけで、安全で便利にインクルードしてくれるわけですから、気軽にどんどん使っていきたいですね。*メールアドレス(公開はされません。システム、業務システム等の開発をしています。このブログでは、日頃の開発でぶつかった問題と発見した解決法をメモしていきます。同じ問題にぶつかっているどこかの誰かさんのお役にたてたら嬉しいです。Python、Django、AWS、画像処理などについてお困りでしたら、お気軽にご連絡ください。最近の投稿システム開発にかかる費用ってどのくらい?内訳を徹底分析!起業して2年。横浜のITシステム開発会社が辿った道。