【解決】WordPressのビジュアルエディタでBとIがstrongとemタグになってしまう

【追記】プラグイン化しました。BI Button Changer

詳しくはこちら→WordPressのエディタでBボタンをStrongではなくBタグにするプラグイン

 

WordPressのビジュアルエディタは本当に便利でありがたい限りですが、大きなお世話なところも少なからずあるわけで。

その中で、もっともよろしくないと思うのが、Bボタンと、Iボタン。

Bはボールドで太文字になるので、当然bタグがあてがわれると思っていたら、strongタグになってしまいます。

Iも同様に、イタリックで斜体になるので、iタグがあてがわれると思ったら、emタグになってしまいます。

strongやemは、h1,h2などの見出しタグ同様、検索エンジンは重要なワードとして認識する。ゆえに適材適所で使う分にはいいが、乱発すると「意図的に検索エンジンをだまそうとしている」のような受け止められ方をされて、ペナルティを受ける場合がある。よって、strongタグやemタグを乱用するのはSEO上よろしくない。
みたいに言われています。

にもかかわらず、ワンクリックでstrongとemが使えてしまうので、これを知らずにガンガン使うとまずいので、BボタンやIボタンは、実質ほとんど使いません。

そんなことをわかっている人はいいのですが、SEOという言葉すら知らないクライアントさんにお渡しする際には、これは非常にまずいわけです。

なので、これまではAddQuicktag を使ったり、Visual Editor Custom Buttons をつかって、「BボタンとかIボタンは使わずに、こっちを使ってください。なぜなら、SEOという考え方があって、うんたらかんら・・・」という説明をしていたわけですが、いい加減どうにかならないか、と一念発起して、調べてたらこんな方法が。

http://wordpress.stackexchange.com/questions/168182/should-the-wp-post-editor-b-bold-button-be-inserting-a-b-tag-instead-of-str

早速やってみました。

ビジュアルエディタのBボタンとIボタンの出力を変更

function.phpあたりに、以下をいれます。

function modify_formats($settings){
   $formats = array(
     'bold' => array('inline' => 'b'),
     'italic' => array('inline' => 'i')
    );
    $settings['formats'] = json_encode( $formats );
    return $settings;
}
add_filter('tiny_mce_before_init', 'modify_formats');

するとどうでしょう!
Bボタンでbタグ、Iボタンでiタグにばっちりなってますね!

テキストエディタのBボタンとIボタンを変更

ただ、テキストエディタでは、相変わらずstrongとemなので、こっちも変えたい。

そこで、functioni.php 以下を追加します。
テキストエディタでは、置き換える方法がわからなかったので、一旦既存のBとIボタンは取り除きます。quicktags_settings フックで、strongとemがない状態にします。

//テキストエディタから、strongとemボタンを除く
function default_quicktags($qtInit) {
  //$qtInit['buttons'] = 'link,em,strong,block,del,ins,img,ul,li,ol,code,more,spell,close,fullscreen';//こっちがデフォルト
  $qtInit['buttons'] = 'link,block,del,ins,img,ul,li,ol,code,more,spell,close,fullscreen';
  return $qtInit;
}
add_filter('quicktags_settings', 'default_quicktags', 10, 1);

それから、admin_print_footer_scripts フックで、JSを追加して、bとiボタンを追加します。

//テキストエディタにBとIボタンを追加
function appthemes_add_quicktags() {
    if (wp_script_is('quicktags')){
?>
    <script type="text/javascript">
        QTags.addButton( 'eg_bold', 'B', '<b>', '</b>', 'b', 'ボールド', 1 );
	QTags.addButton( 'eg_i', 'I', '<i>', '</i>', 'i', 'イタリック', 2 );
    </script>
<?php
    }
}
add_action( 'admin_print_footer_scripts', 'appthemes_add_quicktags' );

これで、大丈夫なはず。

すでに使ってしまったstrongタグとemタグをフロント出力時に置換

あと、すでに散々strongタグやemを使いまくってしまった、という場合には、表示するときにbとiタグに置換する方法もあります。同じくfunction.phpに以下をいれます。(ただし、strongタグやemタグを意図して使いたくても置換されていまいます。)

//strongタグをbタグに置換
function change_b_to_strong($content){
    $content = str_replace('<strong>', '<b>', $content);
    $content = str_replace('</strong>', '</b>', $content);
    return $content;
}
add_filter( 'the_content', 'change_b_to_strong' );

BボタンとIボタンをクリックしたときに、bタグ、iタグにする方法まとめ

function.phpに以下をまるっと入れれば、Bボタンを押してもstrongタグにならずにbタグに。Iボタンを押しても、emタグにならずにiタグになります。

//ビジュアルエディタのbボタンとiボタンをbタグとiタグに置き換える
function modify_formats($settings){
   $formats = array(
     'bold' => array('inline' => 'b'),
     'italic' => array('inline' => 'i')
    );
    $settings['formats'] = json_encode( $formats );
    return $settings;
}
add_filter('tiny_mce_before_init', 'modify_formats');

//テキストエディタから、strongとemボタンを除く
function default_quicktags($qtInit) {
  //$qtInit['buttons'] = 'link,em,strong,block,del,ins,img,ul,li,ol,code,more,spell,close,fullscreen';//こっちがデフォルト
  $qtInit['buttons'] = 'link,block,del,ins,img,ul,li,ol,code,more,spell,close,fullscreen';
  return $qtInit;
}
add_filter('quicktags_settings', 'default_quicktags', 10, 1);

//テキストエディタにBとIボタンを追加
function appthemes_add_quicktags() {
    if (wp_script_is('quicktags')){
?>
    <script type="text/javascript">
        QTags.addButton( 'eg_bold', 'B', '<b>', '</b>', 'B', 'ボールド', 1 );
	QTags.addButton( 'eg_i', 'I', '<i>', '</i>', 'B', 'イタリック', 2 );
    </script>
<?php
    }
}
add_action( 'admin_print_footer_scripts', 'appthemes_add_quicktags' );

参考サイト

クイックタグAPI

https://wpdocs.osdn.jp/%E3%82%AF%E3%82%A4%E3%83%83%E3%82%AF%E3%82%BF%E3%82%B0API

 

テキストエディタから、クイックタグボタンをつけたり外したりする方法

http://myownhomeserver.com/2011/10/wordpress-addremove-quicktags-simple-editor-buttons-in-3-3/

 

0
  • このエントリーをはてなブックマークに追加