WordPressを用いた設計で工夫したこと

2021年8月23日、弊社コーポレートサイトを全面リニューアルしました。

私はWordPressの設計とコーディングを担当しました。

企業サイトをWordPressを用いて設計するうえで、これまでの経験から工夫した点をお話したいと思います。

用いたWordPressテーマについて

結論から言うと、Underscoresを用いてフルスクラッチで開発しました。

いくつか理由があるのですが１番大きな理由は、
テーマによってデザインが制限されるべきではない
と考えたからです。

今回はデザイナーさんが制作したデザインをできる限り忠実に再現することが前提にあり、
WordPressテーマによってデザインに制限をかけることをしたくなかったため、
ブランクテーマであるUnderscoresを元に開発しています。

Underscoresについては私の過去記事を参照してください。

WordPressのスターターテーマについて

WordPressにてサイトを運営しているとfunctions.phpは肥大化していく傾向にあります。
これをどうにかしたいと常々考えていました。

特に弊社のサイトはかなり古いWordPressの時代からアップデートしていたので、
バージョンアップによって必要になったもの、逆に不要になったもの・非推奨になったものなど
様々なコードがfunctions.phpにまとめられていたので、この機会に整理し、functions.phpを分割しました。

図のようにfunctions.phpを機能別に分割し、機能群としてのファイル（admin.phpなど）を集約する形を取りました。

これによって、機能の追加や更新をどこで行えばいいか明確になり、今後の更新コストが減ると予想しています。

WordPressのCSSはstyle.cssに書いていくのが基本です。

企業サイトとなると様々なページがあり、デザインコンポーネントの数も増えていくため、
style.cssが肥大化するのは避けられないことか思われます。

肥大化するだけならまだしも運用している最中に、
1箇所修正したつもりが他のページまで変更が適用されてしまった。
ということが起きやすくなります。

そのため、CSSを分割したいと考えたのですが、検索してよく出てくる
style.css内で@importにて分割CSSを読み込む方法では、
ページ読み込み速度が遅くなると言われているので

分割したScssをコンパイルして1つのstyle.cssにまとめることにしました。

このように、肥大化しやすく更新コストがかかりやすいfunctions.phpとstyle.cssを工夫して分割することで、
どこにどのような内容が記載されているかわかりやすくし、
サイトの運用コストを下げることに成功しました。

次回、このCSSの構造と設計、運用ルールについて詳しくお話したいと思います。