【WordPressの罠】strongタグ連発を防ぐ11行のコード【PHP】

※ これは別noteアカ（@fukuro_press）からの移転記事です。

WordPressのビジュアルエディタにはテキストを太字にするためのボタンがあります。

ちょうど下の画像のように「B」と書かれたボタンで、それを使って太字にしているという人も多いのではないでしょうか。

このボタンには「B」と表示されているから当然bタグとか太字用のspnaタグが挿入されるだろうな～と思ってしまいますよね？

ところがテキストエディタで見てみるとなんと次のようにstrongタグでテキストが囲まれてしまっています。

つまり、何気なく普段からBボタンを使用しまくっていると記事中にstrongタグが連発してしまう、ということです。

このstrongタグとは本来太字にするためのものではなく、検索エンジンや読者にキーワードを強調するためのものです。なので使いすぎてしまうとGoogleなどのペナルティの対象になってしまいます。

ならこれからはstrongタグは手打ちしよう・・・というのは面倒なので、ここではBボタンの動作を簡単なPHPコードで上書きする方法を紹介します。

太字用のspanタグを用意しよう

ではまずBボタンが押されたときに挿入される太字用spanタグを作ります。

WordPressの今使っているテーマの「style.css」を開いて次のようなコードを追加するだけです。

.my_bold{
  font-weight: bold;
}

クラス名は分かりやすく「my_bold」という名前にしています。

これで次のような太字用のspanタグの出来上がりです。

<span class="my_bold"></span>

Bボタンが押されたときの動作を上書き

では次にビジュアルエディタのBボタンが押されたときに今作ったspanタグが挿入されるように動作を上書きしましょう。

やり方は簡単で今使っているテーマの「functions.php」を開き、次の１１行のコードを適当な場所に追加するだけです。

/** Bボタンのstrongタグを太字タグに置き換え */
function my_modify_formats($settings){
  $formats = array(
    'bold' => array(
      'inline' => 'span',
      'classes' => 'my_bold'
    ),
  );
  
  $settings['formats'] = json_encode( $formats );
  return $settings;
}
add_filter('tiny_mce_before_init', 'my_modify_formats');

このコードではフィルターフックを使って「tiny_mce_before_init」でエディタが初期化される直前にBボタンの動作を太字タグで上書きしています。

これでBボタンを押したときに無事strongタグではなく、独自に定義した太字タグが挿入されるようになります。

これで一安心ですね。

以上がビジュアルエディタのBボタンを押したときにstrongタグの連発を防ぐ方法です。

読者のためを思って太字にしているのにそのせいでペナルティを食らったらやるせないので必ず対策しておきましょう。(本当はこういう仕様自体が直される方がいいですが・・・)

プロフィール

普段はFukuro Pressというサイトで役に立つWordPress術やサイト構築術について紹介しています。