【WordPress】自作でオリジナルテーマを作成する方法【その①】

この記事では、《HTMLページを元に、WordPressのオリジナルテーマを作成する方法》について、ITエンジニアの僕が学習した内容をまとめています。
  • 開発環境の準備
  • テーマフォルダの準備
  • テンプレート化の基本

このあたりについて解説します。
※本記事は、自分で学習したことのまとめ用として書いています。
尚、WordPressの解説で誤った点があれば、スローして頂ければ喜んでキャッチしますのでお願い致します。

開発環境の準備

開発環境の準備
WordPressのテーマ保管場所に、これから作成するWordPressテーマのフォルダを作成します。
フォルダの名前は自由に設定してOKですが、必ずデフォルトテーマ『twentyseventeen』などと同じ階層に作成してください。
※本記事では、フォルダ名を『demo』として、解説していきます。
開発環境の準備
上記のような感じです。今後はこの『demoフォルダ』上でテーマ制作作業を行っていきます。

テーマフォルダの準備

外部ファイルのアップロード

テーマで使う外部ファイルはフォルダ内で管理します。
ダウンロードしたHTMLデータから『cssフォルダ』と『imagesフォルダ』を、demoフォルダ内にアップロードします。
外部ファイルのアップロード
ちなみに、ブログの記事内の画像など、投稿や固定ページ作成画面でアップロードした画像は、demoフォルダ内には保存されず、別の場所(wp-content > upload)に保存されます。

style.cssの準備

HTMLデータ内のstyle.cssをdemoフォルダにアップロードします。
style.cssの準備
また、アップロードしたstyle.cssをテキストエディタで開き、冒頭にスタイルシートヘッダーを記述します。
style.cssの準備
上記のような感じです。

スクリーンショットの準備

テーマのスクリーンショットscreenshot.pngをdemoフォルダにアップロードします。
スクリーンショットの準備
本来は完成後のテーマのキャプチャであることが望ましいですが、現時点ではデザインデータから仮のモノを作成してOKです。
PNG形式の画像をdemoフォルダ内に『screenshot.png』という名前で保存することで、テーマのスクリーンショットとして認識されます。

index.phpの準備

テーマには、index.phpが必要です。
現時点では中身はコーディングせずに、空のファイルを作成するだけでOKです。
index.phpの名前を付けてファイルを作成すれば、テーマとして認識されます。
index.phpの準備

テーマの確認

WordPressの管理画面にログインをして、作成したテーマが認識されているか確認しましょう。
『外観 > テーマ』に進むと、作成したテーマが表示されているはずです。
テーマの確認
上記のような感じです。
また、『有効化』の箇所を押して、作成したテーマの詳細を確認してみましょう。
テーマのスタイルシートヘッダーに記述した内容が反映されているはずです。

そして、有効化したテーマをサイト上で確認してみましょう。
下記の画像の赤枠にある『サイトを表示』を押すと確認できます。

 ※この時点ではまだ有効なテンプレートが1つもない状態ですのでサイトは真っ白です。
必要に応じてデフォルトテーマと開発中テーマを切り替えながら進めましょう。

テンプレート化の基本

テンプレート化の基本

header.phpの作成

WordPressのテンプレートファイルは、HTMLコードを元にして動的生成が必要な箇所をテンプレートタグに置き換えていく作業が基本になります。
練習としてヘッダー部分を担うテンプレートパーツheader.phpを作成しながら解説します。
demoフォルダ内にheader.phpを作成します。
header.phpの作成
HTMLページからヘッダー部分のHTMLコードをコピーして、header.phpに貼り付けます。
注意点としては、一般的にheader.phpに記述する内容はデザイン上のヘッダー部分だけではなく『head要素 + デザイン上のヘッダー部分』ということです。
具体的には以下のソースコードになります。

HTML

そして、上記のコードの中から動的生成が必要な箇所をテンプレートタグに置き換えていきます。
また、いくつかHTMLコードには存在しない行を追加することもあるので、下記に記載するコードを注意深く見てみて下さい。
※各テンプレートタグの詳細については、テンプレートタグ – WordPress Codexを参照してください。
header.php

まだ、サイトを表示しても真っ白な画面が表示されると思うので、まずは真っ白だということを確認してみてください。
header.phpをコーディングしてもトップページが真っ白なままの理由は、index.phpからheader.phpを呼び出せていないからです。
header.phpはパーツであって、まとめ役ではありません。
なので、パーツのまとめ役であるindex.phpheader.phpを呼び出す必要があります。
index.php

index.phpに1行書くことで、header.phpを呼び出すことができます。
そして、これでもう一度確認してみましょう。ヘッダー部分が表示されるはずです。

URLを出力するテンプレートタグ

header.phpでは、URLを出力するテンプレートタグ(関数)がいくつも使われています。
例えば、<?php echo get_template_directory_uri(); ?>は使用中テーマのURLに置き換わり、出力されたページ上ではhttp://サイトのドメイン等/wp-content/themes/demo/のようになります。
また、<?php echo home_url(); ?>はサイトトップページのURLに置き換わり、主にaタグ内で使用します。
テンプレートタグは、テンプレートファイル内で頻繁に使用しますので覚えておくのがオススメです。

固定ページのURL

固定ページのURLは以下の形になります。

http://サイトのドメイン等/固定ページスラッグ/

また、階層を持つ固定ページの場合のURLは、以下の形になります。

http://サイトのドメイン等/親ページのスラッグ/子ページのスラッグ/

そして、サイトURLの箇所はテンプレートタグにより出力しますので、固定ページURLは以下の形になります。

header.php

テンプレート化の3つのコツ

テンプレート化の3つのコツ
HTMLをテンプレート化する際のコツを3つご紹介します。

  1. URLは全てテンプレートタグに置き換える
  2. 投稿に関する情報を表示する時は、必ずループを作成する
  3. <?php wp_head(); ?> と &lt;?php wp_footer(); ?>を忘れない

それでは、ひとつずつ解説していきます。

コツ①:URLは全てテンプレートタグに置き換える

まず1つめは、他ページへのリンクや外部ファイル・画像などを参照するURLは全てテンプレートタグに置き換えることです。
1つのテンプレートが様々な階層のページで使用される可能性があるので、相対パスの使用は厳禁です。直接パスで指定すれば問題は起きないと思うかもですが、仮にサイトのドメインが変わることになれば全て書き直しになってしまいます。
サイトのドメインが変わる例としては…
ドメインの異なる兄弟サイトで使用したい場合や、サーバーのSSL化に伴い http から https に変わる場合などが考えられますが、最も大きな理由は今回のようにURLの異なる開発環境上でテーマ開発をすることができない、というです。
そのため、外部ファイルに対してリンクや参照をする箇所はテンプレートタグを使用することが推奨されます。

コツ②:投稿に関する情報を表示する時は、必ずループを作成する

2つめは、投稿に関する情報を表示したい時は、必ずループを作成することです。
ページで表示される投稿(固定ページ)についての情報は、ループ内でしか取得することはできません。また、使用したいテンプレートタグが『ループ内専用』か『どこでも使用可能か』についても気を付ける必要があります。
例えば、サイト名を表示する<?php bloginfo(‘name’); ?>はどこでも使用することができますが、投稿タイトルを表示する<?php the_title(); ?>はループ内でなければ使用できません。
※これらの情報は、テンプレートタグ – WordPress Codex内の各テンプレートタグの説明で確認できます。

コツ③:<?php wp_head(); ?> と &lt;?php wp_footer(); ?>を忘れない

3つめは、<?php wp_head(); ?><?php wp_footer(); ?>を忘れないことです。
header.phpでも使用した<?php wp_head(); ?>は、全てのテンプレート内の</head>タグ直前に必ず挿入します。このタグが無いと、一部のプラグインや機能が正しく働かなくなります。
同様に、<?php wp_footer(); ?>というタグは</body>直前に必ず挿入します。

まとめ

まとめ
開発環境の準備 〜 テンプレート化の基本については、理解できたかと思います。
また、これ以降の作業については次の記事で解説していきます。

次に読みたい記事

≫【WordPress】自作でオリジナルテーマを作成する方法【その②】

人気記事

≫【2019年最新】IT転職におすすめの転職サイト・転職エージェント3選
≫【無料あり】現役エンジニアおすすめすのプログラミングスクール3社 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です