WordPressのテーマをカスタマイズ

デザインが好きだったので、親テーマ（twentyseventeen)をオリジナルテーマとして使っています。ただ、使っていると投稿記事の内容が全て表示されるので、サマリ一覧で表示されると見やすくなると思いテーマをカスタマイズしてみました。

WordPressのテーマを変更する際は、子テーマを作成して変更することが推奨されています。なぜかと言うと、親テーマがアップデートされると上書きされるので変更内容が消えてしまうらしいです。今回初めて子テーマを使ったテーマのカスタマイズに挑戦したので紹介します。

１．子テーマのフォルダを作成

親テーマと同じ階層の /wp-content/themes に子テーマ用の新しいフォルダを作成する。
フォルダの名前は「親テーマ名-child」にするのが流儀みたいです。

２．style.cssの作成

作成した子テーマフォルダ内に「style.css」を作成して、テーマの説明を記述します。
※子テーマのスタイルシートヘッダはコメント文で記述

style.cssの中身

/*
Theme Name: Twenty Seventeen Child List
Description: Twenty Seventeen Child Theme
Author: Masayoshi Akiyama
Author URI: https://mtac.jp
Template: twentyseventeen
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-seventeen-child
*/

「Theme Name」には子テーマの名前を、「Template」には親テーマのフォルダ名を入力します。この2つは間違えると正しく認識されないので、確認して記述する。

３．function.php

子テーマフォルダ内にfunction.phpというPHPファイルを作成します。
function.phpに以下のコードを記述して、子テーマを認識させます。

function.phpの中身

<?php
/*
*Child Theme Setting
*/
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' ); function theme_enqueue_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); }
/*
*Set New Theme Setup
*/
add_action('after_setup_theme', 'child_theme_setup'); function child_theme_setup(){ 
/* language setup */
load_child_theme_textdomain('twentyseventeenchild', get_stylesheet_directory() . '/languages' );
}

?>

これで子テーマが利用できるようになります。管理画面から外観＞テーマを選択すると、子テーマが表示されるので有効化すればOKです。