【WordPress】Twenty Fifteen の子テーマを作った記録！

子テーマを作り始めてから完成！切り替えるまでの大まかな流れ、概要

開発環境でテーマを作り、確認、テストも済ませてから本番環境へアップロードし、切り替えるのが１番間違いのない、おすすめの方法でございます。

ですけれども面倒ですの！ですので本番環境で直接ファイルやディレクトリを作って編集しながら、でも失敗してもできるだけ簡単に復旧できるように工夫しながら進めていった方法をノートいたします♪

• 本番環境へターミナルからログインし、CUI 環境でコマンドとエディタは Vim を使いながら進めていった

目次

1. 子テーマの名前を決め、必要な最低限のディレクトリ、ファイルを作成する。ライブプレビューで表示されることを確認する。
2. function.php のロジック部分を修正する。入れたい機能を追加する度に、ライブプレビューで実装できたことを確認する。失敗するとライブプレビューが表示されなかったり、真っ白な画面になったりする。
3. デザイン部分を修正する。
4. 自身がログインしている時だけ、新しいテーマが適用されるようにする。プラグイン Theme Test Drive を使用する。
5. 新しいテーマでしばらく使用して、気になった細かな点を修正していく。
   1. ヘッダー画像が表示される左メニュー（サイドバー）の文字列を読みやすくしたい
   2. 一部フォント指定が反映されていない所を修正したい
   3. 検索窓を付けたい
   4. Proudly powered by WordPress を消して著作権（コピーライト）を表示したい
6. Theme Check プラグインで子テーマとして作成した部分が WordPressで定められているテーマの品質に対するガイドラインに適合しているかどうかを確認する。
7. テーマを新しく作った子テーマ切り替えて、ブラウザの表示チェックを行う。
8. 問題なければ完成！Theme Test プラグイン、DriveTheme Check プラグインを無効に、必要なければ削除する。
9. スクリーンショットを撮って、子テーマのディレクトリに置く

１．子テーマの名前を決め、必要な最低限のディレクトリ、ファイルを作成

• 子テーマ名　Theme Name: oki2a24.com, Twenty Fifteen Child
• ディレクトリ名　oki2a24com-twentyfifteen-child
• 作成ファイル
  • oki2a24com-twentyfifteen-child/style.css
  • oki2a24com-twentyfifteen-child/functions.php

新しく WordPress のテーマを作る時は、子テーマであろうとなかろうと子テーマ名と、テーマのファイルを入れるディレクトリの名前を予め決めておく必要がございます。

子テーマディレクトリの名前には最後に ‘-child’ を付けることが必須ではありませんけれども推奨されておりますので、「自サイト名-親テーマ名-child」といたしました。テーマ名も、「自サイト名, 親サイト名 Child」といたしました。

• 子テーマ – WordPress Codex 日本語版

決めましたら、WordPress のテーマディレクトリである「wp-content/themes/」に移動して、実際に作っていきます。

まずはディレクトリを作成し、style.css と functions.php を別の子テーマからコピーします。切替前のテーマも子テーマで、Twenty Fourteen からあまり修正しないで小さなファイルに収まりましたのでこれをコピーいたしました。

mkdir oki2a24com-twentyfifteen-child
cp oki2a24com-twentyfourteen-child/style.css oki2a24com-twentyfifteen-child/style.css
cp oki2a24com-twentyfourteen-child/functions.php oki2a24com-twentyfifteen-child/functions.php

そして子テーマディレクトリへ移動し、style.css を編集いたしました。

cd oki2a24com-twentyfifteen-child/
vim style.css

2015年2月23日追記

本投稿の最低限子テーマを動かす方法は、問題なく動くものの非推奨となりました。こちらの方法が推奨ですの♪

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

最低限に留めて子テーマが動くかどうか見ることが目的ですので、親テーマの 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");

続いて、functions.php の編集です。いつもファイル名に function に「s」を付け忘れ、なぜ動かないのかしら＞＜？と小一時間ほど悩んでしまいますので、注意ですの！

vim functions.php

functions.php が動作しているか、最低限のファイル内容で確認することが目的ですけれども、切替前の子テーマでも「more タグで URL 末端に付く #more-xxxx を削除します。」ということを行っておりました。この機能はもうこの段階で入れてしまいますの！

<?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' );

ここまでできましたら、ライブプレビューで子テーマが無事に表示されることを確認いたします。

CSS の import、読み込みが上手く行きませんと表示が崩れますし、functions.php で文法間違いなどいたしますとプレビューが表示されずに真っ白な画面となってしまいます。修正を進めてから初めて確認いたしますと、最初に躓いたのか、最後のほうで躓いたのか、原因を特定するのが非常に困難で面倒になってしまいます。少し修正したら失敗しても安全な環境（ライブプレビュー）で確認するのがベターですの♪

ですので、最低限親テーマと同じ表示がされるかどうかをまず確認いたします。

２．function.php のロジック部分を修正する。

ここでも、入れたい機能を追加する度に、ライブプレビューで実装できたことを確認いたします。失敗するとライブプレビューが表示されなかったり、真っ白な画面になったりいたしますから。

テーマを切り替えてからロジック部分をいじってエラーを起こすと最悪の場合ブロクにアクセスできなくなってしまいます。非常に焦りますわよ！パニックになってしまいますの！そのような状態になりがちですのでテーマを切り替えてからロジックを弄るのはおすすめできませんわ♪

さて、functions.php にはヘッダー画像をテーマに組み込むようにいたしました。テーマに含めなくとも、WordPress のメディア機能からアップロードすれば登録ができます。

けれども、ヘッダー画像を含めて子テーマとしたかったのです。ですので、テーマが初期化された後のフック after_setup_theme で register_default_headers 関数が呼び出されるようにいたします。

そのためには、プログラムの追加の他に、ヘッダー画像をテーマの中にアップロードする必要がございます。

• ヘッダーをアップロードするディレクトリ
  oki2a24com-twentyfifteen-child/images/headers/

まずはヘッダー画像を作成しましょう。ヘッダー画像は 954 × 1300ピクセルを推奨されています。ヘッダー画像といえば、大抵は横長ですけれども、これは縦長なのですね♪珍しいですわ。

作成手順の詳細は省きますけれども、次のような２種類のファイルを作成いたします。

• ヘッダー画像　XXXXXXXX.jpg
• サムネイルXXXXXXXX-thumbnail.jpg

ファイル名はどちらも任意の名前で構いませんけれども、私は50以上のファイルを設定したいのです。多いですのでファイル名は元のまま、サムネイルは「-thumbnail」を最後につけるだけ、といたしました。

次に格納するディレクトリを作り、アップロードいたしましょう。

mkdir -p images/

images ディレクトリに FileZilla を使って zip で圧縮したヘッダーファイルをアップロードいたします。images ディレクトリに圧縮ファイルを移動し、解凍、ディレクトリ名を headers にリネームして所有者とグループを nginx に変更いたしました。

unzip -q TwentyFifteenHeader.zip
mv TwentyFifteenHeader/ headers/
chown -R nginx:nginx images/

また、Mac で操作したため、.DS_Store がゴミファイルとして残っておりましたので削除いたしました。

次のようなプログラムを追加いたしました。

2015年2月24日追記。register_default_headers に設定する画像が数十個ある場合、どのように楽して記述するかその工夫を補足いたしました。

• 【WordPress】ヘッダー画像を簡単に何十個でも登録する方法♪【PHP】【テーマのカスタマイズ！】 | oki2a24

/**
 * 親テーマ Twenty Fifteen のセットアップに追加する処理を定義します。
 */
function oki2a24_twentyfifteen_child_setup() {
        register_default_headers( array(
            'P1010303' => array(
                'url' => '%2$s/images/headers/P1010303.jpg',
                'thumbnail_url' => '%2$s/images/headers/P1010303-thumbnail.jpg',
                'description' => 'P1010303'
            ),

... 略 ...

            'V4010034' => array(
                'url' => '%2$s/images/headers/V4010034.jpg',
                'thumbnail_url' => '%2$s/images/headers/V4010034-thumbnail.jpg',
                'description' => 'V4010034'
            )
        ) );
}
/**
 * 親テーマ Twenty Fifteen のセットアップに処理を追加します。
 */
add_action( 'after_setup_theme', 'oki2a24_twentyfifteen_child_setup' );

３．デザイン部分を修正する。

キャッシュが効いており、即座にライブプレビューで変更を確認することができませんでした。24時間待てば、確認することができました。サーバのキャッシュを削除してもよいと存じます。のんびりでよかったので、24時間待ちました。

ただ、今にして思いますとブラウザキャッシュだったのかもしれません。スーパーリロード（command + r、Chrome）試してませんでしたの＞＜。

それはともかく、変更点です。一番大きいのは、フォントを「”Noto Serif”, serif」から「’Noto Sans Japanese’, serif」へ変更したことですわ。

Noto Serif は Google 作成のフリーフォントで日本語もあるようですけれども表示されませんの＞＜。どうやらダウンロードして手元の PC にインストールしなければ使えなさそうです＞＜。

そこで、せっかく Google のフリーフォントですので、クライアントの PC にインストールしなくても使える Noto Sans Japanese を採用いたします。

• Google Fonts : Early Access
  日本語へのリンクはないため、「japanese」でページ内検索すること

使い方

1. CSS ファイルに notosansjapanese.css をインポート
2. 「1.0 – Reset」でリセットしている部分で CSS 全体に対して ‘Noto Sans Japanese’, serif とフォントを指定。

具体的には、次を style.css に追加いたしました。

@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

/**
 * 1.0 - Reset
 */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
        font-family: 'Noto Sans Japanese', serif;
}

参考

• twentyfifteenの子テーマを作る　フォント指定と固定メニュー | RYUS blog
• 無料の日本語フォント【Noto Sans Japanese】があまりにも美しいので、ブログに使ってみた | CreativeTips

４．自身がログインしている時だけ、新しいテーマが適用されるようにする。

プラグイン Theme Test Drive を使用いたします。ロジック部分をいじって機能を追加修正したり、CSS でデザイン、見た目部分を修正しました。

これで公開してしまっても良いのですけれども、自分自身でブログを使っておりますと、細かな所で修正したい箇所や、気が付かなかったけれども変更しないといけない部分が大抵は目に付きます。

公開は、そのような点に対応してから行いたいものですわ。

ですので、わたくしたち自身が WordPress にログインしている時だけ、変更後の子テーマが適用されるようにしたいですの。それを叶えてくれる WordPress プラグインが、Theme Test Drive でございます。

インストール方法は省きまして、設定での注意点を残します。

まず、管理ページヘの行き方ですけれども、外観 >  Theme Test Drive、ですの。「設定」でも、独自の管理メニュー追加ではございませんの！5分位、ドコ？ドコ？と探してしまいましたの＞＜。

続いて、設定項目です。

Theme Test Drive is Enabled. は新しい、今作っているテーマを選択します。

Access level はデフォルトのまま、10（管理者のみに適用）です。これが例えば 7 でしたら編集者も適用、となりますけれども、ユーザは管理者のわたくしたち用だけですので、これでよいのです。

最後に、Enable Theme Drive をクリックして、管理者のみ新しいテーマを適用する設定を有効にいたします。

５．新しいテーマでしばらく使用して、気になった細かな点を修正していく。

管理者ユーザのみ新テーマにしてから改善したい点が幾つか見つかりました。ひとつひとつ、丁寧に対処してまいります。

５−１．ヘッダー画像が表示される左メニュー（サイドバー）の文字列を読みやすくしたい

ヘッダー画像は大抵、ページの最上部に表示させますけれども、テーマ Twenty Fifteen の場合はサイドメニューの背景に表示させます。よって、メニュー文字列の後ろにヘッダー画像が表示されますので画像の色によってはメニューが読み辛い、最悪の場合読めない、ということになりかねません。

といいますか、読めませんでしたの＞＜。

対処法として、文字を縁取りすることにいたしました。アウトラインの設定、ですわね。ヘッダー画像にあわせて文字色を設定すればよいのでは？と思うかもしれませんが、わたくしたちはヘッダー画像はランダムで表示させたいですの！ですからどんなヘッダー画像でも対応できる方法として、縁取りを選択いたしました。

具体的には、いろいろ試して次のようにいたしました。ただ、Mac の Chrome でしか試しておりませんので、一般に公開後、さらに改善が必要となるやもしれませんの。

/**
 * 15.4 Desktop Small 955px
 */

.sidebar {
        text-shadow: #ffffff 1px 1px 0px, #ffffff -1px 1px 0px, #ffffff 1px -1px 0px, #ffffff -1px -1px 0px;
        -webkit-text-stroke-width: 1px;

        filter:dropshadow(color=#ffffff,offX= 0,offY=-1)
        dropshadow(color=#ffffff,offX= 1,offY= 0)
        dropshadow(color=#ffffff,offX= 0,offY= 1)
}

またレスポンシブデザインのため、ページ幅を狭めて左メニューがページ上部に移動した時にメニューアイコンが表示されます。また、左メニューのカテゴリーブロックで、子カテゴリーを開くアイコンも表示されます。

これらもサイドバー内にありながら、縁取りがされておりませんでしたので、同様の CSS 記述をいたしました。

/**
 * 6.2 Menus
 */

.dropdown-toggle:after {
        text-shadow: #ffffff 1px 1px 0px, #ffffff -1px 1px 0px, #ffffff 1px -1px 0px, #ffffff -1px -1px 0px;
        -webkit-text-stroke-width: 1px;

        filter:dropshadow(color=#ffffff,offX= 0,offY=-1)
        dropshadow(color=#ffffff,offX= 1,offY= 0)
        dropshadow(color=#ffffff,offX= 0,offY= 1)
}

.secondary-toggle:before {
        text-shadow: #ffffff 1px 1px 0px, #ffffff -1px 1px 0px, #ffffff 1px -1px 0px, #ffffff -1px -1px 0px;
        -webkit-text-stroke-width: 1px;

        filter:dropshadow(color=#ffffff,offX= 0,offY=-1)
        dropshadow(color=#ffffff,offX= 1,offY= 0)
        dropshadow(color=#ffffff,offX= 0,offY= 1)
}

参考

• IEでもキレイ！ブラウザ上でアウトライン（縁取り）を表現する方法 | 株式会社LIG

ちなみに、参考ページの通りいたしますと、「-webkit-text-stroke-color: #ffffff;」によって縁取りの白色が太く出すぎてしまい読みづらかったため、外しております。

５−２．一部フォント指定が反映されていない所を修正したい

親テーマの style.css は「1.0 – Reset」にてリセットしております。作成中の子テーマではこの部分で ‘Noto Sans Japanese’, serif とフォントを CSS 全体に対して指定しました。

ところが、一部分適用されておりませんの＞＜。そこで、その部分に対しては個別にフォントを設定してまいります。

まず気になったのは投稿後にございます、前の投稿、次の投稿のナビゲーション部分でした。CSS の class は「navigation post-navigation」でございました。そこで次のように修正いたしましたの。

/**
 * 6.2 Menus
 */

.post-navigation .post-title {
        font-family: 'Noto Sans Japanese', serif;
}

続いて気になったのは、検索文字列やブログ購読のためのメールアドレス入力欄です。CSS での指定は input タグですの。

/**
 * 3.0 Typography
 */

body,
button,
input,
select,
textarea {
        font-family: 'Noto Sans Japanese', serif;
}

次は、コメント入力欄ですわ。コメントはプラグイン Jetpack の Jetpack コメントを使用しており、デフォルトの WordPress にあるコメント機能とは入れ替わっておりますの。Jetpack コメントから WordPress デフォルトのコメントに戻した時に何か影響があるかもしれませんわね。今のところは無視しておきますの♪

/**
 * 12.3 Comments
 */

.comments-title,
.comment-reply-title {
        font-family: 'Noto Sans Japanese', serif;
}

続いて、カテゴリーやタグページ、またはサイトの検索結果ページに表示されるページタイトル部分、つまり「カテゴリー: XXXXX」などです。CSS の class は page-title ですわ。

 /**     
  * 12.1 Posts and pages
  */

.page-title {
        font-family: 'Noto Sans Japanese', serif;
}

５−３．検索窓を付けたい

ウィジェットでなんとかならないかしら？ダメならテーマを弄る他ありませんわね。。。その場合は以前調べた次の投稿が参考になります。

• 検索フォームが無くても！ WordPress サイト内を検索する方法！◆超簡単◆ | oki2a24

調べましたら、ウィジェットエリアに検索を追加で OK でしたの！具体的な方法は、テーマページに行きますとTheme Test Drive によって子テーマが有効になっております。このテーマの「カスタマイズ」から、ウィジェット > ウィジェット エリア とすすみ、「+ ウィジェットを追加」を選んで「検索」を追加いたします。

なお、タイトルは「サイト内検索」といたしました。

５−４．Proudly powered by WordPress を消して著作権（コピーライト）を表示したい

ペジの一番下には、「Proudly powered by WordPress」と表示されます。これを、コピーライト表示に置き換えたいですの。

まずは、どのように表示するかです。これは Google の著作権表示が「©2015 Google」ですのでこれに合わせて「©2015 oki2a24」といたします。

次にやり方です。入れ替え方法は子テーマですのでフッターに該当するファイルを上書きすることで行います。

1. 親テーマ「Twenty Fifteen」の footer.php を子テーマディレクトリにコピー
2. コピーした footer.php を編集し、変更したい部分「Proudly powered by WordPress」を「©2015 oki2a24」に入れ替えて修正する。
3. このとき、2015 は現在の年を動的に表示し、oki2a24 はサイト名を動的に取得、oki2a24 にはサイトトップへのリンクを貼る。

まず、親テーマの footer.php をコピーいたします。

cp -a ../twentyfifteen/footer.php footer.php

次に、この footer.php を編集いたします。

vim footer.php

編集内容は、「Proudly powered by WordPress」を「©2015 oki2a24」へ入れ替えです。この部分を修正いたします。

<a href="<?php echo esc_url( __( 'https://wordpress.org/', 'twentyfifteen' ) ); ?>"><?php printf( __( 'Proudly powered by %s', 'twentyfifteen' ), 'WordPress' ); ?></a>

©は &copy; です。2015 は <?php echo date(“Y”); ?> ですわね。

oki2a24 は <?php echo bloginfo(); ?> と動的に取得いたします。サイトトップへのリンクも <?php echo home_url(); ?> と動的に出力していただきますの♪

&copy;<?php echo date("Y"); ?> <a href="<?php echo home_url(); ?>"><?php echo bloginfo(); ?></a>

６．Theme Check プラグインで子テーマをチェック

子テーマとして作成した部分が、WordPressで定められているテーマの品質に対するガイドラインに適合しているかどうかを確認したいですの。

このテストには、プラグイン「Theme Check」を使用いたします。

使い方ですけれども、チェックページにはプラグイン Theme Test Drive と同じく、外観 > Theme Check でアクセスいたします。

あとの使い方は簡単で、セレクトボックスからテストしたいテーマを選択し、「Check it!」をクリックするだけですの♪

結果は、「oki2a24.com, Twenty Fifteen Child passed the tests」と合格でしたわ！

親テーマの Twenty Fifteen は公式テーマですし、子テーマでも修正箇所は少ないですので問題となる箇所は無いと予想しておりました。ですけれどもこのようなツールでしっかりと確認できて、安心できましたわ♪

参考

• 信頼性の高いWordPressテーマを作るためのTheme-Checkのすすめ | Firegoby

７．テーマを新しく作った子テーマ切り替えて、ブラウザの表示チェックを行う。

DriveTheme Check プラグインを無効にし、新しい子テーマを有効にいたします。管理者ユーザだけでなく、一般に子テーマを公開した状態ですわね。

この状態で、他のブラウザで問題なく表示されているかをテストいたします。面倒ですけれども一番良いのは、各種ブラウザをインストールして確認、ブラウザチェックをすることです。

さらに、OS も Windows、Mac、Linux とそろえてそれぞれでブラウザをひとつひとつ確認、、、してられませんわね＞＜。

そこで、せめてブラウザチェクをしたいですのでウェブサービスを探しました。

「ウェブブラウザ サイト確認」で検索ですの。

• IEは → IE NetRenderer – Internet Explorer Compatibility Check –
• Chrome、Safari、Firefoxは → Check Browser Compatibility, Cross Platform Browser Test – Browsershots

８．ウィジェットを見直し、問題なければ完成！

Theme Test プラグイン、DriveTheme Check プラグインを無効に、必要なければ削除いたします。

後々さらに微修正をしたいということがあるかと存じますが、そのときはその都度インストールすればよいかと存じます。

最後にウィジェットを見直します。ウィジェットはテーマ関係なく表示項目は共通です。ですけれどもテーマによって表示のされ方が異なります。先ほどまで管理者には切替後テーマ、それ以外には切替前テーマと混在していた関係上、ウィジェットも両方に表示したい項目が混在しております。

切替後は切替前でのみ表示していたかった項目を取り除いたり、切替後のデザインに合うように入れ替えます。

これで、ほぼ子テーマ作成作業が完成ですわ♪

９．スクリーンショットを撮って、子テーマのディレクトリに置く

1. 新しいテーマに切り替えてホームページのスクリーンショットを撮る（command + shift + 4）
2. 880 x 660 px （4 : 3）に加工
3. ファイル名を screenshot.png にして、子テーマディレクトリに置く

実際には、もっと大きなサイズになってしまいましたし、縦横比も 4:3 ではありませんでした。ですけれどもファイル名を screenshot.png にすることを守りましたら、テーマページのテーマのサムネイルとして表示されました♪

おわりに

WordPress は毎年、その年の名前を冠したテーマがリリースされます。2015年は Twenty Fifteen ですの♪

毎年、わたくしたちはこれらのテーマに乗り換えてきました（今見返したら Twenty Thirteen は子テーマ作っておりませんでした＞＜。そのまま適用しておりましたね）。

• オリジナルテーマ | oki2a24

その際、ヘッダー画像をテーマに予め設定してきました。今回、それ以外にも多少変更しましたし、あとでこの投稿だけを読み返せば何をしたかがわかるようにしたかったのです。

最後に、現在すでに発見している気になった所です。直せるかしらね＞＜。

• CSS の読み込み方が実は古い。
  → 直しました！
  →【WordPress】Twenty Fifteen 子テーマ の CSS の読み込み方を最新のやり方に改めました♪@import → wp_enqueue_style 関数 | oki2a24
• 投稿の編集ページのフォントが Noto Serif で見つからないため設定されない。
• pre タグコード部分の表示が崩れている。

→ 直しました！
→【WordPress】Twenty Fifteen 子テーマ。ブログ編集時の本文フォントが正しく設定されない問題を add_editor_style 関数で解決しました♪ | oki2a24

以上です。