WordPressテーマに欲しかった機能を実装した
今回WordPressの構築をする際に「これがあったらいいのに」といつも思っていた機能を実装したのでその話をします。もしかすると使ったことがないテーマに実装されていたかもしれませんが…
投稿ページを指定したときに、関連ページにタイトルが反映される
WordPressは管理画面の「表示設定」で、任意の2つの固定ページを「フロントページ」と「投稿の一覧ページ」に指定できます。ウェブサイトとして運営するのであれば、必ず設定すべき機能です。
日本のウェブサイトではページ先頭にそのページのタイトルと英語名（WordPressであればスラッグ）を大見出しとして自動表示するというのを、よくやります。
例えば「ニュース」というページを作って、投稿の一覧ページに割り当てた場合、そのページの大見出しは当然「ニュース」になります。しかし、カテゴリーやタグの一覧ページは大見出しが出ません。このため、構築するサイトに合わせて毎回、手書きのHTMLで大見出しを追加しなくてはならないのです。
…伝わっているか心配になります。
まあとにかく、それを案件を立ち上げるたびに作業しているのがとても無駄だと思ったので、 mosir では投稿タイプが「post」のカテゴリー・タグ・年月アーカイブには自動的に、投稿の一覧ページに割り当てたページのタイトルとスラッグを表示するようにしました。
get_option('page_for_posts') 関数を実行すると、投稿の一覧ページを設定していた場合、そのページのIDが返ってきます。これをさらに get_post() 関数に渡すと、サイト内のどの画面であっても投稿の一覧ページのタイトルとスラッグを取得できます。
$mosi_posts_page_id = get_option('page_for_posts') ? get_option('page_for_posts') : (bool)false;
$mosi_posts_page = $mosi_posts_page_id ? get_post($mosi_posts_page_id) : (bool)false;「投稿の一覧ページ」は必ず設定されているとは限りません。また、この対策が必要なのは「投稿(post)」のときだけで、他の投稿タイプのときは必要ありません。このため、いろいろな条件でテストして、不具合が起きないよう注意する必要がありました。
言語が英語だったらスラッグを出さない
例えば日本のウェブサイトではページ先頭にそのページのタイトルと英語名（WordPressであればスラッグ）を大見出しとして自動表示するというのを、よくやります。
…と書きましたが、日・英対応のサイトだった場合、英語版では上のタイトルと下の英語名がかぶってしまいます。
このため get_locale() 関数で言語コードを調べ、「en_」が含まれていれば英語圏の言語であるとしてスラッグを消しています。
<?php
// In Japan, it is customary to include the English translation (here, the slug) at the bottom of the main heading.
// This is not necessary in English-speaking languages, so it is hidden.
if( !preg_match('/^en_/', get_locale() ) ):
?>
<p class="p-pageHeader__caption" lang="en-US"><?php echo ucfirst( esc_html($mosi_posts_page_slug) ); ?></p>
<?php endif; ?>新着情報の見出しとレイアウトを変更できるようにする
mosir はブロックエディタに対応しているだけではなく、投稿新着を呼び出すクエリループブロックも使用できます。サイト内のすべての固定ページ、つまり、フロントページでも使用できます。
なので mosir には「トップページに新着情報を表示する機能」は必須ではなかったのですが、結局、がっつりカスタマイザーで実装しています。クエリループブロックがリリースされてからずいぶんになりますが、デザイン、仕様とも、日本のウェブサイトで要求される品質に届いていないからです。
投稿の表示条件の他に、クラシックテーマにもあったらいいなと思っていた「見出しの文字列の指定機能」と「デスクトップ画面のときに、2カラムにするかを選択できる機能（クエリループ全体 or ヘッダだけ）」も実装しています。
指定した要素の幅によってCSSを切り替える「コンテナクエリ」がすべてのブラウザで使用可能になったので、こういった実装をしやすくなりました。
ダークモード
機能としては実装していませんが、CSS変数を整理して、CSS変数の再定義だけで反転色やハイコントラストのサイトを作れるようにしました。以下のような感じで反転ができます。
@media (prefers-color-scheme: dark) {
--body-color: var(--color-default-fade);
--body-bg: var(--color-default-dark);
--link-default-color: var(--color-primary-lighter);
--link-hover-color: var(--color-primary-lighter);
--ui-inverse-color: var(--color-black);
--ui-error-color: var(--color-important-light);
--ui-fade-color: var(--color-default);
--ui-fade-error-color: var(--color-black);
--ui-border-color: var(--color-default-light);
--ui-border-light-color: rgb( 255 255 255 / 0.2 );
--ui-cover-default-color: rgb( 0 0 0 / 0.8 );
--ui-cover-inverse-color: rgb( 255 255 255 / 0.5 );
}
CSSの色関係のクラス名・変数名の見直しを考えていましたが、これについてはやめました。他に適切な命名が見つからなかったので、これまでの自分の仕事を信じることにします。
固定ページのページタイトルを最上層の固定ページのタイトルにする
例えば「会社概要＞グループ会社一覧」という頁があった場合、「グループ会社一覧」ページのタイトルをこのページではなく親の「会社概要」にする…というカスタマイズを、業務ではよくやります。
mosir にも実装しようかと思いましたが、これについては実装していません。ページタイトルを最上層の親のタイトルにしたくないケースもあるからです。
あとちょっとで完成だー
開発中のWordPress「mosir」で予定していた機能を全部実装しました。あとは各テキストの翻訳だけです。長かった…
年明けからしばらく仕事が忙しかったので、会社に有給をもらいました。温泉旅行に行ったり、 mosir の開発をしています。勤め先はMovable Typeが主力ですがWordPressが必要になる案件は意外と多いです。勤め先の業務でも役に立てばいいなあ。
