WordPressで最も小さなテーマを作成して、PHPやHTMLの書き方を習得する
Theme
WordPressのテーマを作成するのに必要なファイルは2つしかない、ということを前回の記事でお伝えしました。将来的には、ほかにもたくさんのファイルが必要になるのですが、いきなりちゃんとしたテーマを作ろうとすると、WordPressをしっかり理解することができません。
この記事からは、最小構成のテーマを使って、テーマ作成に必要なスキルを順番に学習していきたいと思います。
なお、WordPressを動作させる環境が揃っていない方は、次の2つの記事を参考にして先にセットアップしておいてください。
自分のテーマを有効化しよう
早速ですが、まずは自分のテーマを作成して有効化するところまでいきましょう。
子テーマを作成したときと同じように、themeフォルダに自分のテーマのフォルダを作成します。
C:\xampp\htdocs\your-site-name\wp-content\themes
フォルダの名前は、小文字とハイフンだけで構成してください。ぼくは「minimalist」としてみました。
このフォルダの中に、次の2つのファイルを作成します。
- style.css
- index.php
実はこれだけでもテーマは動作するのですが、もう少しわかりやすくしておきます。
まず、style.cssには次のように記述してください。
/*
Theme Name: Minimalist
Description: A minimal theme for WordPress
Author: Jun Akizaki
Version: 1.0.0
*/| Theme Name | テーマの名前を入れます |
| Description | テーマの説明を記載します。必須ではありません |
| Author | 作者の名前を入れます。必須ではありません |
| Version | バージョン番号です。必須ではありません |
コメントを用いて記載されるこの部分は「スタイルシートヘッダ」と呼ばれ、テーマに関する情報を記載し、WordPressに認識させます。
テーマを公開したり、配布したりする場合は、ライセンス情報やURLなどを、ここを参考に追記してください。
次に、index.phpには次のように書いてみます。
<?php echo 'Hello, WordPress!'; ?>とりあえずコピー&ペーストで大丈夫です。保存したら、テーマを有効化してみましょう。
有効化に成功したら、サイトを表示してみてください。
真っ白のページの左上に”Hello, WordPress!”と表示されていれば成功です。
これで練習環境が準備できました！
PHPコードの書き方
上のコードについて
先ほどindex.phpに記述した<?php echo 'Hello, WordPress!'; ?>について少し解説していきます。
まず、PHPのコードを動作させるには、<?php /* code */ ?>タグで囲む必要があることは前回の記事で説明しました。
では、次に出てくるechoとは何でしょうか。
PHP言語構造
echo (string $arg)
文字列$argを出力します。echoは特殊な構造なので、使用するときに()は必要はありません。
echo '出力したい文字';のように使います。
文字をシングルクォーテーション（またはダブルクォーテーション）で囲むと文字列（文字のデータ）になります。文字列をechoするとHTMLとして出力されるので、ブラウザに表示することができます。
最後に、処理を書き終わったら”;“（セミコロン）を記述します。1行の処理の終わりにはセミコロンを忘れないようにしてください（忘れるとエラーになって画面が真っ白になります）。
少し練習してみよう
処理を複数行書く場合は、次のように記述できます。
<?php
echo 'Hello, WordPress!';
echo 'WordPressでテーマを作成していきます。';
?>これを実行するとどのようになるか想像できるでしょうか。
2行の文字列が表示されそうですが、実際には次のように1行で表示されます。間にスペースも入りません。
では、改行したい場合はどのようにすれば良いでしょうか。HTMLでは<br />を使って改行したり、<p>で段落を形成したりますね。ぼくはあまり<br />が好きではないので、<p>を使って改段落してみます。
<?php
echo '<p>Hello, WordPress!</p>';
echo '<p>WordPressでテーマを作成していきます。</p>';
?>文字列の中にHTMLタグを記述すると、そのまま出力されます。
段落が形成され、2行の表示になりました（ブラウザ上で右クリックして[ページのソースを表示]からソースを確認してみると、よりわかりやすいと思います）。
このように、echoは文字だけでなく、HTMLのタグも出力することができます。
<?php
echo '<h1>Hello, WordPress!</h1>';
echo '<p>WordPressでテーマを作成していきます。</p>';
?>と<h1>を記述すれば
見出しとして出力されます。簡単ですね！
HTMLコードの書き方
引き続きindex.phpで練習していきます。
HTMLのコードは、PHPファイルに直接記述することができます。index.phpの中身をすべて消して、次のようなHTMLを書いてみましょう。
<!DOCTYPE html>
<html>
<head>
<title>HTML</title>
</head>
<body>
<h1>Hello, WordPress!</h1>
<p>WordPressでテーマを作成していきます。</p>
<p>WordPressをダウンロードするには <a href="https://wordpress.org/">ここ</a>をクリックしてください。</p>
</body>
</html>何ら変哲もないHTMLですね。ブラウザで確認すると次のようになります。
このように、HTMLコードはこれまでの静的なWebサイトと全く同じように記述することができます。
PHPとHTMLを混ぜて記述してみよう
PHPファイル内には、PHPとHTMLのコードを混ぜて記述することができます。
<!DOCTYPE html>
<html>
<head>
<title>PHPとHTML</title>
</head>
<body>
<h1><?php echo 'What day is today?'; ?></h1>
<p>Today is <span style="color:red"><?php echo date("l"); ?></span>, I think.</p>
</body>
</html><h1><?php echo 'What day is today?'; ?></h1>は先ほどど異なり、h1タグの中でechoを呼んで文字列を出力しています。
<p>Today is <span style="color:red"><?php echo date("l"); ?></span>, I think.</p>では、date()という関数（機能）を使って、今日の曜日を出力しています。動的に出力しているので、アクセスする日ごとに曜日が変わります。
ここで、前回の記事の内容を思い出してください。テーマを構成するPHPがテンプレートと呼ばれる理由を、single.phpの例を用いて解説しました。
ここから想像すると
<!DOCTYPE html>
<html>
<head>
<title>HTML</title>
</head>
<body>
<h1><?php /*記事のタイトルを取得する処理*/ ?></h1>
<p><?php /*記事の本文を取得する処理*/ ?></p>
</body>
</html>と書ければよさそうですね。厳密にはこれでは少し足りないのですが、考え方はまさにその通りです！
せっかくなので、片鱗を見ておきましょう。
まず、この記事を参考に、記事を投稿しておいてください。”Hello, World”の記事が残っている場合は、特に投稿の必要はありません。
つづけて、コードを次のように変更します（テストコードですので、厳密には間違っています）。
<!DOCTYPE html>
<html>
<head>
<title>HTML</title>
</head>
<body>
<h1><?php the_post(); the_title(); ?></h1>
<p><?php the_content(); ?></p>
</body>
</html>ブラウザで確認してみましょう。
投稿した内容が表示されていますね！ 意外に簡単に記事を表示することができてしまいました。
コードを見ると、いくつか謎の記述があります。名前から少し推測できますが、the_title()がタイトルを取得する関数（命令）、the_content()が記事の内容を取得する関数です。
これらの詳しい説明はまた後の記事で行いますので、ここではコーディングのイメージがつかめれば大丈夫です。
関数
関数とは、いくつかの処理をまとめて名前をつけたものです。常に「関数の名前（）」の形をしています。（）の中は空の場合もあれば、何か入れる場合もあります。（）の中に入れるものを引数（ひきすう）といいます。
おわりに
今回は、自分のテーマを有効にして、PHPやHTMLコードの書き方について説明してきました。次のチェックリストで、理解度を確認してみてください。
- 新規テーマを作成して、有効化することができる
- index.phpにPHPコードを記載することができる
- index.phpにHTMLコードを記載することができる
- index.phpにPHPとHTMLコードを混ぜて記載することができる
さて、とうとうPHPが登場してしまいましたので、次回は最低限必要なPHPコードの知識について説明していきます。index.phpが空っぽな今が練習する絶好のチャンスです！
つづけて読む
この記事には続きがあります。
ぜひ合わせて読んでみてください！
Comment