WordPress5.0のバージョンが公開されたと同時に、デフォルトテーマも新たに追加されました。
その名も「Twenty Nineteen」です!
ちなみにこれの前に公開されたデフォルトテーマは、「Twenty Seventeen(2017)」なので、「twenty eighteen(2018)」が抜けています。
久々に新登場したデフォルトテーマの「Twenty Nineteen」をカスタマイズしていくため、今回はまず「子テーマ」の作り方を紹介していきます!
子テーマとは?
子テーマはサイトをカスタマイズしていくうえで、欠かすことのできない機能です。
子テーマを導入することで、カスタマイズによるエラーの素早い復旧や、テーマのアップデートに簡単に対応することができます。
子テーマについて詳しくはこちらにまとめてますので、ご参考ください。
実際に子テーマを作っていく
それでは実際に子テーマを作っていきましょう。
子テーマを作るにあたって、いくつか用意しておきたいものが2つあります。
- FTPソフト
- テキストエディタソフト
上記の2点はできれば用意しておきたいです。
子テーマを作るくらいであれば、レンタルサーバーの上のFTP機能でも対応できますが、今後カスタマイズしていくのであればこの2つがあったほうが効率よく作業をすることができます。
もしまだ上記の2つを用意しておらずなにを使えばいいかわからない場合は、以下のソフトが個人的にはおすすめです。
- FTPソフト➔FileZilla
- テキストエディタソフト➔サクラエディタ
どちらもフリーソフトなので、検索してインストールしてみてください。
準備ができたら、実際に作業していきます。
子テーマのフォルダ
まずはローカル環境(自分のパソコン上)で、子テーマのフォルダと最低限必要なファイルを作成します。
フォルダは普通のフォルダーです。
デスクトップなどで、右クリック
【新規作成>フォルダー】で作成することができます。
作成したらフォルダに名前を付けます。
基本的には自由につけてもいいのですが、今回はわかりやすく「twentynineteen-child」にします。
こんな感じ
フォルダーに必須ファイルを作成する
先ほど作成した「twentynineteen-child」のフォルダに子テーマに必ず必要な2つのファイルがあります。
最低限必要なファイルは、以下の2つです。
- functions.php
- style.css
とりあえず中身は空でいいので、「functions.php」と「style.css」という名前のファイルをテキストエディタで作成してきます。
念のためサクラエディタでのfunctions.phpのファイル作成方法を解説していきます。
サクラエディタであれば、まずサクラエディタを起動し、【ファイル>名前を付けて保存】で作成します。
【画像】
そしてファイル名を「functions.php」に変更して保存します。
同様に「style.css」のファイルも作成しますし、先ほど作成した、「twentynineteen-child」のフォルダ内に移動させます。
作成したファイルにコードを入力する
作成した「functions.php」と「style.css」には、一定のコードを入力していないと、うまく読み込まれないので、以下の各コードをコピペしてください。
「function.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' ); }
style.cssのファイルに、以下のコードを入力
/* Template:twentynineteen Theme Name:twentynineteen child */
アップロードで完成
上記で作成した、「functions.php」と「style.css」のファイルが入っている「twentynineteen-child」のフォルダをレンタルサーバーにアップロードしていきます。
FTPソフトなどを使用し、【public_html/wp-content/themes】上に「twentynineteen-child」のフォルダをアップロードします。
ちなみにthemesのディレクトリにはtwentynineteen-childの親テーマであるtwentynineteenのフォルダもあるのでわかりやすいと思います。
完成・確認・有効化
アップロードが無事に終わったら完成です。
うまくできているか確認してみましょう。
WordPressの管理画面から、【外観>テーマ】で確認することができます。
無事に子テーマが適用されていたら、こんな感じで表示されます。
画像が表示されていませんが、無事にこのように表示されていれば、「有効化」し、子テーマの導入が完了です。
一点だけ気になる点としては、「テーマの画像がない」ということです。
画像については画像ファイルを子テーマのフォルダ内に置かなければ、表示されません。
ただし、なくても動作には問題ありません。
気になる場合は、「自作する」か、親テーマの画像を持ってきましょう。
親テーマから画像を持ってくる
FTPソフトなどで、【public_html/wp-content/themes】にある「twentynineteen」のフォルダから、「screenshot.png」のファイルをコピーします。
コピーした「screenshot.png」のファイルを先ほどアップロードしたtwentynineteen-childのフォルダ内にアップロードします。
テーマ画面を確認すると、こんな感じで表示されます
親テーマの画像が表示されました。
ちなみに自作した画像を表示させたい場合も同様の方法で画像を設定することができますのでお試しください!
まとめ
子テーマの作り方はこんな感じです。
子テーマはカスタマイズの基礎となります。
カスタマイズをする場合は、必ず子テーマを導入しましょう~