WordPressにはテーマというサイトのデザインやレイアウトといった、いわゆる「ガワ」を自由に設定できます。
このテーマ、WordPressを使うとなるとまずどういった方法でテーマを作成するか、という選択が必要です。
- オリジナルテーマを作成する(スターターテーマ利用も含む)
- WordPress公式の無料テーマを利用する
- 有料で販売されているテーマを購入して利用する
大きく上記の選択肢があります。それぞれ特徴やメリット、デメリットがあるので一つずつ見ていきます。カスタマイズで必要となる子テーマ作成や、ノーコードで作れるページビルダーについても簡単にご紹介します。
目次
オリジナルテーマを作成する
テーマの自作です。ゼロから、または必要最小限のファイルが集められたスターターテーマを使って、自分でテーマを作ることを言います。
クライアント向けにWordPressを導入している制作会社やフリーランスが採用するのが多い手法です。デザインデータを作成し、HTMLコーディングした後に、WordPressに必要なテンプレートファイルとして作成するという流れです。
スターターテーマを使って作成するのが便利
スターターテーマを利用すると、WordPressに必要なテンプレートファイルや、必要なコードが揃っている状態で始められるため便利です。スターターテーマを利用しないで作成すると、404ページ等必要なページを作成し忘れていたり、勉強のためにと調べて書いたループの書き方が今は推奨されていない書き方だったりと、抜けが多くなります。
スターターテーマにもいくつかあります。例えばUNDERSCORESは必要最低限のテンプレートファイルのテーマです。
Underscores | A Starter Theme for WordPress
必要なファイルが用意されており、読み込む系のファイルはまとまっていたりと、抜けがなく管理しやすい構造になっています。逆に、各ファイルがどのように影響するのか、動作するのかといったWordPressのテンプレートファイルの基本的な知識は必要なので、素人向きではないかもしれません。
デザインが全くされていない素の状態なので、CSSでのレイアウト作成からする必要があります。手間はかかりますが、自分でなにもないところからオリジナルテーマを作るよりはるかに楽です。
もう一つスターターテーマというかテーマフレームワークという立ち位置のGenesis Frameworkは、WordPress Codexにも紹介されている有名なフレームワークです。
テーマフレームワークによっては、テーマ開発を容易にするために次のような事前定義されたコードが含まれています
テーマで使用するカスタム関数
テーマフレームワーク – WordPress Codex 日本語版
テーマのテンプレートで使用するカスタムアクションフック
出力したテーマのコンテンツに使用するカスタムフィルタフック
テーマの設定ページの統合
WordPress のアクションとフィルターフックのカスタムコールバック
JavaScript ライブラリの統合 (例: jQuery のスライダー)
Genesisは先程のUNDERSCORESとは異なり、最低限のレイアウト、デザインがされている状態となり、そこから自由にデザイン変更、カスタマイズをします。数十種類の子テーマ用テーマが用意されているため、それらを使って子テーマとして設定し、カスタマイズしていく方法も一般的です。
他にもGenesis専用のフックやフィルターが多くあり、これらを使うことで任意の場所に対して自由にHTMLを出力したり、既に出力されているHTMLを改変したりできます。
ちなみに、当サイトもGenesisを使って構築しています(記事執筆時点)。その時のリニューアルの話は過去に書いたのでご興味あればご覧ください。
スターターテーマを使わないでオリジナルテーマを作るのは現実的ではない
自作テーマとして、全てを自分で作ることは可能です。作成したデザインをHTMLで組んで、WordPressに必要なテンプレートファイルに落とし込めば自作テーマとしてオリジナルテーマの出来上がりです。
とはいえ、この方法はあまりおすすめできません。
- 一覧ページや記事ページ等、必要なHTMLの出力を全て制御する必要がある
- ブロックエディタへの対応と各ブロックのフロント側、管理画面側のCSS対応
- 新しいWordPressの更新に対応し、古くなった処理があれば都度対応
- SEOのため構造化データのマークアップへの対応
- PC/スマホだけではなくあらゆるデバイスに対応した完全レスポンシブ対応
- 記述するコードが以前は使えたが現在は非推奨になっている場合等のセキュリティへの意識
- テーマ変更時にどう影響するか、機能をどこまでテーマ内に記述するかの判断が難しい
等の理由から、全部自作でテーマを作ったとしても、果たして実利用に耐えうる状態か、今後も安心して使っていけるか、という点からも考える必要があります。
特にテーマ変更時について考える必要があります。テーマには見た目部分だけではなく、機能を含ませることができるので、「機能はプラグインで実装せずにテーマ内に直接記述する」という選択もすることが可能です。ただ、自作テーマで機能部分もテーマ内に多く記述している方法だと、テーマを変更すると機能が使えないため、サイトがエラーで見られなかったり、不具合が発生したりという状態になり致命的です。
WordPressのテーマは自由に変更できるため、新しいテーマに変更したときにサイトが全く使い物にならないというのは設計思想上正しくありません。個人的には重要な機能はプラグインで実装することをおすすめします。
WordPress公式の無料テーマを利用する
WordPressをインストールした時点では、WordPress開発元のデフォルトテーマが設定されています。現時点だとTwenty Twenty-Oneというテーマです。
WordPress公式の無料テーマは以下の公式テーマディレクトリに公開されています。
WordPress テーマ | WordPress.org 日本語
様々な基準をクリアしたテーマ
公式テーマにアップロードされているテーマはライセンスやアクセシビリティ、コードやセキュリティなどWordPressが定める基準をクリアしたテーマです。なので、安心して利用することができます。
多くの公式テーマがありますが、公開されるまでにWordPress側でレビューをしています。WordPress関連のミートアップや勉強会等でも公式テーマに登録されるまでに紆余曲折があった内容を話すセッションなどが過去にあり、何度もレビューを落とされることもあるようです。
テーマによってはインストール後に有料テーマへの案内がある場合はあれど、公式テーマディレクトリに公開されているテーマは無料でインストールし、新機能の追加やバグやセキュリティ対応等更新がされます。厳格なルールで作られたテーマを無料で使い続けられるというのがWordPressの素晴らしい点の一つです。
日本語サイトはイメージが異なる場合も
一方、世界共通で利用できる前提のため、公式テーマの多くは英語フォントで構成されています。そのため「気に入ったからインストールしてみたけど、自分のサイトにはちょっと合わない」「英語フォントだから格好いいが、日本語フォントになるとちょっと微妙」といったことになりがちです。
そのまま使えればいいですがなかなかそうはいかないため、その場合はデザイン部分の調整やカスタマイズをすることで体裁を整えます。
ちなにみ、日本語で公式テーマディレクトリに公開されているテーマで有名なのはLightningです。長年公開、更新されている優良なテーマです。
有料で販売されているテーマを購入して利用する
- 有料でもいいから目的にあったテーマを利用したい
- テーマ導入や利用していてテーマでわからないことがあったらサポートを受けられる体制がほしい
- 有料でもいいので日本語ウェブサイトのために作られたテーマを探している
- 作りたいウェブサイトの機能を満たしている有料のテーマがある
こういった場合は有料テーマを選択するのも一つの方法です。有料テーマを販売している企業はテーマ販売とサポートを提供し、機能のアップデートやバグ対応、セキュリティ対策といった面でも継続的に更新しており、無料テーマにはない、もしくはより優れたサービスを提供しているのが一般的です。
WordPress公式として、GPLライセンスに限定していますが有料テーマの紹介をしています。ざっと見たところあまり認知していないプラグインが多い印象でした。
有料サポート GPL テーマ | WordPress.org 日本語
有料プラグインの多くは継続的に費用がかかる
プラグインの費用感として5,000円〜30,000円程度に集約しています。日本語専用テーマだと10,000円〜20,000円が多いです。これは一度買ったらおしまい、というよりは年間の利用ライセンスとして販売しているのが一般的です。
一度買い切りで使い続けることもできるのですが、WordPress本体や各種プラグインの更新、PHPのバージョンアップ等により、テーマ側で使っていたテンプレートタグやコードの記述を修正する必要がどうしても出てきます。
また、WordPress5.0で登場したブロックエディタに対応したり、その他テーマ側の新機能追加として、バージョンアップされることがあります。
それらの継続的な更新を提供するため、テーマのバージョンをアップデートし続けるには、継続的に費用を支払うという形です。
実際に、継続的に更新していなかったがために、WordPressやプラグイン、PHPのバージョンをアップデートするとエラーメッセージや不具合が発生したというケースを多く見てきました。有料テーマを使ってウェブサイトを運用していくと決めたら、WordPressの保守とともにテーマのアップデートも行い安心して使っていけるようにすることをお勧めします。
テーマ主戦場はやはり英語圏
WordPressは全世界で利用できるCMSのため、どうしても英語圏での情報がメインとなります。テーマも同様で、日本語専用テーマよりも各言語対応したテーマの方が圧倒的に数が多く、機能面でも価格面でも優位となります。
例えばスターターテーマでもご紹介した Genesis ですが、40テーマ以上と多くの有料テーマを販売しています。また、100万以上のインストールを誇りながらもレビューが5点満点という無料テーマのAstraに、ヘッダーやフッターのテーマビルダー、カスタムレイアウト、AMP対応等より機能を発展させた約5,000円〜の有料版があります。
他にもDiviという海外の有料テーマが有名です。Elementorというページビルダー機能で有名なプラグインがありますが、Elementorのようなページビルダー機能がDiviには備わっており、豊富なレイアウトから選択しページを作成していけるため、コードをいじらず管理画面からサイトが作れるのが特徴です。小〜中規模のコーポレートサイトやブランドサイト等に向いているといえます。価格は約10,000円〜。
このどれもが海外のテーマとなり、豊富な機能に使い勝手、各種プラグインへの対応やサポート等、英語というハードルはありますが費用対効果はまだまだ国内プラグインには及ばないというのが実情です。
テーマを利用するなら子テーマの作成を検討する
どのようにテーマを作るのかの方法をご紹介しましたが、オリジナルテーマではない場合は無料ないし有料のテーマを使って構築していくことになりますが、カスタマイズを一切しないというのでなければ、子テーマを作ってテーマを構成していくことを強くお勧めします。
- 親テーマ側のアップデートがあった際に更新できる
- 必要な箇所だけカスタマイズすればいい
- カスタマイズの範囲が狭ければファイルは最小限に収まる
- 管理しやすい
きちんとしたテーマであれば、WordPress本体やPHPのアップデートに合わせてバグ修正やセキュリティ対応等、最低限のアップデートの他、テーマ独自の機能追加のためアップデートがあります。子テーマとして作成せずにカスタマイズしていると、アップデートでカスタマイズ部分が全て上書きされてしまうため、実質アップデートできない状態です。それではまずいので、少しでもカスタマイズを行うならば子テーマを作成して管理する必要があります。
少し古い記事ですが、以前子テーマについて説明しました。
[WordPress]カスタマイズを始める前に覚えておきたい子テーマ機能と作成方法
コードを書かずにページビルダーでサイトを作るという方法
本題から少しそれますが、先程少し出たページビルダーについて。
WordPressサイトの制作は一切コードを書かずにサイトを作ることがすでに可能になっています。それがページビルダーという機能で、先程紹介したDiviはテーマ内にページビルダー機能をもっており、ページビルダーで有名なプラグインであるElementorは無料プラグインとして5百万以上のインストール数がある実績のあるプラグインです。
Elementorの有料版には無料版にない機能として以下の機能があります。
- スライダー、フォーム、ナビゲーションメニュー、コールトゥアクション等を含む50以上のウィジェット
- ヘッダーやフッターを管理画面から作成、管理できるテーマビルダー機能
- ニュースレター購読や限定オファー等の目立たせたいモーダルを作成できるポップアップ機能(特定のURLから遷移してきた場合や、ページを何回見たら等、複雑な条件で設定でき、表示するページや場所も設定できる)
- フォーム系プラグインが不要になる程のフォーム機能
- ECプラグインであるWooCommerceに完全対応し15以上のショップ専用ウィジェット
- Adbanced Custom Fields等と連携しノーコードで実現するカスタムフィールド対応
- パララックスやマウスエフェクト等のモーション対応
- サポート対応(英語)
実際、Elementor有料版を使ってサイト制作をしていますが、今までのオリジナルテーマ制作等のフローとは全く異なるフローになり大変な部分もありつつも、それ以上の機能や可能性に驚きました。
「Elementorを利用しながら、カスタマイズが必要」という場合でも問題有りません。子テーマを作成して必要なカスタマイズのみ記述するだけです。例えば、Elementorでフォームを作り、フォーム送信後に資料をダウンロードするリンクを表示する、というのはElementor側の機能にないためPHPとJavaScriptを組み合わせて実装しました。このようなカスタマイズはノーコードで実現というのは難しく、相応の知識が必要になります。
とはいっても、多くの普通のコーポレートサイトやブランドサイト等で必要としている普遍的な機能であればおおよそ含まれており、あとはどう使うかという問題で済むことがほとんどでしょう。
よりよいテーマ作成方法を求めて
WordPressは現在ダウンロードできる最も古いバージョンは2.5-RC1となり2008年3月です。10年以上経過しているため、WordPressを使ったサイト制作のワークフローも常に変わりつつあります。
様々な取り組み方がありますが、構築して終わりではなく、公開してから安全に運用していけるテーマ作成が前提です。この記事がプロジェクトに合ったテーマ作成方法の一助となれば幸いです。
コメントを残す