子テーマの作り方

ども、たきたきでっす。 とりあえず、最初に設定されているテーマ(Twenty Twenty)を使っています。

あくまでもデフォルトのTwenty Twentyで色々ためそうと思っておりますw

とはいえ、PCの表示がかなりのフォントサイズなのでサイズを変えようと思ったのですがcssを変更するには今のテーマを直接編集するのではなく、子テーマを作成してそっちを改修するほうが良いみたい。

理由としては、テーマのアップデートが発生した場合、アップデートしてしまうことによって、カスタマイズした部分が上書きされてしまうためとのこと。 元のテーマを継承した子テーマを作っておけば上書きされることがないとのこと。
(とはいえ、セキュリティリスク等クリティカルなアップデートの場合は上書きされたほうが良いケースもありますが…)

まずはフォントの級数をもう少し落としたい…

ということで、今回は子テーマの作成してみようと思います。

themesディレクトリに子テーマ用のディレクトリを作成

themesディレクトリは、/WordPressをインストールした場所/wp-content/ の中にあります。

以下のコマンドで、ディレクトリを作成。

# mkdir twentytwenty_child
# chown -R nginx:nginx twentytwenty_child/
# ll
合計 12
-rw-r--r-- 1 nginx nginx   28  6月  6  2014 index.php
drwxr-xr-x 7 nginx nginx 4096  1月  2 14:00 twentytwenty
drwxr-xr-x 2 root  root  4096  2月  4 22:23 twentytwenty_child

style.cssの作成

作成した twentytwenty_child ディレクトリ内でstyle.cssファイルを作成し、以下を入力します。

/*
Theme Name: Twenty Twenty Child
Author: xxx
Template: twentytwenty
Description: Twenty Twenty の子テーマです。
Version: 1.0
*/

重要なものは、Templateで、親テーマのディレクトリ名を指定します。

この時点で、外観→テーマを確認すると、

設定したTwenty Twenty Childが表示されていればOK

こんな感じになっているはずです。

親テーマのスタイルシートを読み込むように 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');
}
?>

functions.phpの中身が正しければ、先程のテーマに…

特に変わらなかった…w

これであっているか不安ですが、Twenty Twenty Childを選択して、有効化をしてみると…

ちゃんと表示されているっぽい?

ためしに、style.cssに以下の記述を追加してみると…

.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
	max-width: 100rem;
	width: calc(100% - 4rem);
}

本文の横幅が広がったことがわかると思います。

最初の目的は、フォントサイズを下げようと思ったのですが思ったより難しそうだったので一旦横幅を広げるだけに留めましたw

コメント

タイトルとURLをコピーしました