Jetpackのソーシャル共有ボタンを好きな場所に表示する方法

WordPressを使う上での万能プラグインと言えば『Jetpack by WordPress.com』です。

とても便利な機能がパックになっており、必要な機能をON・OFFするだけで自分に必要な機能をチョイスできます。

この記事では、Jetpackの標準機能として搭載されているソーシャル（SNS）共有ボタンを好きな場所に表示する方法を解説します。

Jetpack標準の共有ボタンの機能

まずJetpack標準の共有ボタンの機能を見てみましょう。Jetpackの共有ボタン機能が有効になっている状態で、メインメニューから[設定] → [共有]を選択します。

[利用可能なサービス]にあるアイコンを[有効化済みのサービス]のセクションへドラッグ・アンド・ドロップしましょう。

最低限以下の設定を行いましょう。

ボタンのスタイル

共有ボタンを4種類から選ぶことができます。

アイコンとテキスト

• アイコンのみ
• テキストのみ
• 公式ボタン

共有ラベル

テキストフィールドに入力したテキストがボタンの上にタイトルとして表示されます。

例）「この記事をシェアしてください」など。

デフォルトの表示を無効にする

デフォルトのままだと、共有ボタンは投稿の直後に表示されます。functions.phpに以下のコードを記述し、デフォルトの表示を無効にしましょう。

function jptweak_remove_share() {
    remove_filter( 'the_content', 'sharing_display', 19 );
    remove_filter( 'the_excerpt', 'sharing_display', 19 );
    if ( class_exists( 'Jetpack_Likes' ) ) {
        remove_filter( 'the_content', array( Jetpack_Likes::init(), 'post_likes' ), 30, 1 );
    }
}
add_action( 'loop_start', 'jptweak_remove_share' );
表示したい場所にコードを挿入

コードの挿入

テンプレート側びボタンを表示したい場所に以下のコードを挿入しましょう。

<?php if ( function_exists( 'sharing_display' ) ) : sharing_display( '', true ); endif; ?>

以上で完了です。