Cloud Launcherで立ち上げたWordPressで子テーマを作る(Twenty Seventeen)

このWordpressのテーマはデフォルトのTwenty Seventeenを使っています。そのまま使うと少し味気ないかと思い、カスタマイズを試みました。

WordPressでは、親のテーマを継承してカスタマイズすることのできる「子テーマ」を作ることが推奨されているようです。(親テーマを編集していた場合、バージョンアップ等でテーマの更新を行うと、今までの編集内容が全て消え去ってしまうため)

なので、今回は子テーマの作り方をご紹介します。

 

本来であれば、作成した子テーマのファイルはFTPなどでサーバーに突っ込むものかと思いますが、Cloud Launcherで作成したGCP上で動いているWordpressなので、SSHで入り込んで作ってみました。(特に理由は無し)

1. GCEにSSHで入る

GCEの画面にて、クリック一発。ぽちっとSSHで入りましょう。

 

接続しています。。。

 

接続が完了すると、以下のような画面が出現します。

 

2. 子テーマを収納するフォルダを作る

まずは、カレントディレクトリから「themes」フォルダまで移動しましょう

cd apps/wordpress/htdocs/wp-content/themes/

早速フォルダを作ります。子テーマだとわかりやすいように「twentyseventeen-child」とします。

sudo mkdir twentyseventeen-child

3. 「style.css」、「functions.php」を作る

先ほど作成したフォルダに移動します

cd twentyseventeen-child/

style.css

まずはstyle.cssから作成します。

sudo nano style.css

 

最小構成のstyle.cssの内容は以下となります。

/*
Theme Name: Twenty Seventeen-child
Template: twentyseventeen
*/

「Theme Name」は後程Wordpressの管理画面に表示されるテーマ名で、「Template」は継承する親のテーマを指定します。

functions.php

次にfunctions.phpです

sudo nano functions.php

 

これの内容は以下となります。

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

このコードを記述すると親テーマのstyle.cssも読み込むことができます。

親テーマのstyle.cssを読み込んだ後に、子テーマのstyle.cssを読み込むことになるので、子テーマが親テーマを上書きする形となります。なので、子テーマ側だけを編集するだけでよいことになるわけですね。

※余談ですが、筆者はここで「functions.php」を「function.php」で作成してしまい、親テーマが継承されずにずっと躓いていました。ファイル名は正しくつけましょう。。。

4. パーミッションの変更

先ほど作成したstyle.cssとfunctions.phpですが、このままだとパーミッションの関係でWordpressの管理画面から編集することができません。なので、パーミッションを以下のように変更しましょう。

sudo chmod 664 style.css
sudo chmod 664 functions.php

あと、もともと存在していた親テーマのTwenty Seventeenのファイルオーナーが「daemon」になっていたので、それに合わせて変更します

sudo chown daemon style.css
sudo chown daemon functions.php

最終的にはこんな感じになりました。

5. テーマの変更

ここまで設定すれば、Wordpressの管理画面から作成した子テーマを選択できるようになっていると思います。

有効化して、テーマの編集に移動すると、先ほどのstyle.cssとfunctions.phpが編集できるようになっています。

 

これでやっとWordpressの見た目をカスタマイズできる準備が整いました。

少しでもブログを見やすくできるように頑張りたいと思います。

コメント

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