WordPress テーマをカスタマイズしてオリジナル版を作成する方法

wordpress

WordPressの魅力は、既存のテーマをカスタマイズすることにより、初めから自分でサイトのデザインを作成することなく見た目はオリジナルのサイトを短期間で構築できることです。

スポンサーリンク

テーマをカスタマイズする方法

テーマのカスタマイズ、と聞くと少し敷居が高い気がしますが、CSSの知識が少しでもあればデザインのカスタマイズを簡単に行えます。

2つのカスタマイズ方法

テーマを直接カスタマイズする

ひとつのカスタマイズ方法は、テーマファイルに直接手を加えて行く方法です。

テーマのファイルに直接手を加えて行く場合は、テーマの編集画面でstyle.cssを変更して行けばカスタマイズできます。

このカスタマイズ方法の問題は、テーマのバージョンアップを行う必要が出てきた時に、せっかく施したカスタマイズがクリアされてしまうことです。

テーマのバージョンアップ後に、またカスタマイズを施した状態に戻すには、もう一度、同様のカスタマイズを加える必要があります。

テーマの子テーマを作成してカスタマイズする

もうひとつのカスタマイズ方法は、テーマの子テーマを作成して、テーマの環境は残して置きながらカスタマイズを行う方法です。

この方法では、テーマのバージョンアップを行う必要が出てきた時にも、カスタマイズを施した内容がクリアされることはありません。

このことから、WordPressテーマをカスタマイズするなら子テーマを使うべきでしょう。

WordPressには親と子の2つのテーマがある

WordPressの子テーマを使ったカスタマイズ方法を説明して行きたいと思います。

WordPressテーマは、親テーマとも呼ばれます。そして、そのテーマの機能とスタイルを継承したものが、子テーマになります。

  • 親テーマ:既存のWordPressテーマ
  • 子テーマ:親テーマに属し、機能とスタイルを引き継いだ上で編集するためのテーマ

親テーマと子テーマの関係

WordPressのテーマには、さまざまなファイルが存在しており、サイトが表示されるまでにはそれらのファイルが順番に読み込まれています。

その中で1つの親テーマが読み込まれますが、子テーマを作成すると、親テーマ→子テーマという順番で2つ読み込まれます。

テーマファイルは、後から読み込まれたファイルの記述が優先されるので、子テーマが親テーマよりも優先されることになります。親テーマは無効になるという訳ではありません。

また、子テーマは独立したファイルなので親テーマのアップデートで消されることはありません。アップデートされた親テーマに対しても、子テーマで定義したカスタマイズの内容が反映されます。

子テーマを作っておくと、同じ親テーマを使っている限り、カスタマイズした内容を反映させることができます。

子テーマの作り方

WordPressのテーマをインストールしても、初期設定で子テーマの環境は存在しません。しかし、最近では、子テーマ自体を配布しているテーマもあるので、子テーマが用意されている場合はそちらを利用しましょう。

それでは、カスタマイズした内容を保持できるようにするための子テーマは、どのようにして作ればよいのかを説明して行きましょう。

子テーマを作る手順

子テーマを作るには、以下のような手順になります。

  • 子テーマのフォルダを作る
  • 子テーマに必要なファイルを作る
  • 親テーマを継承するためのコードを書く
  • 子テーマのCSSを記述する
  • 親テーマのfunctions.phpを編集する

子テーマのフォルダを作る

パソコン上に子テーマ用のフォルダを作ります。名前は何でも構いませんが、判りやすいように「テーマ名+child」という名前にするのが一般的です。

子テーマに必要なファイルを作る

次に、フォルダの中に、以下の2つの子テーマ用の空ファイルを作成します。

  • style.css
  • functions.php

親テーマを継承するためのコードを書く

子テーマ用のstyle.cssに、親テーマを継承するために、下記のコードを記述します。

ここでは、親テーマをTwenty Fifteenで説明しています。

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

必須項目は以下の2項目です。その他の項目は、書かなくても問題ありません。

  • Theme Name:子テーマを識別するための名前を書く
  • Template:親テーマのフォルダ名を書く

子テーマのCSSを記述する

子テーマ用のstyle.cssに、カスタマイズするためのCSSを記述します。

カスタマイズする個所が部分的であれば、親テーマのstyle.cssより、該当する個所をコピーして子テーマ用のstyle.cssに貼り付けます。

いろいろな個所をカスタマイズする場合は、親テーマのstyle.cssの内容を、丸ごと子テーマ用のstyle.cssに貼り付けてしまった方が楽かもしれません。

子テーマでCSSをカスタマイズする際の記述方法

子テーマを作成しても親テーマが無効になるわけではありません。子テーマで定義されている内容が親テーマよりも優先されます。

親テーマの設定も有効ですので、確実に子テーマのカスタマイズが反映されるように記述します。

例えば、親テーマに下記の記述があり、font-size: 24pxをfont-size: 28pxにカスタマイズするとします。

#header {
float: left;
font-size: 24px;
padding: 20px 0;
}

子テーマでは、下記の通り記述します。

#header {
float: left;
font-size: 28px !important;
padding: 20px 0;
}

このように記述すれば、親テーマと子テーマのCSSに同じ記述があっても、子テーマのCSSで記述している内容が有効になります。

親テーマのfunctions.phpを編集する

WordPress上で、親テーマのfunctions.phpに、子テーマが呼び出されるようにするためのコードを記述します。

管理メニュー>テーマを選択し、インストールされているテーマの一覧から、親テーマの編集を選択します。

親テーマの中にある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’ );
}

この内容を記述することにより、親テーマのスタイルが子テーマに引き継がれます。

以前は、子テーマ側のstyle.cssでimportを利用して呼び出す方法が主流でしたが、importを利用すると呼び出しが遅くなるなどの弊害があるので、functions.php側で呼び出す方法が現在推奨されています。

子テーマのホルダーを圧縮する

パソコン上に作成した子テーマのファイルを、WordPressのテーマにアップロードするために準備を行います。

「テーマ名+child」名で作成したホルダーをZIP形式で圧縮します。ホルダーの中には下記の2つのファイルが存在することになります。

  • style.css(子テーマ用として編集したファイル)
  • functions.php(空のファイル)

テーマのアップロード

管理メニュー>テーマを選び、テーマを追加を選択し、パソコン上に作成した「テーマ名+child」名の圧縮ファイルをWordPressのテーマにアップロードします。

子テーマの有効化

WordPress管理画面から「外観→テーマ」を選択して、アップロードした子テーマを有効化します。(親テーマではありません)

これで、子テーマの設定は完了です。子テーマを適用した状態も、親テーマだけを適用して表示した状態と変わりがありません。

スポンサーリンク



シェアする

フォローする

error: Content is protected !!