Twenty Fourteen - Child01

Twenty Fourteen1.5をカスタマイズするための子テーマを作成する

Twenty Fourteen - Child01

Pocket

Twenty Fourteen のカスタマイズ

レスポンシブデザイン対応のデフォルトテーマ「Twenty Fourteen」は、WordPress 3.8 とともに登場したスタイリッシュなフラットスタイルを取り入れたマガジンスタイルのテーマです。
Twenty Fourteen のカスタマイズは、Twenty Fourteen 本体を修正してもカスタマイズは可能ですが、アップデートなどが行われた場合に、上書きされ修正前のオリジナルに戻ってしまいます。2015年8月23日現在の最新バージョンは Twenty Fourteen 1.5 です。

そこで今回はTwenty Fourteen の子テーマを作成しカスタマイズを行っていこうと考えています。子テーマを利用してカスタマイズ作業を行っておけば、親テーマの Twenty Fourteen 自体にはまったく手を加えていないので、親テーマの Twenty Fourteen がバージョンアップしても子テーマの修正箇所は継続して保持されます。

Twenty Fourteen の子テーマを作成する

子テーマの作成方法はまずテーマフォルダの中に任意の名称の子テーマフォルダ(例:mychildtheme)を作成します。その中に style.css という書類を作成し、子テーマの名称や親テーマの指定を行うための数行を記載したら、ダッシュボードの 外観 > テーマ から子テーマを選択し保存します。

子テーマのディレクトリを作成します

子テーマのディレクトリを作成します

FTP クライアントソフトなどでサーバにアクセスし wp-content > theme の中に新規フォルダ 例:mychildtheme を作成します。

子テーマ用のスタイルシートを作成します

子テーマ用に作成したディレクトリ(フォルダ)の中に存在するすべてのファイル(functions.php 以外)は、親テーマフォルダにある同名の書類に優先して読み込まれます。子テーマに存在しないファイルのみ親テーマの書類が適用されるわけです。
子テーマを作成するには最低でも style.css が必要となりますので、子テーマ用に作成したディレクトリ(フォルダ)の中に style.css という書類を作成します。

最もシンプルな形式では style.css という書類のみが入ったディレクトリが出来上がります。

方法 その1:インポート方式

新規で style.css という名称の書類を作成し下記の 入力例 の様に記入します。2行目、7行目、12行目は必須です。

入力例

/*
Theme Name: My Child Theme
Theme URI: http://wordpresscollege.org/customize/
Author: KOMATSUBARA, Masato
Author URI: http://wordpresscollege.org/customize/
Description: Child theme for the Twenty Fourteen for WordPress
Template: twentyfourteen
Version: 0.1.0
*/

/* 親テーマのスタイルシートを読み込む */
@import url("../twentyfourteen/style.css");

Theme Name: 子テーマの名称 必須
Theme URI: 子テーマのウェブページ 任意
Author: 作者の名前 任意
Author URI: 作者のウェブページ 任意
Description: 子テーマの説明 任意
Template: 親テーマのディレクトリ名 必須
Version: 子テーマのバージョン 任意

子テーマのスタイルシートは最初に親テーマのスタイルシートをすべて読み込む設定です。その後の行に上書きする設定の変更内容を随時記入していきます。

方法 その2:コピー方式

新規で style.css という名称の書類を作成し、親テーマの「Twenty Fourteen」のstyle.css の内容をすべてコピーしてはりつけます。
下記の 入力例 2行目から14行目を変更します。

変更前

/*
Theme Name: Twenty Fourteen
Theme URI: http://wordpress.org/themes/twentyfourteen
Author: the WordPress team
Author URI: http://wordpress.org/
Description: In 2014, our default theme lets you create a responsive magazine website with a sleek, modern design. Feature your favorite homepage content in either a grid or a slider. Use the three widget areas to customize your website, and change your content's layout with a full-width page template and a contributor page to show off your authors. Creating a magazine website with WordPress has never been easier.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, green, white, light, dark, two-columns, three-columns, left-sidebar, right-sidebar, fixed-layout, responsive-layout, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, accessibility-ready
Text Domain: twentyfourteen 

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/**
 * Table of Contents:
 *
 * 1.0 - Reset
 * 2.0 - Repeatable Patterns
 * 3.0 - Basic Structure
 * 4.0 - Header

以下省略...

入力例

/*
Theme Name: My Child Theme
Theme URI: http://wordpresscollege.org/customize/
Author: KOMATSUBARA, Masato
Author URI: http://wordpresscollege.org/customize/
Description: Child theme for the Twenty Fourteen for WordPress
Template: twentyfourteen
Version: 0.1.0
*/

/**
 * Table of Contents:
 *
 * 1.0 - Reset
 * 2.0 - Repeatable Patterns
 * 3.0 - Basic Structure
 * 4.0 - Header
以下省略...

カスタマイズ作業は変更箇所を上書きして設定の変更内容を随時記入していきます。

Twenty Fourteen の子テーマを有効化する

Twenty Fourteen の子テーマを有効化する

WordPressの管理画面・ダッシュボードを表示します。左側のメニューの一覧から 外観 > テーマ を選びテーマの選択画面に移動します。
スタイルシートで指定した子テーマの名称が表示されていますので、その子テーマの 有効化 ボタンをクリックします。これで作成した子テーマが有効化されました。現時点では親テーマと同じ設定ですので、表示内容は親テーマの「Twenty Fourteen」と同じになります。

Twenty Fourteen の子テーマのサムネイル画像を表示する

テーマ選択画面で子テーマのサムネイル画像を表示したい場合は、横幅 880px 縦 660px のPNG画像を準備して screenshot.png という名称で子テーマのディレクトリ(フォルダ)の中にアップロードします。