WordPressで企業用テーマを自作する手順【オリジナルテーマ】

こんにちは。これすけ@koresuke1010です。
プログラミング初心者から約2ヶ月半で、
企業用のWordpress自作テーマを作成することができました。
≫ 制作した企業用サイト

プログラミング学習65日目⏩#今日の積み上げ
✅ WordPress 企業サイト 完成
よければご覧ください↓↓https://t.co/GWDXMBtVvL
プログラミング学習に加え、ブログ運営も始めます。
宣言した以上やるしかありません😤
皆さん、たくさんのライクありがとうございます☺️
明日も頑張りまっす🌛

— これすけ＠プログラミング / 初心者パパブロガー (@koresuke1010) 2019年6月14日

Wordpress企業テーマを公開するまでの手順は、下記の通りです。

WordPressテーマを自作するために、まずはHTML/CSSでデザインコーディング

まずは、どのような企業サイトを製作すのかを決めて、模写、もしくは１からデザインをして、サイト構築をします。

この時点では、Wordpressのことは特に考えずに、1つのサイトをHTML/CSSで完成させることを目標にします。もちろん、スマホ用にレスポンシブ対応もしてください。

これまでの模写と違って、Wordpressの企業自作テーマを製作するためには、当たり前ですが、TOPページのコーディングだけではダメです。
具体的には、下記のページが全て必要になります。

page-●●のファイルがたくさんありますが、これは全て固定ページの中に記述をするファイルになります。

コーディングをした「index.html」の中身を公開すると、こんな感じです。この時点では、まだ普通のHTMLファイルです。

最初は規模の小さいサイトから練習する

サイトを選ぶコツとしては「Wordpressを使う箇所が少ない」という部分を重視すると、制作しやすいです。

Worpdressとの連携箇所が多ければ多くなるほど、難易度が上がります。初めのうちは、連携する箇所が少ないページから練習をはじめてください。

具体的に説明すると、WordPressを使って投稿するコンテンツが少ないサイトを選ぶということです。

例えば、下記3つのコンテンツが必要となるサイトがあるとします。

上記、3つのコンテンツを設けているサイトでは、投稿するコンテンツ種類が3種類ある。ということになります。そうなってくると、設定しなければならない項目が増えてしまうため、制作の難易度が高くなってしまいます。

実際に、私が制作したサイトは、「お知らせ」の1種類しか投稿機能がないものを選んでおります。

自作したテーマをWordpress化 / スターターテーマと連携

WordPressと連携する際に、ゼロから構築することはとても大変ですし、非常に効率が悪いです。当ブログ（koreblog）は、ゼロからWordpressとの連携作業を行ったため、とても効率が悪かったです…。

WordPressと、あらかじめ必要箇所の連携がされている「スターターテーマ」と言うものがあります。

スターターテーマを使うと、Wordpress自作テーマが作りやすくなります。
私は、下記のスターターテーマを利用して企業サイトを制作しました。

≫ スターターテーマ『underscores』
参考 スターターテーマ『underscores』こちらにアクセスし、スターターテーマをダウンロードします。 ※スターターテーマは他にもいくつかありますので、気になる方は調べてみてください。

上記リンクからページを開き、Theme Nameのところに制作したいテーマの名前を入力して、「GENERATE」をクリックします。そうすると、「テーマ名.zip」のファイルがダウンロードされるので、それをWordpressのテーマにインストールしましょう。

ダウンロードした「テーマ名.zip」をWordpressのテーマへインストールして、有効化してみます。表示を確認すると、下記のような画面になるはずです。

このように、すでに記事などのリンクが設定されており、押すと各ページへ飛べるようになっていることがわかります。

あとは、事前にコーディング済みのファイルを、各々のPHPや個別ページへ記述していく流れとなります。

WordPressテーマの固定ページを作成

用意した企業サイトのテーマにそって、固定ページを用意します。（固定ページの中身は後で作成します）

私の制作したサイトの場合は、下記を用意しました。

上記を確認すると、それぞれ「ホーム−フロントページ」「お知らせ−投稿ページ」と設定されていますが、詳しくは次の章でお伝えします。

テンプレート階層とは、簡単に説明すると、どのPHPファイルがどの場面で使われるかということになります。

詳しくは、下記URLよりご確認ください。
≫ WordPress : テンプレート階層

≫ 概観図（早見表）

WordPressテーマの自作に必要な設定

企業用のサイトは、ブログと違い、記事一覧がトップページに表示されることは少ないです。そのため、トップページ用のphpファイルを用意して、それを表示するための設定をする必要があります。

サイトのトップページを表示させる

phpファイルで、front-page.php、もしくはhome.phpを用意しましょう。
私の企業サイトでは「front-page.php」を用意しました。

スターターテーマに入ってある、index.phpを複製して、front-page.phpに書き換えればOKです。

複製したfront-page.phpファイルの中身はこのようになっています。

ファイルを開き、上記赤枠の部分に、あらかじめコーディングしておいたトップページ用のコードを、front-page.phpに記述してみましょう。

※get_sidebar(); は、ページのレイアウトによっては表示が必要ないパターンもあると思いますので、その時は削除してOKです。

では、先ほど設定した固定ページの確認をしておきます。

これで、表示設定が完了です。
トップページを更新すれば、front-page.phpの内容が表示されるはずです。

WordPressは、ファイルが多く存在するため、実際にどのファイルがどこで表示されているのか、とても複雑です。

確認の仕方としては「front-page,php」の中身に、「フロントページ」とだけ記述して、実際にどこで出力されているのか確認をしてみましょう。更新した場合、これまでの表示設定が完了していれば、TOPページに「フロントページ」という文字が出るはずです。

上記のような感じで、page.phpやsingle.phpなど、どこで表示されているのか確認をしてみましょう。どのファイルがどこで表示されているかを理解すると、Wordpressの編集理解が深まってきます。

自作したWordpressテーマの各部分をPHPに分割

一番初めに用意した、コーディング済みのHTMLファイルを、PHPファイルへ記述する必要があります。
スターターテーマに入っていたPHPファイルへ、コーディングした内容を移していきましょう。

メインとなるのは上記ですので、まずはこれらを記述して振り分けていきましょう。

HTMLファイルの中身を、phpに写すだけでは、スタイルシートは反映されません。ですので、style.cssの中身に、あらかじめコーディングしておいたコードもコピペしておくのを忘れないようにしてください。

自作したWordpressと連携させる

ファイルの記述を終えたら、次にWordpressと表示の連携（ループ処理）をしていきます。スターターテーマのindex.phpに既に記述されている、処理を応用して使ってもいいですし、自身で処理を行っても構いません。

スターターテーマの良いところは、初めからWordpressとの連携記述がされているところですので、それを応用するのが楽かと思います。

「Wordpress 記事一覧 表示」などで検索すれば、表示するためのコードを紹介しているサイトが多くあります。どれかを実践してアウトプットを心がけてみてください。

固定ページの中身を仕上げていく

最後に、固定ページの中身を仕上げていきます。
私が制作したサイトで言うところの、下記の部分ですね。

実際に表示するとこんな感じに。

固定ページの内容は、事前にコーディング済みかと思いますので、それぞれコピペでOKです。あとは、表示を確認してみましょう。正しく表示されていればOKです。

固定ページは「page.php」の中身で読み込まれます。
ですので、sidebarが必要ない場合や、タイトル部分の修正が必要な場合などは、記述をして修正していきましょう。

WordPressテーマの自作についてまとめ

以上が、ざっくりとした企業サイト制作の流れになります。
おそらく難しい部分は、

どうやって記述すれば記事一覧のタイトルが取得できるのか。など

上記の、Wordpressとの連携部分になるかと思います。

もし、分からない部分などありましたら、Twitterやお問い合わせなどで、お気軽にご相談ください。可能な限りお応えさせていただきます。