WordPressの公式テーマ「Twenty」シリーズの使い方と子テーマの作り方

やっぱりテーマは「Twenty」でしょ! という方のために、同シリーズの使い方と子テーマの作り方を解説します。

WordPressには公式と公式以外のテーマがあり、公式テーマは最初から入っているデフォルトテーマの「Twenty」シリーズが有名で、これは世界規模のものでもあることから、このテーマを愛用している方も多いのではないかと思います。

かくいう私も「Twenty」シリーズのユーザーで、ブログ開設当初から同じものを使いつづけているわけですが、このシリーズは、なかには自力でカスタマイズしていかなければ使えないようなものもあるため、実際に使うとなると、ブログを運営する難易度がまあまあ上がることになってしまうかもしれません。

しかし、それでも、自分でいじっていく楽しさを味わいながら運営作業を進めていきたいという方もいらっしゃることでしょう。

今回はそんな方のため、WordPressの公式テーマ「Twenty」シリーズの基本的な使い方や導入手順、カスタマイズに必須となる「子テーマ」の作成方法などについて、実際に同シリーズを使いながら解説していきたいと思います。

関連記事

公式テーマのメリット&デメリットはこちら
WordPressのテーマ(テンプレート)の決め方&一押しテーマの設定手順

デフォルトの公式テーマ「Twenty」シリーズ

WordPressにデフォルトでインストールされているテーマ「Twenty」シリーズは、基本的には毎年新しいものがリリースされ、テーマの名前は、「Twenty Twenty(2020)」や「Twenty Twenty-One(2021)」など、リリースされた年の名前がつけられることになっています。

リリースされるたびに機能性・デザイン性が向上しているようにも思われますが、なかでも人気があるのは、すこし古い「Twenty Twelve(2012)」や「Twenty Sixteen(2016)」で、これらはシンプルで洗練されているからこそ、いまだに人気があるのではないかと思います。

そんな私も「Twenty Twelve」ユーザーのひとり。

「Twelve」は、たしかにひと昔前のテーマということもあって、機能性はけっして高いとはいえませんが、シンプルだからこそカスタマイズの楽しさを味わうことができる良テーマ、ということができるかもしれません。

ちなみに、なぜ私がデフォルトの公式テーマを使っているかというと、じつは当時は、機能性が高い無料テーマがあるなんてことは知らなかった(まだリリースされていないものもあった)という理由もあって、そのままブログらしいデザインで気に入った公式のものを使っていたら、テーマを変える気がなくなってしまった、という話でもあるのですが、まあそれはいいでしょう。

いずれにせよ、WordPressの公式テーマには公式テーマの楽しさがあるので、ここからは、「Twenty」シリーズを実装する方法をお話ししていきたいと思います。

公式テーマをインストールする方法

ワードプレスのテーマを新規追加

公式テーマをインストールする方法は簡単で、WordPressのダッシュボード(管理画面)から「外観 テーマ  新規追加」へと進んでいき、

WordPressのテーマの検索窓

「新規追加」のページ右上にある検索窓に、使いたいテーマの名前(一部でも可)を入力したら、あとは画面に出てきたものをインストールするだけ。

「Twenty」シリーズのテーマを検索

今回は「Twenty」シリーズを使いたいので、「Twenty」と入力してみましょう。

「Twenty」シリーズのテーマ一覧

すると、このように「Twenty」シリーズが一覧で表示されます。

「Twenty Seventeen」をインストール

画面左下にあったサボテンのような植物が気になった方も多いと思うので、ためしに「Twenty Seventeen(2017)」を使ってみることにしましょう。

テーマにマウスカーソルを合わせると「インストール」のタブが表示されるので、これをクリックします。

「Twenty Seventeen」を有効化

インストールが完了したら、そのまま「有効化」をクリックすればOK。

「Twenty Seventeen」を実装したブログのトップページ

どうでしょう、これもなかなかセンスがいいのではないでしょうか!?

もちろん、この画像をそのまま使用するわけにはいかないので(それこそほかの人ともろかぶりするから)、画像は変更する必要はありますが、「Twenty Seventeen」もなかなかよさそうな気配を感じるテーマだといえます。

「Twenty Twent」を有効化

さて、お遊びはこのへんまでにすることにし、今回は比較的新しいテーマで、機能性やデザイン性も高そうだった、本命の「Twenty Twenty(2020)」を有効化して話を進めていきたいと思います。

「Twenty Twenty」を有効化したブログのトップページ

「Twenty Twenty」を実装したブログのトップページはこのような感じ。

このテーマは、どちらかというと、ブログよりもホームページ向きのテーマかもしれません。

イブスター店長
イブスター店長

「Twenty Eighteen(2018)」はリリースされなかったらしい

子テーマの作り方とファイルの作成方法

公式テーマの「Twenty」シリーズの場合、デザインや機能をカスタマイズして使うには「子テーマ」が必須となるので、ここからは、子テーマの作り方を見ていくことにしましょう。

また、デザインのカスタマイズに使用する「スタイルシート(css)」というものや、機能の追加などに使用する「function.php」というファイルの作成もここで必要となるので、これもあわせて解説していきたいと思います。

「child」のフォルダを作成する

ロリポップFTPの最初の画面

子テーマの作成はレンタルサーバーの「FTP」からおこなうので、まずはロリポップの「FTP」をひらき、立ち上げたブログの(独自ドメインで設定した)フォルダをクリックします。

「FTP」の使い方を忘れてしまった方は、以下の関連記事から、前の作業を振り返っておきましょう。

FTPの「wp-content」

つづいて「wp-content」というフォルダをクリック。

FTPの「themes」

つぎの階層に出てきた「themes」をクリックします。

「themes」の画面で新規フォルダ作成

そして、この「themes」の画面で、左上にある「新規フォルダ作成」をクリック。

「child」のフォルダを作成

遷移した画面でフォルダ名を「child」とし(この名前はなんでもいいですが、わかりやすいので「child」がおすすめ)、画面下の「保存する」をクリックします。

「child」のフォルダをクリック

これで「themes」という階層のフォルダに、新しく「child」というフォルダが作成され、子テーマの基盤が完成しました。

ピンクラビット
ピンクラビット

ここからはちょっとした「魔境」に入るから注意してね!

フォルダの中に「style.css」を作成する

「child」のフォルダをクリック

ここからは、しくじるとやばい系のファイルもいじっていくので、気を引き締めていきましょう。

まずはさきほど作成した「child」をクリックしてください。

「child」のフォルダ内に新規ファイル作成

こんどはこの(「child」のフォルダ内の)画面で、「新規ファイル作成」をクリックします。

ファイル名を「style.css」と入力

遷移した画面でファイル名を「style.css」と入力し、そのまま画面を下にスクロールすると、ファイルの中身を入力することができる欄があるので、そこに以下の内容を書き込みます。

/*
Theme Name: Child
Template: twentytwenty
*/

テーマネームはさきほど決めた「Child」、テンプレートは使用するシリーズの名前(2012なら「twentytwelve」、2016なら「twentysixteen」など)を記述します。

なお、このときの注意点として、テーマネームは「Child(大文字)」でも「twenty child(スペースあり)」でも問題はないものの、テンプレートで「TwentyTwenty」のように大文字を使ったり、「twenty twenty」のようにスペース(空白)を入れたりするとエラーが発生するので、テンプレートはすべて小文字でスペースはなしで入力するようにします(「themes」の中にあった親テーマの名前と同じにしておけばOK)。

なぜ「Child」だけ大文字を使っているかというと、「WordPress Codex」というマニュアル(子ページ)にそのように記載されているからなのですが、これはあえて変える理由もないので、すなおにしたがっておいたほうがいいでしょう。

「style.css」の内容

実際に入力するとこのような状態になります。

あとは名前と内容を確認し、「保存する」をクリックすれば、1つめのファイル(style.css)の作成はOK! つぎに進みましょう!

(注:以前は親テーマを子テーマに引き継ぐ方法として「@import」というものが使われていましたが、私の場合は、ある時期からこれを使うとエラーが発生するようになり、マニュアルにも「これはもはや良い方法ではありません」と書かれているので、その方法は使わないほうがいいのではないかと思います)

続けて「functions.php」を作成する

「child」のフォルダ内に新規ファイル作成

1つめの「style.css」の作成が完了したら、いちど「child」のフォルダにもどり(フォルダ名が階層で表示されているところをクリックすればもどれます)、もういちどこの画面で「新規ファイル作成」をクリックします。

「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」というファイルこそがしくじるとやばい系のファイルで、この段階ではまだしくじってもそこまで大きな問題は起きませんが、すこしでも記述をまちがえると、ブログの画面が真っ白になってアクセスできなくなったりもする重要なファイルなので、取り扱いには気をつけるようにしましょう。

「functions.php」のファイル内容

こちらも実際に入力するとこのような感じになるので、名前と内容を確認して「保存する」をクリックすれば、子テーマは完成です!

CHECK

「@import」を使えば「style.css」のファイルだけで親から子テーマへの引き継ぎができたのですが、ここではそれをしない代わりに、「functions.php」のファイルを作成し、そこで親から子への引き継ぎをおこなっています。

子テーマの有効化とエラーが出たときに確認すること

子テーマ内に作成したファイル

「child」のフォルダ内に、「style.css」と「functions.php」のファイルの作成が完了したら、WordPressの「テーマ」画面にもどって、ページを更新してみましょう。

ワードプレスに反映された子テーマ

問題がなければ、このように「Child(子テーマ)」が、インストール済みのテーマに表示されているはずなので、ここで「有効化」をクリックします。

有効化された子テーマ

無事に有効化され、サイトを確認しても異常が起きていなければ、今回の作業も完了となります!

親テーマが見つかりませんのエラー

ちなみに、「親テーマが見つかりません、親テーマをインストールしてください」というエラーや、

壊れているテーマの注意文

「壊れているテーマ:以下のテーマはインストール済みですが、足りない部分があります」という注意文が表示されているときは、「style.css」のテンプレートの名前がまちがっている(大文字やスペースが入っているなど)可能性が高く、

「functions.php」の記述ミスによる表示レイアウト崩れ

ブログのトップページのレイアウトが、このようにめちゃくちゃになっているときは、「functions.php」の記述がまちがっている可能性があります(これは最初に「<php」をつけ忘れている)。

このようなエラーが出たときは、もういちど「FTP」にもどって、ファイルの中身やファイル名を確認し、修正してあげるようにしましょう。

公式テーマのインストールと、子テーマの作成は以上となります。

今回のまとめ

・公式テーマ「Twenty」シリーズのインストールは簡単
・子テーマの作成は1つのフォルダと2つのファイルをつくる
・ブログには「Twelve」や「Sixteen」がおすすめ

今回はわけあって「Twenty Twenty」を使ってみることにしましたが、ブログで公式テーマを利用するのであれば、「Twelve」や「Sixteen」などのほうがデザイン的にも向いていると思いますし、カスタマイズ情報を公開されている方も多いため、実際に使用する場合はそれらのほうがいいのではないかと思います。

ただ、カスタマイズの基本的な方法さえわかってしまえば、どのテーマでも使いこなすことができるともいえるので、次回は、今回使えるようにした「Twenty Twenty」を使って、カスタマイズの基本をお話ししつつ、サイトをいじってみることにしたいと思います。

「Twenty」シリーズにもいろいろとありますが、デザインをいじる方法は、基本的にどのテーマも変わりません。ぜひ好きなテーマや、気に入ったテーマを選んでみてください。

スポンサーリンク
この記事をシェアする

コメントを残す

日本語が含まれない投稿は反映されませんのでご注意ください。なお、コメントは承認制となっているため、反映までにお時間をいただく場合などがございます。