HTML/CSSを学んだ次はテーマ開発をするべき

HTML/CSSを学んだ次はテーマ開発をするべき

HTML/CSSの次のステップに

WordPressのテーマ開発をするために必要なこととは何でしょうか?
HTML・CSSがわかればできます。PHPは最初はできなくても大丈夫です。本などで写すことにはなりますが。

テーマ開発といっても、それほど難しくありません。もちろん、凝ったことや配布用を作ろうとすると難しいですが。たいていの機能は準備されていて、われわれはそれを利用するだけです。小さな機能を組み合わせ、既存のプログラムの動作を微修正することで顧客の要件を満たします。最も初歩のテーマ開発は、元となるHTMLファイルに用意されているプログラムを埋め込むことにすぎないのです。

HTMLとCSSを勉強した方なら、手元にテーマ作成の書籍が一冊あれば十分作成できると思います。(私はこれを参考にしました。一冊で網羅しています。)
買う前だとなんだか難しそう!と思いますがそんなことはありません。
ブラウザでwordpressが生成したページのソースを見ましょう。あなたが書いてきたhtmlのタグと同じです。

データベース+プログラム言語のセット

HTMLやCSSは易しく、最初のプログラムの学習はピッタリですが、現実的にあまり役に立ちません。修正しにくいからです。
実際に使えるようにするには、「データとデザインの分離」と「再利用」できるようにする必要があります。

「データの分離」とは、データとデザインを分けることです。WEBサイトにおいてもっとも重要で、修正が多いのは記事です。デザインは一度作ればあまり変わることありませんが、記事はだんだん増えてきますし、途中で修正が入ることも多いです。また、両者は作成する人が違います。記事を書くのはたいていその企業の広報の人ですが、デザインを作るのはWEB会社です。記事を書くだけですべてを破壊するような可能性があるもの、使えませんよね。

また、「再利用」とは違うページでも共通する部分を使い回す、ということです。多くのサイトの上部にメニューがあり、どのページでも同じものが表示されています。わざわざ各ページごとに作ってはいません。作成も面倒ですが、それ以上に修正も大変になるからです。一つのパーツを再利用していると、そのパーツ1つを修正するだけでいいので
す。プログラマの差は、こういった再利用といったところに現れます。

これらを解決するためには、データベース、プログラミング言語の知識が必要になります。この2つはなかなか難しいです。
WordPressは現実的運用に必要なその2つを、簡単に導入してくれるソフトウェアです。
よって外観さえ作ることができれば、それをテーマ化し実際の使用に耐えるものを作ることができるのです。

また、WordPressで使用するプログラミング言語であるPHPは、未勉強の場合は最初はほとんど本の写しになると思いますが、大丈夫です。不安に思う必要はありません。機能は準備されていますし、カスタマイズが必要になってから勉強すればいいのです。

実際の利用方法を先に見ていたほうが、素早く吸収できると思います。ゲームをするときのことを思い出してください。説明書は行き詰まってから読めばいいんです。

開発の流れ

だいたいの流れ、目的地をおさえておくと、不安を持たずに進みやすいと思います。最初はプログラミングというより、ソフト使ってる感がすごくしますが、たぶんそういうものです。
最初は本の写しです。そこからちょっとずついじっていくといいでしょう。

1.HTML、CSSで形を作る

私はCSSをほとんど書かず、CSSフレームワークのBootstrapを利用します。
カンタン・高機能でとても便利です。

HTML・CSSを使って目標物の形をつくります。
ヘッダーメニュー、サイドバーの記事一覧、サムネイル、フッターの著作権表示、…すべて作り込みましょう。
もちろんこの時点でリンクは機能しませんし、表示が動的に変化したりもしませんが、変化したときのことを想定してなにか例を入れておくとわかりやすいと思います。

2.テスト用WordPressをセットする

テスト用に自分のパソコンにWordPressをインストールします。
phpやサーバ、MySQLもインストールすることになりますが、1つにまとまったxamppというソフトがありますし、解説記事も多いですが、なにかハマると悩むかもしれません。あたりがつかないので最初は一連の流れの中で一番難しいかもしれません。

3.テーマをテストサーバにアップロードする

作成したHTMLファイルをローカルサーバーのフォルダにコピーし、テーマに必要なファイルをいくつか作成します。
そしてテーマを読み込み、テーマの反映を確認します。
以降はテーマフォルダでの作業になります。

4.テンプレートを分割する

パーツごとに分割していきます。
ヘッダーはheader.php、サイドバーはsidebar.phpといった具合に分割し、元ファイルからはそれを読み込むようにします。
そして、WordPress上で表示が変化しないことを確認します。

5.日付やリンクをWordpressの関数に置き換える

テーマに画像などが含まれていた場合は、そのままでは表示されません。
URLを修正する必要があります。
URL関連や、そのときによって変わる情報、日付やサイト名、キャッチフレーズなどをWordPressの関数に置き換えます。
これで、WordPressの管理画面上でそれらを変更したときに自動で反映されるようになります。

6.カスタム機能を追加する

「データの分離」と言いましたが、どっちともつかない微妙な部分もあります。
メニューのリンクは、記事ではなくテンプレートデザインの部分ではありますが、よく変化するところです。
クライアントが自分で編集したい、ということもあるでしょう。

それを解決するのがカスタム機能です。
ほかのテーマを使ってみるとわかりますが、管理画面からプログラムすることなく項目を変化させられるようになっています。

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

元となるページから、目的ごとに派生させていきます。
たとえばトップページ、記事ページ、検索結果ページなどは明らかに違う表示ですよね。部品化しているので、ほとんど手間はかかりません。

8.ナビゲーションパーツを作成する

企業ページでは、情報が多岐にわたるため「トップページ > 企業情報 > 経営方針」のようなパンくずリストが必要とされることが多いです。また、「次のページ」「前のページ」のようなリンクも欲しいですね。

これらナビゲーションのためのパーツを配置します。プラグインを利用するので、単にPHPのコードを挿入するだけですが。
あとはデザインを調整します。

9.本番環境にアップする

本番のサーバにWordPressを用意し、テーマをアップロードします。
大体、何も問題なく使えるはずです。
ローカルでの修正反映が面倒だと感じたら、Githubを使いましょう。

参考書籍

↓一冊でテーマ作成できるのでおすすめです。サンプルがちょっとダサめなのは気になるが、自分で改良してみる題材になる。プラグインやコメントページで企業ページに必要な情報を網羅してます。しっかり記事の文章の中身までサンプルがあるので、具体的に学ぶことができます。

↓BootstrapはCSSフレームワークです。素早くレスポンシブデザインを書いたり、きれいなパーツ、ボタンやカードやナビゲーションバーなど…、を使うことができます。



貴島 大悟
WEB開発者