子テーマを使ってカスタマイズ

WordPress2019.02.08

この記事の目次

配布されているテーマをカスタマイズするときの注意点
- 更新は行わない
- 追加css機能を使う
追加css機能の使い方
子テーマを作る

配布されているテーマをカスタマイズするときの注意点

既存のテーマを使ってサイトを構築すると簡単にサイトを作れます。
ですが、そのままだと困る場合があると思います。
色が気に入らなかったり、余白が気に入らなかったりあると思います。
もちろんcssを書き換えてしまえば修正は可能ですが、
テーマの更新があると折角修正したcssが上書きされ全くの別物になってしまうことがあります
このような事態を避けるためには

更新は行わない

更新のタイミングでファイルを全て上書きされてしまうのであれば、更新しなければいいという乱暴な考えテーマの更新はただの嫌がらせではなく、エラーやセキュリティへの対応がほとんどなので脆弱な状態のままサイトを運用することになりかねません

追加css機能を使う

追加cssとは、配布されているテーマのcssを操作せず、DB内にcssの記述を保存していく仕組み
特別な用意などは必要なく、記述した内容はDB内に保存されるので、もしテーマの更新をしても、問題なくカスタマイズしたcssを使うことができる

追加css機能の使い方

「外観」→「テーマの編集」を開く

上の方にご存知ですか ?
ここで CSS を変更する必要はありません — 付随の CSS エディターで、編集とライブプレビューを行うことができます。というところがあるので「付随のCSSエディタ」をクリック

cssを記述する左下に入力欄,に右側にプレビュー画面が表示されますこの時検証ツールも問題なく使うことができるので、プレビューと検証ツールを使いながらの作業が可能になります直接DBに保存していく仕組みなのでブラケッツなどのエディタに落とすことはできません

※ テーマごとに保存されるので、ほかのテーマに変えたとき追加cssは無効になります

参考サイト

【WordPress】追加CSSを使ってブログデザインをカスタマイズ

ワードプレスの「追加CSS」機能について、動画付きで解説しています。

https://www.akaeho.net/wordpress-edit-css/

子テーマを作る

子テーマとは親テーマの機能や見た目を継承してカスタマイズするためのテーマになります
もし更新がかかっても変更されるのは親テーマの中身だけなので子テーマは影響を受けません
必要なファイルは親テーマと紐づけする「functions.php」と装飾する「style.css」の二つがあれば問題なく制作できます
簡単に仕組みを解説すると子テーマに細かい設定をしておき、子テーマから親テーマを読み込む
子テーマを設定しても、親テーマの設定が読み込まれるが子テーマで設定した部分は上書きされるのでカスタマイズ可能

子テーマを作る手順

まずは子テーマ用のフォルダを作ってアップロードする
アップロード場所は
「wp-content」の中の「themes」親テーマと同じ階層に入れましょう

style.cssを子テーマフォルダ内に作る

このstyle.cssの先頭には、親テーマと子テーマを紐づける記述をします
最低限下の二つがあればOK
スペルミスで認識しないので注意して書き込む

/*
 Theme Name: 子テーマの名前 最後に「child」を付けるとわかりやすい
 Template: 親テーマのフォルダ名 テーマフォルダからコピペする
*/

1

2

3

4

/*

Theme Name: 子テーマの名前最後に「child」を付けるとわかりやすい

Template: 親テーマのフォルダ名テーマフォルダからコピペする

*/

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' );
  wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style')
);
}

1

2

3

4

5

6

7

<?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を編集すればOK バッチリ反映されます

header.phpやらfooter.phpやらsingle.phpやらも複製して子テーマ内に配置することでカスタマイズ可能です
カスタマイズしすぎて壊さないように注意しましょう。
テンプレートも子テーマのほうが優先的に読み込まれる仕組みになっています。
※ エラーやセキュリティ面の脆弱な部分が子テーマのテンプレート側にある場合、更新での対応ができませんのでこれにも注意

header.phpやfooter.phpにはアクセス解析系のコードを流し込んだり、single.phpには広告を張り付けたりできますね

参考サイト