アラフォー会社員がWeb系の副業をオススメするブログ

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

ユズト
オリジナルサイトコーディング作業後「WordPressテーマ化」を実施しオリジナルWebサイトをWordPressで更新管理できるようにしました。

・お客さんが自分でブログとか事例とか追加更新したいっていうけどHTMLの知識全くないからコード触らせるのはできないな、

・HTML知識のないお客さん自身がWebサイトを更新管理できるようにできないの?

・HTML、CSSで作ったオリジナルサイトをWordPressテーマに変える方法ってどうやるの?

このような悩みに対して本記事を読むことで以下のようなことを知ることができます。
  • HTML知識のない人でもブログ等更新管理できるようにオリジナルサイトを「WordPressテーマ」にする流れが8つのステップで分かる

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

目次

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

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

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

  • その1「企画」
  • その2「設計」
  • その3「制作:デザイン」
  • その4「制作:コーディング」
  • その5「制作:WordPress」

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

 

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

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

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

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

そこでWordPress

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

※この記事はシリーズ化して5つの記事に分けて書いてます。これは5つ目の「WordPressテーマ化編」です。

「WordPressテーマ化」の8ステップ

WordPressテーマ化はざっくり以下の8ステップで書いてみました。細かく設定をどうするとかいうのはこの記事では書いてないですが、こんな流れでWordPressテーマ化ってするんだ、というのがわかればいいと思って書きました。

  • ステップ1:WordPressテーマにするために最低限必要なファイルやフォルダを用意
  • ステップ2:全ページに共通するファイルを作っていく
  • ステップ3:フォルダ、リンク、画像のパスを変更する
  • ステップ4:トップページを作る
  • ステップ5:下層ページを作る
  • ステップ6:index.phpを404エラーページにしてみる
  • ステップ7:プラグインをインストールして機能を追加
  • ステップ8:お問い合わせフォームを作る

ステップ0:WordPressテーマの構造を知る

WordPressのテーマがそもそもどうやって作られているのかが分からないとこの後の説明が意味不明になるのでここで説明します。

WordPressはまずどうやって使えるようになるのか

WordPress使おう!と思ったらレンタルサーバーを借りてWordPressをインストールすれば使えます

さくらインターネットを例にするとサーバーパネルからデータベースの設定をした後で「クイックインストール」→「ブログ」というところでWordPressをダウンロードできます。

さくらインターネットサーバーパネル

エックスサーバーでWordPressを始める8ステップ(初心者向け)にはエックスサーバー でのインストール方法が書かれています。

WordPressテーマのフォルダ構成はどうなっているのか

FTPツールでサーバーの中を見ると下のフォルダ構造になっていて「themes」フォルダの中にテーマフォルダが保存されています。

Wordpressファイル構造

WordPress管理画面を見ると下の画像。無料有料テーマはこの「themes」フォルダの中身をインターネットからダウンロードできるということ。

WordPress管理画面テーマ

好きなテーマを選択して「有効化」するとそのテーマデザインへと一発でガラッと変わります。

このテーマフォルダの中身を0から作ってWordPress管理画面の「外観」→「テーマ」からオリジナルサイトのテーマを使えるようにする、というのがこの記事で伝えたいことです。

WordPressというのはPHPというプログラミング言語で作られたファイルで構成されているシステムです。〜.phpというファイルで作られています。

参考までにtwentyfifteenという無料テーマフォルダの中身はこんな感じ。

テーマフォルダの中身ファイル

〜.phpというファイルだらけでしょ?

こんなに作らないといけないか、というとそうではなくてまず最低限必要なファイルがあって必要に応じてファイルを増やしていく、という流れ。

「themes」フォルダの中に新規でフォルダを作って新しいWordPressテーマとしてその中にphpファイルを色々入れていきます。phpが使えないといけないのかぁ、と思いきやWordPress独自の決まったタグや条件分岐、ループといったある程度よく使うを使えばテーマ化はできます。

ステップ1:WordPressテーマにするために最低限必要なファイルやフォルダを用意

まず新しいWordPressテーマ用のフォルダを作ります。あと必要なファイルを作るのですが

index.phpとstyle.css

この二つのファイルがあればとりあえずWordPress管理画面にテーマとして認識してくれるようになります。

あとWordPress管理画面でテーマが見やすいようにテーマ画像(screenshot.png)も用意します。

index.phpをとりあえず作る

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

HTMLCSSコーディングファイル

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

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

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

style.cssテーマ宣言

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

テーマ画像を作る

screenshot.png

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

オリジナルサイトテーマ画像

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

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

テーマフォルダ最初の中身

・index.phpとstyle.cssをテーマフォルダに入れるとWordPressテーマとして認識してくれる
・screenshot.pngをテーマフォルダに入れると管理画面で選ぶときのテーマ画像として認識してくれる
・cssフォルダ、jsフォルダ、imagesフォルダをテーマフォルダに移行する

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

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

テーマ共通部分

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

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

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

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

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

index-php

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

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

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

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

header.phpとfooter.php

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

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

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

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

header.phpタグ変更

・複数ページに共通する部分は部品化する(header.php,sidebar.php,footer.php)
・header.phpとfooter.phpに必須タグを挿入
・header.phpのlang属性、エンコーディング情報、ページタイトル出力を書き換える

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

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

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

パス変更2

パス変更1

パス変更3

ここまででトップページデザインがWordPressで表示されるはずです。
フォルダ、リンク、画像のパスを変更する

ステップ4:トップページを作る

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

ポイントは

  • ファーストビュー直下の新着コラム1件表示
  • コラム3件新着表示(問い合わせの上の列)

オリジナルデザイントップページ

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

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

  • front-page.php

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

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

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

WordPressテンプレート階層

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

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

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

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

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

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

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

  • ファーストビュー直下の新着コラム1件表示
  • コラム3件新着表示(問い合わせの上の列)

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

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

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

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

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

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

 

  • コラム3件新着表示(問い合わせの上の列)

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

新着3件サブループ

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

トップページを作るには
・トップページ用のファイルを作る→テンプレート階層を見てfront-page.phpやhome.phpというファイル名にする
・コラム情報(ブログのような更新記事情報)の新着記事をアップさせたい場合は「サブループ」を使う

ステップ5:下層ページを作る

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

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

固定ページ投稿ページ

ざっくり説明すると

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

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

オリジナルサイトsitemap固定ページ投稿ページ

固定ページ

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

  • 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投稿画面からテキスト入力するだけで記事を更新していけるようになります。投稿ページ管理画面

・固定ページはpage.phpというファイル名で作る
・投稿ページはsingle.phpというファイル名で作る

ステップ6:index.phpを404エラーページにしてみる

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

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

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

404エラーページ

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

<p>ページが存在しません。(404.php)</p>

と書き換えるだけ。

ただ、テンプレート階層を見ればわかると思いますが「404.php」という名前があります。このファイル名にすれば自動で404エラーページになっちゃいます。

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

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

404エラーページは作っておく

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

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

プラグイン画面

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

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

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

WordPress標準機能で無い機能を使いたい場合は「プラグイン」を検討する

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

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

ここには問い合わせしてもらうための「フォーム」を作らないといけません。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って作られてんのね、と納得できる本。
さらにカスタム投稿ってどうすんだ、WordPress管理画面カスタムしたい、とか細かいところまで調べて作り込んでいきたい、という方はこの本で調べていけます。

WordPressはphpが基本になっているので最初にphpとはなんだ?というのを学んでおくと頭に入りやすいです。

その場合は、プロゲートPHP講座 を利用して一度学習してみるのといいですね。

もちろんドットインストールにもWordPressが学習できるのでザッと見てみるのもいいです。

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

ここまで

  • ステップ1:WordPressテーマにするために最低限必要なファイルやフォルダを用意
  • ステップ2:全ページに共通するファイルを作っていく
  • ステップ3:フォルダ、リンク、画像のパスを変更する
  • ステップ4:トップページを作る
  • ステップ5:下層ページを作る
  • ステップ6:index.phpを404エラーページにしてみる
  • ステップ7:プラグインをインストールして機能を追加
  • ステップ8:お問い合わせフォームを作る

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

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

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

 

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

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

 

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

 

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

noteに僕がWeb制作案件で副業案件受注するまでの全工程を詳しく書きました。
スキル0からオリジナルデザインのサイト制作ができるようになるまでの過程、
制作会社に営業するための「営業メールの作り方」「営業アポイントリストフォーマット」なども盛り込んでます。
実践的・網羅的な内容にしていますのでこれからWeb制作・Webデザインを始めようという方にオススメのnoteです♪
【note】スキル実績人脈0のアラフォー男がWeb制作会社に営業して副業収益化した具体的な手順
「WordPressテーマ化」手順を制作事例からご紹介
情報発信しています♫