WordPress

WordPressテーマ制作の流れ

投稿日:

今回から11回にわたって「業者に頼らず自分で作る!初心者のためのWordPressテーマ制作ガイド」をポストしていこうと思います。

制作ガイド系のコンテンツは今回で2度目なので、前回の反省を踏まえてより分かりやすく紹介できればと思っております。

いちおう対象としては、

  • これまでにWordPressテーマを作ったことがない人
  • 以前WordPressテーマを作ろうとしたけど挫折した人
  • 既製のWordPressテーマでは物足りない人
  • 予算的な問題で業者に頼む余裕がない人
  • 既製のテーマに独自の機能を追加したい人

辺りを想定しています。そのため、たまに初心者+α的な内容を扱っている箇所もありますが、必要なければ読み飛ばしてください。

ということで第1回の今回はまず、この制作ガイドの大まかな流れをご紹介していきたいと思います。はじめに全体像を把握しておけば、その後の制作もきっとスムーズなはずです。

まずはHTMLで全ページを作成する

WordPressテーマを作成する前に、WordPressとして構築するウェブサイトの全ページをHTMLで作っておきます。遠回りのようですが、これが一番スムーズな方法です。

HTMLソースを作成せずにいきなりWordPressテーマを作り始めると、構築途中に表示崩れなどがあってもそれがHTMLの問題なのかPHPの問題なのかなど、原因の特定に労力を割かれてしまいます。

はじめにHTMLを作ってしまえば、テーマ構築中に不具合が出てもある程度原因を絞ることができるようになります。

またはじめに全ページを作成することで、ウェブサイトの構成を明確にすることができます。いきなりWordPressテーマの作成から取り掛かってしまうと、実際にウェブサイトになったときに必要となるページの作成がすっぽり抜けていた、ということも起こりやすくなります。

必要なページを洗い出す意味でも、あらかじめHTMLで全ページを作っておきましょう。

HTMLサイトをWordPressテーマにする下準備

WordPressテーマには、必ず必要となるファイルが3つあります。それが、

  • style.css
  • index.php
  • screenshot.png

です。そしてstyle.cssにはWordPressテーマ特有の書式で、そのテーマの概要や作成者などの情報を記載しておく必要があります。

index.phpは、WordPressテーマ内のテンプレートファイルの大元となるファイルだと思ってください。WordPressはテーマ内にあるテンプレートファイルをサーバー上のデータベースの情報を組み合わせてページを生成します。そのときに利用するテンプレートファイルの大ボスのような存在です。

screenshot.pngは、WordPressダッシュボードなどでテーマ一覧を見たときに表示されるサムネイル画像をして使われます。会社のロゴだったり、完成したテーマのスクショを使ったりするのが一般的ですね。

index.htmlをWordPressテーマのindex.phpへ移植

最低限のファイルをテーマとしてWordPressにインストールできたら、先に作成しておいたHTMLソースをWordPressテーマとして使えるように編集していきます。

WordPressにはテンプレートタグというものがあり、このタグによってデータベースから情報を取り出し、テーマに記述されているPHPやHTMLソースと組み合わせてページを生成します。

先に作成したHTMLソースのindex.htmlをWordPressテーマのindex.phpにそのままコピー&ペーストして、必要な箇所をテンプレートタグに差し替えていきます。

index.phpをパーツごとに分割する

index.phpにテンプレートタグを差し込むことができたら、今度はindex.phpをパーツごとに分割していきましょう。

通常のウェブサイトだと、ヘッダーやフッター、サイドバーなどは全ページ(または複数のページ)で共通の場合が多いと思います。それらが別々のソースとして管理されていると、例えばヘッダーの内容を修正したいという場合にはヘッダーのある全ページを修正する必要が出てきます。

しかし、ヘッダーやフッター、サイドバーなどをパーツとして分けておき、WordPressがページを生成するときにそれぞれのパーツを読み込むようにしておけば、修正が必要なときはそのパーツを編集すれば全ページに反映されるようにできるというわけです。

テンプレートファイルを作成する

当たり前ですが、WordPressで構築する必要があるようなウェブサイトはトップページ以外にもいろいろな下層ページがあります。

index.phpを作成し、ヘッダーなどをパーツとして分割することができたら、次はそれぞれの下層ページに適用されるテンプレートファイルを作成していきます。

いきなりWordPressテーマを作成すると、ここでどんなテンプレートファイルが必要になるか混乱することが多いですが、あらかじめ構成を明確にしてHTMLソースまで作っておけば、そんなことは(ほぼ)ないと思います。

なお、WordPressテーマのテンプレートファイルには階層というものがあり、ブラウザであるページを表示させる際にはこのテンプレートファイルを使う、もしテーマ内にそのテンプレートファイルがなければ代わりにこれを使う… というような動き方をします。

WordPressテーマにいろいろな機能を追加する

WordPressを使わずにウェブサイトを作った場合、たとえば会員登録機能やメールフォームを使おうとすると、それぞれの機能をPHPやCGIなどでプログラミングする必要があります。

そして、それぞれのプログラムに修正が必要な場合には、ローカルで編集を行い、FTP接続などでサーバーに修正したファイルをアップロードする作業が発生します。

しかしWordPressでは、それらの機能に追加をテーマやプラグインによって実装することができます。また機能の修正や設定が必要な場合にも、多くの場合はWordPressのダッシュボードから作業を行うことができます。ウェブサイトをWordPressで構築する最大のメリットはここにあると言ってもいいかもしれません。

WordPressテーマに独自の機能を導入するには、テーマ内にfunctions.phpというファイルを作成し、そこに必要な記述をすることで実現します。

よく使う要素をパーツ化する

ウェブサイトには、ヘッダーやフッターなどの全ページ共通の要素以外にも頻繁に設置する要素があります。

たとえば関連記事一覧やSNSシェアボタンなどに修正が必要になった場合、それらが設置されている全テンプレートファイルを修正する必要が出てきます。

しかしそれらの要素をパーツ化し、各テンプレートファイルから読み込むような構造にしておけば、修正するのはそのパーツ化したソースだけでよくなります。

よく見られるのは、ループの部分をパーツ化しておいて記事抽出条件の違うものを数パターンを作り、テンプレートによって読み込むループを変える、というような使い方です。

子テーマを作成してカスタマイズする

ウェブサイトを複数運営していると、同じテーマでそれぞれのサイトに合わせてデザインや機能をカスタマイズして使う、というようなこともあります。

その際にぞれぞれで使っているWodPressテーマを直接編集してしまうと、もし共通で使っているテーマで修正が必要なことが出てきた場合に、それぞれのサイトごとに修正する作業が必要になり非常に煩わしいです。

そういう作業を回避するために、共通で使っているWordPressテーマの内容は保持しつつ、それぞれのサイト用にデザインや機能をカスタマイズできたら便利ですよね?

そこで是非利用してほしいのが子テーマです。子テーマは親テーマ(ここで言う複数のサイトで共通で使っているテーマ)の内容を引き継いだ上で、独自にデザインや機能をカスタマイズできます。

子テーマを導入するにははじめに作業が必要になりますが、後々のメンテナンスは格段にラクになります。是非チャレンジしてみてください。

WordPressの機能を拡張する便利なプラグイン

WordPressには、テーマからさまざまな機能を追加することができます。

しかしあまり機能をテーマに依存させてしまうと、違うテーマを使いたい場面でネックになってきます。そのため、よく使う機能はWordPressのプラグインを利用することをおすすめします。

この制作ガイドでは、僕がよく使うおすすめプラグインをいくつかご紹介しようと思います。定番のものがほとんどですが、定番なだけあって動作も安定してるしアップデートも頻繁に行われています。是非使ってみてください。

プラグインの追記はWordPressのダッシュボードからできます。ダッシュボードからインストールできるものはWordPress公式のプラグインですが、その他にも便利で高機能なプラグインをたくさんの人が作成して配布してくれています。「こんな機能がほしい」と思ったときにはとりあえずGoogleで検索してみましょう。

なお、テーマと同じようにプラグインを自作することもできます。作成方法については今後別の機会で。

まとめ

以上、WordPressテーマ制作ガイドの大まかな流れでした。今後10回にわたってそれぞれについて詳しく解説していきますので、興味ある人は見てみてください。

-WordPress

Copyright© DAINASHI YESTERDAY , 2017 All Rights Reserved.