「WordPressオリジナルテーマ化」手順を制作事例から８ステップでご紹介【Web制作の流れ⑤】

• HTML知識のない人でもブログ等更新管理できるようにオリジナルサイトを「WordPressテーマ」にする流れが８つのステップで分かる

実体験をベースに記事を作成していますので参考になれば幸いです。

「WordPressテーマ化」手順を制作事例からご紹介

「コーディング」手順を制作事例から7ステップでご紹介【Web制作の流れ④】に続いて最後に「WordPressテーマ化」について書いてみます。

Web制作（オリジナルサイト制作）の全体の流れは

• その１「企画」
• その２「設計」
• その３「制作：デザイン」
• その４「制作：コーディング」
• その５「制作：WordPress」

となっておりこの記事はその５「制作：WordPress」となります。

その４「制作：コーディング」でブラウザに表示できるようになりました。これでサーバーにデータをアップさせてドメイン設定などすればもうWebサイトとして全世界に公開されることになります。

ここで納品！でもいいですが

• HTML知識の無いお客さんが自分で簡単にブログや事例を更新したり
• 問い合わせフォームを簡単に設置したり
• ブログの新着記事を自動でトップページに表示させたり

ということが必要になることがあります。特にブログ更新などはお客さん自身でやってもらわないといちいち新しいHTMLファイルを作ってサーバーにアップして、なんてことをしないといけません。毎月保守費用をもらってこちらが実施するのもいいですけど、お客さんの利便性を考えるとブログなんかは即時アップさせたいですよね。

そこでWordPress！

この記事ではオリジナルサイトをデザインからコーディングまで終了した後でWebサイトを更新管理できるようにするためにWordPressテーマ化する方法を８ステップにわけて書いてみます。

HTML,CSSのコーディングフォルダをみてトップページのHTMLファイル（index.html）とstyle.cssを探します。下がHTML,CSSのコーディングフォルダの中身。

トップページのHTMLファイル（index.html）をindex.phpに名前を変更させるだけ。

style.cssの文頭にテーマ宣言する

style.cssは文頭にテーマの宣言を追加します。

cssフォルダは作らないで同じ階層にindex.phpとstyle.cssのファイルを入れないと認識しないので要注意。

テーマ画像を作る

screenshot.png

というPNG画像ファイルもテーマフォルダの中に入れておくとどんなテーマなのか画像で表示されるようになります。下の左上のテーマ画像。デザイン画像から画像書き出してもスクリーンショットで画像化してもOK。PNG形式で保存して推奨する画像サイズは 880x660。（WordPress公式オンラインマニュアルWordPress Codex 日本語版の「スクリーンショット」に書いてます）

テーマフォルダに必要なファイルやフォルダを入れる

HTML、CSSコーディング時にcssフォルダとjsフォルダ（jQueryのコードが書いてあるファイルが入っている）とimagesフォルダ（画像フォルダ）を作っているはずなのでそれもごっそりテーマファイルに入れます。

ステップ２：全ページに共通するファイルを作っていく

WordPressは1ページ1ページ作っていくわけではなくて共通化できるところはまとめていきます。

上の図のようにindex.phpを作った後、ヘッダー・サイドバー・フッターは全ページ同じ内容で共通する部品だな、と思れば

• header.php
• sidebar.php
• footer.php

というファイルを作って対象部分（ヘッダー、サイドバー、フッター）のコードをそのまま切り出して部品化します。

切り出されたindex.phpはヘッダーとサイドバーとフッターがなくなってしまうのでなくなった部分は以下の
<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

に置き換えます。index.phpは以下のような構造になります。

header.phpとfooter.phpに必須タグを挿入

header.phpとfooter.phpはヘッダーとフッター部分を抜き出しただけの状態なので絶対必要なタグを挿入します。

（※タグとはWordpressに対して何かを表示・取得させたいときに使うものと考えてください）

• </head>の直前に<?php wp_head(); ?>を挿入
• </body>の直前に<?php wp_footer(); ?>を挿入

header.phpの情報を書き変える

header.phpに転機した情報である

lang属性、エンコーディング情報、ページタイトル出力

の部分をタグで書き換えます。

ステップ３：フォルダ、リンク、画像のパスを変更する

できたファイルでひとまずブラウザに表示させてみても画像もリンクもデザインもうまく表示されません。

なぜなら、パスを変えないといけないから。これは全ページに共通します。

ステップ４：トップページを作る

このオリジナルデザインのトップページをWordPressテーマ化します。

ポイントは

• ファーストビュー直下の新着コラム１件表示
• コラム３件新着表示（問い合わせの上の列）

トップページ用のファイルを作る：テンプレート階層を使う

ファイル名を決まった名前にすると自動的にそれがトップページだったり固定ページだったり投稿ページだったりとWordPressが自動識してくれます。なので

• front-page.php

というファイルを作ってindex.phpの情報をコピーします。front-page.phpがトップページと認識してくれるファイル名だから。

で、テンプレート階層って何なの？というとこれがWordPressテーマ化のポイントでファイル名をある決まったルールの名称にするとWordPress内部で決まった場所のテンプレートとして認識してくれる、という考え方。

テンプレート階層の概観図は以下の図になります。（クリックしたら別タブで表示されます）

引用：WordPress公式オンラインマニュアルWordPress Codex 日本語版「テンプレート階層　４概観図」

この図をみると一番左の列の真ん中あたりに「サイトフロントページ」というところがあります。そこから右矢印を辿ると

• front-page.php　→home.php　→index.php

と続いていきます。これどの名称にしてもトップページとして認識します。でもいろんなページを作っていくとこのファイルがこのページなんだ！と決めつけたいわけです。なので左側の名称にした方がより強い優先度をつけてファイルを特定のページとして認識してくれるので左側のfront-page.phpにしておくということ。

index.phpが一番右ということは最後の砦みたいな感じでこれがどのページの最終受け皿になっています。だからこのファイルがないとWordPressが使えるようにならないのです。

コラム新着情報を出力する：メインループとサブループ

トップページのポイントである

• ファーストビュー直下の新着コラム１件表示
• コラム３件新着表示（問い合わせの上の列）

これを実現させます。これがWordPressのいいところ。ブログ更新したら自動で表示を切り替えて新着情報としてトップページにアップしてくれたら楽でしょ？いちいちトップページのコード書き換えてたら面倒だしお客さんが更新作業できない。

WordPressの管理画面から投稿した内容（タイトルとか本文とか日付とか）を自動的に呼び出してくれるためのお決まりの文があります。

それがメインループとサブループ。

この記事では詳しくループの記述方法について書かないですがめちゃ簡単に説明すると

• メインループ：WordPress管理画面から投稿した内容を表示してくれる
• サブループ：指定した条件通りにWordPress管理画面で投稿した内容を引っ張り出してくれる

ということ。これでHTML知識がない人でもWordPress管理画面からテキスト入力するだけでWebサイトに自動表示してくれます。

• コラム３件新着表示（問い合わせの上の列）

これはサブループを使います。カテゴリー「コラム」に属する投稿した記事の表示数の上限数３件。下のコードを書いてます。

ループの細かい記述内容についてはWordPressの任意のループ（サブループ）を作る方法と覚えておきたい指定方法にわかりやすく説明があります。

ステップ５：下層ページを作る

トップページができたら、他の下層ページを作っていきます。

WordPressでは下層ページは２種類に分けられます。

固定ページと投稿ページ。

ざっくり説明すると

• 固定ページ：更新することがほとんどないページ。会社案内、事業紹介、問い合わせなど。
• 投稿ページ：記事を更新していくページ。ブログや事例紹介など。

サイトマップでいうと赤枠部分が固定ページで、青枠部分が投稿ページ

固定ページ

テンプレート階層のルールでいうと

• page.php

でファイル名を作ります。

固定ページの作り方はけっこう簡単です。

page-company.php

page-service.php

とかpage-スラッグ名.phpと書いてテーマフォルダの中に入れてしまえばスラッグ名と紐づきます。

スラッグ名とはhttps://yuzuskill.com/flow-originalsite5/の「flow-originalsite5」のところです。

※ちなみにカスタムテンプレートとかで作る方法もあります。WordPress公式オンラインマニュアルWordPress Codex 日本語版　ページテンプレート

HTMLでコーディングしたファイル名を「page-company.php」に変更してWordPress管理画面の固定ページ作成画面でURLスラッグ名を「company」とすればOK。

ここに投稿したテキスト内容をページに反映させたかったらさっき出てきた「メインループ」をHTMLの中に書き込めばOK。何も書き込まなかったらHTMLコーディング情報がそのまま表示されます（ただし、リンクや画像のパスはトップページと同様に変更必要）

投稿ページ

テンプレート階層のルールでいうと

• single.php

でファイル名を作ります。

コラムページのファイル名をsingle.phpに変更して記事内容部分を「メインループ」の記述に書き換えるだけでWordPress投稿画面からテキスト入力するだけで記事を更新していけるようになります。

ステップ６：index.phpを４０４エラーページにしてみる

index.phpをfront-page.phpにしてしまったのでindex.phpどうなってるの？と思うはず。

テンプレート階層の最後の受け皿ということで説明しましたが、これを「404 Page Not Found」ページにします。

「404 Page Not Found」とはページが見つからない場合に表示されるページのこと。間違えてURLにプラスして違う文字を入れたら飛ぶページです。このページ作っとかないと使ってるレンタルサーバー の表示が出たりしてセキュリティ的によくないので作った方がいいページですね。僕はシンプルに下の画像のようにしました。

index.phpのヘッダー、フッターをheader.php、footer.phpに入れ替えて中身を

と書き換えるだけ。

普通は見られないページなのでこだわる必要もないかな、と思うんですけど凝ってるサイトもあるようなので下のサイトをご紹介します。面白い！ちなみにLIGの現在の404ページは変わっていてなんか違う別のサイトに飛ぶようになってます。見えないところ作り込んどるわー。

いつか真似したい！ユニークで楽しい「404 Page Not Found」30選

ステップ７：プラグインをインストールして機能を追加

WordPressには「プラグイン」という便利なツールがインターネットから色々とダウンロードして使えます。WordPress標準機能で無いものを補完するために追加して機能を増やす、ということです。

WordPress管理画面から「新規追加」で色々ダウンロードできます。アンチスパム対策、自動バックアップツール、お問い合わせフォーム、画像圧縮してくれるプラグイン、リンク切れを教えてくれるプラグイン・・・と色々あります。

多くの人に使われていてプラグインの最終更新日が昔すぎないもの、ネットの評価が高いものを選んで使うといいです。プラグインも誰かが作ったもの。セキュリティ脆弱性があるものがあったりします。公式で公開しているものを使うようにしましょう。

よく選んで必要なプラグインを追加しましょう。

ステップ８：お問い合わせフォームを作る

コーポレートサイトには必要不可欠な「お問い合わせページ」

ここには問い合わせしてもらうための「フォーム」を作らないといけません。HTMLやCSSでは作れません。PHPができないといけないのです！PHPを学習したら作り方を学べますが、、もっと簡単に作りたい！！

「プラグイン」があります。問い合わせフォームが簡単に設置できて設定できてしまうプラグインがあるからWordPressは便利。

こんなお問い合わせページをHTMLとCSSで作りました。でもこのままでは入力フォームに内容書いて「確認画面へ」をクリックしても何も起こりません。

なので問い合わせプラグインを使います。有名なのは「Contact Form 7 」というプラグイン。でも入力するといきなり問い合わせ完了になるのが難点だったので僕は「MW WP Form」というのを使ってます。これだと問い合わせフォームで入力した画面が一度「確認画面」というページで内容を確認させてから「問い合わせへ」という流れになるので親切。

参考：他にすること

ここまででざっくりWordPressテーマ化のやり方は理解できたかな、と思います。あくまでざっくりなのでWordPress管理画面の設定とかは飛ばしているところもありますが概要は理解いただけたかな、と。

他にもやることあるのですがこの記事では書ききれないので概要だけご紹介。

• セキュリティ対策とバックアップ

→WordPressはオープンソースと言われる無料ツールなので頻繁にバージョンアップがあります。そのバージョンアップ対応をしないとセキュリティの脆弱性が出てきて悪い人やウイルスに狙われてしまう、ということがあるのでバージョンアップしていかないといけません。バージョンアップ時にWordPressに不具合が出る場合を想定してバックアップもとっておかないといけません。

お客さんで保守無しで、と言われてサイトを納品した後で「バージョンアップを要求されるんだけどバージョンアップしていい？」と言われることがあります。バージョンアップしてもいいけどもプラグインとの不具合が出たり記事更新ができなくなったり画面が真っ白になったり、と不具合が出る可能性があることは言いましょう。

• functions.phpでWordPress標準機能以外の機能を呼び出す

→WordPressには標準機能では隠れた機能があります。それを呼び出すにはfunctions.phpというファイルを作ってそこに機能を呼び出す指令を書かないといけません。そうするとウィジェット機能と呼ばれるナビゲーションメニューが管理画面から設定変更できてしまう機能がつけられたりできるようになります。

• カスタム投稿、カスタムフィールド

投稿ページで色々な種類を増やしたい場合、「カスタム投稿」というのが使えます。コラムの他に事例を更新したいけど同じ投稿画面だと分かりにくい、という場合に「投稿」を追加します。

また、決まった項目の入力などいちいち更新していたら面倒なので特定のフィールドを作って入力しやすいようにする方法があります。それが「カスタムフィールド」

独学でWordPressを学ぶには

僕が使った本をご紹介します。

• WordPressのツボとコツがゼッタイにわかる本
• WordPressの教科書
• WordPress仕事の現場でサッと使える！デザイン教科書

WordPressのツボとコツがゼッタイにわかる本

中田 亨 (著)

Amazon

Kindle

楽天ブックス

ビジネスサイトを作って学ぶ WordPressの教科書 Ver.5.x対応版

プライム・ストラテジー株式会社 小川 欣一 (著)他

Amazon

Kindle

楽天ブックス

この本は実際のサイトをWordPressテーマ化する、という流れですすめていく本。実際に一つのサイトを「テーマ化」する、ということを自分でできます。

[改訂版]WordPress 仕事の現場でサッと使える! デザイン教科書[WordPress 5.x対応版] (Webデザイナー養成講座)

中島 真洋 (著),ロクナナワークショップ (監修)

Amazon

Kindle

楽天ブックス

まとめ：WordPressテーマ化を一度経験すればテンプレートカスタムも簡単

ここまで

• ステップ１：WordPressテーマにするために最低限必要なファイルやフォルダを用意
• ステップ２：全ページに共通するファイルを作っていく
• ステップ３：フォルダ、リンク、画像のパスを変更する
• ステップ４：トップページを作る
• ステップ５：下層ページを作る
• ステップ６：index.phpを４０４エラーページにしてみる
• ステップ７：プラグインをインストールして機能を追加
• ステップ８：お問い合わせフォームを作る

と書いてきました。けっこうボリュームありますよね。ただ、一度テーマフォルダから作るのを経験するとインターネットからダウンロードできる「テーマ」の構造がテーマフォルダの中を見ればだいたい分かるので既存テンプレートテーマのカスタマイズ対応もできるようになります。（既存テンプレートテーマをカスタムするときは「子テーマ」というのを作るんですけどそれはまた別の記事にて。）

それにテーマ化できるとWordPressで作ったサイトのリニューアル案件の仕事とかもできるようになります。僕はそれを受注しました。古いWordPressサイトの一部を流用して新しいデザインに一部する、という案件。

Web制作副業月10万円稼ぐための案件内容【案件2件受注すれば可能】の「WordPress案件で稼ぐ」の案件です。

一度一通り作ることができれば自信にもなります。

独学で作るにはハードル高い、誰かに質問して課題をこなしながらやってみたい、という人は僕が受講した「テックアカデミー」がオススメ。詳しくはテックアカデミー「WordPressコース」受講後副業につなげる方法【評判を徹底解析】という記事に書いてますので参考にしてみてください。

これでこの「Web制作の流れシリーズ」は終了です。だいたいWeb制作の流れが理解できたかな、と思います。やること多いですけどここまでできるようになれば色々仕事の幅も出てきますし「手に職がついた」と言えるのではないでしょうか。手に職をつけて単価を上げていける、というのがいいですよね。

この記事はここまでです。