「アイコンリスト」ブロックを使用してリンクリストを作成する方法

Cocoonカスタマイズ集
この記事は約3分で読めます。
記事内に広告が含まれています。

はじめに

テキストリンクを使用していると、投稿タイトルを変更した際にリンク先のタイトルが一致しなくなることがあります。
そのため、投稿にリンクを作成する際には「ブログカード」ブロックを使用することが多いです。

しかし、リンクが多くなるとブログカードが多数並び、見た目が悪くなることもあります。

そこで、SWELLの「リンクリスト」ブロックのように、「アイコンリスト」ブロックを活用し、リンクとリンク先の投稿タイトルを一覧表示できるようにします。

この記事では、この方法について説明します。

実装手順

以下の手順で実装します。

  • ラベル
    Gutenbergエディターでの設定
    Gutenbergエディター

    以下の手順で作成します。

    1. 「アイコンリスト」ブロックを配置します。
    2. リンクリストとしたい投稿のURLを入力します。
    3. 高度な設定→追加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);

さいごに

今回紹介した方法を使えば、アイコンリストを効果的に活用し、見やすいリンクリストを作成できます。
これにより、ブログの内容が整理され、訪問者にとってもわかりやすくなります。

タイトルとURLをコピーしました