既成テーマを活用した制作の際に気をつけていること

投稿日:

最終更新日:

カテゴリー:

近年、WordPress を使ったウェブサイトやホームページ制作において、便利なテーマをベースとした制作や開発をされることも増えてきているように感じています。

当然、ゼロからスクラッチでテーマ(多くはクラシックテーマかな?)を作っていくという制作手法は、現在も多く選択されていると思います。しかし、WordPress 5.0 からブロックエディターが標準エディターとなり、変化も激しく、それらに対応した整備やアップデートをオリジナルで制作納品したテーマに対応していくことは難しいと感じる制作者も多いのではないでしょうか。

であれば、テーマ側のこれらの対応は信頼できる開発者が開発しているテーマに任せ、それ以外の部分を補っていくという制作方法を選択することも増えてきています。これを冒頭にも書いている「テーマを利用した制作方法」を指しています。

本記事では、僕の独断と変換が強く反映されていますが、僕自身が WordPress を使った制作や開発に携わる上で感じた「テーマを活用した制作・開発の際に意識して気をつけるべきこと」をまとめてみました。

あくまでも個人の現時点での最適解ではありますが、どなたかの参考になれば嬉しいです。

利用するテーマについて理解する

これは欠かすことができない部分で、利用するテーマに関する理解はとても重要です。あまり理解できていないテーマを利用すると、この後に紹介している各フェーズで最適な判断をすることが難しくなります。

例えば、利用するテーマのエディター側で画面幅(PCやタブレット、スマホなど)に応じてパディングやマージンを設定できる機能を持っていたとします。

しかし、その機能の存在を知らず、CSS クラス名を割り振り、メディアクエリでパディングやマージンを指定してしまうとします。

これでも問題なく動作はするでしょう。しかし、後ほどエディター側でパディングやマージンなどを画面幅ごとに設定された場合、CSS の詳細度によってはエディター側のスタイルが強くなってしまい、意図した表示とならない場合が発生しかねません。

こういう状況を避けるために

  • 「エディターに用意してあるこの機能は使わないでください」と伝える
  • 無理やりその機能が表示されないように(管理画面で display: none するとか)する

このような対応も考えられますが、「(それをするなら、なぜこのテーマを採用した…)」や「(用意されている機能を使わせないための工数が発生している…必要なのだろうか…)」といった気持ちが発生しなくもありません。

考え方によっては上記の対応が最適となる場合もあると思いますので否定はしませんが、無闇に施される対策ではないと思っています。(無闇に施されるようであれば、制作手法が最適ではない可能性もある)

上記の例えのように、あるテーマをベースにした制作や開発をする理由は、(基本的に)そのテーマが持つ機能を活用することだと思います。そのために、そのテーマでできることを把握し、最適な開発方法を選択するための前提知識は持っていると良いでしょう。いや、ないと困りますよね。

デザイン再現度を話し合える環境作り

WordPress には大きくわけて2つの特徴があります。1つは「テーマ」、もう1つは「プラグイン」です。

「テーマ」はウェブサイトの見た目を管理・コントロールするものだと WordPress は位置付けています。また、「プラグイン」は機能を管理・追加するものだという説明がされています。

「見た目」を変えられるということは「構造」を左右することになります。同一の構造でどんなウェブサイトにもできるなんてことはありません。

例えば、スポーツカータイプの車があるとします。どのようなプロに頼んでも、これが四駆にはならないでしょうし、しようとも考えないのではないでしょうか。まぁ、できないわけではないでしょうけど、最適なアプローチではないと思います。骨格によってカスタマイズに限界があるということを想像していただければ嬉しいです。

テーマはそれぞれ出力できる HTML 構造に特色があります。ブロックエディターを使っているのであれば、コンテンツ部分にはコアブロックやプラグインから提供されるブロックなどで構成された HTML が出力されるので、ある程度想定することができます。

しかし、その外側の構造がクラシックテーマの場合、テーマによって違いがあります。ですので、自ずと実現できる表現に違いや限りが生まれるのです。

デザインによっては、利用しているテーマでは再現できないレイアウトがあったり、近しいレイアウトしか再現できないという場合もあります。

そういったことが起きた際に、どの程度デザインを再現するかの相談ができる環境というのがとても大切になると考えています。逆に、このやりとりが難しい場合(=デザインがすでにフィックスしていて調整が不可能な場合など)はテーマを活用した制作・開発は最適解ではないと僕は考えています。

ですので、テーマを活用した制作をする場合には、デザイン再現において相談・調整の余地があることは必ず確認するようにしています。

スタイリング面におけるカスタマイズ方法の選択優先順位

テーマを活用した制作の多くの割合を占めるのが CSS によるスタイリングになることは少なくありません。ここではスタイリングをする上での方法選択候補を紹介します。

内容によって最適解は変わりますが、基本的に先に紹介している方法から順に検討することが僕は多いです。

軽微なCSS追加

簡単な CSS 追加だけであれば、追加 CSS 機能などを使って記述してしまうこともあります。

判断の基準としては、

  • カスタマイズの予算がほとんどない
  • 子テーマやプラグインを用意するほど CSS の記述量が少ない

などによって考えます。記述量が多い、またはコードとして管理したい(=エディターでちゃんとコードを書きたいなども含む)場合には、この選択肢を採用することはありません。

子テーマまたはプラグインよりCSSファイル読み込み

コードとしてしっかり管理したい、または Git などでバージョン管理をしたい場合には、子テーマもしくはプラグインという形で開発を進めることになります。

そうすることによって開発のスピードは高めることができますが、CSS を読み込むために PHP を記述する必要があったりするため、手間はかかります。

ブロックスタイルを用意

ブロックスタイルというのは、ブロックを選択した際にスタイルタブで簡単にスタイルをボタンで切り替えられる機能のことを言います。

ブロックスタイルを登録するためには PHP の記述が必要になるのですが、is-style-*** というクラス名に対してスタイルを指定することで、簡単にユーザーがスタイルを選択・切り替えをすることができます。

うまく使うことで運用面でも便利になるのでおすすめです。

ブロックバリエーションの活用

ブロックバリエーションというのは、すでに存在するブロックの属性などを変更して、あたかも別のブロックであるように用意することができる機能です。

こちらを活用することで、上記したブロックスタイルをすでに選択しているブロックを用意することができるので、操作をよりシンプルにすることができます。

今後、WordPress のコアブロックでもカスタムフィールドなども使えるようになることが期待できるので、より一層活用できる場面が増える可能性を感じています。

オリジナルブロック開発

これはまさに最終手段と僕は考えています。また、オリジナルといってもスクラッチで作るのか、Lazy Blocks などプラグインを使って用意するのかも検討が必要でしょう。

しかし、どうしても再現しなくてはならないデザインがある場合は、こちらを選択することも必要になるでしょう。しかし、メンテナンス性などで考慮しなくてはならない部分も増えるため、採用には検討が必要になると考えています。

機能面におけるカスタマイズ方法の選択優先順位

ここまではスタイリングをメインに方法を紹介してきましたが、ここからは「機能」を追加する際の考え方を紹介します。

利活用できるプラグインを検討する

WordPress に機能を追加したいと考えた際に、まず最初に検討するのは「どのプラグインを使おうか」という点でしょう。それくらい WordPress に機能を追加するとなると「プラグインの導入」という考えになるかと思います。

僕も何かしら機能を追加する際にはプラグインを活用します。しかし、中には「プラグインがいつなくなるかわからないじゃないか。だから機能は自作した方が良いのではないか」と考える方もみえるようです。

その考え方自体は理解できるのですが、僕はその方法が最適解ではないと考えることが多いです(全ての場合においてではないです)。

判断する際に一番大切な要素になってくるのが「どのように管理・運用されていくのか」だと思います。

プラグインを導入して機能を実現したとしても、それで終わりとは考えることはできません。運用していく上で、必要に応じて適切なタイミングでアップデートを実施する必要があります。

独自に機能開発した場合でも同様です。WordPress や利用者の変化に対応する形で適切なアップデートを実施していく必要があります。

このように、どのように機能を実現・実装するかという検討には、運用方法が大きく関係していくることがほとんどです。しっかりと意見交換をした上で実現方法を検討していきたいですね。

子テーマまたはプラグインを使ったカスタマイズ

実現したい機能の中には、適切なプラグインを見つけ出すことができない、または存在しない場合もあります。

そういった場合の実現方法としては「機能開発」しかないでしょう。しかし、個人的にはこの機能開発の必要性をかなり慎重に判断するようにしています。

というのも、その機能をプラグインなどを使って WordPress 自体に持たせるべきなのか、それとも外部のサービスなどをうまく活用して実現するべきなのかを検討します。

WordPress はとても便利な CMS であり一種のフレームワークのようなものだと思います。ですので、PHP などを書くことができる人であれば、実現自体が難しいとなることの方が少ないこともあるでしょう。しかし、大切なのは「WordPress の中でやるべきかどうか」を考えることだと思います。

それは前述しているように、運用やメンテナンスの側面からも考える必要があります。ぜひ「機能を実現する」という側面だけではなく、運用のしやすさ、メンテナンスのしやすさ、ユーザーの使いやすさといった観点からも検討することを忘れずにいたいと考えています。

機能の持たせ方を最適化する

カスタマイズの方法について言及しました。そこに関連する形で WordPress にどのように機能を持たせるかという点も考慮していく必要を感じています。

例えば、WordPress にはカスタム投稿タイプというものがあります。投稿や固定ページ以外に特別な投稿タイプを作ることができます。

このカスタム投稿タイプをテーマ内から登録したとします。よくあるのは functions.php などに記述して実現する方法ですね。しかし、何かのタイミングでそのテーマではない別のテーマに切り替えることになったら、このカスタム投稿タイプはどうなりますか?

そうです。表示されなくなります。厳密にはデータベースには残りますが扱われなくなります。

リニューアルなどテーマを切り替えるタイミングは正直予測は難しいです。しかし、リニューアルをする際に、これらの扱いを考慮する必要があります。

では、このカスタム投稿タイプの実現をプラグインに分けておいたらどうでしょうか?そうすることで、テーマを変更したりリニューアルを検討する際にも、大きな足枷にはならないのではないでしょうか?

ここでは簡単にカスタム投稿タイプを例に紹介しましたが、だからと言って「カスタム投稿タイプを用意するならば絶対にプラグインでするべき!」と考えているわけではありません。

必要なのは、そのプロジェクトに最適な方法を検討することです。考えの一点張りではなく、常に最適解は変わっていくものなので、その時点での最適解を探していきたいですよね。

そのためには、テーマやプラグインの特徴、さらには WordPress の変化や特徴もできるだけ知っておくことで、検討を進める際に参考にできる情報量が変わってきます。

やはり、WordPress に限らすですが、常日頃からの情報収集はとても大切ですね。

まとめ

僕個人の、既成テーマを使う際に考えたり気をつけたりしていることを紹介してみました。この他にみなさんが気を付けていることなどありますか?ぜひ、この記事を引用してポストしてみてください。

そうやって、いろんな人がいろんなことを検討していくことで、WordPress のさまざまな活用方法が明示され、多くの方が参考・参照できると、より良いものが多く生まれていくような気がします。

WordPress 楽しんでいきましょう。

コーディングや
WordPress開発のリソースが足りない!

オレインデザインでは、デザインデータからの HTML コーディングから WordPress テーマ・プラグイン開発まで幅広くウェブ制作に対応しています。

お気軽にお問い合わせください。

WordPress 6.5.x 対応版を出版しました

WordPress デフォルトテーマ Twenty Twenty-Four を使って、シンプルなブログやポートフォリオサイト、そしてコーポレートサイトを作りながら、ブロックテーマやサイトエディターの基本を理解することができます。