WordPressテーマをカスタマイズするなら子テーマを作っておく

WordPressをカスタマイズしてサイトを運用するなら子テーマを利用しましょう。なぜならWordPressは頻繁にアップデートが繰り返されソースコードが上書きされてしまい、再びカスタマイズをしなければならなくなってしまうからです。

「子テーマ」とは、WordPressでウェブサイトやブログのデザイン・レイアウトを構築する際に、「親テーマ」と連動して機能するもうひとつのテーマです。 WordPressのデザインテンプレートは、「テーマ」を有効化させることで構築されます。

Screenshot of wordpress.com

子テーマの作り方

子テーマは単独で動作するのではなく、親テーマと連動して機能します。そのため子テーマはカスタマイズをするソース(ファイル)だけで構成します。ただし、functions.php と style.css は親テーマと連動させるために必須となっています。

  • functions.php
  • style.css

これらのソースの記述内容は決まっているので準じて記述しなければなりません。

子テーマはPC上で作成しアップロード

子テーマの作成作業は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で修正しましょう。

表示はされるが崩れてしまう場合もあるようです。テーマが有料テーマや無料で配布されているテーマの場合は配布元のサイトで確認をしてください。

※この記事はプロモーションが含まれています。

◆有料テーマは最初からデザインやレイアウトが完成されています。カスタマイズせずほぼそのままの状態で使えるので、サイト運営で最も重要な仕事であるコンテンツ作成に集中できます。トップページのレイアウトやコンテンツを自由自在に調整できたり、サイト全体のデザインやSEOを一括設定できたりと、高度なサイト作成機能が搭載されているのも有料テーマのメリットの一つです。

THE THOR

ザ・トールは、圧倒的に美しくおしゃれなテーマです。ランキングサイト・口コミサイトやおしゃれで美しいデザイナーズサイトが簡単に作れます。アクセスUP、収益UPを強力に後押しする「集客・収益化支援システム」が搭載されていて、コーポレートサイトやビジネス用メディアブログ、ブロガー・アフィリエイターなどの利用に適しています。

賢威

賢威はSEO実績が多く、SEOマニュアルや購入者専用の会員サイトでSEOの学習ができるのは大きなメリットなるでしょう。

Emanon

Emanonは、個人事業主・中小企業のビジネスサイト、オウンドメディアに必要なWeb集客機能と自由度の高いレイアウト機能を搭載した有料WordPressテーマです。見込み客を増やすためにメルマガ登録や資料請求、セミナーに誘導する仕組みがあり、WebサイトをWordPressで作りたい個人事業主・中小企業におすすめです。

LIQUID PRESS

WordPress公式有料サポートテーマに登録されているテーマです。 公式レビューやテーマチェックをクリア済のため、安心して利用できます。レスポンシブWebデザインにプラス、ユーザーがPC/スマホ表示を切り替えできる、 アクセシビリティと一貫性を確保することができるオリジナル機能を持っています。また、ウィジェット等の直感的な編集で、初心者でも簡単にカスタマイズ可能。

【スポンサーリンク】

WordPressテーマならLIQUID PRESS

STORK19

ブロガー専用のWordPressテーマ「OPENCAGE」 モバイルファースト思想でつくられたブロガー専用のWordPressテーマです。 ウィジェットやカスタマイザーを利用して簡単にオリジナルデザインのブログを 構築することができます。

【スポンサーリンク】

国産WordPressテーマ「STORK19」