WordPress の目次生成プラグインで Jetpack の「共有」が含まれてしまう時の対処法

WordPress Jetpack plugin
photo credit: denharsh via photopin cc

多機能プラグインの Jetpack for WordPress には手軽に記事の共有ボタンを設置できる機能があります。ですが、自動的に記事の目次を生成してくれるプラグインも導入していると、共有ボタンのスペースまで勝手に目次にされてしまう現象も起きます。これは設定を少し弄ることで解消できました。

目次

  1. きっかけ
  2. ソースコードを確認
  3. 「共有:」の文字を削除する
  4. プラグインを入れて再現してみる
  5. 手動で目次を入れる方法

1. きっかけ

こういう現象があることを知ったきっかけは、Jetpack 仲間の凛さん (@rin_wan) から頂いた次のツイート。

どうやら Jetpack により、共有ボタン周りに h3 タグが付けられてしまうようです。目次を生成するプラグインが h タグを拾ってリスト化するため、共有ボタンのスペースが目次に含まれてしまう、とのことでした。

2. ソースコードを確認

「これは不思議な現象!」と思って、自分のブログでもどうなっているのか調べてみました。Mac の Safari でソースコードを表示させると、確かに、共有ボタンの左側に表示される「Share:」(デフォルトでは「共有:」になります)の文字が h3 タグで囲まれています。

<h3 class="sd-title">Share:</h3>

3. 「共有:」の文字を削除する

せっかくプラグインで記事に目次を付けても、「共有:」が目次の1つとして扱われるのはちょっと…、と思ったので、対策を考えてみました。そこで思いついたのが、単純な発想ですが「共有:」の文字を削除すれば h3 タグが付けられないで済むのでは?ということでした。

方法は簡単です。WordPress 管理画面で「設定」→「共有」→「共有ボタン」と進むと、「共有ラベル」という場所があります。ここを空欄にして「変更を保存」をクリック。

screen shoot

再度ブログの記事ページを開くと、共有ボタンの左から「Share:」の文字がなくなり、ソースコードの中でも h3 タグが消えていました。

ここまで確認してから凛さんに報告。すると快く試してくださり、「成功しましたーー。・゚・(ノ∀`)・゚・。」とのお言葉を頂戴しました。

凛さん、このたびは面白い「謎」を教えていただき、大変ありがとうございました!

4. プラグインを入れて再現してみる

自分でも目次を生成するプラグインを導入し、Jetpack の「共有:」が目次に含まれてしまう現象を再現してみました。入れたのは Table of Contents Plus というプラグインです。

こちらが、この記事にプラグインで目次を付けた状態のスクリーンショット。確かに「5.1 Share:」となっていて、あまり見た目がよくないです。

screen shoot

5. 手動で目次を入れる方法

私自身は今のところ、こんなコードを書いて手動で目次を作っています。毎回手打ちすると手間がかかるので、TextExpander にスニペットを登録して省力化しています。

<h2>目次</h2>

<ol>
<li><a href="#p1">...見出し1...</a></li>
<li><a href="#p2">...見出し2...</a></li>
<li><a href="#p3">...見出し3...</a></li>
</ol>

<h2 id="p1">...見出し1...</h2>

<h2 id="p2">...見出し2...</h2>

<h2 id="p3">...見出し3...</h2>

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です