カスタムHTMLで作成した「ページ送りナビゲーター」をより便利に改良したかったのだが・・・
カスタムHTMLのままでは対処できないことが分かったのだ。
そうなんですか！いったい何が問題だというのですか？？？
今回はそのあたりから説明していくのだ。
カスタムHTMLとショートコード
「ページ送りナビゲーター」とブログカードを比較すると・・・
「ページ送りナビゲーター」の作成ではCocoonのブログカードをイメージしました。
見た目はかなりブログカードに近くなりましたが、編集を行う際のブログカードの使い勝手はまだ実現できていません。
これを確認するため、それぞれでリンク先を設定してみます。
まず、ブログカードでは設定画面にリンク先ページのURLを設定します。
すると、URLの情報からアイキャッチや記事のタイトルが自動的割り出されます。そしてページを閲覧したときにブログカード上に表示されます。
一方、「ページ送りナビゲーター」ではカスタムHTMLにソースコードを設定します。
ソースコードにはHTMLとCSSが含まれています。そのうちHTMLには以下の情報を含めないといけません。
- 前の記事や次の記事のURL
- アイキャッチのURL
- 記事のタイトル
これらは、各記事に配置されたカスタムHTMLのブロックごとに適切な値を手動で入力する必要があります。
つまり、ブログカードのように「記事のURLを設定すればアイキャッチや記事のタイトルが自動的に表示される」ということが出来ないのです。
これでは、お世辞にも使い勝手が良いとは言えませんね。
カスタムHTML版「ページ送りナビゲーター」のソースコードは以下をご覧ください。（新しいタブで開きます。）
ブログカード風に自動で表示させるにはどうすればよい？
カスタムHTMLには、各ブロックごとに確定した内容のものしか指定することが出来ません。
一方、ブログカードでは、URLでリンク先を指定することで対応する記事のアイキャッチ画像やタイトルを自動で組み込んで表示してくれます。
このような機能を実現するためには、「ショートコード」というWordPressの仕組みを使用することが出来ます。
実はWordPressには、あとからプログラムを追加するための仕組みが用意されています。そのための仕組みの一つがショートコードなのです。
ショートコード用のプログラムはPHPというプログラミング言語で作成します。
プログラムはサーバー上に配置されている「functions.php」というファイルの中に記述しますが、そのためにはWordPressの「テーマファイルエディター」というツールを使用することが出来ます。
また、カスタムHTML版の「ページ送りナビゲーター」では、CSSで見た目を調整してブログカードのイメージを再現しています。
ショートコードで実現するときにはWordPressの「追加CSS」という機能を利用して見た目を調整します。
これらの機能を組み合わせて使います。
ショートコード化して機能追加
自動でアイキャッチ画像や記事のタイトルを表示させる。
これまでショートコードについて説明してきました。しかし、実際の作業ではショートコードを意識したわけではありませんでした。
AIにはただ以下の要望を伝えたのみです。
- 前の記事、次の記事のアイキャッチとタイトルを自動的に取得できるようにしてほしい。
するとショートコード化したうえで機能を追加したものを提案してくれました。カスタムHTMLとするべきか、それともショートコードとするべきかの判断もAIが行ってくれたのです。
実現方法の選択はAIに任せて、自分は作りたいもののイメージを固めることに集中できます。とても便利ですね。
（AIが出力してくれたPHPプログラムとCSSのソースコードおよびWordPressへの設定方法は以下をご覧ください。新しいタブで開きます。）
「テーマファイルエディター」と「追加CSS」を使用して、AIが出力してくれたものを設定しました。そして記事にショートコードを配置しました。
AIが出力してくれたプログラムを利用するには、ショートコードの呼出し命令「custom_nav」を記述します。呼出し命令は角括弧でくくって記述します。
呼出し命令はショートコードブロックを配置して入力欄に記述しても良いですし・・・
段落に直接呼出し命令を記述しても良いです。
実際に記事に組込んでプレビューを行ってみました。すると・・・
一見、アイキャッチやタイトルが表示されて問題なさそうに思えます。しかし、リンクするべき先が間違っています。
リンク先は、KPモデルの「川崎乙式一型偵察機」の製作記の第2話と第3話です。一方、この記事はSWEETの「ゴーストファイターFM-2」の製作記の第2話で、リンク先とは前後関係がない記事なのです。
調べた結果、原因は記事の公開日にあることが分かりました。次に詳しく説明します。
リンク先を指定できるようにする。
最初に作成したショートコード版「ページ送りナビゲーター」では、リンク先の記事を自動で設定していました。
この時、記事の前後関係の判定に利用していたのは公開日でした。
公開日はWordPressの管理画面の投稿一覧画面で「日付」として確認することが出来ます。
今回「ページ送りナビゲーター」を組み込もうとしている記事とその前後の記事の公開日を確認すると、以下の通りでした。
| 内容 | 公開日 | 備考 |
| ゴーストファイターFM-2の製作（３） | 2024年1月9日 | |
| 川崎乙式一型偵察機の製作（３） | 2023年12月15日 | |
| ゴーストファイターFM-2の製作（２） | 2023年11月27日 | この記事に組み込む。 |
| 川崎乙式一型偵察機の製作（２） | 2023年11月14日 | |
| ゴーストファイターFM-2の製作（１） | 2023年10月31日 |
組み込もうとしている「ゴーストファイターFM-2の製作（２）」の前後で「川崎乙式偵察機の製作」の記事を公開していたのです。
2種類のプラモデルを製作して並行して製作記を公開していたことが原因です。この例のように、記事の前後関係と公開順が一致しないことは普通に起こることだと思います。
これに対処するには「前の記事」と「次の記事」を指定できるようにすればよいです。AIに以下の要望を伝えました。
- 前の記事と次の記事を指定できるようにしたい。
すると、記事IDにより「前の記事」と「次の記事」を指定できるようにしてくれました。
ショートコードの呼び出し命令「custom_nav」にスペースを挟んで「prev=」と記事IDを追加すれば前の記事を指定できます。さらにスペースを挟んで「next=」と記事IDを追加すれば次の記事を指定することが出来ます。（角括弧でくくるのを忘れないでください。）
修正はPHPのプログラムのみでした。テーマファイルエディターで慎重にfunctions.phpを修正し、ショートコードへの入力も変更しました。
これにより、前の記事と次の記事を自由に設定することが出来るようになりました。
ちなみに、前の記事と次の記事を指定せず[costom_nav]と記述すれば、修正前のバージョンと同様に公開日が前と後の記事へのリンクを表示してくれます。
（AIが出力してくれたPHPプログラムのソースコードおよびWordPressへの設定方法は以下をご覧ください。新しいタブで開きます。）
最初の記事や最後の記事に対応する。
前の記事と次の記事を手動で指定できるようにしたことで、記事の並びをコントロールできるようになりました。
ここで、例えば今作成している記事が一連の記事の最初の回だった場合、「前の記事」は不要です。
そこで、試しに以下のように次の記事のみを指定してみました。
すると、次の記事は正しく表示されましたが、前の記事として1回前に公開した記事が表示されました。
この場合は「前の記事」を表示しないようにしたいです。そこでAIに以下の要望を伝えました。
- 前の記事のみを指定した場合は次の記事を表示しないようにしたい。
- 次の記事のみを指定した場合は前の記事を表示しないようにしたい。
これにより想定した通りの見た目と動作の「ページ送りナビゲーター」が出来上がりました。
（AIが出力してくれたPHPプログラムのソースコードおよびWordPressへの設定方法は以下をご覧ください。新しいタブで開きます。）
まとめ
WordPressでブログの記事を編集するときの使い勝手は重要ですよね。
ウム。そこで、カスタムHTMLで作っていた「ページ送りナビゲーター」をショートコードに作り替えたのだ。
でも、テーマファイルエディターや追加CSSを編集するのは、特に初心者にはハードルが高いんじゃないですか？
その通りなのだ。なので次回はそのあたりに切り込んでいくぞ。
果たしてどんなものが出来るのか・・・楽しみですね！
次回もお楽しみに～
コメント