【SWELL】ふきだしブロックのアイコンにリンクを設定する方法

2023 11/19

2023年11月19日

実際に使用した商品をレビューしています。アフィリエイト広告リンクを含みます。

初心者

ふきだしのアイコンにリンクを付けたい…
Twitterへリンクを付ける方法は？

そんな疑問に答えます。

WordPressテーマSWELLのカスタムブロック「ふきだし」は便利な機能ですが、アイコンにリンクを設定するオプションはありません。

かんた

これがふきだしです。

ですが、テンプレートファイルを編集しないでもリンクを設定する方法があります。

この記事を書いた人

IT業界24年のベテランエンジニア
WordPressで企業サイトの構築しています
取り扱いWordPressテーマは300個オーバー

SWELLマニアのかんたです

SWELLのふきだしアイコンにリンクを設定したサンプル

まずはサンプルです。

アイコンをクリックすると、リンク先にジャンプします↓

かんた

アイコンにTwitterへのリンクを付けました。

かんた

こちらはリンクなし。

SWELL

SWELL公式サイトへのリンクを付けました。

ふきだしアイコンにリンクを設定する方法

テーマのアップデートを考慮し、テンプレートファイルは編集しない方法です。子テーマのfunctions.php、もしくはCode Snippetsプラグインにコードを追加するカスタマイズ方式です。

アイコンのリンク先が1種類の場合

ふきだしアイコンのリンク先が1種類の場合の設定方法です。

アイコンの種類は1つでも、複数あっても構いません。
全ふきだしに同一のリンク先を設定するカスタマイズです。

コード

function replace_balloon_icon_atnak( $block_content, $block ) {
   if ( 'loos/balloon' === $block['blockName'] ) {
      $block_content = preg_replace( '/<div class="c-balloon__icon (.*?)">(.*?)<\/div>/', '<a href="https://twitter.com/swell_mania" target="_blank" rel="noopener" class="c-balloon__icon $1">$2</a>', $block_content );
   }
   return $block_content;
}

add_filter( 'render_block', 'replace_balloon_icon_atnak', 10, 2 );

render_blockフィルターフックで、ふきだしブロックの出力コードを<div>から<a>に置換しています。置換後のコード部分にリンク要素のhref="#"があるので、この部分にリンク先のアドレスを指定します。

コードを転用する場合は3行目のURL部分を任意のURLに変更します↓

$block_content = preg_replace( '/<div class="c-balloon__icon (.*?)">(.*?)<\/div>/', '<a href="リンク先のURLを入力" target="_blank" rel="noopener" class="c-balloon__icon $1">$2</a>', $block_content );

アイコンの種類が複数ある場合

「こっちのアイコンはリンクなし」、「こっちはリンクあり」みたいなケースのカスタマイズです。

アイコンのファイル名、ふきだしブロックの「高度な設定」で指定している「追加CSSクラス」などをキーに、分岐できます。

リンクあり、なしを設定する方法

何もCSSクラスを設定しないアイコン：リンクなし
クラス名に「kanta」と付けたアイコン：Twitterへのリンク

コード

function replace_balloon_icon_atnak( $block_content, $block ) {
   $classes = $block['attrs']['className'] ?? '';
   if ( 'loos/balloon' === $block['blockName'] && strpos( $classes, 'kanta' ) !== false ) {
      $block_content = preg_replace( '/<div class="c-balloon__icon (.*?)">(.*?)<\/div>/', '<a href="https://twitter.com/swell_mania" target="_blank" rel="noopener" class="c-balloon__icon $1">$2</a>', $block_content );
   }
   return $block_content;
}

add_filter( 'render_block', 'replace_balloon_icon_atnak', 10, 2 );

コードを転用する場合は4行目のクラス名と5行目のURLを任意のものに変更します。

まずは3行目の、「任意のクラス名」を編集↓

 if ( 'loos/balloon' === $block['blockName'] && strpos( $classes, '任意のクラス名' ) !== false ) {

続いて4行目の、「任意のURL」を編集↓

$block_content = preg_replace( '/<div class="c-balloon__icon (.*?)">(.*?)<\/div>/', '<a href="任意のURL" target="_blank" rel="noopener" class="c-balloon__icon $1">$2</a>', $block_content );

アイコンごとに異なるリンク先を設定する方法

何もCSSクラスを設定しないアイコン：リンクなし
クラス名に「kanta」と付けたアイコン：Twitterへのリンク
クラス名に「ryo」と付けたアイコン：SWELL公式サイトへのリンク

コード

function replace_balloon_icon_atnak( $block_content, $block ) {
   $classes = $block['attrs']['className'] ?? '';
   if ( 'loos/balloon' === $block['blockName'] && $classes ) {
      if ( strpos( $classes, 'kanta' ) !== false ) {
         $block_content = preg_replace( '/<div class="c-balloon__icon (.*?)">(.*?)<\/div>/', '<a href="https://twitter.com/swell_mania" target="_blank" rel="noopener" class="c-balloon__icon $1">$2</a>', $block_content );
      } elseif ( strpos( $classes, 'ryo' ) !== false ) {
         $block_content = preg_replace( '/<div class="c-balloon__icon (.*?)">(.*?)<\/div>/', '<a href="https://swell-theme.com/" target="_blank" rel="noopener" class="c-balloon__icon $1">$2</a>', $block_content );
      }
   }
   return $block_content;
}

add_filter( 'render_block', 'replace_balloon_icon_atnak', 10, 2 );

コードを転用する場合は、先程同様にクラス名とURLを分岐分だけ変更します。

アイコン名に付く「アンダーライン」の装飾を消す方法

<a>～</a> に変換すると、アイコンの下に表示される名前にアンダーラインのスタイルが適用されます。このスタイルを外すには次のCSSコードを追加します↓

コード

.c-balloon__icon {
 text-decoration: none;
}

リンク付きアイコン名の「テキストカラー」を変更する方法

アイコンにリンクをすると、アイコン名のテキスト部分がリンクカラーになります。これを変更前のテキストカラーに戻すには次のCSSコードを追加します。

コード

.c-balloon__icon {
 color: var(--color_text);
}

まとめ

SWELLのふきだしブロックのアイコンにリンクを設定する方法を紹介しました。テンプレートを編集しないでも、ふきだしごとにリンク先を設定することができます。

ツイッターへのリンクを設置するなど活用ができそうですね！

かんた

ぜひカスタマイズにチャレンジしてみてください。

カスタマイズ環境

WordPress：6.1
SWELL：2.7.1

よかったらシェアしてね！

URLをコピーしました！