AddQuicktagで頻繁に使うタグを簡単に挿入

WordPressプラグイン:AddQuicktag

これまでWordPressのテキストエディタをずっと使ってきましたが、いい加減タグを打つのが面倒くさくなって来ました。

このサイトでは、特にSwiftのソースコードを書くことが頻繁にあるので、こんな感じのタグ

<pre class="line-numbers"><code class="language-swift">
....
</code></pre>

を手書きしていました。今考えても、かなり生産性が低いなーという気がしたので、なんとかすることにしました。

AddQuicktagというWordPressプラグイン

WordPress: AddQuicktagプラグイン

WordPressにはQuicktags APIという機能が付いているらしく、自力でfunctions.phpに記述すればテキストエディタにボタンを追加できるみたいです。コピペすればできそうでしたが、素直に「AddQuicktag」というプラグインを使うことにしました。

プラグインインストール、追加したいhtmlタグを設定

AddQuicktagをインストールして設定画面を開くと、下の画像のような画面になります(画像をクリックすると大きくなります)。

AddQuicktagの設定画面

すでに入力してありますが、入力必須項目はアスタリスク(*)がついている項目

「ボタン名」と「開始タグ」

です。それ以外はオプションですので、入力しなくても構いません。それぞれの項目は、

① ボタン名:テキストエディタで追加されるメニュータグにつく名前(必須)
② ラベル名:①のメニュータグにマウスを置いた時に表示される名前
③ 開始タグ:htmlの開始タグ(必須)
④ 終了タグ:htmlの終了タグ
⑤ アクセスキー:投稿者IDを入力する場所だそうです(複数のユーザがいる場合のみ有効で、自分1人の場合は必要ないです)
⑥ 順番:投稿の編集画面で表示される順番

という感じです。

どのページにタグを表示するかを設定

また、右側に幾つかラジオボタンがありますが、これは「どのページにタグを追加するか」というのを設定する場所です。例えば「post」にのみチェックを入れると、投稿ページ編集ではタグが表示されますが、固定ページ編集では表示されません。特に気にしなければ、一番右のチェックボタンをクリックすると、全部のラジオボタンにチェックが入ります。

入力し終わったら「変更を保存」をクリックします。

テキストエディタ上での表示

その後「投稿を編集」を開くと、こんな感じのボタンが追加されます(画像をポチるとでかくなります)。

テキストエディタ上の表示画面

「precode-swift」というのが最初に紹介した面倒くさい<pre><code>のタグです。

AddQuicktagに用意されている機能で便利だったのが、「HTML Entities」と「Decode HTML」というボタン。

「HTML Entities」は、htmlタグの表示をソースコードで表示できる表記に変えてくれます。例えば、「<pre>」とエディタ上で入力し、その部分をドラッグした後に、「HTML Entities」を叩くと「&lt;pre&gt;」になります。「Decode HTML」は、その逆の操作をするボタンです。

また、既存のタグを非表示にすることもできます。使わないタグを非表示にしておけば、メニューがすっきりして使いやすくなるかもしれません。

ショートカットキーが登録できると便利

不満があるとすれば、ショートカットキーが登録できないことです。キーボードショートカットからタグの挿入ができれば非常に便利だったんですが。というか、そもそもテキストエディタだとショートカットキーが使えないんですけどね。

「じゃあビジュアルエディタを使えばいいじゃないか?」と思ったので、試しにビジュアルエディタで使ってみたのですが、複数タグの場合(<pre><code>)を挿入することができませんでした。

自分が欲しい機能を詰め込んだブログエディタをSwiftで開発できたら楽しそうですね。

スポンサーリンク
広告1
広告1

シェアする

フォローする