この WordPress ブログで使用されているSNS共有ボタン＆URLコピーボタン

この WordPress ブログにプラグインを使用せずに直接コードを作成する Naver, Facebook, Twitter 共有ボタンとURLコピーボタンを追加して使用しています。 より簡単にコードを管理し、一貫性を持つようにコードを最近更新しました。

Naver カフェでこのブログに使用されたURLコピーボタンを実装する方法についてお問い合わせいただいた方がいらっしゃって、このサイトで使用されているSNS共有ボタン＆URLコピーボタンのコードを以下にまとめてみました。

[この記事は、2024年11月10日に最後に更新されました。 ]

この WordPress ブログで使用されているSNS共有ボタン＆URLコピーボタン

現在このブログでは、 Naver、Facebook、Twitter共有ボタン、投稿URLコピーボタンがタイトルの下に表示されます。 カカオトーク共有ボタンも表示しましたが、効用性が落ちて削除しました。 カトク共有ボタンを追加するには、カカオデベロッパーページにアクセスしてデベロッパーアカウントにサインアップし、アプリケーションを作成する必要があります（この記事の「2021年8月追加：カカオトーク共有ボタンを追加する」を参照）。

このブログで使用されているソーシャルネットワーク共有ボタンのソースは次のとおりです。

HTMLコード

<!-- SNS Share Button -->
<div class="sns-go">
    <ul>
        <li>
            <a 
                href="#" 
                class="js-social-share" 
                data-url="http://share.naver.com/web/shareView.nhn?url=" 
                data-title="[공유] " 
                target="_blank" 
                alt="Naver에 공유" 
                rel="nofollow"
            >
                <svg height="35" width="35"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 96 96" shape-rendering="geometricPrecision" text-rendering="geometricPrecision"><rect width="96.000002" height="96" rx="9" ry="9" fill="#1dc800" stroke-width="0"/><g transform="translate(.000001 0.000001)"><path d="M22.810019,26.075075h18.03984l16.57371,24.254979v-24.223106h17.944217v47.999999h-17.976097L40.881729,50.075074v24.095618h-18.16733Z" fill="#fff" stroke="#000" stroke-width="0"/></g></svg>
            </a>
        </li>

<li>
    <a 
        href="#" 
        class="js-social-share" 
        data-url="https://www.facebook.com/sharer/sharer.php?u=" 
        data-title="[공유] " 
        target="_blank" 
        alt="Facebook에 공유" 
        rel="nofollow"
    >
       <svg height="35" width="35" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
	 viewBox="0 0 408.788 408.788" xml:space="preserve">
<path style="fill:#475993;" d="M353.701,0H55.087C24.665,0,0.002,24.662,0.002,55.085v298.616c0,30.423,24.662,55.085,55.085,55.085
	h147.275l0.251-146.078h-37.951c-4.932,0-8.935-3.988-8.954-8.92l-0.182-47.087c-0.019-4.959,3.996-8.989,8.955-8.989h37.882
	v-45.498c0-52.8,32.247-81.55,79.348-81.55h38.65c4.945,0,8.955,4.009,8.955,8.955v39.704c0,4.944-4.007,8.952-8.95,8.955
	l-23.719,0.011c-25.615,0-30.575,12.172-30.575,30.035v39.389h56.285c5.363,0,9.524,4.683,8.892,10.009l-5.581,47.087
	c-0.534,4.506-4.355,7.901-8.892,7.901h-50.453l-0.251,146.078h87.631c30.422,0,55.084-24.662,55.084-55.084V55.085
	C408.786,24.662,384.124,0,353.701,0z"/>
</svg>
    </a>
</li>

<li>
    <a 
        href="#" 
        class="js-social-share" 
        data-url="https://twitter.com/intent/tweet?url=" 
        data-title="[공유] " 
        target="_blank" 
        alt="Twitter에 공유" 
        rel="nofollow"
    >
    <svg height="35" width="35" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 29.242 29.242" shape-rendering="geometricPrecision" text-rendering="geometricPrecision"><g><g><path d="M26.918,0.668h-24.592C1.039,0.668,0,1.756668,0,3.103095v24.370858C0,28.817237,1.039,29.908,2.326,29.908h24.592c1.281,0,2.324-1.090763,2.324-2.434047v-24.370858c0-1.346427-1.043-2.435095-2.324-2.435095ZM14.549,18.113926c.41.429599.908.646495,1.496.646495h4.227c.59,0,1.09.221087,1.51.659068.422.437982.629.966075.629,1.580087s-.209,1.141058-.629,1.577992c-.42.440077-.92.661164-1.508.661164h-4.227c-1.76,0-3.266-.656973-4.514-1.964631-1.25-1.309754-1.873-2.88565-1.873-4.729784v-8.934619c0-.632873.207-1.16411.623-1.594757.416-.428552.924-.644399,1.523-.644399.584,0,1.082.217943,1.5.65802.416.440077.623.965027.623,1.580087v2.238108h6.334c.592,0,1.094.218991,1.514.659068.426.437982.633.962931.633,1.580087c0,.610869-.209,1.14001-.629,1.580087-.42.436934-.92.656973-1.51.656973h-6.341v2.2182c0,.617156.205,1.14001.619,1.572753Z" transform="translate(0-.666)" fill="#42c8f4"/></g></g></svg>
    </a>
</li>
        <li>
            <a class="js-copy-btn">
                <svg width="35" height="35" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M172.5 131.1C228.1 75.51 320.5 75.51 376.1 131.1C426.1 181.1 433.5 260.8 392.4 318.3L391.3 319.9C381 334.2 361 337.6 346.7 327.3C332.3 317 328.9 297 339.2 282.7L340.3 281.1C363.2 249 359.6 205.1 331.7 177.2C300.3 145.8 249.2 145.8 217.7 177.2L105.5 289.5C73.99 320.1 73.99 372 105.5 403.5C133.3 431.4 177.3 435 209.3 412.1L210.9 410.1C225.3 400.7 245.3 404 255.5 418.4C265.8 432.8 262.5 452.8 248.1 463.1L246.5 464.2C188.1 505.3 110.2 498.7 60.21 448.8C3.741 392.3 3.741 300.7 60.21 244.3L172.5 131.1zM467.5 380C411 436.5 319.5 436.5 263 380C213 330 206.5 251.2 247.6 193.7L248.7 192.1C258.1 177.8 278.1 174.4 293.3 184.7C307.7 194.1 311.1 214.1 300.8 229.3L299.7 230.9C276.8 262.1 280.4 306.9 308.3 334.8C339.7 366.2 390.8 366.2 422.3 334.8L534.5 222.5C566 191 566 139.1 534.5 108.5C506.7 80.63 462.7 76.99 430.7 99.9L429.1 101C414.7 111.3 394.7 107.1 384.5 93.58C374.2 79.2 377.5 59.21 391.9 48.94L393.5 47.82C451 6.731 529.8 13.25 579.8 63.24C636.3 119.7 636.3 211.3 579.8 267.7L467.5 380z"></path></svg>
            </a>
        </li>
    </ul>
</div>

svg イメージの代わりに自分で作成したカスタムイメージを挿入することもできます。 上記のコードをテーマファイルの適切な場所に追加します。 GeneratePress テーマを使用している場合、 ルックス » Elementsでフックを作成し、上記のコードを追加します。 次のように設定します。

• Hook: generate_after_entry_title
• Display Rulesの「投稿 - すべての投稿」に表示されるように設定

GeneratePress テーマのフックについては、次の記事を参照してください。

• GeneratePress テーマフックを使用する

エレメンプロ プラグインや Avada などを使用している場合は、シングルポストテンプレートを作成して適切な場所に追加できます。

Twitter 共有アイコンの代わりにX共有アイコンを使用したい場合

Twitterは2023年7月24日に正式にXにリブランドされています。これらの変化にはいくつかの重要な変更がありました。

ロゴとブランドの変更：

• 象徴的だった青い鳥のロゴが「X」に置き換えられました。
• イロン・ムスクは「すべての鳥にさよならを告げる」と述べた。

ウェブサイトとドメインの変更：

• Twitter.comがX.comにリダイレクトされ始めました。
• アプリストアでもアプリ名が「X」に変更されました。

既存のコードを使用してもtwitter.comがx.comにリダイレクトされ、正しく共有されますが、 Twitter アイコンをXアイコンに変更したい場合 Twitter 関連コードを以下のコードに置き換えてください。

<li>
    <a 
        href="#" 
        class="js-social-share" 
        data-url="https://x.com/intent/tweet?url=" 
        data-title="[공유] " 
        target="_blank" 
        alt="X에 공유" 
        rel="nofollow"
    >
    <svg xmlns="http://www.w3.org/2000/svg" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 512 509.64" height="35" width="35">
    <rect width="512" height="509.64" rx="115.61" ry="115.61"/>
    <path fill="#fff" fill-rule="nonzero" d="M323.74 148.35h36.12l-78.91 90.2 92.83 122.73h-72.69l-56.93-74.43-65.15 74.43h-36.14l84.4-96.47-89.05-116.46h74.53l51.46 68.04 59.53-68.04zm-12.68 191.31h20.02l-129.2-170.82H180.4l130.66 170.82z"/>
</svg>

    </a>
</li>

CSSコード

/* SNS 공유 */

.sns-go {
    margin-top: 30px;
}

.sns-go ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.sns-go li {
    float: left;
    margin-right: 10px;
}

.sns-go a {
    display: block;
    color: white;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

/* 링크 복사 툴팁 */

.linktooltips-container{
background-color: #030303;
color: #ffffff;
padding: 5px 30px;
border-radius: 10px;
position: absolute;
z-index: 999;
}

適切に修正してご使用ください。 ルックス » カスタマイズ » 追加 CSS セクションに追加したり、 チャイルドテーマ 内の style.css ファイルに追加します。

リンクにアンダースコアが表示されるプロパティがソーシャル共有アイコンにも適用され、アンダースコア（_）がアイコンの間に表示される場合は、次のコードを追加して問題が解決するかどうかを確認してください。

.sns-go a {
    text-decoration: none !important;
}

JavaScriptコード

<script>
document.addEventListener('DOMContentLoaded', function() {
    
    // Social Share Links
    document.querySelector('.sns-go').addEventListener('click', function(e) {
        e.preventDefault();

        var shareLink = e.target.closest('.js-social-share');
        
        if (shareLink) {
            var shareUrl = shareLink.getAttribute('data-url') + encodeURIComponent(document.URL),
                shareTitle = shareLink.getAttribute('data-title') + encodeURIComponent(document.title);

            window.open(shareUrl + '&title=' + shareTitle, 'shareWindow', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');
        }
    });

    // Copy to Clipboard Button
    document.querySelector('.js-copy-btn').addEventListener('click', function() {
        copyURL(this);
    });

    function copyURL(element) {
        let bodyClass = document.body.className;
        let match = bodyClass.match(/postid-(\d+)/);
        if (match) {
            let postId = match[1];
            let url = `https://www.thewordcracker.com/?p=${postId}`;
            navigator.clipboard.writeText(url).then(() => {
                element.insertAdjacentHTML('afterend', '<div class="linktooltips-container">URL이 복사되었습니다!</div>');
                setTimeout(() => { 
                    document.querySelectorAll('.linktooltips-container').forEach(el => el.remove()); 
                }, 3000);
            }).catch(error => {
                console.error('Copy failed', error);
                alert('URL 복사에 실패했습니다.');
            });
        } else {
            console.warn('Post ID not found');
            alert('URL을 생성할 수 없습니다.');
        }
    }
});
</script>

上記のコードでは、サイトドメインを適切に変更してください。 ティーストーリーブログにURLコピーボタンを追加したい場合組織にソーシャル共有ボタンとURLコピーボタンを追加する「に記載されているJavaScriptコードを使用できます。

ツールチップの代わりにアラート方式で「URLをコピーしました！」 通知を表示したい場合は、次のコードを使用できます。 以下のコードでは、jsコードを少し遅らせてロードするように少し修正しました。

<script>
document.addEventListener('DOMContentLoaded', () => {
    setTimeout(() => {
        setupSocialShare();
        setupCopyToClipboard();
    }, 2000); // 2-second delay
});

function setupSocialShare() {
    // Select the element to trigger the social sharing functionality
    const snsGo = document.querySelector('.sns-go');
    
    // If the element exists, attach an event listener to it
    snsGo && snsGo.addEventListener('click', (e) => {
        e.preventDefault();
        const shareLink = e.target.closest('.js-social-share');
        
        // If a valid share link is found, construct a URL and open a share window
        if (shareLink) {
            const shareUrl = `${shareLink.getAttribute('data-url')}${encodeURIComponent(document.URL)}`,
                  shareTitle = `${shareLink.getAttribute('data-title')}${encodeURIComponent(document.title)}`;

            window.open(`${shareUrl}&title=${shareTitle}`, 'shareWindow', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');
        }
    });
}

function setupCopyToClipboard() {
    // Select the button intended to trigger the copy functionality
    const copyBtn = document.querySelector('.js-copy-btn');
    
    // If the button exists, attach an event listener to it
    copyBtn && copyBtn.addEventListener('click', (e) => {
        e.preventDefault();
        copyURLToClipboard(copyBtn);
    });
}

function copyURLToClipboard() {
    // Extract the post ID from the body's class attribute
    const bodyClass = document.body.className;
    const match = bodyClass.match(/postid-(\d+)/);

    // If a post ID is found, construct a URL and try to copy it to the clipboard
    if (match) {
        const postId = match[1];
        const url = `https://www.thewordcracker.com/?p=${postId}`;

        navigator.clipboard.writeText(url)
        .then(() => {
            // Inform the user that the URL was copied
            alert('URL이 복사되었습니다!');
        })
        .catch(error => {
            // If the copy fails, log the error and inform the user
            console.error('Copy failed', error);
            alert('URL 복사에 실패했습니다.'); 
        });
    }
}
</script>

JavaScriptコードは、次の記事を参照してロードすることが望ましいです。

• WordPressでjsスクリプトファイルとスタイルシートを正しくロードする方法

上記の方法が難しいか面倒な場合 WPコードのようなプラグインをインストールし、フーター領域に上記のコードを追加するだけです。 この方法は便利ですが、あまりお勧めしません。

GeneratePress テーマを使用している場合は、新しいElementを追加してHookを作成し、上記のコードを入力してフックに "wp_footer"を指定します。 このブログではこの方法で適用しました。 同様に表示規則ですべての文を指定してください。

※上記のコードにエラーがある場合や改善事項がある場合は、コメントでお知らせいただきありがとうございます。

上記のコードが機能しない場合

上記のコードが機能しない場合は、次のコードを使用して動作するかどうかをテストしてください。次のコードはポストURLをそのままコピーします。 （上記のコードではhttps://example.com/?p={post_id}形式にコピーします。）

<script>
document.addEventListener('DOMContentLoaded', () => {
    setTimeout(() => {
        setupSocialShare();
        setupCopyToClipboard();
    }, 2000); // 2-second delay
});

function setupSocialShare() {
    // Select the element to trigger the social sharing functionality
    const snsGo = document.querySelector('.sns-go');
    
    // If the element exists, attach an event listener to it
    snsGo && snsGo.addEventListener('click', (e) => {
        e.preventDefault();
        const shareLink = e.target.closest('.js-social-share');
        
        // If a valid share link is found, construct a URL and open a share window
        if (shareLink) {
            const shareUrl = `${shareLink.getAttribute('data-url')}${encodeURIComponent(document.URL)}`,
                  shareTitle = `${shareLink.getAttribute('data-title')}${encodeURIComponent(document.title)}`;

            window.open(`${shareUrl}&title=${shareTitle}`, 'shareWindow', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');
        }
    });
}

function setupCopyToClipboard() {
    // Select the button intended to trigger the copy functionality
    const copyBtn = document.querySelector('.js-copy-btn');
    
    // If the button exists, attach an event listener to it
    copyBtn && copyBtn.addEventListener('click', (e) => {
        e.preventDefault();
        copyURLToClipboard();
    });
}

function copyURLToClipboard() {
    // Use the current URL from the browser's address field
    const url = window.location.href;

    navigator.clipboard.writeText(url)
    .then(() => {
        // Inform the user that the URL was copied
        alert('URL copied to clipboard!');
    })
    .catch(error => {
        // If the copy fails, log the error and inform the user
        console.error('Copy failed', error);
        alert('Failed to copy URL.'); 
    });
}
</script>

JSファイルロードの例

上記のアラート方式でURLをコピーするJavaScriptをロードしたい場合は、次の手順に進みます。

1. この Naver カフェの投稿からjsファイルをダウンロードしてください。

2. jsファイルをテキストエディタで開き、https://www.thewordcracker.com部分をそのサイトのURLに置き換えます。

3. FTP / SFTPを介してチャイルドテーマ内のjsフォルダ（例：/public_html/wp-content/themes/generatepress-child/js) としてアップロードします。

4.次のコードをチャイルドテーマ内の関数ファイル（functions.php）に追加します。

function my_theme_enqueue_scripts() {
    if (is_single()) {
        // Correctly register the script
        wp_register_script('my-copytext-script', get_stylesheet_directory_uri() . '/js/copytext.js', array('jquery'), '', true);

        // Conditionally enqueue the script
        wp_enqueue_script('my-copytext-script');
    }
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_scripts');

これにはFTP接続が必要です。

チャイルドテーマ（子テーマ）を作成して作業してください。詳しくは Naver カフェの投稿を参照してみてください。

参照

• WordPress Newspaper テーマ：wp-zexit関連マルウェア感染注意 - 治療と予防
• WordPress WPML vs. 自動翻訳サービスGTranslateの比較
• クラウドウェイズサーバーの複製（サーバーリージョンまたはプランの変更）