WordPress クイックタグ

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をいじるのが面倒な場合には、
プラグインを使用して下さい。

関連記事

  1. WordPress(WP)

    WP(WordPress)

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

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

  2. WordPress(WP)
  3. WordPress(WP)

    WP(WordPress)

    WPのプラグイン「WP-VR-view」で360°パノラマ写真を公開

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

  4. WordPress(WP)

    WP(WordPress)

    get_post_type()ではなく、get_query_var("post_type")を!!

    弊社では、WPを使ってサイトを構築する際には、よく「当社からの…

  5. WordPress(WP)

    WP(WordPress)

    WP 360°パノラマ写真(全天球画像)の埋め込みを行えるプラグインを検証

    シータ(Ricoh Theta)が楽しくなってきたので、今後はこの…

  6. WordPress(WP)

    WP(WordPress)

    WP プラグイン「Crayon Syntax Highlighter」でコードを表示

    このブログでPHPやJavascriptなどのコードを乗せることがある…

最近の記事

  1. JavaScript
  2. バージョンアップ
  3. JavaScript
  4. セキュリティー
  5. JavaScript
PAGE TOP