WordPressでメンテナンス性に優れたSNSリンクを設置する方法

公開日

WordPress で作られたブログに、Facebook や Twitter などのSNSリンクを設置したい場合があります。

管理画面に独自の設定箇所を設け、簡単にSNSリンクが設定できるテーマもありますが、今回はテーマを問わない、ブロックエディタの「ソーシャルアイコンブロック」を使用した方法を紹介します。

ソーシャルアイコンブロックのブロックHTML

ブロックエディタでソーシャルアイコンブロックを使用し、Facebook と Twitter のSNSリンクを作ると、次のようなブロックHTMLが内部で生成されます。

<!-- wp:social-links {"className":"is-style-logos-only"} -->
<ul class="wp-block-social-links is-style-logos-only">
<!-- wp:social-link {"url":"#ブロックに設定したURL","service":"facebook"} /-->
<!-- wp:social-link {"url":"#ブロックに設定したURL","service":"twitter"} /-->
</ul>
<!-- /wp:social-links -->

このブロックHTMLをページ内の表示させたい箇所に使用していきます。

ブロックウィジェットを使用した方法

ブロックウィジェットの「ブロックHTML」と書かれた入力欄に先程のブロックHTMLを入力して、保存すると、Facebook と Twitter のアイコンリンクが表示されます。簡単ですね。

このブロックウィジェットを使用した方法は、ウェブサイトの公式アカウントなど、常に同一のリンクを表示したい場合に便利です。

ページ毎にリンク先を変えたい場合

ページ毎にリンク先を変えるには、ブロックHTMLの変えたい箇所を置換しやすい文字列に変更します。ここでは、「__SOCIAL_LINK__SHARE_XXXX__」にしました。

<!-- wp:social-links {"className":"is-style-logos-only"} -->
<ul class="wp-block-social-links is-style-logos-only">
<!-- wp:social-link {"url":"https://www.facebook.com/sharer/sharer.php?u=__SOCIAL_LINK__SHARE_URL__&t=__SOCIAL_LINK__SHARE_TITLE__","service":"facebook"} /-->
<!-- wp:social-link {"url":"https://twitter.com/share?url=__SOCIAL_LINK__SHARE_URL__&text=__SOCIAL_LINK__SHARE_TITLE__","service":"twitter"} /-->
</ul>
<!-- /wp:social-links -->

ブロックウィジェットには、widget_block_contentフィルターが用意されているので、このフィルターを使用した、置換するためのPHPコードを、テーマの functions.php に追加します。

add_filter( 'widget_block_content', function( $content ) {
  if( false !== strpos( $content, '__SOCIAL_LINK__' ) ) {

    // 投稿のIDを取得
    $id = false;
    if( in_the_loop() ) {
      $id = get_the_ID();
    } elseif( is_singular() ) {
      $id = get_queried_object_id();
    }
    if( false === $id ) {
      return $content;
    }

    // 投稿のパーマリンクとタイトルに置換
    $content = strtr( $content, [
      '__SOCIAL_LINK__SHARE_URL__' => urlencode( get_permalink( $id ) ),
      '__SOCIAL_LINK__SHARE_TITLE__' => urlencode( get_the_title( $id ) ),
    ] );

  }
  return $content;
}, 10 );

これで、投稿ページ毎のSNSリンク (シェアリンク) ができあがります。

独自のテンプレートを作成する方法

ウィジェットエリア外の任意の場所に、SNSリンクを表示したい場合もあるかと思います。こういった場合には、独自のテンプレートを作成しておくと便利です。

次のPHPコードが書かれた、social-links.php というテンプレートをテーマに追加します。

<?php

// ブロックHTMLを変数に代入
ob_start();
?>
<!-- wp:social-links {"className":"is-style-logos-only"} -->
<ul class="wp-block-social-links is-style-logos-only">
<!-- wp:social-link {"url":"https://www.facebook.com/sharer/sharer.php?u=__SOCIAL_LINK__SHARE_URL__&t=__SOCIAL_LINK__SHARE_TITLE__","service":"facebook"} /-->
<!-- wp:social-link {"url":"https://twitter.com/share?url=__SOCIAL_LINK__SHARE_URL__&text=__SOCIAL_LINK__SHARE_TITLE__","service":"twitter"} /-->
</ul>
<!-- /wp:social-links -->
<?php
$content = ob_get_clean();

// ブロックHTMLからHTMLコードを生成
$content = do_blocks( $content );

// ブロックウィジェットのwidget_block_contentフィルターを適用後に出力
echo apply_filters( 'widget_block_content', $content );

ページ毎にリンク先を変える処理には、先程紹介したwidget_block_contentフィルターを利用しています。こうすることで、テンプレートにもブロックウィジェットと同様の処理を加えることができます。

あとは、表示したい箇所に、次のPHPコードを追加するだけです。

<?php get_template_part( 'social-links' ); ?>

ソーシャルアイコンブロックにないSNSリンクを追加する方法

ソーシャルアイコンブロックを利用することで、アイコンの管理を WordPress に任せて、メンテナンスフリーにできますが、WordPress が未対応の SNS には使用できないという欠点があります。

具体的には、wp-includes/blocks/social-link.php のblock_core_social_link_services関数に定義されてない SNS は、リンク自体は表示されるものの、シェアアイコン () が表示されるという仕様になっています。

そこで、日本では需要がある「はてなブックマーク」のアイコンを表示させる例とともに説明します。

1. ブロックHTMLを追加する

先程のブロックHTMLの Facebook と Twitter に続いて、はてなブックマークを追加します。

<!-- wp:social-links {"className":"is-style-logos-only"} -->
<ul class="wp-block-social-links is-style-logos-only">
<!-- wp:social-link {"url":"https://www.facebook.com/sharer/sharer.php?u=__SOCIAL_LINK__SHARE_URL__&t=__SOCIAL_LINK__SHARE_TITLE__","service":"facebook"} /-->
<!-- wp:social-link {"url":"https://twitter.com/share?url=__SOCIAL_LINK__SHARE_URL__&text=__SOCIAL_LINK__SHARE_TITLE__","service":"twitter"} /-->
<!-- wp:social-link {"url":"https://b.hatena.ne.jp/entry/panel/?url=__SOCIAL_LINK__SHARE_URL__&btitle=__SOCIAL_LINK__SHARE_TITLE__","service":"hatenabookmark"} /-->
</ul>
<!-- /wp:social-links -->

すると、WordPress 6.0 では、次のようなHTMLコードが出力されます。

<li class="wp-social-link wp-social-link-hatenabookmark wp-block-social-link"><a href="https://b.hatena.ne.jp/entry/panel/?url=__SOCIAL_LINK__SHARE_URL__&#038;btitle=__SOCIAL_LINK__SHARE_TITLE__"  class="wp-block-social-link-anchor"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 11.8l6.1-4.5c.1.4.4.7.9.7h2c.6 0 1-.4 1-1V5c0-.6-.4-1-1-1h-2c-.6 0-1 .4-1 1v.4l-6.4 4.8c-.2-.1-.4-.2-.6-.2H6c-.6 0-1 .4-1 1v2c0 .6.4 1 1 1h2c.2 0 .4-.1.6-.2l6.4 4.8v.4c0 .6.4 1 1 1h2c.6 0 1-.4 1-1v-2c0-.6-.4-1-1-1h-2c-.5 0-.8.3-.9.7L9 12.2v-.4z"/></svg><span class="wp-block-social-link-label screen-reader-text">Share Icon</span></a></li>

2. アイコンを用意する

多くのSNSで、公式ロゴや公式アイコンが公開されています。はてなブックマークの場合、「はてなブックマーク – Hatena Brand Resources」からダウンロードできます。

ダウンロードした素材ファイルから、SVGアイコン (SVGファイル) を生成します。

後々、アイコンが増えることも想定して、SVGアイコンが一元管理できる、SVGスプライトを作っておくと便利です。ここでは、sprite-sns.svg を作ります。sprite-sns.svg のSVGコードは次のようになります。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol viewBox="0 0 24 24" id="hatenabookmark"><path d="… はてなブックマークのロゴのパス …"/></symbol>
</svg>

3. フィルターを使用して置換する

先程のwidget_block_contentフィルターにアイコンを置換するためのPHPコードを追加します。

add_filter( 'widget_block_content', function( $content ) {
  if( false !== strpos( $content, '__SOCIAL_LINK__' ) ) {

    // 投稿のIDを取得
    $id = false;
    if( in_the_loop() ) {
      $id = get_the_ID();
    } elseif( is_singular() ) {
      $id = get_queried_object_id();
    }
    if( false === $id ) {
      return $content;
    }

    // 投稿のパーマリンクとタイトルに置換
    $content = strtr( $content, [
      '__SOCIAL_LINK__SHARE_URL__' => urlencode( get_permalink( $id ) ),
      '__SOCIAL_LINK__SHARE_TITLE__' => urlencode( get_the_title( $id ) ),
    ] );

  }

  // アイコン置換
  if( false !== strpos( $content, '<li class="wp-social-link wp-social-link-hatenabookmark ' ) ) {
    $content = preg_replace( '[(<li class="wp-social-link wp-social-link-hatenabookmark [^>]+><a [^>]+>).+?(<span [^>]+>).+?(</span></a></li>)]', '$1<svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><use href="/path-to-file/sprite-sns.svg#hatenabookmark"/></svg>$2HatenaBookmark$3', $content );
  }

  return $content;
}, 10 );

これで、シェアアイコンに変わり、はてなブックマークのアイコンが表示されるようになります。

4. CSSで色を設定する

ソーシャルアイコンブロックに適用されるCSS (wp-includes/blocks/social-links/style.css) を参考にして、公式カラーをアイコンに適用します。2022年5月現在、はてなブックマークの公式カラーは、#00a4de になります。

次のPHPコードをテーマの functions.php に追加すれば公式カラーがアイコンに適用されます。

add_action( 'wp_enqueue_scripts', function() {
  $handle = 'wp-block-library';
  if( function_exists( 'wp_should_load_separate_core_block_assets' ) && wp_should_load_separate_core_block_assets() ) {
    $handle = 'wp-block-social-links';
  }

  ob_start();
  ?>
  .wp-block-social-links.is-style-logos-only .wp-social-link-hatenabookmark {
    color: #00a4de;
  }
  .wp-block-social-links:not(.is-style-logos-only) .wp-social-link-hatenabookmark {
    background-color: #00a4de;
    color: #fff;
  }
  <?php
  $data = ob_get_clean();
  $data = strtr( $data, [ "\t" => '', "\n" => ' ' ] );
  $data = trim( $data );

  wp_add_inline_style( $handle, $data );
}, 10 );

※SNSによっては、ロゴやアイコンの色・形・サイズが厳密に決められている場合があるため、CSSの設定には注意が必要です。

〆

今回の方法を応用すれば、ソーシャルアイコンブロックの仕組みを利用しつつ、様々なアイコンを好きな場所に表示させることができます。是非試してみてください。

関連記事