functions.phpで読み込ませる
WordPressでページごとにデザインを変えたいけど、CSSをインラインに書くのはちょっと…という方や、いちいち全部のページで大きなファイルを呼び出したくない方、プラグインはなるべく増やしたくない方向けです。今回はfunction.phpで読み込ませる方法を使いました。
基本的にはこちらのページを参考にさせていただきました。
3番目の「functions.phpで条件分岐出力させる方法」を採用しました。これをCustomizr Proというテーマで実行する場合について説明します。ご自分のテーマに適宜読みかえて設定してみて下さい。
子テーマのディレクトリにCSSをアップ
まず、各固定ページごとに読み込ませたいCSSファイルを用意します。アップデートの影響を受けないように、子テーマのディレクトリにCSSファイルをアップします。Customizr Proの場合は/wp-content/themes/customizr-pro/templates/inc/assets/cssという深いところにありました。それに合わせて/wp-content/themes/customizr-pro-child/templates/inc/assets/cssというディレクトリを作成。そこに独自に作ったお問い合わせフォーム用のCSS(inquiry.css)をアップしました。
次にダッシュボード→外観→テーマエディターよりfunctions.phpを編集します。
/* 固定ページ 個別CSS追加 */
function customizr_scripts() {
wp_enqueue_style( 'style', get_stylesheet_directory_uri() . '/style.css' );
if ( is_page( 'inquiry' ) ) {
wp_enqueue_style( 'inquiry', get_stylesheet_directory_uri() . '/templates/inc/assets/css/inquiry.css' );
}
}
add_action( 'wp_enqueue_scripts', 'customizr_scripts' );
ポイントは、子テーマのディレクトリを指定するのはget_template_directory_uri()ではなく get_stylesheet_directory_uri()という点です。これで、基本はstyle.cssを適用させつつ、追加でinquiry.cssも適用させることができます。
この方法を複数ページで使うスマートな方法は現在調査中です。
コメント