Twitterのツイートボタンの設置

Twitterのツイートボタンの設置はプラグインを使用しなくても容易に実装できるようです。
ソーシャルボタン設置のプラグインはこちらにいちおうまとめています。
Tweetボタンの設置コード
公式サイトから拝借
公式のサイトにあるコードを表示したい場所にそのまま貼り付ければ実装することが可能です。
Tweet Button
<a href="https://twitter.com/share" class="twitter-share-button" data-lang="en">Tweet</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
Twitterのjsファイルを非同期で読み込む
公式に書かれていないですが、以下のようにasync=trueを付与することでtwitterのサイトからjsファイルを非同期にインクルードするようになります。"非同期"とすることで、jsファイルの読み込み完了待たずに以降の処理に移りますので、ページのロード時間を短くすることができます。
<a href="https://twitter.com/share" class="twitter-share-button" data-lang="en">Tweet</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.async=true;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
プラグインライクに実装
下の例では、フィルターフックでボタン要素を追加して、スクリプトをfooterに追加します。
// ツイートボタン要素 function content_for_tweet_button($content){ if (is_single()) { $twitter = '<a href="https://twitter.com/share" class="twitter-share-button" data-lang="en">Tweet</a>'; } $content .= $twitter; return $content; } add_filter( 'the_content', 'content_for_tweet_button'); // ツイートボタン用スクリプト function scritp_for_tweet_button() { if (is_single()) { $twitter_script = '<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>'; echo $twitter_script; } } add_action( 'wp_footer', 'scritp_for_tweet_button');
関連記事
-
-
Lightbox (画像ポップアップ) プラグイン
WordPressで使用できるLightbox(画像ポップアップ)プラグインのまとめ ひとまずインストール・有効化するだけで使用可能です。(3.7/3.8/3.9) blueimp lig
-
-
アバターサイズの変更など Twenty Twelve 1.3での変更点
Twenty Twelve 1.3 での変更点 アバターサイズの設定ロジック変更 ヘッダ画像の設定ロジック変更 全ての変更点はこちら Changes from twentytwel
-
-
Twenty Fourteen "コメントをどうぞ"の非表示と変更方法
Twenty Fourteenでは、デフォルトで投稿ページと各アーカイブページの各投稿のメタ情報欄に「コメントをどうぞ」というコメントフォームへのリンクが設置されます。 それぞれ、コメントが0件の場
-
-
「続きを読む」(moreタグ)をカスタマイズ
WordPressではほとんどのテーマでは、複数の投稿を表示するアーカイブページ(カテゴリー別、タグ別、年月日別、作成者別など)ではmoreタグ(<!--more-->)を挿入することで、
-
-
新年早々やらかした
あけましておめでとうございます。 タイトルどおり、新年早々やらかしてしまいましたのでご報告まで。どうやらかしたかというと、確認用サイトとこのブログを間違えてしまいWordpress 3.5にアップグ
-
-
「最近のコメント」ウィジェットをカスタマイズ
「最近のコメント」ウィジェットは、サイトに投稿されたコメントを新しい日付順に表示してくれます。件数も「ウィジェット」ページで設定できます。(管理画面の「外観」→「ウィジェット」) (削除
-
-
Twenty Thirteen カスタマイズ
WordPress 3.6のデフォルトテーマである「Twenty thirteen」のカスタマイズをまとめて投稿します。 Twenty thirteenのカスタマイズネタがあまりないです。(それだけ
-
-
「最近の投稿」ウィジェット カスタマイズ
目次 ウィジェットを削除 標準の設定 特定のカテゴリーに属する投稿を除外 カスタマイズ プラグイン 「最近の投稿」ウィジェットを削除 「最近の投稿」ウィジェット
-
-
Twenty Twelve サイトタイトルをテキストから画像に置き換え
ページトップに表示されるサイトタイトルをデフォルトのテキストから画像に変更します。 あらかじめ、管理画面のメディアライブラリから画像をアップロードしているもしくは別の場所に保存しているそのファイルの
-
-
Twenty Twelve 投稿日・投稿者を非表示に
TwentyTwelveのちょっとした部分をカスタマイズする方法を紹介していきます。 また、子テーマで出力部分を変更する際に、翻訳が必要な部分//_()の部分がでてきますので、以下の投稿も参考に
Comment
[…] WordPress | Twitterのツイートボタンの設置 ソーシャルボタンの表示部分とスクリプト部分をadd_filter()で追加する方法がまとまっています […]