BX-00など、サンプル事例、デモサイトのページを見に行けばCSS/Javascript用の開発リポジトリと、WordPressテーマの公開リポジトリをご確認いただけるように設定しています。
Github上のデータをご覧いただければ分かる方には分かる仕様になっていると思っていますが、ドキュメント等はまだまだ整備が間に合っていないので、今回どんなテーマで、どんな意図を持って公開しているのか、その辺りを簡単にご説明します。
目次
工数削減が基本コンセプトの開発者向けテーマ
BLUE B NOSE（以下:BBN）で使用するテーマの原型かつ試験機や試作機としての位置付けから、”BX-“とナンバリングによる型式番号風の名前を付けている「BX-00」〜「BX-09」ですが、どれも基本的な設計思想としては、「管理画面上での操作を減らす」です。WordPressの管理画面にログインして、投稿や固定ページ、プラグイン等の設定を編集、データベースにデータを紐付けて更新する作業、操作を極力発生させないようにすることで、ローカルのテーマ編集、テーマ開発から公開までの工数を抑えつつ、他のプロジェクトへも転用、再利用がしやすいように作成しています。
トップページ用のファイルとして`front-page.php`を用意し、固定ページ等をトップに設定する操作も不要にし、メインループ、サブループもphpファイル内に記述しやすいように変更していますし、固定ページに関しても、既存ページや新規追加したページの`slug`を変更すれば使えるように、`page-slug.php`を最低限必要となるページ分だけ、用意しています。
また、ページ毎、サイト毎に固有名詞や固有のパラメーターのみが異なる部分に関しては、`lib`フォルダの中に`setting.json`としてデータ流し込み用のjsonファイルを用意してあるので、企業名やHPのURL、電話番号やメールアドレス、プライバシーポリシーの連絡先やSNSのアカウントURL、Googleタグマネージャーの設定なども、そこさえ編集すれば問題ないように集約、`get_vars`で呼び出せるようにしています。
ただ、同テーマで使用するCSSやJavascript、WebP画像やAvif画像の生成等に関しては、専用のボイラープレートで別途用意する形にしているので、そこの一手間は飲み込んでいただけますと幸いです。
以前は`テーマ名_dev`とCSS、Javascriptを管理する開発用テーマ、環境も同梱する形にしていましたが、WordPress以外に導入する可能性も出てきたので、切り離しを容易にするため、別立てする形を選択しました。
なお、テーマの管理に不可欠なテーマフォルダ直下の`style.css`に関しては、完全に管理専用のファイルとしているので、Webサイトの見た目に影響するデータに関しては、`css/style.css`と別のCSSを読み込む形としています。
MAMPやXAMPなど、ご利用されているローカル開発用の環境、該当ディレクトリへ`git clone`していただいた後、そのまま開発用のWordPressを別途インストールしていただいても良いように、`.gitignore`でWordPress本体に関するファイルは無視できる形にもしています。もし、`home_url`と`site_url`を帰られる際は、その辺りの設定も加筆編集の上、ご利用いただけたらと思います。
同梱してある`.editorconfig`などもお好みで編集してください。
ダークモード、PWA、レスポンシブ、構造化マークアップ等はアリ。AMPはオミット
テーマの主な機能としては、ほぼ見出しの通りです。
パンくずやページネーション、Contact Form7の利用と同梱CSSの環境を前提としたフォーム関連の追加機能も実装しています。また、svgのFaviconも使用できるように、`img/favicon.svg`と`favicon.ico`、Safari向けにPWA用の180x180pxの画像を引っ張るような設定も組み込み済みです。
ダークモードに関しては、テーマというか同梱のCSSによる機能（メディアクエリによるカスタムプロパティの上書き）なので、無効化したい時はCSSの生成から編集していただけたらと思います。
また、管理の手間を考慮して、エージェントの判定によって「モバイルかどうか」を判定する処理は特に実装していません。共通のCSS、PC向け、タブレット向け、モバイル向けとCSSを分割して読み込む処理も実装していません。
AMPで導入してもほぼそのまま使用可能なサイズのminify化済みのCSSであれば、HTMLにインラインで読み込んでも特に減点されないようなので、`wp_enqueue_scripts`と`str_replace`、`wp_add_inline_style`等を駆使して読み込むようにしています。
jQueryに関しては、Contact Form7を使用しているページ（スラッグは`inquiry`を想定）と管理画面以外では不要なので、jQueryの読み込みやContact Form7用のCSS、Google reCaptchaのバナーなども、該当ページ以外では読み込まないように設定済みです。
PWAは、最低限のPWA用の設定を`pwa`ディレクトリにまとめているので、iconのリサイズはCSS/Javascript生成の環境をご利用していただいた上で、`pwa`ディレクトリ内のmanifest.jsonやsw.jsを編集いただけたらと思います。
`lib/breadcrumb.php`や`lib/pagination.php`、`lib/json-ld.php`はサイト毎、仕様ごとに要調整のファイルだと思うので、パンくずやページネーションにこだわりのある方、構造化マークアップを調整したい方はこちらのファイルをご確認いただけたらと思います。
AMPも、AMP化するためのプラグインと、AMP用に書き換えたファイルを用意すればほぼそのまま使えるとは思うので、canonical周り等も留意しながら実装されてみるのも良いかもしれませんね。
各種functionは、libディレクトリへ分割しています
WordPressテーマの開発に必須の`functions.php`ですが、今回のテーマでは全ての機能を一つのファイルに集約するのではなく、`lib`ディレクトリへ分割する形、`functions.php`でそれぞれ`require_once`して使用しています。
`functions.php`では、`pre_get_posts`で一覧ページの種類ごとに表示件数を変える処理とか、`front-page.php`のメインループの`post_type`を操作したり、`no_found_rows`に`true`を追加するといった処理しかしておらず、他はほぼ分割後のファイルへ割り振っています。
カスタム投稿の追加や投稿画面の機能拡充は`lib/custom-post.php`、メインループやWP Query等のループに関する機能は`lib/loop.php`、setting.jsonのデータやテーマフォルダまでのURLを取得するショートコードなどの設定は、`lib/get-vars.php`、OGPの設定やtitleタグに関する設定、Canonical等は`lib/head.php`、非管理者向けの表示項目整理やwp_head等のコード制御は、`lib/management.php`、CSSやJavascriptの読み込みは`lib/script-load.php`、その他の便利ツールは、`lib/utility.php`といった分割具合です。
head.phpやscript-load.phpに機能を分割しているので、header.php、footer.phpもかなりシンプルな構造です。分割自体は適当だったりするので、使いやすいように調整してください。
WordPress標準機能や、Gutenberg由来のスタイリングの制限、sitemapの自動生成の制御は概ね`lib/management.php`か`lib/script-load.php`だと思うので、余計なコードは増えるけど機能制限を解除したい時は、その辺りをチェックしてみてください。
その他の各種設定は概ね setting.json
特定の記事やページがサムネイルを持たない時の設定は、`lib/get-vars.php`や`lib/head.php`等にも分散していて、`thumb.png`や`ogp.png`を取得させるようにしていますが、その他の設定、固有名詞等はほぼsetting.jsonに記載しています。
サイト名に関しては、WordPressをインストールする際に記入するので流石に不要かなと判断しましたが、サイト全体の標準descriptionや共通のmeta keywords、デフォルト著者の名前や自己紹介、SameAs等でも使用する各SNSのURL、サイト規約やプライバシーポリシーへ流し込んでいるサービス名、コピーライトの表記等も、setting.jsonへまとめています。
どのサイトでも必要そうな会社概要、サイト規約、プライバシーポリシーも、各`page-slug.php`に記入済みで同梱しているので、条文等は特に編集せずに使えるとは思いますが、適宜書き換えていただけたらと思います。
調整を要するのはContact Form7関連ぐらい
必要な固定ページの生成やテスト投稿の準備は、wp cliでgenerateした後、管理画面の一覧表示画面で「クイック編集」をクリックしてできる更新や編集で十分、一ページずつ開いてデータを更新するような手間も不要だと思いますが、唯一お問い合わせフォームに関しては、Contact Form7の使用を前提としているので、フォームの設定やメール文面の設定、お問い合わせフォームを埋め込むページとショートコードの入力設定だけ、管理画面からの編集をお願いします。
また、郵便番号から住所を自動入力する追加プラグインを有効にするため、`page-inquiry.php`では`the_content()`を用いてショートコードを実行する形をとっています。
なお、使用を想定しているプラグインは`wp plugin install akismet contact-form-7 contact-form-7-honeypot edit-author-slug ewww-image-optimizer google-sitemap-generator wp-multibyte-patch advanced-custom-fields flamingo wp-mail-smtp zipaddr-jp`で一通りインストールされます。有効化した後に編集が沢山必要なプラグインもそこまでないので、ほぼ唯一と言ってもいい手間はContact Form7の編集と、セキュリティ向けのキー発行ぐらいでしょうね。
パーマリンクは、id + /
「意味のあるURL」としては弱いのですが、日本語のままURLが発行されてしまう可能性や、ユーザーの更新時の手間を考慮して、事故っても問題が小さそうな`id`を選択しています。
また、固定ページや一覧ページへのリンクを貼る際も、最後に’/’が来るようにして、スラッシュありとなしの混在が起こりにくいよう注意しています。
カスタム投稿も、`種別 / id + /`の形に治るよう調整しています。カスタム投稿の追加方法や、「投稿」のアーカイブページURLの設定方法、変更方法を見たい方は、`lib/custom-post.php`をご確認ください。
ブログとお知らせで分けなくても良いのかなと思いつつ、新たに何か追加する際にコピペする元があるのとないのとでは楽さに差が出るという判断で、あえて残してます。
WordPressサイトでも、表示も開発も早いを目指して
昨今のTwitterの仕様変更に合わせて、事故が少ないように正方形のサムネイルを取得する機能を追加しておいたり、pictureタグを使ってテーマフォルダ内のWebp、Avif画像も使えるように、`wp_kses_allowed_html`フィルターに、`$tags[‘img’][‘srcset’] = true;$tags[‘source’][‘srcset’] = true;`と、srcset内でもショートコードが使えるようにしたり、今時の仕様に合わせて色々追加したり、余計なコードを出さないように調整したり、地味に色々追加してます。
表示速度の向上もさることながら、開発工数の削減や、再利用性の向上も目指して、「BX-00」〜「BX-09」を開発しました。
ないよりはあったほうが良さそうな機能を中心に、それなりに多機能にしてみたので、よかったら皆さんも使ってみてください。（整備不良で開発中にエラーが出て怒られるかもしれませんが、悪しからず）
そして、もし「こうした方が良い」というアイディア、知見等が見つかりましたら、ぜひ共有してください。どんどん共通規格化していって、土台となるCSSやJavascriptの見直しも含め、プロジェクト横断で使用可能なデザインシステムの構築を目論んでいるので、皆さまの使用感やご意見等も遠慮なくお伝えいただけますと幸いです。
開発者向けのシンプルテーマ、使ってください
高機能だけどいらない機能がついている無料テーマ、更新が面倒な有料テーマ等色々あると思いますが、BBNのテーマでは、そこまでややこしいことはしていません。PHPが分からない方や、管理画面で編集できる方が良い方には向いていませんが、どんどん数をこなさなければならない開発者さん、スキルを高めていきたいデザイナーさんには向いているテーマだと思っています。
BBNが得た知識や試してみたノウハウなどもどんどん共有、盛り込んでいきますので、ぜひ一度使ってみてください。使ってみたいけど分からないという方は、個別にお問い合わせいただければ解説いたしますので。
より良いフレームワーク、テンプレート等をお求めの開発会社様、クリエイターの皆様、BBNの独自テーマや開発環境を、ぜひ一度ご検討してみてください。
