こことは別に運用してるブログのWordPressの記事の中に、引用や関連リンクとして他の記事の情報を貼りたくなりました。単純にエディタのリンク機能から記事の内部リンクを指定して貼っても良いのですが、アイキャッチやタイトルなどの細かい情報をいちいちコピペするのが面倒なので、ショートコードを使い動的に取得出来るように自前で実装しました。

WordPressプラグインでも似たようなことを再現できるのもあると思うのですが、探すのが面倒だったのとデザインカスタマイズが難しかったりするので、独自実装する事にしました。

環境は以下の通り。

• WordPress 6.5.x
• PHP 8.1.x

記事IDを指定したショートコードをエディタ内に埋め込む

まずショートコードを作り記事内の任意の場所に埋め込みます。idの属性値には引用したい記事の記事ID（PostID）を指定します。

[relatedLink id="256"]

次にfunction.phpに以下のようにショートコードの表示プログラムを実装します。マークアップや呼び出す関数は表示したい内容やデザインに応じてカスタマイズします。

function relatedLinkFunc ( $attr ) {
 extract( shortcode_atts( array(
  'id' => ''
 ), $attr ));
 $link = get_permalink($id);
 $title = get_the_title($id);
 $date = get_the_time('Y年m月d日',$id);
 $thumbnail = '';
 if(has_post_thumbnail($id)){
  $thumbnailURL  = get_the_post_thumbnail_url($id,'full');
  $thumbnail = "<img src=\"{$thumbnailURL}\" alt=\"\" width=\"400\" height=\"400\"  loading=\"lazy\" />";
 }
 $result = "<div><a href=\"{$link}\">{$thumbnail}<span>{$title}</span><time>{$date}</time></p></a></div>";
 return $result;
}
add_shortcode('relatedLink', 'relatedLinkFunc');

その後、プレビューして問題なく記事が表示されていることを確認し、CSSで見た目をカスタマイズすればOKです。

これにより引用先のタイトルや内容が変わっても自動で反映されるので、運営の手間が省けます。またブログ内の回遊率も良くなるので、PVのアップやSEOの底上げにもつながります。

おしまい♥

タグ：WordPress