WordPressにTwitterへ投稿ボタンを追加する方法

WordPressのブログ記事などをTwitterでシェアできるボタンを設置する方法の備忘録です。

ボタンの設置

まずは、Twitterへシェアするボタンとなるリンクを設置します。投稿ページの該当箇所に下記コードを追加します。

<a href="https://twitter.com/intent/tweet?url=<?php the_permalink(); ?>&text=<?php echo get_the_title(); ?>" target="_blank" rel="noopener noreferrer">Share on Twitter</a>

single.phpで投稿ページを作成している場合、記事の内容を表示するループの中に記述します。

「href」に記述されているURLで、シェアしたい記事の内容を含むツイート投稿画面をTwitterで開きます。「text」の部分が、ツイートのテキストになります。the_permalink()で記事のURLが、echo get_the_title()で記事のタイトルが入ります。

「Share on Twitter」のリンクが表示されるので、CSSでボタン風のデザインに変更します。

Share on Twitter

Twitterにシェアするボタンが完成しました。

アイコンについて

今回使用したTwitterのアイコンは、Font Awesomeを利用しました。

Twitter Icon Brands – Font Awesome

headerに下記を記述することで、Font Awesomeが使えるようになります。

<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

アイコンを表示したい箇所に下記を記述します。

<i class="fab fa-twitter"></i>

CSSでサイズや色を変更でき、ファイルの管理の必要がないため、画像のアイコンを使用するよりも簡単にアイコンが表示できます。

Font Awesomeの詳しい使い方はこちらの記事で紹介しています。

無料アイコンフォント「Font Awesome」の使い方

Share on Twitter
関連記事
WordPressで固定ページに投稿ページ一覧を表示する方法
WordPressで固定ページに投稿ページ一覧を表示する方法
WordPressで記事内に同じタグの記事一覧を表示する方法
WordPressで記事内に同じタグの記事一覧を表示する方法
RewriteモジュールでURLを書き換える方法
RewriteモジュールでURLを書き換える方法