Tag Archives: WordPress

「@import」を使わないWordPress子テーマの正しい作り方

WordPressをインストールしたら、まずChild Theme(子テーマ)を設置しましょう。テーマに全く変更を加えないで使うという人には必要ありませんが、自分の好みにカスタマイズしたい人にとっては必須といえます。というのも、テーマのファイルに直接手を加えていると、テーマがアップデートされるときに変更点が新しいバージョンで上書きされるため、サイトのデザインや機能の変更点がすべて消されてしまうからです。

一方で、子テーマを設置すると、親テーマのファイルに手をつけることなくサイトのデザイン・機能を変更できます。そのため、親テーマがアップデートされても、それと独立している子テーマは上書きされず、カスタマイズはすべて保持されます。

@importを使うとサイトのパフォーマンスが低下

ここでは、「正しい」子テーマの作り方を説明します。多くのサイトで「@import」を使って子テーマのスタイルシートを作るやり方が説明されていますが、これは推奨されているやり方ではありません。WordPressサイトでは「this is no longer best practice」と書かれています。このページでは、@importを使ってスタイルシートをインポートする解説に気をつけることが繰り返し呼びかけられており、wp_enqueue_script()を使った方法が薦められています。(Be aware that some of these resources recommend using @import from your child theme’s stylesheet as the method of importing the parent theme stylesheet. Please use the wp_enqueue_script() method described above.) 困ったことに、日本語訳ページでは2015年1月現在でも、この「@import」のやり方が載っています。気をつけましょう。

ここから順を追って説明します。やり方がわかってしまえば10分以内にできてしまうようなシンプルな作業です。

1) 「style.css」と「functions.php」ファイルの作成

自分のコンピューターでテキストエディタ(例えば、テラパッドNotepad++)を使ってファイルを作ってからサーバにアップロードする方法と、サーバにあるWPのフォルダ内にファイルに直接作成する方法との2通りがあります。

まずは、style.cssファイルを作成します。

style.cssファイルの初めに書く内容

/*
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行だけで、ほかのラインはなくてもかまいません。というわけで、シンプルなバージョンは下のようになります。

style.cssファイルの初めに書く内容 (シンプルバージョン)

/*
Theme Name: Twenty Fifteen Child
Template: twentyfifteen
*/

「Template」に書く親テーマのディレクトリ名は大文字・小文字にも注意します。この記述によってこのファイルが「子テーマ」と認識されます。これでCSSファイルの編集は終わりです。くれぐれも、このあとに「@import」を使わないようにしましょう。サイトの読み込みスピードが低下するとされています。

次に、「functions.php」ファイルの作成です。以下の内容を書くことで、親テーマのCSSが子テーマに反映されるようになります。(子テーマのCSSに手を加えることで該当部分が親テーマのCSSより優先されます。)

functions.phpファイルに書く内容

<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style' );
function enqueue_parent_theme_style() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}

2) 子テーマフォルダの設置

WordPressのフォルダ構成を上から「wp-content」 → 「themes」 とたどると、デフォルトでインストールされているいくつかのテーマのファイル見つかると思います。「twentyfifteen」や「twentyfourteen」などですね。もちろん使いたい親テーマもここに並んでいるはずです。

ここで、子テーマフォルダの設置です。名前にはフォーマットがあるので、好き勝手なフォルダ名にはできません。「親テーマの名前-child」というのが子テーマのフォルダ名になります。親テーマの名前をそのままコピペして、その後ろに「-child (半角英数のハイフンとchild)」を加えます。

3) 「style.css」・「functions.php」ファイルを子テーマフォルダに設置

最後に、「style.css」と「functions.php」の2つのファイルを子テーマフォルダの中に設置します。ここでは、Bluehostの管理画面を例にとって見てみます。おそらくどのサーバでも似たようなつくりでしょう。

Bluehostのコントロールパネル
Bluehostのコントロールパネル

ページ上の方にある「File Management」カテゴリーにある「File Manager」を選びます。

File Managerのキャプチャー画面: いくつかのテーマとともに子テーマが設置されています。
File Managerのキャプチャー画面: いくつかのテーマとともに子テーマが設置されています。

「wp-content」 → 「themes」 とたどった階層です。ここにフォルダを作成するのは、画面上のアイコン一覧から感覚的にできると思います。

子テーマのフォルダ内に設置された「style.css」と「functions.php」ファイル
子テーマのフォルダ内に設置された「style.css」と「functions.php」ファイル

子テーマのフォルダ内にはいったら、作っておいた2つのファイルをアップロードします。もしくは、テキストエディタであらかじめ編集する代わりに、このフォルダの上にあるアイコン一覧からファイルを作って(New File) それを編集(Edit)する、というやり方でも簡単です。

4) WordPressで子テーマを選ぶ

WordPressのダッシュボードからテーマのセクションに行きます。ここまでのステップが正しく行われていれば、ほかのテーマと並んで子テーマも見つかるはずです。子テーマを有効化すればすべての工程が終了です。自分のサイトに行ってみると、親サイトを変わらないものが表示されているはずです。あとは、CSSのファイルに手を加えることで、親テーマのアップデートを気にすることなく自分の好みにサイトをカスタマイズしていけます。

WordPressテーマを選ぶときのポイント

WordPressをインストールしてから多くの人がすることは、お気に入りのテーマを選ぶことだと思います。選ぶときの基準になるポイントをいくつか挙げてみましょう。多くのすばらしいWPのテーマが無料で使えます。選びきれないほどの無料テーマがありますので、特別な理由がない限り有料のものを選ぶ理由はないでしょう。WordPressのページのテーマセクションでいろいろと見てみましょう。

色・画像に惑わされない

テーマの第一印象は、色や画像に大きく左右されるとおもいます。バックグラウンドや罫線の色、メニューバーの枠のデザインなどです。フィーリングで決めるのもひとつですが、色や画像というのは変更するのがとても簡単ということも頭においておきましょう。第一印象でテーマの候補を絞ってしまうのはもったいないのです。逆に、ページの全体的なデザインが好みならカラーデザインをいじることを前提に選んでもいいわけです。
wp themes

ページメニューの位置

ブログエントリーのタイトルは、どのテーマでもたいていサイドバーに置かれます。エントリーのタイトルをサイドバーに上から順に表示するのは、ページトップに横並びで表示させるよりもスペース的にもすっきりするからでしょう。

いっぽうで、ページメニューの位置はテーマによってさまざまです。WPをブログとして使う方は、ページの数自体が少ないので、ページメニューの位置をあまり気にする必要はありませんが、ブログというよりもいわゆる「ウェブサイト」を作るケースでは、ページメニューの位置は大事になってきます。ページトップに横並びにさせるのか右・左のサイドバーに置くのか、あるいはフッターに位置させるのかという選択です。

CSSの変更だけでカスタマイズできると簡単

ぶっちゃけていえば、WPのダッシュボードからテーマのファイルをいじることで、メニューの位置を好きなように変えることは難しくありません。phpファイルに手を加えるとはいっても、変更するのは基本的にHTMLだけです。CSS(スタイルシート)の変更も必要になりますが、これはバックグランドの変更などと原則は同じです。とはいっても、慣れていないうちは時間もかかるでしょうし、子テーマ(Child theme)を使わずにテーマファイルに変更を加えると、テーマのアップデートがあったときにカスタマイズした内容が上書きされてしまうという不都合も出てきます。というわけで、変更をしなくてもいいテーマを選んでおくのが手っ取り早いのです。

理想のデザインだけど、ページメニューが好みの位置にないというケースでは、そのテーマが「ウィジェット」に対応しているかチェックしてみましょう。例えば、サイドバーがウィジェット対応であれば、そこにページメニューをもっていくことが簡単にできます。

テーマの作り方・作者は?

テーマがいつ作られたのか、あるいはいつ最後にアップデートされたのかもチェックしておきましょう。古いものが即だめということでは全くありませんが、WP自体の新しいバージョンアップに対応できるテーマであったほうが良いからです。とりあえず一番手を加えるのはCSS(スタイルシート)だと思うので、このファイルがどのように書かれているか簡単にチェックして見ましょう。いくつかのテーマを比べてみると、見難い書き方をしているものとすっきりしているものとの違いが判ると思います。

クオリティーやアップデートの可能性という点からみれば、WordPressオフィシャルテーマを使うのが安心です。多くのユーザーがいるので使い方のWordPressサイトでのQ&Sの数が多いですし、いわゆるハウツーの解説ページも多く、バグの修復などもすばやくされます。カスタマイズがWPダッシュボードから簡単にできるようになってきており、カスタマイズの幅も広いので、デフォルトとは全く異なるものが簡単にできます。ちなみこのサイトは「Twentyfourteen」というオフィシャルテーマを使っています。デフォルトとはかなり違っているのが判ると思います。

私の中で「準オフィシャル」の位置づけをしているAutomatticによるテーマもお勧めです。2105年1月現在で60個ほどのテーマが公開されているのでチェックしてみましょう。

Twenty Fourteen
WordPressオフィシャルテーマ: Twenty Fourteen
レスポンシブなテーマ

いわゆるレスポンシブなテーマを選ぶことをお勧めします。WordPressのページのテーマセクションで「responsive」と打ち込むとかなりのテーマがでてきます。これは、タブレットやスマホなど小さな画面にサイトが自動的に幅を伸縮させて対応するもので、ユーザビィティーが格段に向上します。

まずはインストールしていじってみよう

ここまで書いてきた意外にも、おそらくいろいろなチェックポイントがあるとは思います。テーマはいったんインストールして実際に作りを見てみないとわからないことも多くあるのでまずはWPダッシュボードから候補のテーマをどんどん試して見ましょう。いろいろといじっているうちにいろいろな発見があると思います。