[contact-form-7 id="1781" title="ご意見・ご要望・お問い合せ"]

Technical note

[WordPress] 「WP Emmet」とQuicktagでテキストエディタを快適に！

2014.05.21

WordPressのテキストエディタはデフォルトのままではとても不便ですが、個人的にはやっぱりHTMLでガシガシ書きたいのです。そんなわけで今回はそのHTMLエディタを便利にすべく、プラグイン「WP Emmet」でコードのカラーリングと入力補完を出来るようにし、またHTMLエディタの上部にある編集ボタン、Quicktagによく使うタグやスニペットを登録してみます。「WP Emmet」のちょっとしたカスタマイズも紹介します。

  1. WP Emmetの導入
    1. Emmetとは
    2. インストール
    3. WP Emmetの設定
    4. テキストエリアのカスタマイズ
  2. QuickTagを追加する

WP-Emmetの導入

Emmetとは

すで知っている人も多いと思いますが、かつてはZen-cordingと呼ばれ、タグの入力補完や便利なショートカットなどHTML/CSSコーディングを強力に支援してくれるプラグインです。Emmetはzen-cordingと基本操作はほとんど変わりませんが、さらに機能が拡張され使いやすくなっています。Zen-cordingと比較してどこが拡張されているかは、「Zen-Codingの次期バージョン、Emmet について | KOJIKA17」に詳しく書かれているので参考にして下さい。また、入力のためのチートシートもあります。

インストール

インストール方法はWordpressの通常のプラグインと同じです。プラグインディレクトリからダウンロード、または管理画面のプラグインページで検索してインストールしてください。

WP Emmetの設定

「WP Zen-cording」はタグの入力補完とショートカットのみの設定でしたが、「WP Emmet」はそれに加えてコードのカラーリング、エディタの外観の変更など細かい設定が可能です。 WP Emmetを使う前はコードカラーリングに「HTML Editor Syntax Highlighter」を使ってましたが、「WP Emmet」ならコード補完とカラーリングがひとつのプラグインで出来てしまうのがいいですね。

「ショートカットを上書き」にチェックを入れるとショートカットの一覧が表示され、好きなように設定できます。

Wp Emmetの設定画面

テキストエリアのカスタマイズ

WP-Emmetを適用した編集画面のテキストエリアは、書かれた行分の高さになってしまいます。特に長い記事を書いているとQuicktagから随分と離れてしまい、使いたい時にホイールをぐるぐる回して戻らなければいけません。なのでCSSを調整してみました。

編集する箇所はWP-emmet / assets / css / wp-emmet.css の26行目辺り、

CSS
.CodeMirror-scroll {
  min-height: 300px;
  overflow-y: hidden;
  overflow-x: auto;
}

CodeMirror-scrollの高さを固定し、スクロールできるように変更します。

CSS
.CodeMirror-scroll {
  max-height: 100px; /* 最小の高さ */
  max-height: 500px; /* 最大の高さ */
  overflow-y: scroll; /* スクロールを可能に */
  overflow-x: auto;
}

これで随分使いやすくなると思います。

QuickTagを追加する

WordPressのテキストエディタの上部にあるボタンはQuicktagといいます。Quicktagはプラグイン「AddQuicktag」で簡単に追加することが出来ます…が、ここではあえてfunctions.phpに記述して追加する方法を説明します。

Quicktagはphpで関数を定義し、QTags.addButton()を使います。

Javascript
QTags.addButton( id, display, arg1, arg2, access_key, title, priority, instance );

パラメータの内容は次の通りです。実際によく使われるのは、idからarg2までです。

id (必須)　挿入されたボタンのHTMLのID
display (必須)　ボタンに表示される名前
arg1 (必須)　開始タグの内容
arg2 終了タグの内容
access_key ショートカットのキー
title title属性の内容
priority 登録されたボタンの並び順
instance Codex（英語）には
"Limit the button to a specific instance of Quicktags, add to all instances if not present." とあります。
google翻訳にお願いすると”Quicktagsの特定のインスタンスにあるボタンを制限し、存在しない場合にすべてのインスタンスに追加します”みたいなことですが、使いどころがよく分からないので今回は説明を省きます。

例としてdivタグを出力するボタンの内容をfunctions.phpに記述していきます。

PHP
<?php 
　function add_my_quicktag() { //関数を定義
?<
<script type="text/javascript">
  QTags.addButton( "div", "div", "<div>", "</div>" ); //Quicktagの内容を設定
</script>
<?php 
}
add_action('admin_print_footer_scripts',  'add_my_quicktag'); //アクションを定義
?>

基本はこんな感じですが、もちろんクラスをもつ、またはネストしたタグの出力も出来ます。

HTML
<div class="block">
 <h2></h2>
 <p></p>    
</div>

開始タグ、終了タグのk必要な場所に改行(\n)やタブ(\t)を入れます。

Javascript
QTags.addButton( 
 "block",
 "ブロック",
 "<div class=\"block\">\n\t<h2>",
 "</h2>\n\t<p></p>\n</div>"
);

他にもよく使うスニペットやwordpressのショートコードを登録すると編集スピードがぐんと上がります。
ちなみに、自分の管理画面はこんな感じになってます。

以上、Wordpressのテキストエディタを便利にする方法をまとめてみましたが、編集するツールを使いやすくすることで記事を書くモチベーションもぐっとあがるはず。

RERATION POSTS