WordPressオリジナルテーマの作成手順について

今回は、「WordPressオリジナルテーマの作成手順」について紹介したいと思います。

WordPressオリジナルテーマの作成手順は、大まかに以下の3ステップです。

①テーマをデザイン

②テーマをHTMLとCSSでコーディングする

③WordPress化をする

これからWordPressオリジナルテーマを作成したいと考えている人は、まずは大まかな手順を理解していきましょう!

※HTMLコーディングが出来て、ある程度WordPressの仕組みを理解しており、WordPressに多少なりとも触れたことがある人を対象に説明していきます。

①テーマをデザイン

まずはWordPressオリジナルテーマを作成するにおいて、テーマ全体のデザインをしていきましょう!

WEBデザイナーならともかく、実装者の方はこのフェーズで時間をかけるのは勿体ないので、ネットで公開されているWEBサイトのデザインを真似てみることをお勧めします。

そして、どんな目的のWEBサイトにするのかも一緒に考えてみましょう。

例えば、読んだ本をまとめた書評サイトを作りたいなら、本のジャンルごとの紹介ページや、作品名を見つけるための検索フォームなどのパーツが必要だと分かります。

どんなWEBサイトにしたいのか分かれば、自ずと必要なページが分かってくるので、デザインが楽になりますよ。

②テーマをHTMLとCSSでコーディングする

テーマのデザインが出来たら、次にHTMLとCSSコーディングでWEBサイトを形作っていきましょう!

少し難易度が上がりますが、WordPress関数を後で組み込みやすいHTMLを目指しておくと、後でWordPress化がスムーズに進みます。

これに関しては、【HTMLから】WordPress化しやすいコーディングのすすめ【手順付】の記事が参考になるので、余裕がある方は是非目を通してみてください。

③WordPress化をする

HTMLとCSSでコーディングが出来たら、最後にWordPress化して動的なWEBサイトにしていきましょう!

そのためにやることは、主に3つです。

1.WordPressファイルをインストールして、サーバーにアップロードする

2.テンプレートファイルやその他必要なファイルの作成をする

3.テンプレートタグに置き換える

それでは見ていきましょう。

1.WordPressファイルをインストールして、サーバーにアップロードする

まずはWordPressファイルをインストールします。

そして、サーバーにアップロードしましょう!

 

2.テンプレートファイルやその他必要なファイルの作成をする

WordPressファイルをサーバーにアップロードすることが出来たら、次にテンプレートファイルを作成していきましょう!

テンプレートファイルとは、WordPressで用意されているHTMLを生成するためのPHPファイルのことです。

主に以下のテンプレートファイルがよく使われますよ。

・index.php
→テーマに必須のファイル。他に適切なファイルがない時に最終的に読み込まれるファイル。

・front-page.php
→WEBサイトのトップページで表示されるファイル。

・page.php
→時系列と関係ない固定ページを表示させるファイル。

・archive.php
→一覧ページを表示させるファイル。

・single.php
→記事の詳細ページを表示させるファイル。

・404.php
→404エラーページを表示させるファイル。

テンプレートファイルではないですが、以下のファイルもよく使われます。

・style.css
→テーマに関する情報を記載するファイル。例えばテーマ名や製作者の名前など。

・functions.php
→テーマで使い回したい関数をまとめるファイル。例えば、ページネーションなど。

・header.php
→!DOCTYPEの文書宣言からheader要素の終わりのコードまでをまとめたファイル。

・footer.php
→footer要素からhtmlの閉じタグまでのコードをまとめたファイル。

・sidebar.php
→sidebarの要素をまとめたファイル。

3.テンプレートタグに置き換える

最後に、必要な箇所をテンプレートタグに置き換えましょう!

テンプレートタグとは、WordPressがあらかじめ用意している値を取得・表示させるためのPHP関数のことです。

よく使うテンプレートタグに関しては、過去に[コピペ用]WordPress案件でよく使うテンプレートタグ一覧の記事を書いたので参考にしてみてください。

テンプレートタグを理解することで、自分の思い狙った値をデータベースから取得・表示させることが出来ますよ。

まとめ

以上が、「WordPressオリジナルテーマの作成手順」でした。

WordPressオリジナルテーマ制作はWordPressの勉強にもってこいなので、是非挑戦してみてください!

 

この記事を書いた人
Yujiro WEBコーダー

大阪のWEB制作会社で働くコーダー。コーディングにハマり、気づいたらWEB制作を仕事にしていました。現在は新規のWEBサイト制作やWordPressカスタマイズしたり、当技術ブログを運営しています。

関連記事