Wordpressをカスタマイズするために子テーマを作成する

Wordpressで以前は運用していましたが、現在ははてなブログで運用しています。

子テーマって難しそうと思われがちですが、カスタマイズをしていくためには必須です。備忘も兼ね設定方法を記載しておくので参考にどうぞ。

はじめに

WordPressでCSSなどのカスタマイズをしていく際に、どうしても無視できないのが、“子テーマ” の存在です。元のテーマを全くカスタマイズしないっていう人は必要ないのですが、どうしても気になるところが出てくるものです。そういった際に、元のテーマではなく、子テーマを使ってカスタマイズしていくのが、WordPressの王道らしい。

一応、WordPress4.7からは、“カスタム CSS” を書けるようになってますが、管理画面の狭い領域にちまちま書いていくのは私的にやはりつらい。WordPress Codex(https://wpdocs.osdn.jp/)でも、

子テーマは、親テーマと呼ばれる別のテーマの機能とスタイルを継承したテーマです。既存のテーマを変更する方法として、子テーマが推奨されています。

と推奨されているようですし、ちゃんと子テーマを作ってカスタマイズしていってあげることにします。

子テーマをなぜ作るのか

様々なブログでなぜ子テーマが必要なのかについて語られていますが、簡単に説明をしておきます。

まず一番は、親テーマを直接触ることによるブログ破壊の抑止効果です。CSSはともかく、phpファイルを直接触ると、思わぬ事故につながり、最悪、復旧が困難な状態に陥る可能性があります。適切にバックアップを取っていたとしても、バックアップ時点までしか復旧できないので、せっかく書いた記事や設定がなくなってしまう可能性があります。

次に、親テーマのアップデート(バージョンアップ)に伴うカスタマイズ部分の消失を防ぐためです。WordPressのテーマは、比較的頻繁にアップデートされると思います。その際に、親テーマに直接、カスタマイズを行っていると、アップデートできない事態に陥ります。間違ってアップデートしてしまうと、せっかくカスタマイズした内容が、アップデート情報で上書きされてなくなってしまいます。

このようなことを防ぐためにも、親テーマは直接触らず、子テーマを作成して、カスタマイズしていくことが推奨されています。

さっそく子テーマをつくっていく

子テーマの作り方は、WordPress Codex に詳しく書いてありますので、深く知りたいという方はそちらを参照していただければと思います。この記事では、備忘も兼ね、最低限のセットアップをわかりやすく記載しておきたいと思います。(忘れやすいので何設定したっけってあとからなるのを防止するためでもあります)

子テーマは、少なくとも 1つのディレクトリ(子テーマディレクトリ)と、2つのファイル(style.css と functions.php) から構成されます。

これが基本です。

最初にディレクトリを作ります。デスクトップ上でもどこでも任意の場所で構いませんので、1つディレクトリを作成してください。ディレクトリの名前は、"テーマ" + “_child” の様な名前がわかりやすくてよいです。私の場合は"xeory_base_child"になります。

次に、style.cssを作成します。空のファイルで作成し、下記を貼り付けます。

/*
 Theme Name:   Twenty Fifteen Child
 Theme URI:    http://example.com/twenty-fifteen-child/
 Description:  Twenty Fifteen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentyfifteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twenty-fifteen-child
*/

必須項目は、下記の2つです。

Theme Name: 子テーマのディレクトリ名(xeory_base_child)
Template: 親テーマのディレクトリ名(xeory_base)

他は適当に自分の情報を記載しておけばOKです。

最後に、functions.phpを作成します。同じように空ファイルを作成して、下記を貼り付けます。要するに、親テーマを参照しますよっていう命令が書かれていると思ってもらえればいいかと思います。

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('parent-style')
    );
}

参考までに・・・

以前は @import: を使用して親テーマのスタイルシートをインポートしていましたが、これはもはや良い方法ではありませんので注意してください。引用 : WordPress Codex

ついでに、子テーマを表示するときの画像もディレクトリに入れてみました。

f:id:ninna2:20170409004534j:plain:w360

■ 画像1 : 作成した xeory_base_child の中身

子テーマの適用

テーマを適用するためには、作成したディレクトリをzip圧縮します。管理ダッシュボードからだとzip形式でないとアップロードできないためです。(FTPで直接アップロードする手もありますが、今回はダッシュボードからやります)

WordPressのダッシュボードから、外観 ⇒ テーマ ⇒ 新規追加 でテーマをアップロードします。

f:id:ninna2:20170409004537j:plain:w360

■ 画像2 : テーマを新規追加する画面

f:id:ninna2:20170409004540j:plain:w360

■ 画像3 : 子テーマとしてアップロード&インストール完了の画面キャプチャ

これで適用完了です。あとは有効化すれば、子テーマとして運用ができるようになっています。

子テーマでのデザインのカスタマイズ

子テーマを作成した状態だけだと、Xeory Base のそのままの状態ですので、少しカスタマイズを入れていきます。私がカスタマイズしている内容は、簡単なものしか入れていませんが、ヘッダー・フッター部分にボーダーで色を装飾、記事のタイトルの見出し下部のボーダー、サイドバーの見出しの装飾ぐらいです。ちなみに初期設定で、ベースカラーはオレンジにしているので、同系色の色でもちろんまとめています。

/* --- ヘッダにボーダー ---*/
#header {
  border-top: 15px solid #E8822A;
}

/* --- フッターにボーダー ---*/
#footer {
  border-bottom: 10px solid #E8822A;
}

/* --- サイドバータイトル --- */
.side-widget .side-title {
    color: #ffffff;
    background-color: #E8822A;
    border-radius: 3px;
  padding: 2px 10px;
  margin: 0
}

/* --- h2 のボーダー --- */
body.color03 .post-content h2 {
  border-bottom: 1px solid #E8822A;
}