WPでSEO対策

WordPressを使って、SEO対策初心者でも簡単に検索エンジン上位上位表示できる情報をお届けします。

WP：テキストモードのボタン追加

更新日：

テンプレカスタマイズ

「テキストモードで記事作成して、ビジュアルモードで確認したら自動でタグ入れられて腹立つ！」と言う方は、WordPressのビジュアルモードは捨てて、テキストモードだけで記事投稿しましょう。タグ挿入ボタンを自分なりにカスタマイズすれば、ビジュアルモードなんて必要なしですw

 

テキストモードにボタンを追加する理由

「テキストモードで記事作成してビジュアルモードで確認したら、自動で勝手なタグ入れられて思ったようなレイアウトになっていない！」とか、「勝手なタグ入れやがって、レイアウト崩れたやんけ！ボケ！」なんて経験ありませんか？

WordPressのビジュアルモードは、自動でタグを入れてくれ整形しなおしてくれるので便利なんですが、思った通りのレイアウトにならず、またテキストモードでちまちま修正するはめになることが多々有ります。

ビジュアルモードのカスタマイズが簡単にできるプラグイン”TinyMCE Advanced”をインストールして、タグの自動挿入禁止の設定してみたり、フィルターフックをいじくってみたりしましたが、どうもしっくりきませんでした。

 

そこで、わたしは、ビジュアルモードを捨てることを決意！

その代わり、テキストモードでもよく使うタグを簡単に挿入できるようにボタンを追加しました。

↓こんな感じ

テキストモードのタグ挿入ボタン追加
 

今回は、テキストモードの追加ボタンを色々。備忘録をかねてご紹介します。

注意事項

テーマファイルを改変しますので、失敗するとサイトが表示されなくなる可能性があります。

失敗してもすぐに戻せるように、必ずファイルのバックアップを取っておきましょう。

▼バックアップに必要なファイル

  • functions.php

環境によってうまくいかない可能性がないとは言い切れませんので、自己責任でお願いします。

▼この記事の環境

  • WordPress 4.5.1-ja
  • STINGER 5、STINGER 7、AFFINGER
  • Google Chrom

基本ソース

WordPress管理画面で［外観］-［テーマの編集］の順に進み、右メニューの［functions.php］をクリックして”テーマの編集”画面を開きます。

 
追加する基本のソースは、下記の通りです。

/* テキストエディタのツールバーのボタン追加 */
function custom_add_quicktags() {
    if (wp_script_is('quicktags')){
?>
    <script>
	QTags.addButton( ID, ボタンテキスト, 開始タグ, 終了タグ, アクセスキー, タイトル, 優先順位(1が先頭) );
    </script>
<?php
    }
}
add_action( 'admin_print_footer_scripts', 'custom_add_quicktags' );

 

↓このコードを好きなように編集して追加します。

QTags.addButton( ID, ボタンテキスト, 開始タグ, 終了タグ, アクセスキー, タイトル, 優先順位(1が先頭) );

 

例えば、見出し2のボタンを追加する場合は、下記のように記述します。

QTags.addButton( 'h2', 'h2', '<h2>', '</h2>', '', 'h2タグ', 1 );

 

入力する項目は、下記の通りです。

ID ダブらない名前。（半角英数字）
ボタンテキスト ボタンに表示させる名前。
開始タグ 1度目にボタンを押した時に挿入するタグ。
終了タグ 2度目にボタンを押した時に挿入するタグ。
アクセスキー 空欄で問題無し。
優先順位（半角数字） ボタンの位置を任意の位置にしたい時使用。

 

ボタンテキストは、全角でも問題ありません。自分でわかりやすい名前を入れてください。

文字を選択してボタンを押すと開始タグと終了タグが同時に挿入されます。

文字を入力せずボタンを押すと、1度目に開始タグ。2度目に終了タグが挿入されます。

優先順位は、左位置から順に1〜となりますが、あらかじめWordPressが決めている順位に割り込むことはできません。

例えば、はじめから設置されているボタンに”10”が割り当てられている場合、追加ボタンの優先順位を”10”に設定しても思った位置に表示されないことがあります。

 

追加事例

当サイトで追加しているコードの一部は、下記になります。

/* テキストエディタのツールバーのボタン追加 */
function custom_add_quicktags() {
    if (wp_script_is('quicktags')){
?>
    <script>
	QTags.addButton( 'h2', 'h2', '<h2>', '</h2>', '', 'h2タグ', 1 );
	QTags.addButton( 'h3', 'h3', '<h3>', '</h3>', '', 'h3タグ', 2 );
	QTags.addButton( 'p', 'p', '<p>', '</p>', '', 'pタグ', 3 );
	QTags.addButton( '...', '...', '&nbsp;', '', '', '&nbsp;タグ', 4 );
	QTags.addButton( 'br', 'br', '<br />', '', '', 'brタグ', 5 );
	QTags.addButton( 'table', 'table', '<table><tbody>', '</tbody></table>', '', 'テーブル枠', 6 );
	QTags.addButton( 'tr', 'tr', '<tr>', '</tr>', '', 'テーブル行', 6 );
	QTags.addButton( 'td', 'td', '<td>', '</td>', '', 'テーブルセル', 6 );
	QTags.addButton( 't-img', 't-img', '<img class="topimg" src="', '" alt="" />', '', 'トップimg', 7 );
	QTags.addButton( 't-span', 't-span', '<span class="topspan">', '</span><!--more-->', '', 'トップspan', 7 );
	QTags.addButton( 'inyou1', '引用背灰', '<div class="inyoumodoki"><p>', '</p><p><<span style="color: #999; font-size: 10px;">引用元：<a style="color: #999;text-decoration: none;" href="" target="_blank" rel="nofollow">...</a></span></p></div>', '', '引用１タグ', 8 );
	QTags.addButton( 'inyou2', '引用背白', '<div class="inyoubox"><p><span class="inyoubun">', '</span><br /><span style="color: #999; font-size: 10px;">引用元：<a style="color: #999;text-decoration: none;" href="" target="_blank" rel="nofollow">...</a></span></p></div>', '', '引用２タグ', 9 );
	QTags.addButton( 'inyou3', '引用元', '<span class="modoki">引用元：<a href="" target="_blank" rel="nofollow">', '</a></span>', '', '引用３タグ', 10 );
	QTags.addButton( 'img50', 'img50', '<div class="imgbox">', '</div>', '', 'イメージボックス', 11 );
	QTags.addButton( 'img50', '引用画像50', '<div class="imgbox50"><img src="', '" alt="" width="100%" height="auto" /><span class="modoki">画像引用元：<a href="" target="_blank" rel="nofollow">...</a></span></span></div>', '', 'イメージボックス', 11 );
	QTags.addButton( 'img50', '引用画像100', '<div class="imgbox100"><img src="', '" alt="" width="100%" height="auto" /><span class="modoki">画像引用元：<a href="" target="_blank" rel="nofollow">...</a></span></span></div>', '', 'イメージボックス', 11 );
	QTags.addButton( 'app-b', 'app-b', '<ul class="appimg"><li><a href="" target="_blank"><img class="alignleft" src="http://kanemoukejyouhou.iinedondon.com/wp-content/uploads/ios_japanese-jp.png" alt=“AppleStoreからダウンロード" width="150" height="44" /></a></li><li><a href="" target="_blank"><img class="alignleft" src="http://kanemoukejyouhou.iinedondon.com/wp-content/uploads/ggp_japnese-jp.png" alt=“GooglePlayからダウンロード" width="126" height="44" /></a></li></ul>', '', '', 'appstore', 12 );
	QTags.addButton( 'xmp', 'xmp', '<xmp>', '</xmp>', '', 'xmpタグ', 29 );
	QTags.addButton( 'nofollow', 'nofollow', 'rel="nofollow"', '', '', 'nofollowタグ', 30 );
	QTags.addButton( 'C-left', 'C-left', '<div style="clear:left;"></div>', '', '', 'クリアレフト', 79 );
	QTags.addButton( 'RED', '文字赤', '<span style="color: #f00;">', '</span>', '', '文字赤色タグ', 120 );
	QTags.addButton( 'YEL', '背景黄', '<span style="background-color: #ff0;">', '</span>', '', '背景黄色タグ', 121 );
    </script>
<?php
    }
}
add_action( 'admin_print_footer_scripts', 'custom_add_quicktags' );

 

ちょっと欲張りですねw

 

一時的に非表示にする場合は「QTags.addButton」の前に半角でスラッシュを2つ「//」と入力して保存します。

CSSでクラス指定してあるタグもありますので、そのままコピペするだけではうまく表示されないと思いますが参考にしてください。

 

-SEO対策カスタマイズ
-, , , , , , , , , , , , , , , , , , ,

Copyright© WPでSEO対策 , 2024 All Rights Reserved.