カテゴリー
WordPress

【WordPress】数分で子テーマを作ります！カスタマイズの準備♪【Twenty Fifteen】

※注意※2015年2月17日追記

この投稿の作り方で最低限の子テーマを問題なく作ることができますが、スタイル（CSS）を正しくキューに入れる（HTML のヘッダーで読み込む）ことができない、少し古いやり方です。

本投稿の後日そのことに気が付き、次の投稿で修正しました。

子テーマを作るのに必要なことまとめ

  • テーマディレクトリを作成する。
  • style.css ファイルを作成する。
  • style.css 冒頭のコメントで、Theme Name: と、Template: を記述する。
  • 親テーマの style.css をインポート（@import）する。

実際の具体的な作成例

  • 子テーマ名　oki2a24.com, Twenty Fifteen Child
  • 子テーマディレクトリ名　oki2a24com-twentyfifteen-child
  • 親テーマは Twenty Fifteen

以上の条件で、わたくしたちのサイト用に最低限の子テーマを作成いたします。

# テーマのディレクトリを作成
cd wp-content/themes/
mkdir oki2a24com-twentyfifteen-child
cd oki2a24com-twentyfifteen-child
# style.css を作成
vim style.css

style.css への最低限の記述内容として、次を書きました。

/*
Theme Name: oki2a24.com, Twenty Fifteen Child
Theme URI: https://oki2a24.com/
Description: Twenty Fifteen テーマを基にした子テーマです。
Author: oki2a24.com
Author URI: https://oki2a24.com/
Template: twentyfifteen
Version: 1.0
*/
@import url("../twentyfifteen/style.css");

簡単ですわね♪以上で、子テーマの完成ですの。

あとは、子テーマディレクトリの中で追加したい関数や、上書きしたいデザインを書いていくだけですの♪

もうすこし踏み込んでいつもテーマに追加する機能を書き足します

more タグで URL 末端に付く #more-xxxx を削除いたします。以前も行った次の投稿の内容をそのまま反映するだけですわ♪

まず子テーマディレクトリの中に functions.php を作成します。

vim functions.php

実際に書くコードですわ♪

<?php
/**
 * more タグで URL 末端に付く #more-xxxx を削除します。
 */
function remove_more_link_scroll( $link ) {
        $link = preg_replace( '|#more-[0-9]+|', '', $link );
        return $link;
}
/**
 * コンテンツの more リンククリック時に処理を追加します。
 */
add_filter( 'the_content_more_link', 'remove_more_link_scroll' );

以上で、子テーマを作る作業が終わりました♪

テーマの反映方法

管理画面の「テーマ」ページへ行きますと、style.css 冒頭のコメントに書きました Theme Name: に記述しました名前で新しくテーマが追加されます。

これの「ライブプレビュー」で様子を確認したり、「有効化」で実際にテーマを切り替えることができますの。

親テーマには変更を加えずに子テーマを作って編集していくメリット

  • 親テーマが更新されても、その変更が子テーマに影響を及ぼさない。
  • よって、親テーマが更新されても子テーマをメンテナンスする必要がない。

ですの♪いままで、WordPress 本体のアップデートがあると時折 Twenty Fourteen などの公式テーマもアップデートされています。テーマの更新は単純にファイルの上書き（だったと思います）ですのでせっかくの変更点が上書きされてしまいます。

テーマのアップデートの度に以前行った修正をもう一度施すのは大変ですの＞＜。そもそも、どこに何を書いたのか、覚えていないと予想しますわ。

おわりに

Twenty Fifteen は本家や他のさまざまな情報を拝見いたしますと、

  • 日本語のフォントが適用されていない。
  • ヘッダー画像が縦長で左カラムに配置される。

といった点が気になりました。これらをクリアした上で、Twenty Fifteen をベースとした子テーマに変更するかどうか、決めたいと思いますの。

以上です。

コメントを残す