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

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

おすすめ記事

コメントを残す




*

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

関連記事

プラグインのCSS(スタイルシート)を縮小してブログの表示速度を早くしよう
Googleの検索ボックスの便利な使い方1
noimage
独自ドメインをレンタルサーバーに登録する・ムームードメイン&レンタルサーバーミニバード
g+1ボタンを非同期に読み込んでwordpressの表示を高速化する
色コードの収得に便利な無料ソフト・ウェブカラークリエイター
FC2ブログの好きな位置に広告やランキングを表示させる
Google のアカウントをもらおう
Googleカスタム検索のメリットとデメリットをWordPress標準検索と比べてみよう
旧FC2ブログの訪問者を新サイトに自動的に誘導するmeta
スタイルシートにコメントを入れるには?
Googleアドセンスの種類は?
プラグインPS Disable Auto  FormattingをFC2の記事をWordPressに取り込む前に導入しておかないと
シーサーブログのタグ検索でアドセンスを表示させない方法・自由形式編
またwordpressブログを消してしまった

Menu

HOME

 TOP