テキストエディタ

WP(WordPress)

WordPress テキストエディタにオリジナルのクイックタグを追加

テキストエディタにオリジナルのクイックタグを追加

テキストエディタを利用して記事を書いている場合、
よく使用するタグやCSSを簡単に追加できるようにしておけば便利ですよね。

そんな場合、
テキストエディタにオリジナルのクイックタグを追加しておけば便利です。

クイックタグとは、これです↓
WordPress クイックタグ

で、クイックタグの追加には、
■functions.phpにQTags.addButton()を追加する
■プラグイン「AddQuicktag」を使って追加する
の2通りの方法があります。

 

functions.phpにQTags.addButton()を追加する

functions.phpでクイックタグを追加する場合には、
QTags.addButton()を使います。

基本的な使い方は、
QTags.addButton("ID", "ボタンに表示する文字", "開始タグ", "終了タグ");
です。
※IDは被らないようにして下さい。

他にもパラメータはありますが、使用するのは、基本的にこの4つのパラメータだけです。
※他のパラメータは、こちらにまとめてあります => クイックタグ

例えば、アンダーラインを書くCSSを追加できるようにする場合には、
functions.phpに以下のように追記します。

function add_org_quick_tag() {

print <<QTags.addButton("line_blue", "下ライン(青)", "", "");//ポイント QTags.addButton("line_red", "下ライン(赤)", "", "");//ポイント QTags.addButton("line_yellow", "下ライン(黄)", "", "");//ポイント
EOF;

}

add_action("admin_print_footer_scripts", "add_org_quick_tag");

そうすると、
以下の様にクイックタグが追加されていると思います。
WP オリジナルのクイックタグ

「下ライン(青)」をクリックしてみて下さい。
<span class="blueline"></span>
が挿入されればOKです。

あとは、以下の様なCSSを追加して下さい。

.blueline{background:linear-gradient(transparent 70%, #a7d6ff 70%);}
.redline{background:linear-gradient(transparent 70%, #FF6666 70%);}
.yellowline{background:linear-gradient(transparent 70%, #ff0 70%);}

そうすれば、
簡単にアンダーラインを追加できるようになります。

 

プラグイン「AddQuicktag」を使って追加する

このくらいの機能であればfunctions.phpを使った方がいいですが、
一応「AddQuicktag」というプラグインを使って追加することも出来ます。

functions.phpをいじるのが面倒な場合には、
プラグインを使用して下さい。

WordPress短期学習プログラム

関連記事

  1. WPプラグイン Check Copy Contents
  2. WP:WordPress(ワードプレス)

    WP(WordPress)

    WordPressにDB Cache Reloaded Fixをインストールしてみた

    「DB Cache Reloaded Fix」というプラグインを見つけ…

  3. WP:WordPress(ワードプレス)

    WP(WordPress)

    WordPressのページングで落とし穴!?

    昨日、WP-PageNaviというプラグインを使ってサイトをページ…

  4. Security(セキュリティ)

    WP(WordPress)

    【WordPress】antispambot()でメールアドレスをエンティティ化

    antispambot()でメールアドレスをエンティティ化…

  5. WP:WordPress(ワードプレス)

    WP(WordPress)

    WordPressのプラグイン「WP Photo Sphere」で360°パノラマ写真を公開

    360°パノラマ写真(全天球画像)の埋め込みを行えるWordPress…

  6. WP:WordPress(ワードプレス)

    WP(WordPress)

    WP(WordPress) ビジュアルエディタが使えなくなった件が解決!!

    昨日WordPressのバージョンアップを行った際にビジュアルエディタ…

最近の記事

  1. Technology-Connection-Net
  2. ドメインにハイフンを使うのは日本人だけ?
  3. SSL(HTTPS)
  4. ドメインについて
  5. WP:WordPress(ワードプレス)
  6. ドメイン(domain)
  7. JPドメイン
  8. 高速(スピード)
  9. ブログアクセス
  10. 高速(スピード)
PAGE TOP