htmlで作ったサイトをWordPressのテーマに変換する流れ
htmlで作った静的サイトをWordPressに変換する流れを順を追って説明していきます。
なお、管理画面のカスタマイズやウィジェットの実装等は含まない最低限の部分に留めています。
WordPressのローカル開発環境
WordPressのローカル開発環境はLocalがおすすめです。手元のスマホでもローカルのサイトが確認できたりしちゃいます。
Local | Local WordPress development made simple
style.cssの編集
style.cssの最上部にWordPressテーマとしての情報を入力します。
/*
*Theme Name: hoge
*Author: hoge
*Description: hoge
*Version: 1.0.0
*/
これでstyle.cssがWordPressテーマとして認識されます。hogeの部分はお好きなものに変更してください。
.htmlを.phpに変更
index.htmlなどを.phpに変更していきます。
- index.php(ホームページ)
- single.php(投稿ページ)
- page.php(固定ページ)
- category.php(カテゴリページ)
- tag.php(タグページ)
- search.php(検索結果ページ)
- author.php(著者ページ)
ちなみにWordPressの最小構成単位はindex.phpとstyle.cssです。
index.phpがないとWordPressは動きません。
カテゴリやタグページなどを同じデザインのもので適用するのであれば、archive.phpでもOK。
詳しくはWordPressのテンプレート階層を参照してみてください。
[寄り道]ホームページはhome.phpじゃないのか？
上記の構成でindex.phpをホームページとしていますが、厳密に言うとそうではありません。
ホームページ、つまりトップページとなる箇所はfront-page.phpやhome.phpで指定します。
どういうことか？
WordPressでテンプレート階層と呼ばれるものがあり、ユーザーが特定ページにアクセスした場合、以下のような流れを取ります。
ユーザーがトップページにアクセス
↓
front-page.php(なければ次に)
↓
home.php(なければ次に)
↓
index.php
これはアーカイブページにも同じことが言えます。
つまり、index.phpは全てのページの最終防衛ラインのようなもので、home.phpやcategory.phpの記載がないテーマは最終的にはindex.phpを返す形になります。index.phpとstyle.cssが最小構成単位たる所以ですね。
テーマによっては最初からhome.phpを記述していなくて、トップページの記述をindex.phpに任せているものもあります。
front-page.phpとhome.phpとindex.phpの関係
index.phpにテンプレートタグを挿入
headの閉じタグ直前に以下のコードを挿入。
ヘッダーやフッターの分割
次にヘッダーやフッターを分割していきます。WordPressではヘッダーやフッターなどのまとまりを別ファイルに記述し、呼び出すことができます。
これ、けっこう便利で別ファイルに記述しておけば修正する時はそのファイルだけで済みます。
新たにheader.phpというファイルを作成し、index.phpのheadタグ内のコードをカット→ペーストします。
index.phpの抜けた箇所には、以下のコードを記載します。
これで、header.phpに記載したheadタグ内のコードが呼び出されます。
同じ要領でフッター 、サイドバーと分割していきます。
sidebar.phpとfooter.phpを作成→抜けた箇所に以下を記述。
パーツの分割
ヘッダーやサイドバー、フッターの分割はWordPress側で用意されているテンプレートタグで対応可能です。
独自で分割したいパーツがある時はどうすればよいのでしょうか？
他ページでも使い回す、メニューやページネーション 、パンくずリストなどですね。
この場合は、パーツ分割用のフォルダを作り、そこにパーツごとのphpファイルを用意することで対応できます。
名称は何でもOK。分かりやすい名前を付けましょう。(例：parts、includes、partial)
ヘッダーと同じ要領で記載されているコードをごっそり移行し、抜けた箇所には以下のコードで呼び出します。(includesと名付け)
これでindex.phpのパーツを分割しました。他のphpファイルでも共通部分は差し替えます。
記事一覧の表示
index.phpにトップページの記事一覧を出力させます。
と、その前にまず記事が存在しない時のif処理を記述します。
記事一覧のループ処理は以下となります。
とりあえず、確認用にタイトルだけ出力。
肝が<?php the_post(); ?>
これなしで一度、実行してみてください。1記事だけのタイトルがずらっと表示されるはずです。
the_post()はループ内でのカウント処理を担っており、処理が回るごとに1、2、3とカウントアップしていき次の記事を表示させます。
アイキャッチ画像の設定と出力
現状、記事一覧ではタイトルのみの出力となります。ほとんどのデザインではアイキャッチ画像があると思うので、こちらも適用させます。
ですが、デフォルトの状態ではアイキャッチ画像は投稿ページから設定できません。
functions.phpにアイキャッチの使用の宣言するコードを記述することで、対応できます。
functions.phpというファイルを新規作成し、以下を記述。
<?php
add_action('init', function() {
add_theme_support('post-thumbnails');
});これで投稿画面からアイキャッチ画像の設定ができます。
なお、index.php側でアイキャッチを出力するには以下のコードで対応します。
the_post_thumbnail_url( 'medium' );引数はlargeなど複数ありますが、mediumくらいが丁度良いと思います。
記事のURLと最終更新日付の出力
記事一覧で他にも情報を表示したい時もあると思います。
これで、記事の個別URLを出力させます。
記事の最終更新日付を出力させます。
カテゴリーやタグページの記事一覧出力
カテゴリーやタグページでも記事一覧を出力すると思います。
これについてはトップページと同じコードでOK。カテゴリやタグにフィルタリングされた記事のみが出力されます。
一点、注意点としては投稿ページによくある関連記事などの記事ループ処理。
この場合、投稿のカテゴリーを取得して、そのカテゴリーの記事一覧を出力するなど記述が必要になります。
メニューの実装
メニューもアイキャッチに同じく、デフォルトのままでは管理画面から設定できません。
functions.phpに以下のコードを記述します。
register_nav_menus([
'global_nav' => 'グローバルナビゲーション'
]);index.php側での出力は、以下で対応。
サイトタイトルの出力
管理画面で設定したサイトタイトルが表示されます。
引数にdescriptionを取ると、サイトのサブタイトルが出力。
引数にurlを取ると、サイトのトップページURLが表示されます。
