WordPressでテーマ作成

WordPressのテーマ作成についてまとめました。

WordPressのテーマ作成について

WordPressのテーマ作成には3つのアプローチがあります。

  • フルスクラッチ
    自分で一からテーマを作成する手法。
    思い通りにカスタマイズできますが、その分PHPの知識は必要になります。
    (※WordPress関連の本などをみれば、PHP初心者でもある程度のものは作れます。)
  • 子テーマ
    誰かが作ったテーマを、カスタマイズする手法。
    親テーマの仕様に依存しますが、CSSの知識だけでもカスタマイズできます。
  • スターターテーマ
    最低限のPHPが実装されたテーマに対し、CSSでデザインする方法。

個人的には、この中で一番手軽にそれっぽくできる手法が「子テーマ」かなと思います。

海外のテンプレートだと日本語で見た場合に、「文字周りがちょっと・・・」ということはよくあるかと思います。
フォントのファミリーやサイズなど、CSSを調整するだけで、大分読みやすくなります。
その場合、既存のテーマのCSSファイルを直で修正したいところではありますが、WordPressでは、子テーマで作成することが推奨されています。

子テーマのメリット

  • 一から作成するよりも短い時間で作成できる
  • PHPがわからなくてもできる
  • 既存のテーマがバージョンアップしても、自分がカスタマイズした部分が上書きされることがない

子テーマの作成方法

親となるテーマの選出

まずは親となるテーマを選びます。
今回は、WordPress4.4から使用できる新しいデフォルトテーマ「Twenty Sixteen」をいじってみます。

ディレクトリ&ファイル作成

子テーマは最低限、style.cssfunctions.php の2つのファイルがあればOKです。
wp-content/themes 配下に子テーマ用ディレクトリを作成します。

ディレクトリ名は テンプレート名-child とされているのが推奨されているようなので、今回は twentysixteen-child というディレクトリを作成しました。

style.cssの編集

/*
Theme Name:     twentysixteen_child
Template:       twentysixteen
*/
必須の記述

Theme Name:
子テーマの名前
Template:
親テーマのディレクトリ名(今回はtwentysixteen)
親テーマのスペルや大文字小文字が間違ってると反映されないので、注意してください。

任意

Author:
子テーマ作成者(wordpress.org のユーザー名を使うことを推奨)

Theme URI:
子テーマのサイトURL
Description:
子テーマの説明
Version:
子テーマのバージョン
License:
ライセンス
License URL:
ライセンスのURL
Tags:
テンプレートのタグ
管理画面の「テーマのインストール」にて、特徴フィルターを使った検索に反映されます。

もりもりにいれたい場合はこんなかんじ。

/*
 Theme Name:   Twenty Sixteen Child
 Theme URI:    http://example.com/twenty-sixteen-child/
 Description:  Twenty Sixteen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentysixteen
 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-sixteen-child
*/

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_script()関数で該当のcssを指定します。
(CSSが複数ある場合は、複数指定が必要になります。)

テンプレートを有効

管理画面 > 外観 > テーマ から該当の子テーマを有効にすると、表示されます。

テンプレートファイルの修正

子テーマはCSSファイル以外のファイルも変更できます。
親テーマのファイルを子テーマにコピーして置くだけで、ファイルを上書きした状態になります。
functions.phpファイルのみ、追加したい内容のみを記述する形になるので注意。

ファイルが読み込まれ順番
スタイルシート: 親テーマ → 子テーマ
function.php: 子テーマ → 親テーマ
その他のphpファイル : 子テーマ(親テーマにないテンプレートファイルも追加できる)
子テーマに親テーマと同盟のテンプレートファイルがあれば子テーマを優先して読み込む

どのテンプレートファイル直したらいいかわからないという人は、
Show Current Template というプラグインを入れておきましょう。
プラグインを有効にすると現在表示しているページに該当するPHPファイルを教えてくれます。

CSSのカスタマイズ

デベロッパーツールをみながらカスタマイズしていきます。

参考サイト

子テーマ – WordPress Codex 日本語版

テンプレート階層 – WordPress Codex 日本語版

テンプレートタグ – WordPress Codex 日本語版

Pocket