SNSボタン設置をする方法

全ページ共通で記事横に固定表示されるSNSボタンの例です。スクロールしても常に固定です。

1 functions.php にコードを追加

1.1 全ページ共通のSNSボタン

//-------------------------------------------
// 全ページ共通のSNSボタン（X共有はURLのみ）
//-------------------------------------------
function sns_buttons_fixed_all_pages() {
    $url = urlencode(get_permalink());

    echo '<div class="sns-fixed">';
    echo '<a class="sns-twitter" href="https://twitter.com/intent/tweet?url=' . $url . '" target="_blank">X</a>';
    echo '<a class="sns-facebook" href="https://www.facebook.com/sharer/sharer.php?u=' . $url . '" target="_blank">F</a>';
    echo '<a class="sns-hatena" href="https://b.hatena.ne.jp/add?mode=confirm&url=' . $url . '" target="_blank">H</a>';
    echo '<a class="sns-instagram" href="https://www.instagram.com/" target="_blank">I</a>';
    echo '<a class="sns-youtube" href="https://www.youtube.com/" target="_blank">Y</a>';
    echo '</div>';
}
add_action('wp_footer', 'sns_buttons_fixed_all_pages');

1.2 投稿ページだけのSNSボタン

//-------------------------------------------
// 投稿ページだけのSNSボタン（X共有はURLのみ）
//-------------------------------------------
function sns_buttons_fixed_post_only() {
    if ( is_singular('post') ) {
        $url = urlencode(get_permalink());

        echo '<div class="sns-fixed">';
        echo '<a class="sns-twitter" href="https://twitter.com/intent/tweet?url=' . $url . '" target="_blank">X</a>';
        echo '<a class="sns-facebook" href="https://www.facebook.com/sharer/sharer.php?u=' . $url . '" target="_blank">F</a>';
        echo '<a class="sns-hatena" href="https://b.hatena.ne.jp/add?mode=confirm&url=' . $url . '" target="_blank">H</a>';
        echo '<a class="sns-instagram" href="https://www.instagram.com/" target="_blank">I</a>';
        echo '<a class="sns-youtube" href="https://www.youtube.com/" target="_blank">Y</a>';
        echo '</div>';
    }
}
add_action('wp_footer', 'sns_buttons_fixed_post_only');

1.3 固定ページだけのSNSボタン

//-------------------------------------------
// 固定ページだけのSNSボタン（X共有はURLのみ）
//-------------------------------------------
function sns_buttons_fixed_page_only() {
    if ( is_page() ) {
        $url = urlencode(get_permalink());

        echo '<div class="sns-fixed">';
        echo '<a class="sns-twitter" href="https://twitter.com/intent/tweet?url=' . $url . '" target="_blank">X</a>';
        echo '<a class="sns-facebook" href="https://www.facebook.com/sharer/sharer.php?u=' . $url . '" target="_blank">F</a>';
        echo '<a class="sns-hatena" href="https://b.hatena.ne.jp/add?mode=confirm&url=' . $url . '" target="_blank">H</a>';
        echo '<a class="sns-instagram" href="https://www.instagram.com/" target="_blank">I</a>';
        echo '<a class="sns-youtube" href="https://www.youtube.com/" target="_blank">Y</a>';
        echo '</div>';
    }
}
add_action('wp_footer', 'sns_buttons_fixed_page_only');

1.4 HOMEだけのSNSボタン

//-------------------------------------------
// HOMEだけのSNSボタン（X共有はURLのみ）
//-------------------------------------------
function sns_buttons_fixed_home_only() {
    if ( is_front_page() || is_home() ) {
        $url = urlencode(get_permalink());

        echo '<div class="sns-fixed">';
        echo '<a class="sns-twitter" href="https://twitter.com/intent/tweet?url=' . $url . '" target="_blank">X</a>';
        echo '<a class="sns-facebook" href="https://www.facebook.com/sharer/sharer.php?u=' . $url . '" target="_blank">F</a>';
        echo '<a class="sns-hatena" href="https://b.hatena.ne.jp/add?mode=confirm&url=' . $url . '" target="_blank">H</a>';
        echo '<a class="sns-instagram" href="https://www.instagram.com/" target="_blank">I</a>';
        echo '<a class="sns-youtube" href="https://www.youtube.com/" target="_blank">Y</a>';
        echo '</div>';
    }
}
add_action('wp_footer', 'sns_buttons_fixed_home_only');

2 汎用CSS

2.1 縦並びバージョン

/* ------------------------------------------
 * SNSボタン固定表示用スタイル（縦並び）
 * --------------------------------------- */
.sns-fixed {
    position: fixed;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 9999;
}
.sns-fixed a {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 50%;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    font-size: 18px;
}
.sns-fixed .sns-twitter { background-color: #1da1f2; }
.sns-fixed .sns-facebook { background-color: #3b5998; }
.sns-fixed .sns-hatena { background-color: #00a4de; }
.sns-fixed .sns-instagram { background-color: #e4405f; }
.sns-fixed .sns-youtube { background-color: #ff0000; }
.sns-fixed a:hover {
    opacity: 0.8;
    transform: scale(1.1);
    transition: all 0.2s;
}

2.2 横並びバージョン

/* ---------------------------------
 * SNSボタン固定表示（横並び）
 * ------------------------------ */
.sns-fixed {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: row;
    gap: 12px;
    z-index: 9999;
    background: rgba(255,255,255,0.7);
    padding: 8px 12px;
    border-radius: 30px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.sns-fixed a {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 50%;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    font-size: 18px;
    transition: 0.2s;
}
.sns-fixed .sns-twitter { background-color: #1da1f2; }
.sns-fixed .sns-facebook { background-color: #3b5998; }
.sns-fixed .sns-hatena { background-color: #00a4de; }
.sns-fixed .sns-instagram { background-color: #e4405f; }
.sns-fixed .sns-youtube { background-color: #ff0000; }
.sns-fixed a:hover {
    opacity: 0.8;
    transform: scale(1.1);
}

3 まとめ

• X共有時に「サイトタイトル」や「via」が付かないURL共有形式
• 条件分岐で投稿・固定・HOME・全ページに自由設定可能
• CSSを切り替えるだけで縦・横どちらの配置も可能
• スマホでも動作安定、公式仕様（intent/tweet）準拠