《WordPress》テーマの編集と子テーマのつくり方。安全にブログデザインを変更する方法
WordPressでブログを思った通りにつくろうと思うと、どうしても「テーマの編集」に手を出す必要が出てきます。
ですがWordPressのテーマとはブログデザインの根幹になる重要なプログラムの集合体です。
そのため考えなしに「テーマの編集」を弄ってしまうと、最悪ブログが消えてしまいかねません。
そこで「テーマの編集」のメリットや危険性・安全にブログデザインを変更できるようになる「子テーマ」の解説をします。
「テーマの編集」とは？
「テーマの編集」ではブログのすべてを設定できます。
フォントサイズや見出しなどのCSSの設定から、広告の常時表示・ウィジェットの追加といったブログ機能の追加など、ブログを構成するすべてがここで設定できます。
最初は無料インストールのテーマを使っていても、「もう少し見映えを良くしたい」「機能を追加したい」と感じるようになると思います。
そんな風になったら、ここを弄っていくことになります。
設定方法は「ダッシュボード」の「外観」→「テーマの編集」で設定画面に行けます。
初期は現在使っているテーマが選択されているはずです。
表示されるのは今使っているテーマですが、別のテーマを参照したいときは右上の「編集するテーマの選択」でできます。
しかし直接オリジナルとなるテーマを弄るのは推奨されていません。
「テーマの編集」の危険性
「テーマの編集」で一番気をつけないといけないのが、間違った設定で保存してしまうこと。
この間違った設定とは大事な部分を変更、あるいは消してしまうことをいいます。
プログラム上で書き方に問題なければすんなり保存されてしまうので、そのことに気づかないまま、最悪ブログ自体が真っ白に表示されてしうこともあります。
他にも情報量が膨大なので過去にどこを変えたのかわからなくなる危険性があるため、オリジナルのテーマを直接弄るのは危険です。
これを解消するために「子テーマ」をつくり、それを編集するのが一般的です。
「子テーマ」とは？
今使っているテーマを「親テーマ」といい、それに設定を追加編集するためだけのテーマを「子テーマ」といいます。
基本となる親テーマを弄ることなく子テーマに書いた設定を追加して表示する、といった方法です。
こうしておけばブログの元になっている親テーマを傷つけずに設定を追加することができます。
もし間違った設定をしてしまっても、子テーマの変更した部分を消してしまえばブログを元通りにできますし、自分がどこを・どれだけ設定し直したのかわかるので、後々の作業もラクになります。
「子テーマ」の作成方法
子テーマを作成するにはダッシュボードの「外観」→「テーマ」で子テーマのフォルダをアップロードする方法と、サーバーにアクセスして作成する方法があります。
子テーマをアップロードする方法
この方法はWordPress画面から行うものです。
サーバーの管理画面を通さずにアップロードするので、「サーバーにアクセスできない」なんて状態でもできます。
①子テーマのフォルダを作成
まずは子テーマのフォルダをつくります。
適当なところで「親にするテーマ名-Child」なんて名前のフォルダを作成します。（例：Twenty Sixteen Child）
次にフォルダ内にメモ帳などのテキストエディタで「function.php」と「style.css」をつくります。
「function.php」と「style.css」は、「名前をつけて保存」でファイルの種類を「すべてのファイル」に設定してから末尾に「.php」「.css」と入れればつくれます。
「fanction.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')
);
}「style.css」には
/*
Template: 親テーマ名
Theme Name: 親テーマ名 Child
*/と書いて下さい。
「親テーマ名 Child」は先ほど作成した子テーマのフォルダ名になります。
これで子テーマのフォルダはOKです。
②アップロードする方法
まずは作成したフォルダをzip形式で圧縮します。
次にダッシュボードの「外観」→「テーマ」画面を表示します。
画面が表示されたら「新規追加」からアップロード画面に映り、「テーマのアップロード」で圧縮したフォルダをドラッグすればテーマが追加されます。
最後に追加した子テーマが有効になっているか確認して完了です。
ただこの方法では新規でphpファイルを追加したり、削除したりすることはできません。
あくまで追加するだけしかできないため、追加・削除はサーバーにアクセスして作業する必要があります。
サーバーで作成する方法
こちらは自分がレンタル契約しているサーバーの管理画面を通して子テーマを作成する方法です。
間違った子テーマをつくってしまった場合でもこの方法なら削除できます。
①サーバーへアクセスする
ブログのサーバーへアクセスするには「FTPソフト」を使います。
「FTP」とは「File Transfer Plotocol」の略で、サーバーとのデータ転送をするためのプロトコルです。
まあサーバーとデータのやり取りする方法とでも思ってください。
まずは自分が使っているサーバーの管理画面で「FTP」などとついているものを探します。
※私の場合は「ロリポップ」サーバーを使っています。
もしFTPの機能がついていなかった場合、「FileZilla」「Cyberduck」「FFFTP」といったソフトをダウンロードする必要があります。
②サーバー内でフォルダ作成
サーバーのデータ管理画面が表示されたらフォルダ名「domain」→「wp-content」→「themes」と進み、テーマが入っているフォルダ群まで移動します。
移動したらそこに「新規フォルダ作成」で子テーマを入れるフォルダをつくります。
「親にするテーマ名-Child」なんて名前のフォルダを作成してください。（例：Twenty Sixteen Child）
フォルダをつくったらその中に「新規ファイル作成」で「function.php」と「style.css」をつくります。
内容は先ほどの「アップロードする方法」で書いたのと同じです。
つくり終わったら、WordPressに戻って子テーマが表示されているか確認して、有効化して終わりです。
子テーマのテーマ編集
子テーマをつくってしまえば、あとは「テーマの編集」でどんどん編集できるようになります。
「function.php」と「style.css」に追加でプログラムやCSSを追加してけば、それが親テーマと連動した状態で表示されるようになります。
ただCSSなどでいくつか注意したい部分があります。
親テーマの設定は引き継がれる
子テーマで親テーマで既に設定されているCSSを弄る場合、親のテーマもそのまま反映されます。
例えば親テーマで<h2>タグが以下のように設定されていたとします。
.h2{
font-size:24px;
margin-top:10px;
marfin-bottom:10px;
color:#000000;
}これを小テーマで以下のように設定しなおしたとします。
.h2{
font-size:22px;
}子テーマではフォントのサイズのみを変更していますが、実際には「margin-top」「margin-bottom」「color」も反映されて表示されます。
子テーマで書いていなければ反映されないなんてことは無いため、margin（余白）を無くしたい場合は「margin-top:0px」「margin-bottom:0px」と設定し直す必要があります。
phpファイルはコピーしなおす
「single.php」などを編集したい場合、子テーマのフォルダに親テーマの「single.php」をまるごとコピーしてくる必要があります。
こうしたphpファイルの場合は小テーマのほうが優先されて表示される仕組みになっているため、記事ページなどを個別で変更したい場合は各phpファイルを子テーマにコピーしてから弄ることになります。
ただし「function.php」は「style.css」と同様に追加だけしていけばいいので、コピーし直す必要はありません。
こんな感じで編集したいphpファイルだけを子テーマにつくっていけば、自分がどこを弄っているのかわかりやすくなります。
最後に
ブログをしていると、デザイン変更のためにどうしてもテーマの編集をする機会が出てきます。
クラスの追加や調整では追加CSSだけでもこと足りますが、「single.php」といったページ全体に変更を加えるには子テーマを作成するのが一番安全かつ手軽です。
専用の機能がついていないテーマでは広告コードなんどを記事本文に表示するには子テーマで編集するしかありません。
子テーマをつくるのは面倒ですが、一度つくってしまえば気兼ねなく編集作業が出来るようになるので、物怖じせずにつくってみましょう。