twenty-fourteenカスタマイズ

Twenty Fourteenの子テーマの作り方 （Sassによるカスタマイズ方法など）

2014年のwordpressデフォルトテーマ、twenty-fourteenが公開されています。その子テーマを作成しましたので紹介します。

基本的には一般的な子テーマの作成方法と同じですが、CSSの読み込みはfunctions.phpで行っていますので要注意です。

また、twenty-fourteenはテーマの管理画面で色の変更などに対応しておらず、かなり頑張ってCSSをいじらないと背景黒のままなのですが、「色」や「サイドバーの幅」などをカスタマイズするためのSCSS仕様の子テーマも紹介します。「2．カスタマイズ版 (Sass/SCSS)」を参考にしてください。

今回紹介するファイル群は、GitHubでも公開していますので参考にしてみてください。

  1. ノーマル版
    style.css
    functions.php
    その他のフォルダ・ファイル
  2. カスタマイズ版 (Sass/SCSS)
    functions.php
    scssフォルダ
    cssファルダ
    その他のフォルダ・ファイル

１．ノーマル版

twenty-fourteenの子テーマ作成に最低限必要なファイルは「index.html」「style.css」「functions.php」の３つだけなのですが、今回は、今後のカスタマイズのことも考えて、一般的に必要だと思われるファイルを用意します。

  • twenty-fourteen-child フォルダ
    • index.html
    • style.css
    • functions.php
    • css フォルダ
      • ie.css
    • images フォルダ
      • pattern-dark.svg
      • pattern-light.svg

これらのファイルはこちらからダウンロードしてください。
https://github.com/wanakijiji/twentyfourteen-child

(1) style.css

テーマとして認識させるための記述を書き込みます。子テーマの場合には「Template」という項目で親テーマのフォルダ名を指定する必要があります。

最低限必要な記述は、「Theme Name」と「Template」だけなのですが、だいたい以下のような記述を書き込んでおきたいところです。

/*
Theme Name: Twenty Fourteen Child
Template: twentyfourteen
Theme URI: 
Author: MyName
Author URI: 
Description: Child theme for TwentyFourteen
Version: 1.0
*/

(2) functions.php

wordpressのデフォルトテーマは、twenty-twelveぐらいからCSSファイルの読み込みをfunctions.phpで行うようになりました。一般的なテーマで行われるheader.phpの<head>タグ内に記載する方法ではないのが特徴です。

わざわざ小難しい方法でCSSファイルを読み込んでいるのは、wordpressのプラグインが読み込むCSSファイルとの兼ね合いで、CSSファイルの読み込み順をコントロールしたいからだと思います。

また、通常の子テーマ作りでは、親テーマCSSの読み込みに@importを使う方法が主流ですが、twenty-fourteenでもこの方法は有効です。ただ、@importにはレスポンスやキャッシュに関する弊害が少なからず存在することや、本気カスタマイズを考えていてIE8などの表示崩れを調整するCSSファイルを必要とする場合などは、functions.phpですべてのCSSの読み込みを管理するほうが良いでしょう。

そこで今回はfunctions.phpよりCSSの読み込みを再設定します。親テーマtwenty-fourteenの記述を習って、以下のような読み込み順とします。

  1. WEBフォント「Lato Web Font」CSSファイル
  2. アイコン用フォント「Genericons」CSSファイル
  3. 親テーマメインCSSファイル
  4. 子テーマメインCSSファイル
  5. 親テーマIE用CSSファイル
  6. 子テーマIE用CSSファイル
  7. 親テーマ各種 JavaScriptファイル
  8. 親テーマメインJavaScriptファイル
  9. 子テーマメイン JavaScriptファイル

また、親テーマtwenty-fourteenのfunctions.phpで設定されている内容を上書きしたい場合、実行順に大きな数字を指定したadd_action()を用意し、そのfunctionの中にすべて記入することとします。

<?php

/*
* 親テーマのfunctions.phpを書き換える
*/
function mytheme_setup() {

/*
* テーマのCSSを読み込み
*/
function twentyfourteen_child_scripts() {

// 親テーマ フォント「Lato.css」
wp_enqueue_style( 'twentyfourteen-lato', twentyfourteen_font_url(), array(), null );

// 親テーマ アイコンフォント「genericons.css」
wp_enqueue_style( 'genericons', get_template_directory_uri() . '/genericons/genericons.css', array(), '3.0.2' );

// 親テーマ メイン「style.css」
wp_enqueue_style( 'twentyfourteen-style', get_template_directory_uri() . '/style.css', array('genericons') );

// 子テーマ メイン「style.css」
wp_enqueue_style( 'childe-style', get_stylesheet_uri(), array( 'twentyfourteen-style' ) );

// 親テーマ IE用「ie.css」
wp_enqueue_style( 'twentyfourteen-ie', get_template_directory_uri() . '/css/ie.css', array( 'twentyfourteen-style', 'genericons' ), '20131205' );
wp_style_add_data( 'twentyfourteen-ie', 'conditional', 'lt IE 9' );

// 子テーマ IE用 「ie.css」
wp_enqueue_style( 'child-ie', get_stylesheet_directory_uri() . '/css/ie.css', array( 'twentyfourteen-ie' ) );
wp_style_add_data( 'child-ie', 'conditional', 'lt IE 9' );

// 親テーマ 各種 JavaScript
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
if ( is_singular() && wp_attachment_is_image() ) {
wp_enqueue_script( 'twentyfourteen-keyboard-image-navigation', get_template_directory_uri() . '/js/keyboard-image-navigation.js', array( 'jquery' ), '20130402' );
}
if ( is_active_sidebar( 'sidebar-3' ) ) {
wp_enqueue_script( 'jquery-masonry' );
}
if ( is_front_page() && 'slider' == get_theme_mod( 'featured_content_layout' ) ) {
wp_enqueue_script( 'twentyfourteen-slider', get_template_directory_uri() . '/js/slider.js', array( 'jquery' ), '20131205', true );
wp_localize_script( 'twentyfourteen-slider', 'featuredSliderDefaults', array(
'prevText' => __( 'Previous', 'twentyfourteen' ),
'nextText' => __( 'Next', 'twentyfourteen' )
) );
}

// 親テーマ メイン「functions.js」
wp_enqueue_script( 'twentyfourteen-script', get_template_directory_uri() . '/js/functions.js', array( 'jquery' ), '20131209', true );

// 子テーマ メイン「functions.js」
wp_enqueue_script( 'child-script', get_stylesheet_directory_uri() . '/js/functions.js', array( 'twentyfourteen-script' ), '1.0', true );

}
remove_action( 'wp_enqueue_scripts', 'twentyfourteen_scripts' );
add_action( 'wp_enqueue_scripts', 'twentyfourteen_child_scripts' );
/* ここにfunctionを記述すると親テーマのfunctionsの後に実行される */
}
add_action( 'after_setup_theme', 'mytheme_setup', 20 );

(3) その他のフォルダ・ファイル

index.html

親テーマのファイルをコピーするだけで特に何もする必要はありません。適宜カスタマイズしてください。

cssフォルダ

何も記述されていないie.cssファイルを用意します。今後旧バージョンのIE用にcssをカスタマイズする必要が出てきたら、このファイルに記述します。このファイルは、functions.phpでIE9未満(IE7とIE8)の時にのみ読み込まれるよう設定されています。

imagesフォルダ

親テーマのフォルダをコピーするだけで特に何もしません。今後デザインに必要な画像はここに保存します。

twenty-fourteenでは斜めストライプのデザインが利用されていますので、子テーマのCSSからこれらの斜めストライプ模様を利用したい場合には、このimagesフォルダ内のストライプ模様ファイルを指定してください。

jsフォルダ

何も記述されていないfunctions.jsファイルを用意します。functions.phpより読み込み済みですので、スクリプトを利用する場合にはこのファイルに記述すれば即反映されます。

twenty-fourteenではjqueryも効いていますので、jqueryの記述もＯＫです。

２．カスタマイズ版の紹介(Sass/SCSS)

次にカスタマイズ版の紹介をします。

twenty-fourteenは黒背景、アクセントカラー緑のデザインなのですが、これを変更したい人も多いかと思います。

自分も親テーマのCSSを調べてカスタマイズしたのですが、いろいろなセレクタのプロパティをいじらなければならず、とても骨の折れる作業でした。

今後のために、「テーマの色」と「サイドバーの幅」をカスタマイズできるSCSSファイルを用意しました。Sass/SCSS形式だと変数が使えるので、色の指定を簡単に変えることができます。

カスタマイズ版もこちらからダウンロードできます。
https://github.com/wanakijiji/twentyfourteen-child-sass

ノーマル版からの変更点は以下の通りです。

functions.php

CSSファイルの構成を変更しました。style.cssにはテーマ設定のみを記述し、スタイル関係の設定はcssフォルダ内にあるCSSファイル群で行うこととします。以下のような構成です。

  1. WEBフォント「Lato Web Font」CSSファイル
  2. アイコン用フォント「Genericons」CSSファイル
  3. 親テーマメインCSSファイル
  4. 子テーマメインCSSファイル
  5. 子テーマカスタマイズ用CSSファイル
  6. 親テーマIE用CSSファイル
  7. 子テーマIE用CSSファイル
  8. 親テーマ各種 JavaScriptファイル
  9. 親テーマメインJavaScriptファイル
  10. 子テーマメイン JavaScriptファイル

scssフォルダ

カスタマイズ版ではSCSSを使ってスタイルの設定をしています。scssフォルダの中には以下のファイルが保存されています。

  • _settings.scss （テーマカラーとレイアウトの幅などの設定用）
  • main.scss （カスタマイズ用）
  • ie.scss （IE7&8向けカスタマイズ用）

_settings.scssファイルはコンパイルされず、@importでmain.scssとie.scssに読み込まれ利用されます。

main.scssとie.scssはコンパイルし、cssファルダ内にCSSファイルとして保存してください。functions.phpではコンパイル後のCSSファイルが読み込まれるように設定しています。

cssフォルダ

上記のSCSSファイルをコンパイルしたCSSファイルを保存するフォルダです。以下のファイルが用意されています。

  • main.css
  • ie.css

初期ではなにも記述されていないのですが、各SCSSファイルを編集し、コンパイル後上書きしてください。これらのCSSファイルはSCSSファイルをコンパイルして作成しますので、直接編集しないようにしてください。

その他のフォルダ・ファイル

ノーマル版とほぼ同じです。jsフォルダやimagesフォルダは必要な場合にファイルを追加し利用してください。