Web担当業務でクライアントサイトに見出しや太字などのタグがリセットされていたのでCSSの設定した際に、エディタ上のテキストモードでタグボタンを追加する方法を解説します。
下記画像の青枠、見出しと太字を挿入できるようになりました。
画像、一番上の青枠、タグボタンを押すと、該当したテキストコードが挿入されます。
このタグボタンの追加設定の方法を解説します。
この記事でわかること
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が先頭) );
たとえば、h2なら、下記です。
QTags.addButton( ‘h2’, ‘h2’, ‘<h2>’, ‘</h2>’, ”, ‘h2タグ’, 1 );
入力する項目は、下記の通りです。
| ID | ダブらない名前（半角英数字） |
| ボタンテキスト | ボタンの表示名 |
| 開始タグ | １度目にボタンを押した時に挿入するタグ |
| 終了タグ | ２度目にボタンを押した時に挿入するタグ |
| アクセスキー | 通常、空欄で大丈夫です |
| 優先順位（半角数字） | ボタンの位置を任意の位置にしたい時に使用します |
以上です。
Web制作+Webマーケティングの個別講座開講中
Web365はWeb担当者のスキルセットである
サイトを変更する「提案力」と「技術力」について個別指導しております
・Webで集客するための「考え方」を知りたい方
・サイトの制作改善のセオリーを知りたい方
・自身のサイトでケーススタディをしたい方
・サイトの制作改善の「技術的なスキル」を習得したい方
・分析から改善運用まで自身でしたい方
どうぞWeb365の「自社のWebサイトを自身で作りたい、改善したい人のオーダーメイド個別講座」をご覧ください。
外注のWeb担当者として「制作」と「マーケティング」で単発/継続でサポートします。
Web365は貴社のWeb担当者として、制作改善運用をワンストップサポートしています
・成果にこだわるサイト制作改善をお望みの方
・良いweb制作会社、コンサル会社がいないとお困りの方
・分析から改善運用まで一括で依頼したい方
是非Web365までご相談ください。
