WordPress ブログ記事の一番下にコピー、共有ボタンを表示する（feat。 GeneratePress）

このブログでは、上部にURLをコピーボタンと Facebook、X共有ボタンを表示しています。これとは別に、ブログ記事の下部にコピーボタンと Facebook、X、 Naver、スレッドなどのソーシャル共有ボタンを表示してみました。 Korea SNSのようなソーシャル共有プラグインをインストールすると簡単ですが、私は GeneratePress テーマのフックを使ってコードを追加しました。

GeneratePress テーマ：ブログ記事の一番下にコピー、共有ボタンを表示する方法

個人的に使用するために、投稿の下部にURLコピーボタンとソーシャル共有ボタンを追加しました。

共有ボタンをクリックすると、 Facebook、X、 Naver, スレッド(Threads) 共有リンクが表示されます。

特にスレッド共有ボタンが必要で作ってみました。😀

Facebookで有名なメタでリリースされたスレッド（Threads）は、2023年7月6日に公開されたテキスト中心のソーシャルメディアマイクロブログサービスで、 Instagram アカウントと連携して簡単に使用できます。 Twitterをターゲットとしたサービスで、最大500文字のテキスト作成が可能で、画像のアップロードもサポートします。

Instagram ユーザーは別途の購読手続きなしで既存のアカウントとして直接利用でき、フォローイング関係も連動して高速ユーザー拡張が行われました。 Threadsは現在、毎月のアクティブユーザーは1億7,500万人を超え、急速に成長しています。

このブログのように、投稿の下部にコピーボタンと共有ボタンを表示したい場合は、以下に示すコードを使用できます。以下のコードは GeneratePress テーマに基づいて作成されましたが、他のテーマを使用している場合は適切に適用できます。

👉GeneratePressは、既存のテーマの中で最も速いテーマの一つとして評価されており、シンプルなブログ、特に収益型ブログ操作時に使用できます。 GenerateBlocksなどのブロックエディタベースのプラグインと組み合わせて使用すると、エレメンなしで複雑なサイト構築も可能です（参照).

PHPコード

形状 » Elementsに移動し、 Add New Element ボタンをクリックし、表示されるポップアップから 「Hook」を選択します。（GP Premiumがインストールしなければならない、 形状 » GeneratePressでElementsモジュールを有効にする必要があります要素がメニューに表示されます。）

新しいElement編集画面が表示されたら、要素名を指定し、テキストボックスに以下に示すPHPコードを入力します。

「Hook」에 generate_after_entry_contentを選択して、 Execute PHPを有効にします。（👉文の上に表示したい場合は generate_after_entry_title または別のフックを選択します。 Hookの詳細な場所はここを参照してください。）

PHPコード：

<?php
$__ccp_uid    = wp_generate_uuid4();
$__ccp_url    = esc_url( get_permalink() );
$__ccp_title  = esc_attr( wp_strip_all_tags( get_the_title(), true ) );
?>

<section class="ccp-post-share"
         role="region"
         aria-label="게시글 공유 영역"
         data-url="<?php echo $__ccp_url; ?>"
         data-title="<?php echo $__ccp_title; ?>">

  <div class="ccp-share-row ccp-share-row--xl">
    <!-- 50%: 복사 -->
    <button type="button"
            class="ccp-btn ccp-btn-copy ccp-btn--xl"
            data-ccp="copy"
            aria-label="URL 복사">
      <span class="ccp-icon" aria-hidden="true">
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
          <path d="M13.06 10.94a5 5 0 0 1 0 7.07l-2.12 2.12a5 5 0 1 1-7.07-7.07l1.41-1.41"
                stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M10.94 13.06a5 5 0 0 1 0-7.07l2.12-2.12a5 5 0 1 1 7.07 7.07l-1.41 1.41"
                stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </span>
      <span class="ccp-btn-label">복사</span>
    </button>

    <!-- 50%: 공유 -->
    <div class="ccp-dropdown" data-ccp="dropdown" id="ccp-dd-<?php echo esc_attr($__ccp_uid); ?>">
      <button type="button"
              class="ccp-btn ccp-btn-share ccp-btn--xl"
              data-ccp="toggle"
              aria-haspopup="true"
              aria-expanded="false"
              aria-controls="ccp-menu-<?php echo esc_attr($__ccp_uid); ?>">
        <span class="ccp-icon" aria-hidden="true">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
            <path d="M4 12v7a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-7"
                  stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M12 16V3m0 0l-4 4m4-4l4 4"
                  stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </span>
        <span class="ccp-btn-label">공유</span>
      </button>

      <div class="ccp-menu ccp-menu--sheet"
           id="ccp-menu-<?php echo esc_attr($__ccp_uid); ?>"
           role="menu"
           tabindex="-1"
           hidden>
        <a href="#" class="ccp-menu-item" data-ccp="share-fb" role="menuitem">Facebook</a>
        <a href="#" class="ccp-menu-item" data-ccp="share-x" role="menuitem">X</a>
        <a href="#" class="ccp-menu-item" data-ccp="share-naver" role="menuitem">Naver</a>
        <a href="#" class="ccp-menu-item" data-ccp="share-threads" role="menuitem">Threads</a>
      </div>
    </div>
  </div>
  <p class="ccp-toast" role="status" aria-live="polite" hidden></p>
</section>

表示ルール タブをクリックし、共有ボタンが表示される場所を指定します。ここでは、すべての記事に表示されるように、以下のようにルールを指定します。

JavaScriptコード

JavaScript（JavaScript）も同様に追加できます。

WordPress 管理者ページで 形状 » Elementsに移動します。その後、 Add New Element ボタンをクリックして、 「Hook」を選択します。

エレメント編集画面が表示されたら、以下のようにエレメント名を入力し、テキストボックスに下に示すJSコードを貼り付けます。

「Hook」は wp_footerを選択して、 Execulte Shortcodes와 Execute PHPはチェックしません。

JSコード：

<!-- ======================= JS — 푸터에 삽입(또는 별도 .js 로드) ======================= -->
<script>
(function () {
  const $all = (s, r=document) => Array.from(r.querySelectorAll(s));
  const openPopup = (url, title) => {
    const w=600,h=600,y=outerHeight/2+screenY-h/2,x=outerWidth/2+screenX-w/2;
    window.open(url, title, `width=${w},height=${h},left=${x},top=${y},noopener,noreferrer`);
  };
  const showToast = (root, msg) => {
    const t=root.querySelector('.ccp-toast'); if(!t) return;
    t.textContent = msg; t.hidden=false; t.dataset.show='1';
    setTimeout(()=>{ delete t.dataset.show; t.hidden=true; },1500);
  };
  const buildUrls = (u,t) => {
    const U = encodeURIComponent(u);
    const T = encodeURIComponent(t);
    return {
      fb: `https://www.facebook.com/sharer/sharer.php?u=${U}`,
      x:  `https://twitter.com/intent/tweet?url=${U}&text=${T}`,
      naver:   `https://share.naver.com/web/shareView?url=${U}&title=${T}`,
      threads: `https://www.threads.net/intent/post?text=${T}%20${U}`
    };
  };

  const init = (root) => {
    const u = root.dataset.url || location.href;
    const t = root.dataset.title || document.title;
    const urls = buildUrls(u,t);

    const copy   = root.querySelector('[data-ccp="copy"]');
    const toggle = root.querySelector('[data-ccp="toggle"]');
    const menu   = root.querySelector('.ccp-menu');
    const fb     = root.querySelector('[data-ccp="share-fb"]');
    const x      = root.querySelector('[data-ccp="share-x"]');
    const naver  = root.querySelector('[data-ccp="share-naver"]');
    const th     = root.querySelector('[data-ccp="share-threads"]');

    // 복사
    copy?.addEventListener('click', async ()=>{
      try { await navigator.clipboard.writeText(u); showToast(root,'링크가 복사되었습니다.'); }
      catch(e){
        const ta=document.createElement('textarea'); ta.value=u; document.body.appendChild(ta);
        ta.select(); try { document.execCommand('copy'); showToast(root,'링크가 복사되었습니다.'); }
        catch(_) { showToast(root,'복사 실패'); } finally { ta.remove(); }
      }
    });

    // 드롭다운 토글
    const onDoc = (e)=>{ if(!root.contains(e.target)) close(); };
    const onKey = (e)=>{ if(e.key==='Escape') close(); };
    const open = ()=>{
      menu.hidden=false; toggle.setAttribute('aria-expanded','true');
      (fb||menu).focus({preventScroll:true});
      document.addEventListener('click', onDoc, {capture:true});
      document.addEventListener('keydown', onKey);
    };
    const close = ()=>{
      if(menu.hidden) return;
      menu.hidden=true; toggle.setAttribute('aria-expanded','false');
      toggle.focus({preventScroll:true});
      document.removeEventListener('click', onDoc, {capture:true});
      document.removeEventListener('keydown', onKey);
    };
    toggle?.addEventListener('click', ()=> menu.hidden ? open() : close());

    // 공유
    const go = (href, name) => { openPopup(href, name); close(); };
    fb?.addEventListener('click', (e)=>{ e.preventDefault(); go(urls.fb,'facebook_share'); });
    x ?.addEventListener('click', (e)=>{ e.preventDefault(); go(urls.x,'x_share'); });
    naver?.addEventListener('click', (e)=>{ e.preventDefault(); go(urls.naver,'naver_share'); });
    th?.addEventListener('click', (e)=>{ e.preventDefault(); go(urls.threads,'threads_share'); });
  };

  document.addEventListener('DOMContentLoaded', ()=> {
    $all('.ccp-post-share').forEach(init);
  });
})();
</script>

表示ルール タブでは、上記でも すべての記事を指定します。

CSSコード：

CSSコードにはいくつかの方法があります。チャイルドテーマ（子テーマ、サブテーマ）を作成し、チャイルドテーマ内のスタイルシートファイル（style.css）に追加するか、管理者ページの外観»カスタム»追加CSSに入力できます。

以下のCSSコードを適切な方法で追加します。

/* ======================= CSS — style.css ======================= */

/* 50%/50% 막대형 레이아웃 */
.ccp-post-share { margin: 24px 0 0; }
.ccp-share-row--xl {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* 50 / 50 */
  gap: 16px;
}

/* 버튼 크기 & 베이스 */
.ccp-btn--xl {
  width: 100%; height: 56px; border-radius: 10px;
  font-size: 16px; font-weight: 700; letter-spacing: -.2px;
  justify-content: center;
}
.ccp-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 0 20px; border: 0; cursor: pointer;
  transition: transform .04s ease, box-shadow .2s ease, background .2s ease, filter .2s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,.08); color: #fff;
}
.ccp-btn:focus-visible { outline: 3px solid #0057ff55; outline-offset: 2px; }
.ccp-btn:active { transform: translateY(1px); }

/* 스크린샷 톤 */
.ccp-btn-copy { background:#2E81DB; }
.ccp-btn-copy:hover { filter: brightness(.95); }
.ccp-btn-share { background:#F35B52; }
.ccp-btn-share:hover { filter: brightness(.95); }

/* 아이콘 */
.ccp-icon { display:inline-flex; align-items:center; }
.ccp-icon svg { width:22px; height:22px; color:#fff; }
.ccp-btn-label { line-height:1; }

/* 드롭다운 */
.ccp-dropdown { position: relative; width: 100%; }
.ccp-menu {
  position: absolute; top: calc(100% + 10px); left: 0;
  min-width: 240px; padding: 10px;
  border-radius: 12px; border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 26px rgba(0,0,0,.14);
  background: #fff; z-index: 50;
}
.ccp-menu[hidden] { display: none !important; }
.ccp-menu--sheet .ccp-menu-item {
  display:block; padding:12px 14px; border-radius:10px;
  text-decoration:none; color:#111; font-weight:700; font-size:15px;
}
.ccp-menu--sheet .ccp-menu-item:hover,
.ccp-menu--sheet .ccp-menu-item:focus { background:#f1f6ff; }

/* 토스트 */
.ccp-toast {
  margin-top: 12px; font-size: 14px; font-weight: 700;
  background: #111; color:#fff; display:inline-block;
  padding: 8px 12px; border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
  opacity: 0; transform: translateY(6px); transition: all .2s;
}
.ccp-toast[data-show="1"] { opacity: 1; transform: translateY(0); }

/* 다크 모드 */
@media (prefers-color-scheme: dark) {
  .ccp-menu { background:#1f1f1f; border-color:#2a2a2a; }
  .ccp-menu--sheet .ccp-menu-item { color:#e9e9e9; }
  .ccp-menu--sheet .ccp-menu-item:hover,
  .ccp-menu--sheet .ccp-menu-item:focus { background:#2a2f3f; }
  .ccp-toast { background:#2b2b2b; }
}

この記事に記載されているすべてのコードは単なる例であり、環境に応じて適切に変更して使用してください。

👉参考にページの読み込み速度に影響を最小限に抑えるには、上記のPHPコードとJSコードをChat GPTに入れてください WordPressでチャイルドテーマ関数ファイルに追加するenqueue関数をお勧めします。 WordPressについて少し知れば難しくないようにしていただけます。初心者の場合は、本文に記載されている方法をご利用ください。

最後に、

WordPressには、さまざまなソーシャル共有プラグインがあります。 WordPress 追加ページから 社会シェアで検索してお気に入りのプラグインをインストールできます。

ソーシャル共有プラグインはサイトの速度に影響を与える可能性があるため、インストール後にページの読み込み速度に影響がないことを確認してください。

簡単なソーシャル共有ボタンをブログ記事の上部または下部に表示したい場合は、この記事で紹介するコードで試してみることができます。😀

WordPress ブログ記事の一番下にコピー、共有ボタンを表示する（feat。 GeneratePress)

GeneratePress テーマ：ブログ記事の一番下にコピー、共有ボタンを表示する方法

PHPコード

JavaScriptコード

CSSコード：

最後に、

参照

ワードクラッカー

2のコメント

コメントを残す応答キャンセル

GeneratePress テーマ：ブログ記事の一番下にコピー、共有ボタンを表示する方法

PHPコード

JavaScriptコード

CSSコード：

最後に、

参照

ワードクラッカー

2のコメント

コメントを残す 応答キャンセル

コメントを残す応答キャンセル