WordPressテーマTwenty Twenty-Threeの子テーマでテンプレートを判別する

運営しているブログに仍っては、カテゴリー毎にデザインを変えるなど屡々発生する要請です。WordPressには当該ページのカテゴリーを判別する組み込み関数が用意されています。一つは当該ページが、カテゴリーページか否かを返す「is_category()」、もう一つは当該ページが任意カテゴリーか否かを返す“in_category()”で、共にBool関数で引数の真偽を判定して“true”若しくは“false”を返す条件判定関数です。此れに仍ってカテゴリーページの場合であれば条件を調整しながら、任意のコードや任意のスタイルシートを任意のカテゴリーに限定して追加出来ます。

上は投稿ページでの機能になりますが、同様にWordPressでは固定ページ毎にテンプレートを指定出来ます。固定ページでは固定ページ同士の親子関係も指定可能ですから、任意のページの下層に置かれた固定ページの全てに同じデザインを当て嵌めたい要請も屡々です。テンプレート自体は固定ページの投稿画面で指定可能ですが、此の時同じデザインを適用したい固定ページに同じテンプレートを指定すれば良いでしょう。此れを判定する機能を持つ組み込み関数が“is_page_template()”でした。

is_page_template()

組み込み関数“is_page_template()”はソースの“/wp-includes/post-template.php”を見れば、WordPressのバージョンが2.5.0からのもので、現行バージョンが6.3であれば可成り古い部類に属するのではないでしょうか。此れを引数を持たせずに用いればテンプレートが利用されているページが如何か、即ち固定ページの投稿画面でテンプレートを指定したが如何かの真偽が判定されますが、引数を持たせれば其れに該当するテンプレートであるか如何かの真偽が返り、従って特定のテンプレートが使用されているか如何かの判定に使えると言う按配の組み込み関数です。

引数には使われているか如何かを調べたいテンプレートに関する文字列を持たせるのでしたが、利用した向きには少しく奇異に感じた経験があれば同意せざるを得ません。構文を端的に言えば、以下の如く文字列として“パス”を与えるのです。

WordPressテーマTwenty Twenty-Threeの子テーマにグローバルカスタムメニューを追加する

近年のブログやネットショップなどに於けるシステムの傾向にwebサイトを構築する際のブロック・エディター化が有ります。ブロック単位でのレイアウト変更がweb上の管理画面にて容易に行えるシステムで、ネットショップでは勃興著しい「Shopify」が代表として挙げられるでしょう。世界で最も利用されるブログシステムのWordPressも此の傾向に無縁ではいられません。2018年師走に鳴り物入りで登場した「Gutenberg
グーテンベルグ
」に先鞭を告げ、先のデフォルト・テーマ「Twenty Twenty-Two」にて端的に導入されたWordPressのブロック・エディター化[※1]は最新のデフォルト・テーマ「Twenty Twenty-Three」で更に顕著なものとなりました。

此の傾向に於いてはITに其れ程馴染みの無い向きには便宜が図られるも、所与のデザインでは満足されない場合に此のカスタマイズを依頼されるIT屋に取っては、勿論、「Gutenberg
グーテンベルグ
」から既に五年を閲しようと言うものの、未だ先のテーマで明確な潮流となってからよりは長い時間を経ぬ上での状況も有って、なかなかの難物となる様で、近しい時期に引き継いだWordPressサイトの構築がブロック化を忌避するように全くデフォルト・テーマから切り離して昔ながらの手法で独自テーマを以て成されているなど見るに付け感じられる所ですが、流石に其の旧態依然さに驚かされも呆れさせられもし、此の如くブロック・エディター化を執拗に避けるのも限界があるでしょう、以て反面教師とし、他山の石としたく思い、少しく「Twenty Twenty-Three」に取り組み標題の知見をシェアするものです。

Twenty Twenty-Threeに見られる著しい変化

最新のWordPressデフォルト・テーマのフォルダ内を見て先ず驚かされるのは、カスタマイズする際にはお馴染みの「functions.php」ファイルが見当たらないことです。此れについては情報が錯綜してもおり、バージョンに仍っては付与されるケースも見られる様ですが、2023年5月現在には見当たりません。

WordPressでTwenty Twenty-Twoを親テーマにした時に独自ブロックパターンを子テーマに追加する

WordPressがバージョン5にメジャーアップデートした時、ブロックエディタ「Gutenberg
グーテンベルグ
」には驚かされた向きも多いのではないかと拝察するのは一時、手掛ける案件は殆どが従来の環境に寄せるプラグイン「Classic
クラシックEditor
エディター
」を要請に受けてインストールしたからです。「Gutenberg
グーテンベルグ
」は2018年師走に鳴り物入りで登場したものの従来との異質性から些か嫌われた面も有りましたが、数年を経て徐々に使われ始めている印象が有り、今後の普及は確実なものとなった様に感じられます。本記事も勿論エディターには「Gutenberg
グーテンベルグ
」を利用しています。

しかしメジャーバージョン5の目玉かと思われて来た「Gutenberg
グーテンベルグ
」も序章に過ぎませんでした。WordPress運営のメジャーバージョンアップデートの本来の目的は更に先に有りました。バージョン5.9で導入されたフルサイト編集機能と其れを活かすべく登場したテーマ「Twenty Twenty-Two」を以て明らかとなったのです。

Twenty Twenty-Two

新たに登場したテーマ「Twenty Twenty-Two」のWordPress公式の説明には「数十種類のブロックパターンを搭載し、数クリックでプロがデザインしたさまざまなレイアウトを利用できます。」なる文言が含まれるに従来からの飛躍が詰め込まれています。バージョン5.9で導入されたフルサイト編集機能との合わせ技にてエディター「Gutenberg
グーテンベルグ
」と同様にブロックエディターはサイト全体に拡張され、サイト全体のブロック編集が可能になったのでした。

サイト全体にブロックエディターが拡張されたのは管理画面に明瞭に可視化されています。下の図に於いて左が一つ前のデフォルトテーマ「Twenty Twenty-One」で右がテーマ「Twenty Twenty-Two」の管理画面になりますが、メニューの「外観」が明らかに異なり、「Twenty Twenty-Two」には僅か二つ「テーマ」と「エディター(ベータ)」しか項目が設けられて居らず従来からの異質性を見て取れます。

WordPressのアイキャッチ画像は英語でfeatured image

以前に良く見掛けた、 タイトルで言い切った 、的なエントリーです。 知ってる向きには何を今更、と言った処にて、 以下読む必要はありません。

featured image アイキャッチ画像

結論

上にリンクを貼り置いた Standing on the Shoulder of Linus ブログの2010年4月8日の記事では、 WordPressのバージョン2.9に於いて 投稿サムネイル機能 が追加され、バージョンが3.0に上がると其れは Featured Image と命名されたそうで、其の和訳こそ今WordPressユーザーに一般に流通する アイキャッチ画像 なのでしたが、日本語の決まっていないベータ版で訳が割り振られたそうなのです。

浜松市鴨江寺仁王門阿吽像
浜松市鴨江寺仁王門阿吽像

恥ずかしながら此の事実に気付かされたのは…

WordPressで特定親カテゴリーとその子カテゴリー全ての記事一覧を日付順に取得する

WordPress案件でよくある要請にカテゴリー記事一覧の表示があります。 単に特定の単独カテゴリーの記事一覧であれば 其の方法はネット検索すればかなり豊富に見付かります。 此れが複数カテゴリーの記事一覧の表示になると些か其の方法が見付かり難くなるのは カテゴリーの複数化に因る表示のバリエーションが増え、 情報が其々の状況に応じたものに寄せてあって目的に適い難い部分が出てくるからかも知れません。

バリエーションの一つとして此の要請のオプションに於いては屡々 カテゴリーの親子関係を考慮した記事一覧の表示が求められと言う条件が与えられます。 具体的に言えば 複数カテゴリーの其々最新の記事を一つづつ表示したり、 複数カテゴリーを横断して最新の記事を任意数表示したりする条件から、 中には親子カテゴリーを考慮して特定親カテゴリーに属する子カテゴリーの其々の記事一覧を表示したりするものまで なかなか多様な条件に彩られると言っても良いかも知れません。

手元で実現したい条件としては 特定の親カテゴリーの記事一覧と其の子カテゴリー全ての記事一覧を合わせて 中から日付順に表示していく必要があるもので、 此れもオプションとしては要請の度合いが高いものに属するかも知れません。 此の条件を実現しようとすると どうしても複数カテゴリーの記事の全てを取得して 時系列で整列させて上で表示させなければならなくなります。

WordPressでjQueryを必要とするJavaScriptファイルをjQueryの後に読み込む

世の中フロントエンドと言えばFacebookの提供するフレームワークなどで大規模なものを想起し勝ちとなりましたが まだまだホームページに於ける小規模な実装では jQuery が活躍しますしWordPressの2017年最新版に於いても標準で読み込まれるような実装となっています。 ちょっとしたスムーススクロールやアンカーリンクの無効化などを一部に適用するなどの要請では 特定のページに読み込むだけの実装で済ませられれば大規模なフレームワークでは些か冗長さを免れません。 jQueryを利用すれば此れ等の如きJavaScriptファイルは僅か数行となりますから尚更です。

懐かしのポケコン シャープポケットコンピューターPC-1210
懐かしのポケコン シャープ ポケットコンピューター PC-1210

此れをWordPressの特定ページに読み込ませたりする際には functions.php にWordPressの特有関数 wp_enqueue_script を用いてファイル読み込みを実装するのが定石でしょう。 例えばhomeで関連づけられた wp_register_style を用意して孰れかのタイミングで add_action おけばif文で条件分岐した wp_enqueue_style で読み込めると言った塩梅で実に重宝です。

固定ページ内のショートコードでショートコードを含む埋め込みウィジェットを機能させる方法

WordPressに於いてショートコードは使い出があり2015年3月12日に最終更新されているサイト WordPressの実 の記事のもある通り投稿ページや固定ページの記事内でPHPコードを実行させるべく下手にプラグインを用いるよりは 安心も出来るため頻繁に用いる処です。 固定ページにはPHPコードではなくショートコードを利用する!

処で今回固定ページの中ほどにウィジェットを表示させたい要請がありました。 元来ブログシステムはオンラインで記事編集出来るのが旨味であり 其の延長線上にあるのが通常はサイドバーなどに表示させるウィジェットです。 然るにウィジェット上の編集を固定ページや投稿ページの中ほどに反映させたい要請も必然です。 此処でウィジェットに記述された内容をコピー&ペーストすれば宜しいではないか、 という解決法が先ず想起されますが今回此の方法の採用はなりません。 なんとなれば中ほどに表示させたいウィジェットにもショートコードが用いられていたからです。 ウィジェットの記述をそのままコピー&ペーストすればショートコードが実行されないで ソースコードが其の儘出力される結果となります。 此れを避けるべく当該ショートコードに対応する処理をfunctions.phpに記述するのは 返って複雑化を招き難儀な状態となる処か、 利用者に取ってはブログシステムの旨味も享受出来なくなり本末転倒です。

親テーマをTwenty FifteenからTwenty Sixteenに移行する

只ほど高いものはない、と言う訳で無料ブログサービスシステムから WordPressに二つのブログ、1,000以上に及ぶ記事をまとめて移行したのですが 合間、合間の作業ともあって随分と時間が掛かってしまいました。 テーマは親テーマに独自のカスタマイズを少々施す子テーマを宛てがう手法を採用しました。 移行作業開始時の親テーマには最新のWordPress標準のテーマ Twenty Fifteen を利用しましたが年も改まって最新の標準テーマ Twenty Sixteen が提供されていますので 移行のほぼ完了した段階で親テーマを最新のものへと更新した次第。

確認したところTwenty Sixteenがインストールされてもおらない状況でしたので 先ずは其のインストールからです。

管理画面 >> 外観 >> テーマ >> 新しいテーマを追加  Click!
Twenty Sixteen >> インストール  Click!

不審なアクセスとWP-Banプラグインの導入

WordPressで作成したブログサイトのメンテナンスとしていつものように 404 Not Found 出力を見ていれば不審なアドレスへのアクセス試行が幾つか見受けられたので対処が必要となりました。

先ず一つ目の不審なIPアドレスが得られたのは 2016年10月11日午後0時26分に立て続けに6回のアクセスの試行が記録されていたログからでした。 以下が其のソースURLのリストになります。

  • /admin​/fckeditor​/editor​/
  • /fckeditor​/editor​/
  • /common​/fckeditor​/editor​/
  • /manage​/fckeditor​/editor​/
  • /js​/fckeditor​/editor​/
  • /include​/fckeditor​/editor​/

リファラーは記録されておらず如何にも怪しいアクセス試行です。 大体が運営ブログに上記リストに該当するアドレスは用意してありません。 其処で fckeditor をWikipediaで調べてみると以下の引用の如き記述があります。

FCKeditorはオープンソースのWYSIWYGテキストエディタでWebページ上で使うことができる

また fckeditor​ セキュリティ でネットを繰ってもどうも場合に因っては脆弱性を有する恐れも有り勝ちな情報が目に止まります。 恐らくは、不自由と言うと語弊がありますがWordPress上のエディターより Web上のエディターに特化した此のツールを好んで使用している多くのユーザーが居て 彼等の使用ツールの脆弱性に付け込むべくWordPressを利用しているサイトを見付けては 上のアドレスをクロールして回っている輩ではないかと思われます。

Twitter Bootstrap 3正式版適用とTwenty Thirteenのセンターレイアウトのズレ調整

忙しくしていて些か時期を逸した感があるブログ記事となりますが、 本ブログにてリリース候補の バージョン3 RC1 及び バージョン3 RC2 を記事に取り扱ったTwitter Bootstrap が2013年8月の米国現地時間19日は丁度其の誕生から2周年となる当日に、 バージョンを表す数字からリリース候補を意味するRCが抜け落ち正式なバージョン3となりましたので、 早速日本時間の20日、手元のWordPressシステムに於いて最新のテンプレート Twenty Thirteen を採用したサイト サウンド追っ掛け情報 に適用した模様など、共有したいと思います。

Twitter Bootstrap 3正式版のWordPressへの適用

Twitter Bootstrap公式サイト からダウンロードした圧縮ファイル bootstrap-3.0.0.zip を解凍すると例に依って dist フォルダが用意せられ中味は以下のリストの如くなっており、 リリース候補の時より増えています。