ブログ

HOME/ブログ

CMSで最も使われているWordPressの自作テーマの作り方を解説!

CMSで最も使われているWordpressの自作テーマの作り方を解説!

CMSの中で世界一使われいてるWordpressの自作テーマの作り方について解説していきたいと思います。これからWordpressでサイトを作りたいと思っている方やHPの導入を考えていてオリジナルのデザインを使用したいと考えている方は参考にしてください。

WordPressとはなに?

WordPressはCMS(Content Management System)の一つです。CMSはホームページを簡単に作成したり更新したりすることができるシステムと言えます。ブログシステムとも言えます。

WordPressはCMSの中でもSEO対策に特化したシステムです。検索順位を上位表示させることなどに特化しています。様々なプラグインを導入することにより、WEBページを上位表示させることができます。また、Wordpressを使用するメリットを以下に簡単に紹介しておきます。

Wordpressを使用するメリット

  • SEO対策が行いやすい
  • 無限の拡張性
  • 優れたメンテナンス性

先ほども解説したようにWordpressはSEO対策をする上で最も適性が高いCMSです。また、プラグインといって元あるWordpressをより充実させることが可能です。プラグインは自分で作成することも可能ですが、エンジニアが開発したプラグインが無料のものも有料のものも使用することができるようになっています。

WordPressでの自作テーマ作成とは??

wordpressで自作テーマを作成するとはどういうことなのでしょうか。CMSの特徴は誰でも簡単にHP・ブログシステムを作ることができるというのが一つの特徴です。そのため、wordpressはテーマというものを使用して、様々なデザインを適用することができるようになっています。しかし、自分・会社オリジナルのデザインを使用したいという場合もあるでしょう。オリジナルのデザインでWordpressを使用したい場合には自作でテーマを作る必要があるということです。

つまり今回はそのテーマの作り方を解説していくことになります。

WordPressの自作テーマの作り方

WordPressの自作テーマの作り方は基本的なHPと一緒です。しかし、いくつかwordpressのテーマ用に変更しなければならない点があります。なのでそれを見ていきましょう。

必要なファイル

wordpressは基本的にhtmlファイルではなく、phpファイルで作成するのが基本です。また、wordpressには必要なファイルがいくつかあります。

wordpress作成に必要なファイル

  • front-page.php、home.php … トップページとして表示されるページです。
  • style.css … テンプレートに必要
  • index.php … 検索結果やカテゴリーページの最終的に表示されるページ
  • header.php … home.phpやindex.phpファイルのヘッダー部分を記述する
  • footer.php … フッター部分を記述する
  • category.php … カテゴリー一覧ページ
  • page.php … 固定ページのレイアウトを表示するページ
  • single.php … 個々の記事のレイアウトを表示する
  • search.php … 検索結果を表示するためのページ
  • sidebar.php … wordpressのサイドバーを表示する、ウィジェットを使用する
  • 404.php … 例外を表示するページ

これらのファイルを作っていきます。これらのファイルが全てなければテーマとして成り立たないわけではありません。大まかに必要なファイルとして記述をしておきます。

また、テーマを作成していくには必要なファイルごとに記述しなければいけないこともあるのでいくつかピックアップして見ていきます。

front-page.php、home.php

front-page.phpとhome.php、そして、index.phpが一覧ページになります。index.phpに関していえば、役割が少し違います。トップページに表示される優先順位はfront-page > home > indexとなります。

また、front-pageとhomeは分割して作ります。header,footer,sidebarを細分化して作成していきます。メインの部分には、記事一覧を表示していきます。

このように表示をすることで記事の一覧を表示することができます。

また、header,footer,sidebarは別のファイルにて記述をし、1,32,33行目のように呼び出しています。

index.php

index.phpに関してもhome,front-pageと同じに近いですが、ファイルが見つからない場合などにindex.phpが最終的に呼び出されることになっています。そのため、index.phpはデフォルト設定と考えておけば良いでしょう。

style.css

style.cssがないとテーマとして成り立ちません。テーマを作るときにcssファイルを用意するのは当たり前ですが、そのファイル名をstyle.cssと必ずします。

また、テーマとして成り立たせるためにはstyle.cssに下記のような記述をする必要があります。

テーマ名やURLなどを記述することで、テーマとして成り立たせることができます。こちらの記述を忘れないようにしましょう。

header.php

header部分の記述を部分的にこちらに記述します。

タイトルはwordpressの設定上の名前にしたり、stylesheetのリンク先の設定の仕方が少し違います。また、メニューテンプレートもあるので、wordpressの設定上でメニューバーを変更することも可能です。(ただし、functions.phpに記述も必要になるので要注意です。)

wp_head()は入力する必要があります。入力しないと動かなくなるプラグインなどもあります。

footer.php

footer.phpもheader.phpと役割は同じになります。ただしfooterの下には下記のように記述する必要があります。

こちらの入力を忘れないようにしましょう。

single.php , page.php

こちらの記述はhome.phpと同じで良いのですが、個別ページになります。表示を変えたい部分が個別ページにある場合にはこちらを記述していきましょう。

 

これまで記述したphpファイル以外にもテーマに必要なファイルはいくつかあります。全てをここで記述はしませんが、困ったときにはhttp://wpdocs.osdn.jp/Main_Pageこちらのページを参照することをオススメします。このページはWordpressの公式ドキュメントになります。

まとめ

wordpressはSEO対策に特化しているので個人から法人まで幅広く利用されています。自作テーマを作成することは決して難しすぎることはありませんが、ややハードルもあるので自分でやるかどうかはよく見極めながら作成しましょう。

この記事を書いた人

田村 京暉

FOCUS SQUAREのフルスタックエンジニアとして活動中。LP・HPのコーディングだけでなく、Wordpressのカスタマイズやサーバーサイドも行なっています。 技術的なサポートを全般行います。