1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. WordPress
  6. »
  7. 【WordPress】クイックタグを編集し効率よく記事を書こう!

【WordPress】クイックタグを編集し効率よく記事を書こう!

WordPressで記事を投稿するとき、クイックタグを使うと便利です。
デフォルトで用意されているクイックタグもありますが、それだけでは少々不便なところもあります。

今回は効率よく記事を書くために、クイックタグを編集(追加や削除)を行なって、自分がよく使うタグなどの文字列を一瞬で表示できるようにしてみましょう。

クイックタグの編集には、functions.phpを使う方法とプラグインを使う方法があります。
しかしWordPressのプラグインは、プラグイン同士の衝突など、意図しないエラーが発生する可能性がありますので、極力使うのを控えた方がいいでしょう。
今回はfunctions.phpを編集してクイックタグの追加や削除を行う方法をご紹介します。

クイックタグとは?

まず、WordPressのクイックタグをご存知でしょうか。
みなさまがWordPressを使って記事を投稿するときにいつも見る、テキストエディターの上にあるアレです。
クイックタグ

集中執筆モードに切り替えるボタンが、クイックタグなのかどうか……というのはあるのですが、一応クイックタグの設定のところで設定でるので、ここではクイックタグということにしておこうと思います。

このクイックタグを使うと、あらかじめ用意しておいたhtmlタグなどの文字列を、一瞬で表示できるようになります。
もちろんhtmlタグのみではなく、自分がよくつかうフレーズなどを登録しておいても便利です。

クイックタグを削除してみよう!

クイックタグはデフォルトでも用意されていますが、こんなタグ使わないよって方も多いと思います。
例えばcodeタグなんて、サイト上でソースコードを公開している方しか使いませんよね。

では、そんな必要ないクイックタグは削除してしまいましょう。
削除の方法は、どちらかというとデフォルトのクイックタグから使いたいものを選ぶといったほうが近い気もします。

では、functions.phpに以下のコードを書いてみてください。

function remove_quicktags( $qtInit ) {
	$qtInit['buttons'] = 'strong,em,link,block,del,ins,img,ul,ol,li,code,more,close,dfw';
	return $qtInit;
}
add_filter( 'quicktags_settings', 'remove_quicktags' );

ここで大切なポイントは、
$qtInit['buttons'] = 'strong,em,link,block,del,ins,img,ul,ol,li,code,more,close,dfw';です。

”の中にある、「strong」〜「dfw」がそれぞれのデフォルトで用意されたそれぞれのクイックタグのIDであり、今の状態だとデフォルトのクイックタグが全て表示されます。
つまりこれらのIDから、自分が使わないものを削除すればいいのです。

ID 表示されるボタン タグ
strong b <b>
em i <em>
link link <a href=””>
block b-quote <blockquote>
del del <del datetime=””>
ins ins <ins datetime=””>
img img <img src=”” alt=”” />
ul ul <ul>
ol ol <ol>
li li <li>
code code <code>
more more <!–more–>
close タグを閉じる 閉じられていないタグを閉じる
dfw クイックタグ 集中執筆モードに切り替える

例えば、このように設定します。
ちなみに私の場合、ソースコードを公開しまくりなので、codeタグは非表示にしていません。

$qtInit['buttons'] = 'strong,link,block,ul,li,code,more,dfw';

するとこのようにすっきりとした見た目になります。
クイックタグ

クイックタグを追加してみよう!

今度はクイックタグを追加してみようと思います。
クイックタグの追加も削除のときと同じように、functions.phpにコードを書き込んで行います。

ではまず、全体のコードを紹介します。
これはh2タグボタンを追加する場合のサンプルです。

function mytheme_add_quicktags() {
	if ( wp_script_is( 'quicktags' ) ) { ?>
		<script type="text/javascript">
			QTags.addButton( 'h2', 'h2', '<h2>', '</h2>', '', 'h2タグを挿入', 1, '', {ariaLabel:"H2見出しタグ", ariaLabelClose:"H2タグを閉じる"} );
		</script>
	<?php }
}
add_action( 'admin_print_footer_scripts', 'mytheme_add_quicktags' );

WordPressで記事を書くうえでよく使うタグのひとつに見出しタグがあります。
ビジュアルエディタでは「##」と入力することでh2タグを入力することができたり、ショートカットキーで入力することもできるのですが、テキストエディタを使っている場合、わざわざ<h2>と入力しなくてはなりません。
クリックひとつで見出しタグが挿入できたら便利ですよね。

今回、大切なのは上記コード4行目のJavaScript部分です。
では、この4行目のコードを詳しく解説していきたいと思います。

QTags.addButton( id, display, arg1, arg2, access_key, title, priority, instance, attr );
id id属性に入れる値
display ボタン上に表示する値(valueに入れる値)
arg1 開始タグ、もしくはボタンクリック時に実行するコールバック
arg2 終了タグ
access_key ショートカットのアクセスキー。今現在、非推奨となっております。
title title属性に入力する値
priority ボタンの位置
instance Quicktags の特定のインスタンスだけにボタンを追加する。(?)らしいです。
attr aria-label属性に入れる値

instanceについては、ごめんなさい。私も日本語のサイトから海外のサイトまで徹底的に調べたのですが、みなさんよく分からないようです。

ではその他のものを見ていきましょう。

id

idにはid属性に入れたい値を入力します。
先ほどの例のように、ここにh2と入力した場合、記事投稿ページのh2ボタンのid属性は”qt_content_h2″となります。

display

displayには、実際に記事投稿ページのボタンに表示させたい文字を入力します。
HTMLではvalue属性に入る値です。

arg1

arg1は開始タグ、もしくはボタンをクリックした時に呼び出したいコールバックを入力します。

arg2

arg2には終了タグを入力します。

access_key

access_keyにはショートカットのアクセスキーを入力するのですが、今現在は非推奨となっております。

title

title属性に入れる値を入力します。
これを入れておくことで、マウスカーソルをボタンに当ててしばらくするとこのように表示されます。
クイックタグ

priority

数値を入力することで、ボタンの位置を変更することができます。
数値を小さくするほど前にいきます。

attr

attrにはaria-label属性に入れる値を入力します。
入力にはプロパティを使います。

{
	ariaLabel:"H2見出しタグ",
	ariaLabelClose:"H2タグを閉じる"
}

現在では「ariaLabel」と「ariaLabelClose」の2つのプロパティが用意されています。

さて、先ほどのコードのJavaScript部分をもう一度見てみましょう。
access_keyは非推奨、instanceはよく分からないので、空白にしています。

QTags.addButton( 'h2', 'h2', '<h2>', '</h2>', '', 'h2タグを挿入', 1, '', {ariaLabel:"H2見出しタグ", ariaLabelClose:"H2タグを閉じる"} );

このようなコードですが、これで作成されるボタンのHTMLタグはこのようになります。

<input type="button" id="qt_content_h2" class="ed_button button button-small" title="h2タグを挿入" aria-label="H2見出しタグ" value="h2">
作成されたh2ボタンをクリックするごとにaria-labelとvalueの値が切り替わります。

まとめ

WordPressで記事を書くのには、できる限り時間をかけたくないものです。
そんな時に便利なのがクイックタグです。

クイックタグをあらかじめ設定しておくことで、簡単にタグやフレーズを入力できるようになります。
一度作ってしまえば、あとは簡単に追加していけると思いますので、ぜひお試しください。

スポンサードリンク

関連コンテンツ

オススメ記事

gulp

gulpでsassをcssにコンパイル。インストール&便利な使い方。

幸せそうな人を見ると、転べって思います。@It_is_Rです。 Webページを制作するとき、sassをcssに変換して使用することが多いと思います。 今回は、gulpを使ってsassをcssに

webpackの設定ファイル「webpack.config.js」の使い方を覚えよう

webpack.config.jsはwebpackを使う上での設定ファイルです。 今回は、webpack.config.jsの使い方を紹介します。 webpack.config.jsとは

JavaScriptマンガ講座。初心者でも痛いほど理解できる変数の使い方。(実践編)

押入れが部屋になっている@It_is_Rです。 今回の記事はJavaScriptマンガ講座、2回目となりました。 この企画はJavaScriptをフザケまくって覚えようというものです。

zsh

zsh のインストール方法と、うまく起動しない時の対処法。

かっこいいものが大好きな@It_is_Rです。 そこで今回は、ターミナルをかっこよくする為の方法を、何回かの記事に分けて書いてみたいと思います。 今回、第一回目は zsh ( Z Shell

【 WordPress 】functions.php で色んな機能を使ってみよう!【基本】

馬鹿は風邪を引かないといいますが、どうやら引いたようです。@It_is_Rです。 ちなみに、「馬鹿は風邪を引かない」ということわざは、「馬鹿は風邪を引いても気がつかない」という例えだって知ってました

java

【Java】スーパクラス、サブクラスとは?継承について。

猿も木から落ちますが、Rは木から落ちません。だって登らないから。 @It_is_R です。いや、登ろうと思っても登れません。 Javaを使っていると継承という言葉をよく耳にしますよね。どういうも

Swift

【Xcode7】Swift2でMacアプリ開発。Storyboardでボタンを作る。

喧嘩するほど仲がいいとは言いますが、喧嘩する相手がいません。友達がいないということでしょうか。@It_is_Rです。 前回、StoryboardでMacのウィンドウに文字を表示しました。しかし、

WordPress テーマ自作 | サイト全体のレイアウトを整える。

水を飲む時、口に入れすぎてしまう@It_is_Rです。 WordPressテーマ自作シリーズ第11回目です。 今回は、サイト全体のレイアウトを整えてみましょう。 このシリーズの前回の記事

WordPress のテーマ開発に絶対必須な gulp プラグイン9選!

3Dゲームに酔ってしまう@It_is_Rです。 WordPress テーマ自作シリーズ、第2回目です。 今回は、テーマを自作するのに必須な gulp プラグインの紹介と使い方について書いていき

【CSS設計】ボタンを作って覚える。機能ごとに分けて作る重要性。

手が回らない、頭が回らない、口が回らない。@It_is_Rです。 CSSはある程度大雑把に書いても動かすことができます。しかし、CSSを覚える上で一番難しい部分と言えばCSS設計でしょう。 パ

コメントをどうぞ!

メールアドレスが公開されることはありません。