WordPressの単一ページにTwitterのシェアボタンを表示させる

ども、たきたきでっす。

タイトルどおりですが、記事内にTwitterのシェアボタンを表示させてみたのでやり方をメモっておこうと思います。 シェアボタンは、

こういうやつです。 「ツイート」をクリックすると、

こんな感じでシェアできるやつです。

Twitter公式サイトよりタグを取得する

まずは、Twitterの公式サイトへ行きます。画面の下の方に、

「Twitter Buttons」というのがあるのでそれをクリック。 さらにモーダルが開いて、

どのボタンを作るのか聞かれるので一番左の「ShareButton」をクリック。すると、

テキストボックス内にタグが生成されているので、「Copy Code」をクリックするとクリップボードにコピーされます。

コードを任意の場所に貼り付け

後は、取得したコードを表示させたいところに貼り付けるだけで良いのですが今回は単一ページにのみ表示させたかったので、親テーマの TwentyTwentyの /template-parts/content.php を子クラスにコピーして、以下のようにしました。

<div class="entry-content">
  <?php
  if ( is_search() || ! is_singular() && 'summary' === get_theme_mod( 'blog_content', 'full' ) ) {
    the_excerpt();
  } else {
    the_content( __( 'Continue reading', 'twentytwenty' ) );
  }
  ?>

  <?php if(is_single()) { ?>
    <a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-show-count="false">Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
  <?php }?>

</div><!-- .entry-content -->

下半分のif文が追記した部分です。 is_single()というのは表示されている記事が単一ページかどうかを判定するメソッドで、パラメータを省略すると現在読み込まれている記事で判定がされます。 トップページとかにはシェアボタンを出したくないのでこのメソッドで判定することにしました。

is_single()とは別に、is_singular()というのもあるのですがこちらは単一の記事以外にも単一ページの時もtureを返すみたいです。

Twitter以外にもFacebookのシェアボタンも作ろうかと思いましたがFacebookにシェアする人なんていないと思うので一旦はTwitterのみにしようと思いますw

コメント

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