はじめに
テキストリンクを使用していると、投稿タイトルを変更した際にリンク先のタイトルが一致しなくなることがあります。
そのため、投稿にリンクを作成する際には「ブログカード」ブロックを使用することが多いです。
しかし、リンクが多くなるとブログカードが多数並び、見た目が悪くなることもあります。
そこで、SWELLの「リンクリスト」ブロックのように、「アイコンリスト」ブロックを活用し、リンクとリンク先の投稿タイトルを一覧表示できるようにします。
この記事では、この方法について説明します。
完成イメージ
実装手順
以下の手順で実装します。
- ラベルGutenbergエディターでの設定

Gutenbergエディター 以下の手順で作成します。
- 「アイコンリスト」ブロックを配置します。
- リンクリストとしたい投稿のURLを入力します。
- 高度な設定→追加CSSクラスに
my-link-listと入力します。
- ラベルPHPを追加
以下のコードをfunctions.phpに追加します。
add_filter('render_block_cocoon-blocks/iconlist-box', function ($content, $block) { if (empty($block['attrs']['className']) || strpos($block['attrs']['className'], 'my-link-list') === false) { return $content; } libxml_use_internal_errors(true); $dom = new DOMDocument(); // UTF-8指定でHTMLをロード $dom->loadHTML('<?xml encoding="utf-8" ?>' . $content, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD); // <a>タグを取得してリンクテキストを投稿タイトルに置換 foreach ($dom->getElementsByTagName('a') as $link) { $url = $link->getAttribute('href'); $id = url_to_postid($url); // IDから投稿が見つからない場合 if (!$id) { continue; } // 投稿タイトルに変更 $post_data = get_post($id); if ($post_data && !empty($post_data->post_title)) { $link->nodeValue = esc_html($post_data->post_title); } } return $dom->saveHTML(); }, 10, 2);
さいごに
今回紹介した方法を使えば、アイコンリストを効果的に活用し、見やすいリンクリストを作成できます。
これにより、ブログの内容が整理され、訪問者にとってもわかりやすくなります。

