SWELLの固定ページにシェアボタンを置く方法｜プラグインなしで同期パターン管理

SWELLには、投稿記事にシェアボタンを表示する機能があります。

ただ、固定ページやLPページで「この場所にだけシェアボタンを置きたい」と思ったとき、標準機能だけでは少し扱いにくい場面がありました。

やりたかったのは、サイト全体にシェアボタンを増やすことではありません。特定の固定ページやLPページにだけ、必要な場所へシンプルなシェアボタンを置くことでした。

プラグインを使えば実現できる方法もあります。けれど、使っていないページでも関連ファイルが読み込まれることがあり、PageSpeed Insightsでも不要なJavaScriptとして指摘されることがありました。

一方で、PHPを使って表示する方法もあります。ただ、functions.phpやテンプレートを直接触る方法は、ミスをしたときの影響が大きく、気軽にすすめられる方法ではありません。

そこで今回は、カスタムHTMLブロックに貼り付けて使えるシェアボタンを作り、それをWordPressの同期パターンとして登録しました。

この記事では、SWELLの固定ページやLPページに、プラグインを使わずシェアボタンを置いた流れを記録します。同じように「シェアボタンを出したいだけなのに、選択肢が大げさになってしまう」と感じている人の参考になればと思います。

固定ページやLPページにだけシェアボタンを置きたかった

ただ、置きたかったのは通常の記事ではなく、特定の固定ページやLPページでした。ページの途中や最後など、必要な場所にだけシェアボタンを配置したかったのですが、SWELLの標準機能だけではこの用途にそのまま合わせるのが難しいと感じました。

サイト全体にシェアボタンを増やしたいわけではありません。必要なページに、必要な分だけ置きたい。今回の出発点はそこでした。

AddToAnyではなく、必要な場所にだけ置ける形にした

シェアボタンを表示するだけなら、AddToAny Share Buttonsのようなプラグインを使う方法もあります。

実際、プラグインを使えば多くのSNSに対応でき、管理画面から設定できるので便利です。

ただ、今回の目的は、多機能なシェアボタンをサイト全体で使うことではありませんでした。特定の固定ページやLPページにだけ、シンプルなシェアボタンを置きたかっただけです。

また、AddToAnyのようなプラグインは、使っていないページでも関連ファイルが読み込まれることがあります。ミコトホドの環境では、PageSpeed Insightsでも不要なJavaScriptとして指摘される場面がありました。

そのため今回は、必要なページにだけコードを置き、その場所だけで動く形にしました。

PHPではなく、カスタムHTMLで置く方法を選んだ

調べてみると、PHPを使ってシェアボタンを表示する方法も見つかりました。

functions.phpにコードを追加したり、テンプレート側を編集したりすれば、テーマ内の好きな場所にシェアボタンを出せる方法はあります。

ただ、PHPの編集はミスをしたときの影響が大きいです。特にfunctions.phpは、記述ミスでサイト全体にエラーが出ることもあります。

今回やりたかったのは、シェアボタンを数か所に置くことです。そのためにテーマファイルを触るのは、少し大きい作業だと感じました。

そこで、固定ページやLPページの編集画面から扱えるカスタムHTMLブロックに貼り付ける形を選びました。

カスタムHTMLなら、置いたページの置いた場所にだけシェアボタンを表示できます。テーマファイルを直接編集しないので、今回の用途にはこの方法が一番扱いやすいと感じました。

カスタムHTMLに貼るシェアボタンのコード

このコードを固定ページやLPページのカスタムHTMLブロックに貼り付けると、Facebook、X、はてなブックマーク、LINE、URLコピーのボタンを表示できます。

コード内では、現在開いているページのURLとタイトルを取得し、それぞれのシェア用URLを作成しています。そのため、ページごとにURLを書き換える必要はありません。

このコードは、貼り付けた場所にシェアボタンを表示するためのものです。サイト全体へ自動でシェアボタンを追加するコードではありません。

HTML、CSS、JavaScriptをまとめて入れているため、コードは少し長くなります。

<div class="mkt-share-box" data-mkt-share-box>
  <div class="mkt-share-buttons">
    <a class="mkt-share-btn mkt-share-facebook" data-mkt-share="facebook" href="#" target="_blank" rel="noopener noreferrer" aria-label="Facebookでシェア">
      <span class="mkt-share-icon" aria-hidden="true">f</span>
    </a>

    <a class="mkt-share-btn mkt-share-x" data-mkt-share="x" href="#" target="_blank" rel="noopener noreferrer" aria-label="Xでシェア">
      <span class="mkt-share-icon" aria-hidden="true">X</span>
    </a>

    <a class="mkt-share-btn mkt-share-hatena" data-mkt-share="hatena" href="#" target="_blank" rel="noopener noreferrer" aria-label="はてなブックマークでシェア">
      <span class="mkt-share-icon" aria-hidden="true">B!</span>
    </a>

    <a class="mkt-share-btn mkt-share-line" data-mkt-share="line" href="#" target="_blank" rel="noopener noreferrer" aria-label="LINEでシェア">
      <span class="mkt-share-icon mkt-share-icon-line" aria-hidden="true">LINE</span>
    </a>

    <button class="mkt-share-btn mkt-share-copy" type="button" data-mkt-share-copy aria-label="URLをコピー">
      <span class="mkt-share-copy-icon" aria-hidden="true">📋</span>
      <span class="mkt-share-copy-text">コピー</span>
    </button>
  </div>

  <p class="mkt-share-message" data-mkt-share-message aria-live="polite"></p>
</div>


<style>
.mkt-share-box {
  margin: 2rem 0;
}

.mkt-share-buttons {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(120px, 1.2fr);
  gap: 10px;
  align-items: stretch;
}

.mkt-share-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  padding: 0.6em 1em;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 2px;
  box-shadow: none;
  text-decoration: none;
  color: #222;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.2s ease, opacity 0.2s ease;
  min-width: 0;
  white-space: nowrap;
}

.mkt-share-btn:hover {
  background: #fafafa;
  color: #222;
  text-decoration: none;
}

.mkt-share-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  line-height: 1;
}

.mkt-share-facebook {
  border-color: #4267b2;
}

.mkt-share-facebook .mkt-share-icon {
  color: #4267b2;
  font-family: Arial, sans-serif;
  font-size: 1.35rem;
}

.mkt-share-x {
  border-color: #222;
}

.mkt-share-x .mkt-share-icon {
  color: #111;
  font-size: 1.2rem;
}

.mkt-share-hatena {
  border-color: #00a4de;
}

.mkt-share-hatena .mkt-share-icon {
  color: #00a4de;
  font-size: 1.2rem;
}

.mkt-share-line {
  border-color: #00c300;
}

.mkt-share-line .mkt-share-icon {
  color: #00c300;
  font-size: 0.75rem;
  letter-spacing: 0;
}

.mkt-share-copy {
  gap: 0.45em;
  border-color: #999;
}

.mkt-share-copy-icon {
  font-size: 1rem;
  line-height: 1;
}

.mkt-share-copy-text {
  font-size: 0.9rem;
  font-weight: 700;
  color: #333;
}

.mkt-share-message {
  margin: 0.8rem 0 0;
  text-align: center;
  font-size: 0.85rem;
  color: #555;
}

@media (max-width: 767px) {
  .mkt-share-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
</style>


<script>
(function() {
  const shareBoxes = document.querySelectorAll('[data-mkt-share-box]');
  if (!shareBoxes.length) return;

  shareBoxes.forEach(function(box) {
    const rawUrl = location.href;
    const pageUrl = encodeURIComponent(rawUrl);
    const pageTitle = encodeURIComponent(document.title);

    const shareUrls = {
      x: 'https://twitter.com/intent/tweet?url=' + pageUrl + '&text=' + pageTitle,
      facebook: 'https://www.facebook.com/sharer/sharer.php?u=' + pageUrl,
      line: 'https://social-plugins.line.me/lineit/share?url=' + pageUrl,
      hatena: 'https://b.hatena.ne.jp/entry/s/' + rawUrl.replace(/^https?:\/\//, '')
    };

    box.querySelectorAll('[data-mkt-share]').forEach(function(link) {
      const service = link.dataset.mktShare;
      if (shareUrls[service]) {
        link.href = shareUrls[service];
      }
    });

    const copyButton = box.querySelector('[data-mkt-share-copy]');
    const message = box.querySelector('[data-mkt-share-message]');

    if (copyButton) {
      copyButton.addEventListener('click', function() {
        navigator.clipboard.writeText(rawUrl).then(function() {
          if (message) {
            message.textContent = 'URLをコピーしました。';
          }
        }).catch(function() {
          if (message) {
            message.textContent = 'コピーできませんでした。URLを選択してコピーしてください。';
          }
        });
      });
    }
  });
})();
</script>

このコードでは、シェアボタン専用のクラス名とdata属性を使っています。ページ内のすべてのボタンやリンクを対象にするのではなく、data-mkt-share-box が付いた部分だけを処理する形にしました。

ミコトホドでは、記事内でHTMLやJavaScriptの試作を扱うこともあるため、シェアボタン用のコードは他の要素と混ざりにくい名前にしています。

固定ページやLPページに直接貼り付けるだけでも使えますが、複数ページで使うなら管理方法も考えておきたいところです。

ただし、HTML、CSS、JavaScriptをまとめているため、コードはかなり長くなります。毎回ページごとに貼り付ける運用にすると、あとからボタンの色や文言、表示するSNSを変更したくなったときに管理が面倒になります。

そこで、このコードをWordPressの同期パターンとして登録しました。

シェアボタンのコードを同期パターンとして登録する

今回のシェアボタンは、HTML、CSS、JavaScriptをまとめてカスタムHTMLブロックに貼り付ける形です。

一度だけ使うなら、そのページに直接貼り付けても問題ありません。けれど、複数の固定ページやLPページで使うなら、同期パターンとして登録しておいた方が管理しやすくなります。

ミコトホドの環境では、管理画面の「外観」→「パターン」からパターン管理画面を開けました。左メニューに「パターン」が表示されている場合は、そこから開くこともできます。

パターンを追加するときは、名前を分かりやすくしておきます。ここでは「SNSシェアボタン」という名前で登録しました。

ここで重要なのは、「同期」をオンにして保存することです。同期パターンにしておくと、あとからシェアボタンの項目を追加したり、文言やデザインを調整したりするときに、パターン側のコードを編集するだけで済みます。

すでに配置しているページを一つずつ開いて直さなくてよいので、長いコードを扱う場合はかなり助かります。

カテゴリーは必要に応じて設定します。今回の目的はシェアボタンのコードを再利用しやすくすることなので、まずは名前と同期設定を確認して保存しました。

パターンを追加すると、記事編集画面に近い編集画面が開きます。

ここで「カスタムHTML」ブロックを追加し、先ほどのシェアボタン用コードを貼り付けて保存します。

やること自体は、通常の記事や固定ページでカスタムHTMLブロックを使うときとほとんど同じです。違うのは、そのコードを通常のページ内に直接貼るのではなく、同期パターンとして保存しておく点です。

記事編集画面からシェアボタンを呼び出す

保存した同期パターンは、記事編集画面や固定ページの編集画面から呼び出せます。

ブロックを追加するときと同じように検索欄へ「SNS」と入力すると、登録した「SNSシェアボタン」が表示されました。

これで、長いコードを毎回貼り直さなくても、必要な固定ページやLPページにシェアボタンを配置できます。

編集画面では、シェアボタンが縦並びに見えたり、表示が簡略化されたりすることがあります。公開ページで横並びのボタンとして表示されていれば問題ありません。

この方法で助かったところ

今回の方法で一番助かったのは、必要なページにだけシェアボタンを置けることです。

プラグインのようにサイト全体で使う前提ではなく、固定ページやLPページの中で「ここに置きたい」と思った場所へ配置できます。

また、同期パターンとして登録しているので、長いコードを毎回コピーして貼り付ける必要がありません。あとからボタンの表示や文言を調整したくなったときも、パターン側を編集すれば管理しやすくなります。

求めていたのは、多機能なシェアボタンではなく、必要な場所にだけ置けるシンプルなシェアボタンでした。その意味では、今回の方法はかなり用途に合っていました。

この方法は、シェアボタンをサイト全体へ自動表示したい場合よりも、特定の固定ページやLPページにだけ手動で配置したい場合に向いています。

この方法の注意点

この方法は、固定ページやLPページの必要な場所にシェアボタンを置くには便利です。

ただし、サイト全体の記事下に自動でシェアボタンを表示したい場合には向いていません。あくまで、カスタムHTMLや同期パターンを使って、必要なページに手動で配置する方法です。

また、Facebook、X、はてなブックマーク、LINE、URLコピー以外のボタンを追加したい場合は、コード側を調整する必要があります。

多くのSNSに対応したい場合や、管理画面から細かく設定したい場合は、AddToAny Share Buttonsのようなプラグインを使う方が合っています。

今回の方法は、多機能さよりも「必要な場所にだけ置けること」を優先した方法です。

同期パターンにしておくと、あとからシェアボタンの項目を追加したり、文言やデザインを調整したりするときに、パターン側のコードを編集するだけで済みます。同期オフのパターンも記事編集画面から呼び出せますが、配置後はそのページ内の独立したブロックになります。ひな形として呼び出してページごとに微調整したい場合は、同期オフも便利です。今回は複数ページで同じシェアボタンを管理したかったので、同期オンで保存しました。

この方法が向いている人

今回の方法は、サイト全体に高機能なシェアボタンを自動表示したい場合には向いていません。

一方で、固定ページやLPページの必要な場所にだけ、シンプルなシェアボタンを置きたい場合には扱いやすい方法です。

• SWELLの固定ページやLPページにシェアボタンを置きたい
• シェアボタン用のプラグインを増やしたくない
• functions.phpやテンプレートPHPはできるだけ触りたくない
• 必要なページにだけシェアボタンを配置したい
• 長いコードを同期パターンとして管理したい

こういう目的なら、今回の方法はかなり現実的な選択肢になります。

実際に設置したシェアボタン

この記事でも、紹介した同期パターンを使ってシェアボタンを設置しています。実際の表示は以下のようになります。

まとめ：必要な場所にだけ置けるシェアボタンは助かる

今回は、SWELLの固定ページやLPページに、プラグインを使わずシェアボタンを置いた流れを紹介しました。

シェアボタンを表示する方法自体は、プラグインやPHPなど、ほかにも選択肢があります。

ただ、欲しかったのは、サイト全体に大きな仕組みを追加することではありませんでした。固定ページやLPページの必要な場所にだけ、シンプルなシェアボタンを置ける方法です。

カスタムHTMLで作ったシェアボタンを同期パターンとして登録しておけば、長いコードを毎回貼り直さずに済みます。あとから項目を追加したり、文言やデザインを調整したりするときも、パターン側を編集するだけで管理できます。

この道に詳しい人から見れば、小さな工夫かもしれません。

でも、シェアボタンを出したいだけなのに、プラグインを入れるか、PHPを触るかで迷っている人にとっては、こういう選択肢があるだけでかなり助かるはずです。

少なくとも、この方法でかなり助かりました。だから、ミコトホドの運用メモとして残しておきます。