女子向けカスタマイズ

WordPress子テーマの作り方と私のイチオシ!カスタマイズ

WordPressでは、たくさんのデザインがテーマとして公開されています。
テーマのデザインやを一部だけ自分流に変更したいときもありますよね。
その際、子テーマを使うと、とっても便利です。

テーマ編集には、子テーマを使う!

子テーマは、WordPressにインストールしたテーマをベースに、一部分だけ変更するためのテーマです。

子テーマを使う理由

まず、公開中のテーマは開発者が随時バージョンアップしていきます。
私たちWordPressユーザーがテーマの中にあるファイルを書き換えても、テーマがアップデートすると、自分が更新した部分が消えてしまうんですね。
子テーマを使うことで、自分が変更した箇所はそのまま残すことができます。

また、テーマをカスタマイズするときには、テーマの構造や書かれているプログラムの内容など、技術的な知識が必要になります。
うっかり、誤った場所を更新してしまうと、ページが表示されなくなってしまうリスクがあります。

子テーマを使えば、もし間違った操作をしても、子テーマの中のファイルだけを見直せばいいので、安全にカスタマイズを進められます。

WordPressは子テーマを親テーマに上書きして、動作するようになっています。

◯ 親テーマ=ベースとなるテーマ(開発者が随時アップデートするのでさわらない)
◯ 子テーマ=カスタマイズするテーマ(更新したいファイルのみ追加する)

2. 子テーマの作り方

Twenty Sixteenのテーマを例に、子テーマの作り方を説明します。

2-1. 子テーマのフォルダを作るよ

自分のパソコン上でフォルダを作ってください。
子テーマのフォルダ構成
フォルダ名は「親テーマ-child」とすると分かりやすいです。

このフォルダの中に、子テーマのファイルを作っていきます。

  • style.css(必須)
  • functions.php(必須)
  • 変更したいファイル(任意)

最低限必要なのはstyle.cssとfunctions.phpです。
style.cssがテーマの外観を設定するためのファイル。
functions.phpはテーマに機能を追加するためのファイルです。

2-2. style.cssにテーマの情報を書く

style.cssは子テーマの名前ともとになるテンプレート(親テーマ)を書きます。


/*
Theme Name: Twenty Sixteen Child
Template: twentysixteen
*/
/* 以下、子テーマ用のスタイルを記述します。*/
body{
    background:#FFEEB4;/* 試しに背景を黄色にしてみるよ */
}

Theme Name:子テーマの名前
Template:親テーマのフォルダ名
Templateは親テーマの名前とは違うので注意してください。

2-3. functions.phpの中身を書くよ

functions.phpは、テーマが動作するための機能を記述したファイルです。
ここで、CSSファイルの読み込み順序を記載します。
親テーマのCSSを読み込んだあと、子テーマのCSSが上書いて反映されます。

<?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')
);
}
//以下に子テーマ用の関数を書く

2-4. 必要に応じて、変更したいファイルを入れる

この他に、親テーマを上書きたいファイルがあれば、作成します。
親テーマのファイルを複製して、子テーマのフォルダ内に置きます。
そして、そのファイルのソースを編集していきます。
オススメのカスタマイズはこの後紹介しますね😁

2-5. 子テーマをアップロードする

FTPツールでアップロードする場合は
wordpressをインストールしたフォルダ>wp-content>themesの中に子テーマのフォルダを配置します。
※themesの中には、親テーマも忘れず入れておいてくださいね。

テーマフォルダの構成

管理画面からアップロードする場合は、子テーマのフォルダを圧縮してZIPファルにします。
外観>テーマ>新規追加>テーマのアップロードでZIPファイルをアップロードできます。

2-6. 子テーマを有効化する

子テーマ有効化子テーマを有効化します。

以上で、子テーマのカスタマイズが反映されます。

3. 私がよくやるカスタマイズ

3-1. 記事のデザインを変える

style.cssに見出しや、飾り枠など記事のデザインを変更していきます。

3-2. ビジュアルエディタ(記事投稿画面)を使いやすくする

3-1. 記事のデザインを変える時に、投稿画面上でもそのデザインが反映されるようにする設定です。
WordPressのビジュアルエディタの見た目を実際の記事にそろえる

これをやると、飾り枠などもいちいちコードを打たずに、ボタン一つで入れられるようになります♪
WordPressのビジュアルエディタによく使うボタンを設定する

3-3. ウィジットを追加する

3-4. 管理画面の投稿一覧をカスタマイズする