モノではなくお金を貯める。2015/08/09最近WordPressをよくいじっています。WordPressには様々な公開されているテーマがあり、サイトの構成や外観を変更することができます。どんな優れたテーマでも個人の好みがあるので、カスタマイズは必要になってきます。私はStinger5というテーマを継承し子テーマを作成し、カスタマイズを行っています。その子テーマを作成する際に、親テーマのスタイルシート(style.css)の読み込みで少しはまったので、記録として残しておきます。子テーマにおいて、親テーマのstyle.cssを読み込む方法は以下の2通りがあります。子テーマのstyle.cssの先頭で親テーマのstyle.cssを@importで読み込む方法です。以前はこの方法が主流だったようで、ネットで検索すると多く記事が出てきます。codexの子テーマのページを見ると現在は推奨されておらず、次の方法が紹介されています。子テーマのfunctions.phpにおいて、wp_enqueue_style()で親テーマのstyle.cssを読み込む関数を定義し、wp_enqueue_scriptsへのアクションフックを以下のように作成する方法です。?>がある箇所にlinkタグが作成されます。);}少し面倒なこちらの方法が推奨されているのは主に次のような理由からです。ページ読み込みの速度に有利@importで読み込むよりも、linkタグを複数指定して読み込んだ方が、ブラウザが早く処理できるそうです。IEでは顕著なようです。wp_enqueue_style()で読み込むと最終的にlinkタグが生成されるのでページ読み込みの面で@importよりも有利です。複数スタイルシートを扱っている場合、読み込む順序により、適用されるスタイルが変わってしまいます。wp_enqueue_style()では依存するスタイルシートを指定でき、その依存する順番にlinkタグが出力されます。親テーマでもwp_enqueue_style()を使用している場合は、子テーマでも必ず使用した方がよいです。バージョンの出力でキャッシュlinkタグにバージョンを出力することが出来るので、cssを更新したあともブラウザのキャッシュが残っていて、デザインが更新されないということを防ぐことができます。どちらを使用すべきか利点も多いし、推奨されているし、素直にwp_enqueue_styleを使用すればいい気がしますが、実は親テーマがどうスタイルシートを読み込んでいるかによって子テーマで使うべき方法も変わってきます親テーマはwp_enqueue_styleでstyle.cssを読み込んでいる親テーマのfunctions.phpでstyle.cssを読み込んでる場合、子テーマでもwp_enqueue_styleを使用し、style.cssを読み込むべきです。functions.phpは子テーマのものが先に読み込まれるため、ここで親テーマのstyle.cssをキューに追加することで親テーマのstyle.cssの後に子テーマのstyle.cssへのリンクを出力できます。子テーマのstyle.cssは親テーマのfunctions.phpのstyle.cssの読み込む場所でキューされます。get_stylesheet_uri())注意点として、親テーマで複数スタイルシートを使っている場合は、親テーマのfunctions.phpをいじらない限り、依存性の指定だけでは完全な順序の制御はできません。'/B.css')という順番でスタイルシートが読み込まれる場合、依存関係を指定しない場合、親のstyle.css、A.css、子のstyle.css、B.cssという順番で読み込まれます。依存関係を子のfunctions.phpに指定することで、親のstyle.cssをA.cssの後に読み込ませることは可能ですが、子のstyle.cssをB.cssの後に読み込むことはできません。wp_enqueue_styleはキューに追加するidが同じならば、後の追加は無効になるという仕様のようなので(4.1.1時点)、そのような場合は、親テーマのスタイルシートも全て同一のidで子のfunctions.phpでキューに追加します。get_stylesheet_uri())これで親のfunctions.phpでのキューへの追加が無効になり、A.css、親のstyle.css、B.css、子のstyle.cssの順で読み込まれます。?>に出力されるため、大抵の場合、子テーマのstyle.cssよりも後に読み込まれてしまいます。私がカスタマイズしようとしていたstinger5はこの方式であったため、子テーマでのカスタマイズが反映されずしばらく悩みました。この場合、@importを使用するか、親テーマをwp_enqueue_styleを使用するように編集するかどちらかになると思います。親テーマのheader.phpとfunctions.phpを編集してスタイルシートの読み込みをwp_enqueue_styleで行うようにすれば子テーマでもwp_enqueue_styleが使用できるようになります。stinger5の場合style.cssの前に、css/normalize.cssを読み込んでいるのでnormalize.css、親style.css、子style.cssの順になるようにfunctions.phpを編集します。'/css/normalize.css')wp_enqueue_style('stinger-style',get_stylesheet_uri(),array('normalize-style'))header.phpでスタイルシートを読み込んでいる箇所は削除します。親テーマを変更しない親テーマを変更しない場合、header.phpを子テーマで上書きするという手もありますが、おとなしく@importを使うのが楽でいいと思います。今回codexで推奨されている方法で子テーマを作成しようとしたらはまってしまいました。WordPress公式テーマはwp_enqueue_styleを使用しているようですが、特にcssはwp_enqueue_styleで読み込むというガイドラインはありません。(javascriptはwp_enqueue_scriptで読み込むよう記述あり)もう少し具体的に記述しておいてもらえると混乱が少ないのではないかと思います。コメントをキャンセルメールアドレスが公開されることはありません。コメント名前メールアドレスウェブサイト上に表示された文字を入力してください。...Woman&Crowdウーマンクラウドが倒産?サービス終了で閉鎖されるなんて。いえば、久々にWoman&Crowdでも。...雑巾を使わない、という選択。使い捨て便利掃除グッズに移行。...レディース向けの可愛い人気サブバッグ(結婚式や通勤で使える)が好き♡あると便利、ないと困るサブバッグ。...公立幼稚園のママ&子どもの面接服装って?地域によっては、幼稚園or保育園の入園準備が始まるころですね。...東京都内に安いタクシー会社(迎車料金無料or深夜割増なし)があったよ我が家はマイカーを持ってません。分岐水栓がつかなくても工事不要!食洗機(食器洗い乾燥機)を設置する方法をまとめています。...レゴマット&バッグを簡単に手作りした《100均利用・ミシン不要》おくるみをリメイクしてレゴマット&バッグを手作りする方法をご紹介しています。分岐水栓がつかなくても工事不要!あやさん、コメントありがとうございます。分岐水栓がつかなくても工事不要!こんばんは。ふるさと納税の限度額を自分で計算【2017年対応】コメントありがとうございます。ふるさと納税の限度額を自分で計算【2017年対応】こんにちは。興味があって、参考に読ませていただきました。モノではなくお金を貯める。