テキストモードにクイックタグを追加-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回クリックすると開始タグとして登録した記述が挿入されて、自動的に終了タグとして登録された記述のボタンに切り替わる。

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

おすすめ記事

コメントを残す




*

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

関連記事

wordpressの管理画面に入れなくなった場合の一番確実な解決法
g+1ボタンを非同期に読み込んでwordpressの表示を高速化する
FC2ただいま混乱中?
WordPressコメントフォームのメールアドレス記入を必須項目からはずしてプラグインで注意事項を書き加えてみた
wordpressバージョン 3.9.2 へバージョンアップ
無料ブログサービスならSeesaaブログ もお勧め
スタイルシートにコメントを入れるには?
FC2ブログ記事直下に広告とランキングを自動的に挿入する
ブログのタイトルのSEO対策検索結果の順位を上げよう
スクロールバーをスタイルシートで表示する
プラグインのCSS(スタイルシート)を縮小してブログの表示速度を早くしよう
無料ブログのドメイン形式によって、アクセス数に差が出てくる
FC2ブログの有料プラント有料レンタルサーバー比較
webセーフカラー216・短縮コード一覧
MySQLの追加

Menu

HOME

 TOP