デザインが好きだったので、親テーマ(twentyseventeen)をオリジナルテーマとして使っています。ただ、使っていると投稿記事の内容が全て表示されるので、サマリ一覧で表示されると見やすくなると思いテーマをカスタマイズしてみました。
WordPressのテーマを変更する際は、子テーマを作成して変更することが推奨されています。なぜかと言うと、親テーマがアップデートされると上書きされるので変更内容が消えてしまうらしいです。今回初めて子テーマを使ったテーマのカスタマイズに挑戦したので紹介します。
1.子テーマのフォルダを作成
親テーマと同じ階層の /wp-content/themes に子テーマ用の新しいフォルダを作成する。
フォルダの名前は「親テーマ名-child」にするのが流儀みたいです。
2.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つは間違えると正しく認識されないので、確認して記述する。
3.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です。
投稿記事が一覧で表示されるようになりました。
WordPressの使い方はウェブで検索すると出てくるので、わからないことがあればググってみてください。時間をかけずに既存のテーマを利用して、ちょっとした変更は子テーマを作成していじるのが良さそうです。
参考URL
- 子テーマの作成方法が詳しく記載されています
- Twentyseventeenカスタマイズ(記事一覧表示)用の子テーマがダウンロードできます