MEDIAWordPressアドセンスSearchConsoleアナリティクスレンタルサーバードメインWordPressにスタイルシートを読み込むwp_enqueue_styleの使い方2019.08.10WordPress使い方WordPress関数HOMEWordPressWordPress使い方WordPressにスタイルシートを読み込むwp_enqueue_styleの使い方WordPressに親テーマのスタイルシートを読み込んだり、子テーマのスタイルシートを読み込んだり、自分で作成したCSSファイルを読み込んだりを関数のwp_enqueue_styleを使って読み込んでみました。WordPressにスタイルシートを読み込むときのwp_enqueue_styleの使い方を説明します。wp_enqueue_styleで読み込んだスタイルシートの確認WordPressにスタイルシートを読み込むWordPressでスタイルシートを読み込むときの方法はheadに直接読み込んだりPHPでechoして読み込んだり何種類かの方法がありますが、せっかくWordPressを使用してるのでWordPressにある関数を使用して正しくスタイルシートを読み込む方法を使いたいと思います。使わないと思ったとしても使い方の理解を深めておくのもありですね。wp_enqueue_styleの特徴WordPressでスタイルシートの読み込みができる関数は「wp_enqueue_style」です。?>WordPressのwp_enqueue_styleの特徴として、スタイルシートを読み込むと読み込んだスタイルシートがキュー(待ち行列)に追加できてアクションフックすることによりスタイルを読み込むことができます。wp_enqueue_styleで読み込むとWordPressのテーマ内で使用する複数のスタイルシートが存在する場合でもfunctions.phpにコードの記述をして管理し読み込むのでメンテナンス性も向上するのではないでしょうか。Advertisementwp_enqueue_styleの引数wp_enqueue_styleには引数があり、()カッコの中で引数を第五引数まで指定ができます。?>$handle初期値:なしwp_enqueue_styleのハンドル名を書く部分の引数です。ハンドル名はwp_enqueue_styleで出力されたスタイルシートのidになる部分とした使い方ができます。$src初期値:空文字列wp_enqueue_styleでスタイルシートを指定するときのファイルまでのURLを書く引数です。使い方は$srcの引数でファイルまでのURLを書くときにget_template_directory_uri()で書きます。スタイルシートまでのURLを指定するときはget_stylesheet_uri()を使用して使います。get_template_directory_uri()は主に親テーマのとき、get_stylesheet_uri()は子テーマのときに使用することが多いです。$deps初期値:array()依存関係を書くときに指定する引数です。wp_enqueue_styleで読み込むスタイルシートの依存関係、つまり読み込み順序を決めるときには第三引数で(array)を書いて優先順位を決める使い方ができます。$ver初期値:falseスタイルシートのバージョン番号を指定する部分です。スタイルシートのバージョンを指定したりして、そのスタイルシートを確実に読み込ませたいなどで使用する引数です。$media初期値;’all’スタイルシートが定義されているメディアを指定するときに使用する引数です。wp_enqueue_styleの引数()カッコの中で必ず必要な引数は「$handle」です。その他の引数でよく使用するのは$srcと$depsの第三引数までの使用が多くなるかと思います。Advertisement親テーマでスタイルシートを読み込むWordPressのwp_enqueue_styleで引数も使用して親テーマでスタイルシートを作成して読み込む場合の使い方です。子テーマでスタイルシートを管理することが多いので、あまり実際に親テーマ側でスタイルシートを増やしたことがないので作成して読み込ませてみました。親テーマのCSSフォルダに「practice.css」というCSSファイルを作成してwp_enqueue_styleでキューに入れて読み込むという場合の使い方。);functions.phpに記述をします。引数の説明で紹介したようにwp_enqueue_styleの第一引数にハンドル名をつけます。例では「’oreno-style’」です。このときの「’oreno-style’」がスタイルシートが読み込まれたときにidとして「oreno-style-css」となります。第二引数にはget_template_directory_uri()を使用して読み込むスタイルシートのファイルまでのURL指定をします。);と書きadd_actionという関数でore_enqueue_stylesという関数を呼び出してます。/>読み込まれた出力結果は上記のようにスタイルシートとしてhead内に組み込まれる仕組みです。子テーマのスタイルシートを読み込む次はWordPressでスタイルシートを読み込むときに子テーマのスタイルシートを読み込んだ場合の使い方ですが、wp_enqueue_styleで親テーマのスタイルシートを読み込んでから子テーマのスタイルシートの読み込みをするようにします。);WordPressの子テーマのスタイルシートを読み込む場合には引数で紹介した第三引数の$depsでarray()を使用してスタイルシート同士の依存関係を作ります。1個目のwp_enqueue_styleで先に親テーマのスタイルシートを追加します。2個目のwp_enqueue_styleで子テーマのスタイルシートを追加します。2個目の子テーマ読み込みのwp_enqueue_styleには第二引数を使用してget_stylesheet_directory_uri()で子テーマのスタイルシートまでのファイル指定、そして親テーマのスタイルシートが読み込まれてから子テーマのスタイルシートを読み込ませるために第三引数でarray()のカッコ内に1個目で指定したハンドル名を書きます。/>そうすると出力結果は親テーマのスタイルシートの読み込み後に子テーマのスタイルシートが依存関係を作り読み込めます。Advertisementwp_enqueue_styleで複数のスタイルシートの読み込みさらに子テーマのスタイルシートと自分で作成した子テーマ側に存在するスタイルシートが複数になってる場合もあるかと思います。使用してるWordPressテーマでメインのスタイルとサブで使用するスタイル、ページごとのスタイルなど分割して管理をするケースだと思います。このような場合でもwp_enqueue_styleを使用してまとめて読み込むことができます。);上記のコードを例とします。子テーマ側でlesson.cssというスタイルシートを作成したのですが、この場合も子テーマでスタイルシートを読み込むので親テーマのスタイルシートを先に読み込んであげるようにします。依存関係をつけるための引数arrayの書き方も同じなのですが、私がよく間違えるのはコードが増えるので第二引数で使用するget_template_directory_uri()とget_stylesheet_directory_uri()の間違い、ファイルまでの指定をする記述ミスに注意です。それはないだろってことではenqueue部分のqをcにしてしまうとかたまにやらかします。今回の記事で使用したwp_enqueue_styleでスタイルシートを読み込んでから、実際にスタイルシート達が全て動作するか要素に分けて簡単なCSSを書いて表示の確認をしてみました。使用したスタイルシートstyle.css(親)style.css(子)practice.csslesson.css読み込めなかったら記事で説明してきたことが嘘になってしまうので、ちゃんと動作してくださいスタイルシート達!上記の画像のような簡単に、それぞれのスタイルシートごとに背景のカラーとフォントカラーをcssで変更してwp_enqueue_styleで読み込みできたか確認しました。親テーマのスタイルシートは確認オッケーpractice.cssも確認オッケー。practice.cssは記事内で引数のハンドル名の例としていたoreno-styleのやつです。lesson.cssも確認オッケー。レッスンの成果が出てるかもしれない。子テーマのスタイルシートも問題なくCSSの記述が反映できました。いうことで何か一部分でも参考になればと思います。WordPressでスタイルシートを読み込むwp_enqueue_styleの使い方の紹介でした。投稿一覧WordPressとWeb関係のことを趣味的に学んでます。独学なので記事で間違ってることがあればご指摘ください。記事が少しでも誰かの参考になればと思います。2019.08.08WordPressにはJavaScriptをテーマに読み込むときの関数が用意されています。2020.02.19WordPressのカスタムメニューを管理画面のメニューで設定する場合はどのような手順で設定していけばいいのか説明します。2018.12.31WordPressのカテゴリー設定で構造を階層化するとサイトのページ情報が分かりやすい構造にできて訪問者にもSEOにもサイトを向上することができます。WordPress.。