ワードプレスの独自テーマを作る手順とコツについて

本日はワードプレスでオリジナルテーマを作る場合のポイントをご紹介いたします。WordPressでテーマを作成するためのカンタンな下準備としてまとめておきますね。制作時はぜひご参考くださいませ。

ワードプレスの独自テーマを作る手順とコツについて

もし既存テーマをベースにカスタマイズせずにゼロから独自テーマを作る場合は細かい設計が必要となります。おおまかな手順は下記６つですね。ざっと１つずつ解説させていただきますね。

１. テーマの仕様を決める
２. テーマのフレームワークを選ぶ
３. HTMLとCSSとJavaScriptで使用する
４. WordPressのテンプレートタグとワードプレス関数で設計する
５. テーマのテストとデバッグ処理
６. ドキュメンテーションを整える

テーマを作り込む前の設計が重要なのでぜひこの機会にお目通しくださいませ。

１. テーマの仕様を決める

テーマを作成する前にどのような要件を満たす必要があるかを考えておきましょう。

・横幅の最大値1200px
・レスポンシブコーディング
・htmlマークアップ構造
・ブレイクポイントの総数
・レイアウトのカラム数

どんな仕様に基づいて作り込むかを決定することが重要です。

２. テーマのフレームワークを選ぶ

効率的にレイアウトを作るうえではフレームワーク選びもポイントになります。

・Starter Theme
・Underscores
・Bootstrap

テーマのコアとなる大枠です。フレームワークを使わずゼロから構築して部分的にBootstrapで仕上げたりと活用方法は自由なのでお好みで選びましょう。導入するフレームワークのライセンス周りも要確認です。

３. HTMLとCSSとJavaScriptで使用する

ワードプレスのテーマは主にHTMLとCSSとJavaScriptで成り立っています。htmlでマークアップを行ってCSSでレイアウトを整えつつ必要に応じてJavaScriptで動的な動きを加えたり細かく制御していけばOK。

４. WordPressのテンプレートタグとワードプレス関数で設計する

ワードプレスのテンプレートタグはブログデータを動的に表示したり主にテンプレート内で使われるタグです。そしてその他にも付随する細かなデータを連携させるための関数もたくさん用意されています。

テンプレートタグと関数を厳密に扱う必要はありませんが、テンプレート内で行う処理と特殊なカスタマイズやプラグイン内で使う処理は異なるので状況に応じて設定すればOKです。リファレンスも見ましょう。

５. テーマのテストとデバッグ処理

作成したテーマデータを実際にワードプレス内にセッティングすれば動作確認が行えます。エラーを解消したり非推奨のタグを最新版の書き方に置き換えたりと運営に支障が出ないレベルに作り込んでいきます。

６. ドキュメンテーションを整える

もしワードプレスのテーマを使用する人が複数いる場合はテーマに対するドキュメンテーションを作成することが重要です。ご予算次第ではソース内にコメントを残したり、本格的なマニュアルサイトを立ち上げたりと色々な方法があります。しっかりと予算を割けるプロジェクトではドキュメントの作成がおすすめです。

まとめ

本日は「ワードプレスのテーマ作成時のポイント」を解説させていただきました。

最新の情報を確認することも大切ですが将来的に販売したいなど別の展望があれば旧バージョンのワードプレスでも動く仕様でテンプレートやテーマ構造を作る等の工夫も必要となります。なるべく柔軟な仕様で制作すれば古いバージョンのワードプレスでも動かせたりと環境に影響されないテーマに仕上げることもできます。

念入りに仕様を決めてテーマの作成に取り掛かりましょう。