テキストモードにクイックタグを追加-WordPress投稿の編集のカスタマイズ

 Wordpressのカスタマイズなどの紹介をするのにおいらは基本的に紹介するコードをスタイルシートで装飾してご紹介している。

 スタイルシートでコードの周辺を囲ったり、背景を周囲と変えてみたり。

 コードをきれいに表示するプラグインを使えばいいのかもしれないがプラグインの開発が止まったりするととんでもないことになりそうなのでスタイルシートを利用しているのである。

一回ずつスタイルを書き込むのが面倒なり

 とはいえ、記事の投稿のたびにスタイルシートを書き込むのは面倒なのだ。

 決まったスタイルだけボタンワンクリックでWordpressの投稿の編集画面で書き込めないものだろうか?

テキストモードのクイックタグにボタンを追加

 テキストモードのクイックタグにスタイルシートのボタンを追加したら楽だよな。

 と思いついた。

クイックタグってどんなもの?

 クイックタグはWordpressの投稿の編集のタイトル下にある編集用のボタン。

デフォルトのクイックタグ

デフォルトのクイックタグ

 このクイックタグを押すと該当するコードが入力される。

 ここに、スタイルシートのボタンを入れられないか?

 と思ったわけ。

 プラグインを使えば楽だけど、できればプラグインは使わない方法は無いかな?

 で見つけました。

 Wordpressの投稿の編集「テキストモード」にクイックタグボタンを追加する方法!

プラグインを利用せずクイックタグを追加する方法

カスタマイズするファイル

使っているテーマのfunction.php

追加するコード

 以下のコードをfunction.phpに追加する。

//クイックタグ
function add_my_quicktag() {
?>
<script type="text/javascript">
QTags.addButton('ID', 'ボタンのラベル', '開始タグ', '終了タグ');
</script>
<?php
}
add_action('admin_print_footer_scripts','add_my_quicktag');
  •  ID:挿入するタグのID
  • ボタンのラベル:クイックタグのボタンに表示される名前
  • 開始タグ:挿入するタグ
  • 終了タグ:タグを閉めるための記述

実際に挿入したコード

 実際にfunction.phpに追加記載したコードは↓

//クイックタグテキストボタン
function add_my_quicktag() {
?>
<script type="text/javascript">
//QTags.addButton('ID', 'ボタンのラベル', '開始タグ', '終了タグ');
QTags.addButton('before','beforeコード','<div style="color: #000000;background-color: #e4e4e4 ">','</div>');
QTags.addButton('after','afterコード','<div style="color: #000000;background-color: #d2d2ff ">','</div>');
 QTags.addButton('pre', 'pre', '<pre>', '</pre>');
</script>
<?php
}
add_action('admin_print_footer_scripts','add_my_quicktag');

 カスタマイズ後のクイックタグボタン

 カスタマイズ後のクリックボタンが↓

カスタマイズ後のクイックタグ

カスタマイズ後のクイックタグ

 1回クリックすると開始タグとして登録した記述が挿入されて、自動的に終了タグとして登録された記述のボタンに切り替わる。

 再度クリックすると終了タグに登録したタグが挿入される。

おすすめ記事

コメントを残す




*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

関連記事

FC2ブログカスタマイズ「拍手ボタンの設置・拍手を自由な位置に配置する」
WordPressツリー化プラグイン「小粋空間」のプラグインを使う方法
Googleカスタム検索をスタイルシートでカスタマイズ-コードは変更しないよ
FTPソフトWinSCPでサーバーのWordPressファイルを保存してたので窮地を逃れられました
独自ドメイン収得・ムームードメイン
WordPressのリビジョンって何のためにある?
プラグインPS Disable Auto  FormattingをFC2の記事をWordPressに取り込む前に導入しておかないと
WYSIWYG編集ができる無料HP作成ソフト「BlueGriffon」が使いやすい
Bloggerのテンプレートの文字の色やフォントを変えてみよう
シーサーブログユーザーはスマートフォンでもPCサイトを表示させよう
WordPressのTOPとアーカイブページで記事と記事の間に広告を入れる方法
スタイルシート(CSS)を縮小・具体例
WordPressの投稿の編集のテキストモード「code」は何?
シーサーブログ(seesaaブログ)を削除する方法
現在メンテナンス中のため、 しばらくの間ご利用いただけません

Menu

HOME

 TOP