WordPress特集 - 独自テーマに必要な作業
公開日：2021年12月8日
既存テーマを利用するのと違い、独自テーマで制作するにはアプローチの仕方がかなり違いますので、それによる作業も増えることになります。ここではどういう作業が必要か解説します。
【記事執筆時の環境】
WordPress 5.8
Webサイトを構築するには、まずそれぞれのページ種別ごとにデザインの骨格となるフレームを作成しなければなりません。そしてそのフレームの中に管理画面から入力したコンテンツが表示されることになります。またデザイン的な要素だけでなく、サイトが持つ機能も設計し実装しなければなりません。
WordPressでサイトを構築するとは、それらの見た目のデザインとサイト機能を規定するテーマを設計・実装することが大半の作業になります。テーマが出来上がってしまえば、あとは管理画面からコンテンツを入れ込んでいけばいいだけです。
既存テーマを使えば、テーマの設計・実装作業が必要ないわけですから、非常に楽にサイト制作ができます。もちろん既存テーマはさまざまなサイトに使えるよう汎用的に出来ていますので、作ろうとするサイトに合わせた設定項目の調整は必要です。
公式テーマ・非公式テーマ問わず、他の誰かに使ってもらうことを前提に作られたテーマは、制作するサイトの特性に合わせるためのカスタマイズ機能を持っています。デザインも機能もガチガチのテーマでは誰も使おうとしません。
しかし独自テーマではそのようなカスタマイズ機能は最低限で済みます。サイトを運営していく中で頻繁に変更する可能性のある部分だけ、カスタマイズできるようにしておけばいいのです。２年に１回しか変えないというのであれば、そこは固定で構いません。余計なカスタマイズ機能を持たせるより、必要になった時にコード修正するほうが、よっぽどコストが安く済みます。
従ってテーマ設計するにも、独自テーマの場合は他の人に使ってもらう公式テーマとは考え方が全く違います。１サイトの制作だけに特化すればいいのと同時に、１サイトだけで費用も回収しなければなりませんので、機能を絞り込みコストを安くする努力も必要です。
独自テーマ制作に必要なスキル
Webサイトを公開する目的は、ユーザーが必要とするコンテンツを魅力的な形で提供することです。それでこそ製品の購入や問い合わせをしてくれるようなアクションにつながります。
独自テーマも、簡単なものを作るだけなら、それほどの知識は必要としません。しかし効果のあるサイトに仕上げるには、それなりのスキルが必要なことは覚悟すべきです。勉強しそのスキルを獲得するつもりがないのなら、最初からある程度セットアップされていて、コンテンツ作成に集中できる既存テーマを使うべきです。
HTML/CSS
WebページのコードはHTMLとCSSでできています。HTMLは文書構造を定義し、CSSはスタイルを定義します。独自テーマではそれらのファイルに一からコードを記述していきますので、HTML/CSSの知識は必須です。
なお既存テーマを使う上でも、HTML/CSSの知識があるとないとでは大きく違います。HTML/CSSの知識があれば、既存テーマを使っていてもカスタマイズ性を大きく向上させることができます。プロ並みのスキルは必要ありませんが、Web制作に携わるのなら最低限の知識を備えておくことをおすすめします。
PHP
テンプレートを作成する際にPHPは必須となります。WordPressのテンプレートは、拡張子が「.php」のPHPファイルです。HTMLはマークアップ言語ですが、PHPはプログラミング言語です。従ってHTMLより少しハードルは高くなります。
WordPress自体がPHPを使って開発されていることから、テーマに何か機能を加えるにもPHPを使います。また既存テーマをカスタマイズするときにも、PHPを知っていれば相当のことができます。
JavaScript
JavaScriptは、ブラウザ側で動作するプラグラムを記述する言語です。Webページに動的な処理をする際に用いられます。WordPressでもブロックの開発にJavaScriptが用いられています。
制作するサイトにどのような機能を持たせるかによりますが、場合によってはJavaScriptでコードを作成しないと実現できないこともあります。
サーバー/データベース
この知識は独自テーマとは直接関係ありません。ただ、これらの知識はWordPressでサイトを構築するという観点から、必要最低限の知識は覚えておいたほうが望ましいです。もちろんサイトを公開するサーバー環境、制作時に使うサーバー環境によって違いますが、トラブル時に役に立ちます。
現在のレンタルサーバーでは、Webサーバーとして Apache（アパッチ）か Nginx（エンジンエックス）を使っています。その設定を変更しないと WordPressがうまく動作しないこともあります。Apacheでは何か設定する場合、「.htaccess」という設定ファイルにコードを追加することが多いです。WordPressもインストール時にこのファイルにコードを追加します。
WordPressはデータベースとして、MySQL か MariaDB を使います。それらのデータベースを操作する phpMyAdmin の基本的な使い方だけは覚えておきましょう。
制作ツール
サイトで必要なファイルの作成には、最低限テキストエディタ―が必要になります。プロは高機能なテキストエディタ―を使う人も多いのですが、HTML/CSS/PHPファイルの編集に便利な、何らかのWebオーサリングツールを使っても構いません。いずれにしてもそれらのツールの使い方はマスターしておく必要があります。
それと、サーバーのディレクトリにファイルをアップロードする必要もありますので、FTPクライアントソフトの使い方も覚えておきましょう。Webオーサリングツールの中にはFTP機能を持っているものもあります。
Web一般
既存テーマでは素人の方がWebサイトを制作しても、それなりのデザインで表示されます。しかし独自テーマではそのデザインも自分で一から決めなくてはなりません。従ってWebの基本となるデザインはどのようなものか知り、その上でユーザーにアピールするデザインを設計します。そのようなWebに関する根本的な知識あるいはセンスというものがないと、テクニカルな知識だけ覚えても効果のあるサイトにすることはできません。
またSEOをどうするかとか、SNSとの連携をどうするかなどもあります。それらも既存テーマではある程度の機能を持っているものもあります。
独自テーマではテーマ機能としてそれらを実装することは割に合わないので、知識だけもっておいて適切なプラグインを使用するのが現実的でしょう。
独自テーマ制作の概略手順
ここではどのようなサイトを制作するかの企画については既に済んでいるものとします。また掲載するコンテンツの詳細や画面のデザインも決まっているものとします。それらのタスクは別の話になります。
通常のHTML/CSSファイルのコーディングをする
いきなりWordPressのテンプレートを作成するのではなく、通常のHTML/CSSファイルから作成します。
ここでの目的は、各ページのレイアウトを固め、通常のHTML/CSSファイルでもきちんとページが表示されることです。コンテンツはあとでWordPressの管理画面から入力しますので、仮のもので構いません。
作業のアウトプットとしては下記になります。
- 文書構造が定義され、CSSやJavaScriptなど必要なファイルの読み込みがされているHTMLファイル
- レイアウト崩れがなく、適切な装飾でページのスタイルが記述されたCSSファイル
- その他JavaScriptやフォントファイルなど、サイトの動作に必要なファイル
WordPress情報を整理する
通常のHTML/CSSファイルで構成されたサイトを、WordPressで構築するにあたって必要な情報を整理します。その情報は、WordPressのインストールから始まり、あらゆる場面で使用します。
私は専用のExcelシートに整理していますが、詳しくは別の記事で紹介します。
制作環境をセットアップする
これは既存テーマだろうと独自テーマだろうと必要な作業です。
WordPressのインストールから初期設定までやっておきます。
テーマ用必須ファイルを作成する
下記ファイルが必須となります。
作成したファイルはその他のファイルと一緒に、wp-content¥themes の下にテーマフォルダを作成して格納します。
- index.php
- style.css
- functions.php
- screenshot.png
それぞれのファイルについての詳細は次の記事を参照してください。
ページ種別ごとに基本となるテンプレートを作成する
トップページ、固定ページ、アーカイブページ、投稿個別ページなど、ページ種別ごとに基本となるテンプレートを作成します。どのような名称のテンプレートにするかはあらかじめ整理しておきます。
テンプレート作成の基本となるのは、通常のHTMLファイルの必要部分をWordPressのテンプレートタグで置き換えていくことです。
テンプレートパーツへ分解する
基本となるテンプレートができたら、ファイル内で共通する部分はテンプレートパーツとして切り出し別ファイルにします。これはあとあとのメンテナンスを容易にするためです。
コンテンツを管理画面から入力する
投稿や固定ページのコンテンツを管理画面から入力します。
テンプレートにコンテンツを読み込むコードを記述する
管理画面から入力したコンテンツはデータベースに登録されますが、それを読み込むコードをテンプレートに記述します。コンテンツが正常に表示されるか確認し、場合によってはテンプレートやCSSファイルの修正を行います。
以上、手順を簡単に説明しましたが、制作途中では行ったり来たりの作業が当然発生します。またサイトの設計次第で、カスタムメニューの作成やウィジェットの追加などもありますし、functions.php に途中でPHPコードを追加するのもしょっちゅうです。
ひととおり完成し各ページが正常に表示されたあとも、SEO対策・セキュリティ対策・パフォーマンス対策など、やっておいたほうがベターなことはたくさんあります。
«次の特集記事» WordPress情報の整理
«前の特集記事»
スポンサーリンク
