「Wordpress」の記事一覧

wordpressの子テーマを作成する場合の、wp_enqueue_style関数 前回に引き続いて、wp_enqueue_style関数を確認していきます。 かつては@importなどを使って指定していた子テーマのcssファイルですが、現在(2017年2月時点）は、wp_enqueue_style関数の利用が推奨されていますので、当サイトでも実装します。どういった方法が正しいかについては、「WordPress Codex 日本語版」の「子テーマ」の項目に載っている他、多数のサイトで実装方法が公開されているため、今更言うまでもない話と言うべきですが、僕自身の関数の勉強がてら、順に追ってみましょう。 なお、下記のような構造で、親テーマ（parent-themes）ディレクトリがあり、それに対応する子テーマ（child-themes）を準備したと仮定します。 【例】 http://example.com/wp/themes/parent-themes/css.style http://example.com/wp/themes/child-themes/css.style http://example.com/wp/themes/child-themes/function.php まずはCodexに従って「child-themes」フォルダ内に、「function.php」ファイルを作成し、 このようなphpを記述します。おおよその場合は、これで過不足なく子テーマの準備ができるでしょう。僕自身もテストみた結果も問題なく子テーマのcssを読み込んでくれました。 引数の指定方法を確認する さて、ではなぜこのような書き方になったのか……という部分について、後学のために内容について検討したいと思います。毎度のことですが個人が独学で記述しているため、記述内容に誤りがあったら大変申し訳ありません。 この関数における引数「$handle」は必須項目です。が、どのように指定するのが適切なのか。一般的には視認しやすいように「parent-style」「child-style」としているものと思われますが、「styleA」や「styleB」などでも構いません。 ただし、名称が一意となるように設定する必要はあります。同一の名称、例えば「style」などと指定してしまうと適切に読み込めません。つまり、「設定したのに、なぜかスタイルシートが反映されないぞ？」というトラブルに行きつく可能性が高まります。 例えば、先の記述のうち「$handle」の項目を全て「style」に変えてみます。 add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' ); function theme_enqueue_styles() { wp_enqueue_style( 'style', get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'style', get_stylesheet_directory_uri() . '/style.css', array('style')); } 子テーマ利用時において、三行目のget_template_directory_uri()関数は「その親テーマのディレクトリ」を返し、四行目のget_stylesheet_directory_uri()関数は「子テーマのディレクトリ」を返します。つまり、それぞれ別のディレクトリにある同名のファイルを指定しています。しかし結果は、下記画像の通り、一つのファイルしか読み込めていません（親テーマのcssのみでした）。 ちなみに、（僕がテストをした限りでは）子テーマファイルは自動的に読み込んでくれるようで、このミスを犯してもデザインが崩れてしまうようなことはありませんでした。が、誤作動を防ぐべく、指定して読み込む方が安全かと思います。 次に、引数「$src」は、読み込みたいスタイルシートのURLを指定します。絶対指定の形式（例にのっとれば「http://example.com/wp/themes/parent-themes/css.style」）でも読み込めますが、フォルダ構成やURLが変わった時にえらいことになりますので、関数を使ってファイル名以前を自動的に取得してやるのが適切でしょう。なお、「get_stylesheet_directory_uri()」関数などで取得したURLの末尾に、/は含まれないので、ファイル名の前に入れ忘れないようにします。 更に、引数「$deps」は、この「親テーマのスタイルシートを読み込んでから、子テーマのスタイルシートを読み込む」という原則を維持するために、子テーマ側のスタイルシートを読み込むタイミングで指定します。上の例では「parent-style」というハンドルで親スタイルシートを読み込んでいますので、「Array('parent-style')」と指定しています。 仮に、先の読み込みで「'parent-styleA'」としていたら、それに伴って「Array('parent-styleA')」とする必要があります。 add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' ); function theme_enqueue_styles() { wp_enqueue_style( 'parent-styleA', get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-styleA')); } 下記の通り、親テーマの次に、子テーマが読み込まれていることが確認できました。 もしも誤って、指定すべき名称を間違えると駄目です。例えば、親テーマの$handleが「parent-styleA」であるにも関わらず、「Array('parent-style')」と一文字間違えてしまったとしまいます。 add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' ); function theme_enqueue_styles() { wp_enqueue_style( 'parent-styleA', get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style')); } 画像が分かりづらいですが、子テーマは読み込まれません。「先にparent-styleというCSSを読んだら、このCSSを読むよ」という指示になるので、待てど暮らせど読み込むきっかけが来ないため、と思われます。 ということで、設定時に必要な引数の指定については以上です。 他のオプションの引数については、指定が必要となる要件そのものが分からなかったので、明記されていた「$handle」「$src」「$deps」の三つについて確認しました。今後、他の引数について詳細が確認できたら、追記なり更新なりをしていきたいかと思います。

ほ〜らく奉行所

「Wordpress」の記事一覧

wordpressの不正アクセスが増えていることについての雑感

備忘録　特定のプラグイン導入後、カスタムタクソノミーの絞り込み検索ができなくなった

XFREEでWordPressを利用していたら、Password Protectedがうまく機能しなかったので代替手段などを考えた

【WordPress初心者向け】ヘッダー画像を"とりあえず"用意する

【WordPress初心者向け】CSSなどにおける改行・空白の考え方

【WP初心者向け】固定フロントページを利用する場合のAll in One SEO Packに関する疑問

【WP初心者向け】WordPressのパーマリンクとは（後編）

【WP初心者向け】WordPressのパーマリンクとは（前編）

【wordpress】wp_enqueue_style関数で子テーマのcssを読み込む