見出し画像

【コピペOK】WordPressの太字を自動でbタグに変更するコードを作ってみた！

すみっこブロガー

WordPressで記事を入稿する際、地味に面倒な作業が装飾です。デフォルトの太字（Bアイコン）で装飾するとstrongタグが表示されるため、bタグを出力したい場合はWordPressテーマの太字やカスタム登録した書式を利用しなくてはいけません。

太字にするだけなのに何回もクリックする手間が無駄すぎる！

調べても理想の解決策にたどり着けなかったため、話題のChatGPTを活用して「strongタグを自動でbタグに変換するコード」を生成しました。

せっかくなので、導入して感じたメリットと実装コードを公開します。効率的にWordPress入稿したい方はぜひ活用してください。

strongタグとは？bタグとの違いは？

「strongタグの乱用はSEOに悪影響」という噂を耳にしたことはありませんか？

strongタグとは、内容の重要性や緊急性を強調するためのHTMLタグの名称です。GoogleはHTMLタグをもとにページを解析しているため、strongタグが付与されたテキストを重要な項目として理解します。

一方、bタグは単なる装飾として理解されるため、見た目が変わるだけで強調の効果はありません。

2つのタグは同じ見た目をしていますが、HTMLタグとしはまったくの別物です。ただし、SEOへの影響は人により解釈が異なります。さまざまな意見があるので、筆者が参考にした記事をいくつか添付しておきます。

参考：strongタグとbタグのホントの意味の違いとSEOにおける違いとは？【SEO情報まとめ】
参考：強調のstrongタグの正しい使い方とbタグとの違い、SEOへの影響
参考：HTMLで太字にするには？strongタグとbタグの使い方やSEO効果など徹底解説！

多くのサイトで強調されていたのは以下の2点です。

  • Googleはstrongタグとbタグを明確に区別しているわけではない

  • ただし、多用するとSEOでペナルティを受ける可能性がある

つまり「使い分けるメリットは大きくないがデメリットを被る可能性がある」ということです。
ならば、いっそのことstrongタグを使わない方向で統一しよう！という考えのもと、今回のコードを作成しました。

strongタグをbタグに自動変換するメリット

ここまでの内容から、装飾をbタグにしたいと感じた方のみ読み進めてください。

strongタグをbタグに自動変換できるということは、つまりデフォルトの太字で装飾できる点がメリットとなります。この機能が便利だと感じた瞬間を3つ紹介します。

太字にする際の手間が減る

先ほども紹介したとおり、WordPress内で装飾する際のクリック回数を削減できます。ショートカットキーを使える点も魅力です。

WordPressテーマの太字で装飾する際は

  1. 文字を選択

  2. メニューからテーマの装飾メニューを開く

  3. 太字を選んでクリック

一度や二度なら問題ありませんが、ひとつの記事で数十回、それも毎記事となると流石に手間を感じます。ブロックエディタでは若干のタイムラグもあるので、効率の悪さは否めません。

クリック数が1回減るだけでもかなり効率アップします。

WordやGoogleドキュメントで太字まで指定できる

筆者はブログの下書きにGoogleドキュメントを使用しています。移動時間などに執筆する機会も多く、なるべくドキュメント内で完結させたいというのが本音です。時間が空くと太字にしたい箇所が思い出せなくケースもあります。

しかし、WordやGoogleドキュメントの太字は入稿した際にstrongタグで表出されます。そのため、面倒でもWordPress内で装飾するしかありません。

WordPressを触れる時間が少ない筆者にとってはタイムロス。

執筆している時に重要だと感じた箇所をそのまま装飾できる点は、使い勝手がよく便利でした。

テーマ移行作業が楽になる

現在、AFFINGER6からSWELLへ移行作業しています。ここで問題となったのがHTMLタグです。

AFFINGER6の太字は<span class"hunt">で表出されます。ところが、SWELLに移行するとタグが残っているのに装飾なしの見た目で表示されるようになります。そのため、テキストエディタでタグを削除していかなくてはいけません。とても面倒で時間がかかります。

不要なタグを残しておくのもよろしくありません。それこそペナルティの対象になる可能性があります。

すべてデフォルトの太字にしておけば…

テーマ変更の可能性はだれにでも考えられます。移行作業も楽になるのでは？と感じました。

自動変換コードの導入手順

前置きが長くなりました。ここからは具体的な実装手順を解説します。

※テーマファイルを編集するため思わぬエラーが発生する可能性もあります。導入する前には必ずバックアップを取っておきましょう。

手順1.実装コードをコピー

以下に実装用のコードを添付します。まずはコード全体をコピーしてください。

// strongをbに自動変換
function convert_strong_to_b_tag($content) {
    $content = str_replace('<strong>', '<b>', $content);
    $content = str_replace('</strong>', '</b>', $content);
    return $content;
}
add_filter('the_content', 'convert_strong_to_b_tag');

手順2.function.phpを開く

WordPressの管理画面にログインして「外観＞テーマファイルエディタ」の順に選択します。

筆者が使用するSWELLでは子テーマに実装できますが、親テーマを編集しなくてはいけない場合もあります。その際は「画面右上から親テーマを選択＞function.phpを選択」の順でテーマファイルを開いてください。

手順3.コードをペースト

function.phpのファイル内に先ほどコピーしたコードを貼り付けます。親テーマを編集する場合はファイルの一番下にペーストしてください。

テーマによっては「PCのみ表示」や「スマホのみ表示」のように、画面サイズによって別のコードを読み込ませています。上記コードは全体に反映させたいので「PCのみ」などの範囲内に貼り付けないようにしましょう。

コードをペーストしたら「変更を保存」をクリックします。

手順4.動作チェック

一部を太字に変更してみます。

赤枠の「あああああ」の部分を太字に変更しました。エディタを見るとデフォルトの太字「Bマーク」になっていることが分かりますよね。

HTMLを見てみるとこんな感じ。

変更後も、エディタ上ではstrongタグが表示されます。ここでstrongが表示されるのは問題ありません。更新して該当ページを見てみましょう。

赤枠の部分をご覧ください。（小さくてすみません…）
Chromeのデベロッパーツールで公開されたコードを見ると無事にbタグが表示されていました。

問題なく動作していれば実装完了です。

なお上記のコードを導入すると、strongタグが一切表示されなくなります。併用したい方は利用されないことをおすすめします。

公開後もstrongタグが表示されている場合は、実装ミスの可能性が高いので実装箇所を再チェックしてください。

コピペでfunction.phpに追加できるWordPressプラグインもありますが、プラグインを導入してまで追加したい機能ではありません。参考記事を添付しておくので、どうしても実装したい方のみ利用してください。

参考：【有用】functions.phpの編集が不要になるプラグインCode Snippets

さいごに

最後にChatGPTで作成した際の質問を添付しておきます。

WordPressで太字を選択するとstrongタグとして表示されます。すべてのstrongタグを自動でbタグに変換したいのですが、良い方法はありますか？

1発で生成してくれました。ChatGPTくんは優秀ですね。

ほかにも、さまざまな場面でAIを活用できないか実験しているので、優しい方はnoteのフォローよろしくお願いします！

なお、質問や感想などあればTwitter（@fumi_web_0317）まで気軽にご連絡ください。

この記事が気に入ったらサポートをしてみませんか？