こんにちわ！おぐらです！
WordPressのテーマ自作に関する記事をいくつか書いてきましたが、意外と知らないことも出てきたりしたので改めて勉強しています。
はじめたばかりの頃のなにもわからない状態よりは、はるかにマシになったと思いますが、まだまだ未熟なところも多いです。
ということで今回は初心に返り自作テーマのベースをつくる方法をお話します。
これからテーマを自作するけどなにからはじめたらいいのかわからずに止まっている。
自作テーマ入門したい。
そんな方にオススメの記事です。
WordPress自作テーマのベースをつくろう
はじめたばかりの人でもわかりやすいように、極めて簡単なテーマを例にテーマのベースをつくる手順を解説します。
テーマを自作する時は必ず通る道なので、最低限流れだけでも覚えておいてください。
ディレクトリとファイルを準備
なにはともあれまずはテーマを構成するファイル群を格納するディレクトリを作りましょう。
テーマディレクトリはwp-content/themesの下に配置します。
わたしは今回「おぐらパラダイス」というテーマをつくることにしたのでogura-paradiseというテーマディレクトリを用意しました。
みなさんは任意で素敵なテーマをつくってくださいね。
つづいて、テーマに必要なファイルを用意しましょう。。
WordPressのテーマをつくるのに最低限必要なファイルは次の2つです。
- index.php
- style.css
index.phpはサイト側すべてのページの源流となる重要なテンプレートファイルです。
そしてstyle.cssはCSSファイルですが、テーマの名前などを設定するために必須となっています。
最低限のアイテムはそろったのでこのセクションは終了です。
と言いたいところですが、今回は管理画面に表示するテーマのサムネイルも用意しちゃいました。
一般的にテーマを利用したサイトのスクリーンショットを設定してあることが多いのですが、テーマのイメージを尊重してパラダイス感高めの画像を選びました。
サムネイルはscreenshot.jpg（またはpng）というファイル名でテーマディレクトリ直下に配置すると自動的に表示してくれますよ。
画像サイズは1200×900。
個人でつくるテーマであればまったく必要ありませんが、もし仕事などで要望があれば設定しましょう。
テーマの詳細設定と有効化
次のステップはテーマの詳細、たとえば名前や説明などを設定します。
テーマの設定が終わったら管理画面からテーマを有効化しましょう。
まずテーマの詳細はstyle.css内のスタイルシートヘッダで設定します。
スタイルシートヘッダとはCSSファイルの先頭に書いてあるコメント部分のことです。
スタイルシートヘッダ内で決められたキーに値を設定することでテーマの詳細を設定できるわけです。
なにを言ってるのかわからないと思うので実際のコードを見てください。
/*
Theme Name: おぐらパラダイス
*/上の例ではテーマ名を「おぐらパラダイス」に設定しています。
Theme Nameキーに対して値を設定することで、管理画面のテーマページで名前を表示してくれます。
キーはたくさん種類があって必ずしも全部書く必要はありません。
今回のチュートリアルではstyle.cssを次のように設定しました。（スタイルの指定はなし）
@charset "utf-8";
/*
Theme Name: おぐらパラダイス
Text Domain: ogura-paradise
Version: 1.0
Description: Lead you to paradise...
Author: Ogura from canonono.com
Author URI: https://canonono.com
Theme URI: https://canonono.com
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
キーからなんのことか推測はできるかと思いますが、わかりにくいのもありますね。
Text Domainは多言語化にかかわるところなので気にしなくても大丈夫です。
LicenseおよびLicense URIはプライベートであれば意識する必要ありませんが、今回は一般的な例としてGPLを設定しています。
テーマの設定が終わったら、管理画面の外観＞テーマページを開いてつくったテーマがあるかを確認しましょう。
つくったテーマが表示されない、何かしら警告がでている状態ならstyle.cssの記述に問題がある可能性が高いです。
テーマに問題がなければ有効化しましょう。
index.phpがまっさらなのでサイトを見ても真っ白の状態のはずです。
次はindex.phpを編集して投稿を表示してみましょう。
テンプレートファイルを使って投稿を表示する
さっそく試しにindex.phpを編集してみましょう。
つぎのコードをコピペしてサイトを開いてみてください。
<h1>Hello WordPress!</h1>
Hello WordPress!と表示できているのでindex.phpが読み込まれていることが確認できました。
同じドメインでどんなページURLにアクセスしても同じ表示になることを覚えておいてください。
画像のとおり存在していないページにアクセスしてもHello WordPress!と表示されていますね。
これはWordPressがすべてのアクセスをindex.phpに集めているからです。
今回詳しく話しませんが、WordPressのテンプレート階層を理解する上で重要なポイントです。
index.phpしかない時にこのような動作になることを覚えておきましょう。
index.phpを使えることを確認できたので、投稿記事を表示してみましょう。
先程のコードは削除してHTMLを追加します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<?php wp_head(); ?>
</head>
<body>
<?php wp_footer(); ?>
</body>
</html>
headやbosy要素など一般的なHTMLの構造を追加しました。
合わせてPHPでwp_headとwp_footerを追加してます。
wp_headとwp_footerはテンプレートタグと呼ばれていいるもので、WordPressの用意してくれている便利な機能です。
wp_headではheadセクションに必要なタイトル要素やLink要素などを出力してくれます。
wp_footerではbody要素の終了タグ前に主にJavaScriptを出力します。
どちらもWordPressの機能を活用するために必須ですよ。
次に投稿の一覧を表示するコードを追記します。
body要素内のwp_footerより上に加えてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<?php wp_head(); ?>
</head>
<body>
<main>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<section>
<h2><a href="<?php the_permalink(); ?>"> <?php the_title(); ?> </a></h2>
<div> <?php the_content(); ?> </div>
</section>
<?php endwhile; endif; ?>
</main>
<?php wp_footer(); ?>
</body>
</html>
追加できたらサイトのトップページを開いてください。
投稿のタイトルと本文を一覧で表示できていますね。（わたしの環境では投稿が2件しかないので2件しか表示しません）
投稿を表示するのに大事なのことは次の2つです。
- have_posts
- the_post
かなりざっくりですが、have_postsは投稿があるかどうかを教えてくれます。
先述したコードを見てもらうとif文とwhile文の中で使っていますね。
if文は条件分岐に使うもので、もしも「投稿があるならば」endifとの間にある処理を実行します。
while文は繰り返し処理に使うもので、「投稿があるならば」endwhileとの間にある処理を繰り返し実行します。
have_postsは条件分岐や繰り返しの条件になっているんですね。
ちなみにプログラムは基本的に順次実行、条件分岐、繰り返しの3つの構造でできているので条件分岐と繰り返し（反復処理）を覚えるだけでも理解度は高まりますよ。
カンのいい人だと「投稿があるならば」繰り返すのであれば、無限ループになるのではないかと思ったのではないでしょうか。
まさにそのとおり！そこでthe_postの出番です。
the_postは繰り返しを次の投稿に進めてくれます。
次の投稿を持ってきて現在の投稿はこれだよと教えてくれる感じですね。
そしてthe_postによってどんどん次の投稿に進めていくことで「投稿がない」状態になります。
投稿がなくなると繰り返す時にhave_postsが「投稿がない」ことを教えてくれるのでwhile文を抜け、繰り返し処理を終えることができるんですね。
簡単ですが、以上が投稿の一覧を表示している仕組みです。
最後にsection要素の中で使っている3つのテンプレートタグを紹介します。
- get_permalink
- the_title
- the_content
get_permalinkは投稿のパーマリンクを出力してくれます。
a要素のhref属性の値として使うことでタイトル部分を投稿ページへのリンクにしています。
the_titleは名前の通り投稿のタイトルを、the_contentはエディターで入力した本文を出力します。
これら3つのテンプレートタグは、例のような繰り返し処理の中でしか使用できない点に注意してください。
タイトルをクリックして投稿ページを表示してみましょう。
Hello Worldのページに移動すると投稿はひとつだけしか表示されないことを確認してください。
冒頭でどのURLでも同じ表示になると言ったことを覚えていますでしょうか。
実は最初の例のようにテキストを直接記述しているだけの静的なコードの場合は同じ表示になりますが、データベースから投稿を取得してくる場合は違います。
データベースから投稿を持ってくる時、WordPressはURLでどんな投稿を持ってくるかを判断しているんです。
そのためトップページでは一覧を、詳細ページでは/hello-world/というURLから投稿を選んで取得してくれます。
結果、トップページでは2件表示していたのに対して、詳細ページでは1つ投稿を表示します。
ちょっと難しいと思いますが、index.phpの内容が同じなのにページによって結果が変わる理由を理解していただけたでしょうか。
ちなみに適当なURLでアクセスすると1つも表示できないと思います。
これはURLに対してなにもデータを取得できないからです。
テーマの機能を追加する
無事に投稿を表示できたので、functions.phpを追加して機能を追加しましょう。
今回はテーマに次の機能を追加します。
- 投稿にアイキャッチ画像を設定できるようにする
- head要素内で自動的にtitle要素を出力する
当ブログを見てくださっている方にはお馴染みかも知れませんが、add_theme_supportでそれぞれ有効化しましょう。
次のコードをfunctions.phpに記述します。
add_action( 'after_setup_theme', 'setupTheme' );
function setupTheme() {
add_theme_support( 'post-thumbnails' );
add_theme_support( 'title-tag' );
}
管理画面を見るとアイキャッチ画像を設定できるようになりました。
tittle要素もwp_head内で出力されています。
せっかくなのでindex.phpを編集してサムネイルを表示してみましょう。
section要素内h2見出しの上にPHPコードを追加します。
<section>
<?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'medium' ); } ?>
<h2><a href="<?php the_permalink(); ?>"> <?php the_title(); ?></a></h2>
<div><?php the_content(); ?></div>
</section>
再びif文が登場しました。
if文の括弧内には「投稿にアイキャッチ画像が登録されているか」を教えてくれるhas_post_thumbnail関数を書いてあります。
すなわち、もしも「アイキャッチ画像が登録されてるならば」if文波括弧内の処理を事項します。
if文内ではthe_post_thumbnail関数を呼び出してアイキャッチ画像を出力しています。
mediumというのはアイキャッチ画像をどんなサイズで出力するかの指定です。
デフォルトではfull、large、medium、thumbnailがあり、省略すると原寸で出力されます。
これで一旦おぐらパラダイスは完成しました。
ベースができたのであとはお好みでテーマを作り上げるだけです。
テーマづくりは簡単にはじめられる：初心者でも大丈夫
テーマ自作というとハードルが高いイメージを持たれるかもしれません。
しかしここまで説明してきたような超簡単なテーマであれば初心者でもつくれます。
こんな簡単なテーマつくっても意味ないと思うかも知れませんが、はじめから複雑なテーマを作ろうとして挫折するよりは、ひとつひとつ積み上げて学んでいく方法のほうが有効なのではないかと思っています。
ゼロからはじめるメリット
小さくはじめればファイル、コードの量は多くありません。
結果何がどういった役割でどのように動くかを理解しやすくなります。
たとえばWordPress学習で初心者のつまづきやすいポイントのひとつにテンプレート階層があります。
はじめたばかりなのにいきなり「テンプレートファイルの優先度」とかarchive-hogehoge.phpとか言われても意味わからなくて思考停止しちゃいませんか？。
テンプレート階層もたくさんのテンプレートファイルがある状態からスタートするのではなく、まずはindex.phpだけからはじめてみてはいかがでしょうか。
一気に複雑なテンプレート群を理解するよりも、ひとつのテンプレートファイルに集中するほうが簡単ですよね。
そして必要に応じて優先度の高いテンプレートファイルを増やしていきましょう。
何がどこに使われるのか、なぜ別のテンプレートファイルを使うのか？など順を追って理解して行くことが上達への近道です。
わたしも昔テンプレートファイルをたくさん持っていて、コードの量も多いテーマをカスタマイズしようとして失敗したことがあります。
ゼロから簡単なテーマをつくるのことには挫折してしまうリスクを低くすることと、理解度を高めやすくできるメリットがあると考えています。
はじめは完成度より理解度が大事
はじめから完成度の高いテーマをつくるのも無理ではないと思いますが、それ相応の時間とエネルギー、モチベーション維持が必要です。
はじめたばかりの方はまずは一度簡単なものを作り上げてみてはいかがでしょうか。
クオリティを上げるより前に①理解度を高める、②完成させるを重視することをオススメします。
アウトプットする習慣をつけたほうがいいですし、なんとなくできたと十分理解できているでは雲泥の差があるからです。
コツコツを積み上げよう
別の記事でも話しましたが、テーマをつくることはWordPressの学習としては一番良い方法だと思うので、スキルを磨きたいと思っている方は、どんどんつくってみてください。
自作に関してはfunctions.phpに関してや、そもそも自作するメリットとはみたいな記事も公開しています。
気になる方はチェックしてみてくださいね。
