テーマカスタマイズに！wordpressで子テーマを設定する方法

ゼロベースでwordpressテーマを作るのは、時間も知識も必要になります。
時間がないけど、ちょっと自分らしいデザインにしたいとき。
気に入ったテーマがあるけど、ちょっとカスタマイズしたい時。
テーマの機能はそのまま使って、デザインを変えたい時。
そんな時、大元のテーマを利用して作る子テーマが便利です。

子テーマのメリット

・親テーマをいじることなく、デザインを継承することができるため、時間短縮できます。
・親テーマをいじってしまうと、アップデートした時に、
カスタマイズが全て消えてしまい、デフォルトに戻ってしまうのです。
それを防ぐためにも子テーマを使うのがオススメです！
・wordpressが学べる

codexより

子テーマの方法とは？

最低限、カスタマイズするのはfunctions.phpとstyle.cssのみ。
その際、ftpでアップしなければいけませんが
それさえできればOKでしょう。

子テーマに必要なもの

子テーマ用ディレクトリ
-style.css
-functions.php

この三つを作りましょう。style.cssとfunctions.phpはテキストエディタで作成します。
ディレクトリは新規フォルダで作成します。名前はアルファベットであればなんでもOKです。
わかりやすく「親テーマ名-child」とするのがオススメです。

作成が手間と感じる方は、ここからダウンロードできます。

テキストエディタについてはまた詳しく解説します。

ファイルができたら、親テーマが置いてあるthemesの中にアップします。

functions.phpには下記を記載します。コピペでOKです。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' ); } 

Style.cssには下記を記載。
７行目のTemplete:には、親テーマのディレクトリ名を記入します。ここでは「twentyfifteen」

/*
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
*/

さらに、修正したいスタイルをこの下に書いていきます。

テーマの適用方法

wordpressダッシュボードの外観>テーマからstylesheetで設定したTheme Nameが表示されますので、該当するテーマを選択しましょう。

 

最後に
いかがでしたか？子テーマの方法をご紹介しました。
ぜひ、テーマカスタマイズにご活用ください。