WordPressテーマをカスタマイズするなら子テーマを作っておく
WordPressをカスタマイズしてサイトを運用するなら子テーマを利用しましょう。なぜならWordPressは頻繁にアップデートが繰り返されソースコードが上書きされてしまい、再びカスタマイズをしなければならなくなってしまうからです。
子テーマ
「子テーマ」とは、WordPressでウェブサイトやブログのデザイン・レイアウトを構築する際に、「親テーマ」と連動して機能するもうひとつのテーマです。 WordPressのデザインテンプレートは、「テーマ」を有効化させることで構築されます。
子テーマは単独で動作するのではなく、親テーマと連動して機能します。そのため子テーマはカスタマイズをするソース(ファイル)だけで構成します。ただし、functions.php と style.css は親テーマと連動させるために必須となっています。
- functions.php
- style.css
これらのソースの記述内容は決まっているので準じて記述しなければなりません。
子テーマの作成作業はPC上で行います。作業は比較的簡単で、知識のある方なら数分で完了するのではないでしょうか。そして、完成した子テーマは、WordPress管理画面(ダッシュボード)のテーマからインストール(アップロード)すれば利用できるようになります。
子テーマ作成手順と作業内容
子テーマは以下の手順で作業します。
【1.】子テーマフォルダを作成
【2.】Style.css を記述する
【3.】functions.php を記述する
【4.】子テーマフォルダを圧縮する
【5.】WordPressにアップロードする
■作業内容
【1.】Windowsパソコンでディスクトップ等に、子テーマフォルダを作成します。フォルダ名は XXXX-child とわかりやすい名前にします。
【2.】Style.css を記述します。メモ帳などのテキストエディタを使います。テキストエディタを開いたら下記のコードを記述もしくはコピー&ペーストしてください。
/*
Theme Name:xxxxx child
Theme URI:
Description:WordPressテーマ「xxxxx」の自作子テーマです。
Template:XXXX
Author:xxxx
Author URI:https://xxxxx.com/
Version:0.0.8
*/
xxxx の部分を変更します。Template: と Author URI: は子テーマを採用するサイトの内容にあわせます。完了したら先ほど作成した子テーマフォルダに保存します。
スタイルシートを追記したい場合は、子テーマの カスタマイズ → 追加css で記述できます。
【3.】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')
);
}
?>
内容は変更する必要がないので、完了したら先ほど作成した子テーマフォルダに保存します。
※カスタマイズコードは子テーマを有効化し 外観 → テーマファイルエディター を使って追記します。
【4.】子テーマフォルダを圧縮する
WordPressにアップロードするために、子テーマーフォルダーを圧縮します。フォルダを右クリックし、送る → 圧縮(zip形式)フォルダ でディストップに圧縮ファイルが生成されます。
【5.】WordPressにアップロードする
WordPressにログインし 外観 → テーマ → 新しいテーマ → テーマのアップロードと進みます。
「ZIP 形式のテーマファイルをお持ちの場合、こちらからアップロードしてインストールまたは更新できます。」と表示されるので、ディストップの圧縮フォルダをアップロードして子テーマをインストール、有効化すれば使用できるようになります。
最終作業として、子テーマで表示されるか確認をします。ブラウザの新規タブを開くか、他のブラウザを開いて目的のURLで開きましょう。このときWordPressの管理画面を開いておけば、万一表示されない場合にもテーマを親手テーマに戻せることが可能なことが多いです。
■トラブルが発生したら
表示されない原因の多くに Style.css の記述ミスが挙げられます。例えば2バイト文字で記述したり、Template: を間違って記述したりでしょうか。
管理画面から親テーマに戻せるようなら、一度戻して、作成した子テーマフォルダをPCで修正しましょう。
表示はされるが崩れてしまう場合もあるようです。テーマが有料テーマや無料で配布されているテーマの場合は配布元のサイトで確認をしてください。
テーマの選び方
WordPressテーマを選ぶ際、ビジネスサイトでは、自社のイメージと近いデザインを選びましょう。中小企業や個人事業主の場合、高度なカスタマイズは負担が大きすぎ、デフォルトのデザインでサイトを作成し運用していくことが多いようです。このため、ビジネスサイトにおすすめな有料WordPressテーマを利用されるとデザインのカスタマイズが容易だったり、必要な機能がプラグインによって提供されているので、サイト運用開始時や運用中の負担を軽減できます。
テーマを選ぶ際にはにはレスポンシブデザインかどうかは着目しましょう。レスポンシブデザインとは、スマートフォンやタブレット・PC別に1つのデザインで表示できるようにしたものです。サイトの内容によってはスマホユーザーが少ないこともあるでしょうが、Googleはモバイル端末での表示を標準と考えていますので、この点からも対応すべきポイトです。
- レスポンシブデザインなのか
- デザインをカスタマイズしやすいか
- ダウンロード数(利用されている数)が多いのか
- ブロックエディタに対応しているのか
- 日本語に対応しているのか
- テーマは安全なのか
有料テーマ
WordPress有料テーマはおしゃれでカスタマイズしやすいのが大きなメリットです。 WEBサイト運用するための機能も標準として装備されているので、プラグインの追加をしなくても十分使用することが可能です。
無料テーマはシンプルなものが多く、他のサイトとデザインが同じようになってしまうこともあります。 しかし、有料テーマであればカスタマイズしやすくなっているため、好みのサイトを作成しやすいのが特徴です。
無料テーマ
wordpress.org からダウンロードできるテーマやWEB制作会社から提供される無料テーマもあります。無料とは思えないほど機能やデザインが充実しているテーマもあります。ただし、無料がゆえに途中で更新がストップしたり、開発が終了されることもあります。無料テーマは開発者の宣伝や有料版へのステップとして提供されていることもあると認識しておきましょう。
wordpress.org のテーマはディレクトリ登録時に事前に審査が行われるので、製作者サイトからの直ダウンロードに比較すれば安全といえるでしょう。ただし、サポートはありませんのでwordpress.orgやネットの情報で自力で解決しなければなりません。