【2024】WordPressの記事画面に設置するSNSシェアリンクを自作する方法

ホームページ作成 2024.06.07 2024.08.22

本記事では、WordPressの投稿にSNSシェアリンクを追加する方法を解説します。このチュートリアルでは、HTML、CSS、JavaScriptを使用して、主要なSNS（Twitter、LINE、Facebook、はてなブックマーク、Pocket）へのシェアリンクを作成します。

今回つくるもの

有名テーマでもよく設置されている各種SNSへのシェアリンクです。

URLをクリップボードにコピーするボタンも作成します。この有無は見た目でも機能的にも記事投稿サイトの質に大きく関わってくる要素の一つだと思いますので、まだ設置していない方はぜひ参考にしてみでください。

HTMLコードの作成

まず、以下のHTMLコードをWordPressテーマの適切な場所（例えば、single.phpなどの投稿テンプレート）に追加します。このコードは、SNSシェアボタンを含むコンテナを作成します。

<div class="share-sns">
    <!-- Twitter -->
    <a class="c-shareBtns__btn hov-flash-up" id="twitter"
        href="https://twitter.com/intent/tweet?url=<?php echo urlencode(get_permalink()); ?>&amp;text=<?php echo urlencode(get_the_title() . ' - ' . get_bloginfo('name')); ?>&amp;hashtags=ZEROSTARTホームページ作成" 
        title="X(Twitter)でシェア" 
        onclick="javascript:window.open(this.href, '_blank', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=600');return false;" 
        target="_blank" 
        role="button" 
        tabindex="0">
        <svg width="18" height="18" viewBox="0 0 1200 1227" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z"/>
        </svg>

    </a>
    <a class="c-shareBtns__btn hov-flash-up" id="line" 
    href="https://social-plugins.line.me/lineit/share?url=<?php echo urlencode(get_permalink()); ?>&amp;text=<?php echo urlencode(get_the_title() . ' - ' . get_bloginfo('name')); ?>" 
    title="LINEに送る" 
    target="_blank" 
    role="button" 
    tabindex="0">
        L
    </a>
    <a class="c-shareBtns__btn hov-flash-up" id="facebook"
        href="https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode(get_permalink()); ?>" 
        title="Facebookでシェア" 
        onclick="javascript:window.open(this.href, '_blank', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=800,width=600');return false;" 
        target="_blank" 
        role="button" 
        tabindex="0">
        f
    </a>
    <a class="c-shareBtns__btn hov-flash-up" id="hatena"
        href="//b.hatena.ne.jp/add?mode=confirm&amp;url=<?php echo urlencode(get_permalink()); ?>" 
        title="はてなブックマークに登録" 
        onclick="javascript:window.open(this.href, '_blank', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=1000');return false;"
        target="_blank"
        role="button" 
        tabindex="0">
        B!
    </a>
    <a class="c-shareBtns__btn hov-flash-up" id="pocket"
        href="https://getpocket.com/edit?url=<?php echo urlencode(get_permalink()); ?>" 
        title="Pocketに保存" 
        target="_blank" 
        role="button" 
        tabindex="0">
        P
    </a>
    <button id="copyLinkButton" class="c-shareBtns__btn hov-flash-up" onclick="copyArticleLink()">
        <span>URLをコピーする</span>
        <span>URLをコピーしました！</span>
    </button>
</div>

それぞれのSNSによってhref属性に渡すパラメーターの仕様が違うので気をつけましょう！基本的には「記事タイトル」＋「記事URL」が共有できるように設定しています。

CSSコードの追加

次に、以下のCSSコードをテーマのスタイルシート（通常はstyle.css）に追加します。このスタイルは、シェアボタンのデザインとレイアウトを設定します。

.share-sns {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 100px;
}

@media (max-width: 768px) {
    .share-sns {
        margin-top: 50px;
    }
}

.share-sns a,
.share-sns button {
    border: 1px solid #FF5722;
    background-color: #fff;
    color: #FF5722;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0px 0px 5px #dadada;
    transition: .5s;
}

.share-sns a svg {
    fill: #FF5722;
    stroke: #FF5722;
}

.share-sns a:hover {
    color: #fff;
    background-color: #FF5722;
}

.share-sns a:hover span {
    color: #fff;
}

.share-sns a:hover svg {
    fill: #fff;
    stroke: #fff;
}

.share-sns a {
    min-height: 36px;
    min-width: 36px;
    width: 19%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
}

.share-sns a#hatena {
    background-color: #00a4de;
    border-color: #00a4de;
    color: #fff;
}

.share-sns a#line {
    background-color: #06C755;
    border-color: #06C755;
    color: #fff;
}

.share-sns a#facebook {
    background-color: #0865fe;
    border-color: #0865fe;
    color: #fff;
}

.share-sns a#twitter {
    background-color: #0F1419;
    border-color: #0F1419;
}

.share-sns a#twitter svg {
    stroke: #fff;
    fill: #fff;
}

.share-sns a#pocket {
    background-color: #EF4157;
    border-color: #EF4157;
    color: #fff;
}

.share-sns button {
    display: block;
    width: 100%;
    height: 36px;
    overflow: hidden;
    margin-top: 15px;
}

.share-sns button span {
    display: flex;
    align-items: center;
    width: max-content;
    height: 30px;
    margin: auto;
    color: #FF5722;
    font-size: 16px;
    transition: .5s;
}

.share-sns button.copied span {
    transform: translateY(-100%);
}

それぞれのSNSアイコンは使用せず（版権・著作権のトラブルを避けるため）、頭文字やSNSのブランドカラーを設定することでリンクの遷移先がイメージしやすいようにしています。

JavaScriptコードの追加

最後に、以下のJavaScriptコードをテーマのJavaScriptファイルに追加するか、<script>タグを使用してHTMLに直接埋め込みます。このスクリプトは、ユーザーが「URLをコピーする」ボタンをクリックしたときに、現在のページのURLをクリップボードにコピーする機能を提供します。

function copyArticleLink() {
    // 現在のページのURLを取得
    var articleUrl = window.location.href;

    // 一時的なテキストエリアを作成
    var tempInput = document.createElement(&#039;textarea&#039;);
    tempInput.value = articleUrl;
    document.body.appendChild(tempInput);

    // テキストを選択してコピー
    tempInput.select();
    document.execCommand(&#039;copy&#039;);

    // テキストエリアを削除
    document.body.removeChild(tempInput);

    // ボタンのテキストを切り替え
    var button = document.getElementById(&#039;copyLinkButton&#039;);
    button.classList.add(&#039;copied&#039;);

    // 1秒後に元に戻す
    setTimeout(function() {
        button.classList.remove(&#039;copied&#039;);
    }, 1000);
}

クリップボードにコピーする処理のほか、ボタンをクリックしたときに特定のクラスを付与することによってクリック時のアニメーションを実現しています。

まとめ

この記事では、SNSシェアリンクをWordPressの投稿に追加する方法を紹介しました。HTML、CSS、JavaScriptを組み合わせることで、訪問者が投稿を簡単に共有できるようにすることができます。各SNSのシェアボタンをカスタマイズして、サイトのデザインに合わせることも可能です。

カテゴリー

新着記事

アーカイブ

ホームページ作成の
ご相談・申込みはこちら

ZeroStartではホームページ作成における充実したノウハウを駆使し、
お客様が愛着を持てるホームページを作成致します。
ホームページ作成でご不安や不明点等お気軽にご相談ください

無料ご相談・お問合せはこちら