(2017/2/23 一部修正)
PHP7.0以上のサーバ環境でAddQuicktagに新規タグ追加が出来ない不具合がありましたが、2/22に開発者から修正版がリリースされました。これにより最新版をお使いであれば、PHP7.0以上でもこれまで通りタグを新規追加出来るようになりました。
従って、当記事は「AddQuicktagを使わずにクイックタグを追加する裏ワザ」的な位置付けに修正させていただきます。

こんにちは。ざらあしです。

WordPressの便利な所って、コードが分からなくてもプラグインを入れたら何となくやりたい事ができちゃう所ですよね。
なのでついついプラグインを沢山入れがちなんですが、あまり沢山入れすぎると重くなってしまったり、プラグイン同士が喧嘩(?)して不具合を起こしたりする場合も出てきます。

そこで、将来的に「脱プラグイン」が出来るようになったら良いんじゃないかしら、とざらあしは考えました。
いや~でも、「プラグインを使わない=PHPを弄る」なので、いきなり凄いコードじゃなくて練習的に扱えるものがあればな~~とも考えたり。

で、「脱プラグインの第一歩」の為にオススメな「外してみるプラグイン」を見つけてきました~~。

そのプラグインとは、みんな大好きAddQuicktagです。
恐らく「Wordpressでブログを始めよう!」系の記事では必ずと言って良いほど導入を勧められるプラグインですね。

AddQuicktagについてもう少し詳しく

AddQuicktagは一言で言うと、テーブルやボックス等の、毎回打つのが面倒なHTMLタグをボタン一つで挿入出来るようになる、とっても素敵なプラグインです。
タグの登録も簡単だしそんなに重いプラグインでもないので、ブロガーさん達からは絶大な支持を受けている人気プラグイン。

例えば、記事の投稿画面にはこちらのように押すだけでタグが入力される、とっても嬉しいボタンがありますよね。
(画像は私のブログの編集画面なので、既に色々追加してる状態です^^;)

ここのボタンを押すと、入力画面にタグがピョロッと入力されるような仕組みになっています。
ビジュアルエディタならコードではなくタグによる命令が見た目として反映されますね。

AddQuicktagは、このボタンを自分で好きに追加することが出来るという、非常にありがた~~~いプラグインなのです。

このおかげで、よく使う文字装飾などのタグをいちいちコピペする手間が省けます。

タグの登録画面はこんな感じ。

ここにhtmlタグを入れて、保存するだけでボタンが出るようになります。

うーん、楽ですなぁ~~~😂

でも別にAddQuicktagを使わなくても同じ事が出来る

AddQuicktagは楽ちんで素晴らしいんですけど、実は使わなくても同じようにボタンを付け加えることが出来ちゃうんですよね。

しかも簡単です。ちょっと注意は必要ですけど。
その方法をこれから説明していきます。

まずは比較的簡単に出来る脱プラグイン方法を実践して、スキルアップして行けたら~~と思います。

この方法が使える条件と注意

その前にかなーーーり大事な注意点を。

この方法ではお使いのテーマ内に必ず入っているfunctions.phpファイルを弄ります。
functions.phpは拡張子の通りPHPファイルなので、PHP言語が書かれた画面を見てそれを編集することになります。

こんな感じね。

なので、普段PHPファイルをほとんど触らない方は少しだけ気構えが必要かもしれません。

また後で言いますけど、このfunctions.phpを下手にいじって間違えたまま更新してしまうと、WordPressにログイン出来なくなる&ブログが真っ白になるという悲惨な状態になってしまいます。(一応復帰方法はあるけど超めんどくさい。)
一度やらかしたことあります。皆さんは生きてくださいね(⌒-⌒)

やらかした時のざらあし↓

この悲劇を防ぐ為に、今回の変更はこちらの条件が揃っている場合に限って行ってください。

この方法が使える条件

  • ファイルマネージャー等でファイルのアップロード&サーバ側からのファイルコピーが出来る環境をお持ちの方
  • ちょっと怖いことが起きても「ふぅ、まぁ落ち着け」と気分を落ち着かせることが出来る方

ふえぇ~~ハードル高いよぉ~~~と思われたかもしれませんが、少し注意して書けばコピペで全然大丈夫なので、安心してください。😖😇

AddQuicktagを使わずにWordpressテキストエディタにクイックタグを追加する方法

前置きが長くてごめんねごめんね~~~
では、functions.phpの編集によるクイックタグの追加方法を説明します~~

1.編集するfunctions.phpをバックアップしておく

この手順は超重要なので、絶対に抜かさないでください。

間違って真っ白になって顔面まで真っ青にならないように、編集するfunctions.phpをどこか自分のPC側のローカルな場所にファイルごとまるまるコピーし、バックアップを取っておきましょう。

バックアップさえ取っておけば、誤って真っ白になってもFTPソフトやファイルマネージャーで元のデータを上書きすれば復活します。

補足めもめも
functions.phpはテーマ毎にあります。お使いのテーマのフォルダを見ると必ず入ってるので探してくださいね。

  • 子テーマをお使いの方は子テーマのfunctions.phpをバックアップする。
  • 編集するのも子テーマの方のfunctions.php

2.追加するコード

いきなりですがfunctions.phpにこのコードを追加すると終わりです。
これだけでテキストエディタにクイックボタンが出るようになります。ウワ~簡単!

// テキストエディタにクイックタグボタンを追加
function add_my_quicktag() {
?>
<script type="text/javascript">
QTags.addButton('ID', 'ボタンのラベル', '開始タグ', '終了タグ');
</script>
<?php
}
add_action('admin_print_footer_scripts',  'add_my_quicktag');
?>

以下に変更する部分の補足をします。

ID

タグを登録する時のIDです。自分が分かりやすい英数字を入れておくとオッケー。
(例)テーブルなら ⇒ table01 など。

ボタンのラベル

テキストエディタに表示されるボタンの名前です。この部分。

自分が分かりやすい名前にしておきましょう。
(例)テーブルなら ⇒ テーブル

開始タグ

入れたいタグの最初の<>を入れます。
(例)テーブルなら ⇒ <table><tr><td>

終了タグ

入れたいタグの閉じタグを入れます。
(例)テーブルなら ⇒ </td></tr></table>

実際に入れてみた

タグを入れてみました。こんな感じでオッケー。

// テキストエディタにクイックタグボタンを追加
function add_my_quicktag() {
?>
<script type="text/javascript">
QTags.addButton('table01', 'テーブル', '<table><tr><td>', '</td></tr></table>');
</script>
<?php
}
add_action('admin_print_footer_scripts',  'add_my_quicktag');
?>

これをfunctions.phpの一番最後等にコピペして追加すれば、投稿画面のテキストエディタの方に「テーブル」というボタンが出て、押すとこのようにタグが挿入されるようになります。

ボタンを1回押す⇒ <table><tr><td>
ボタンをもう一度押す⇒ </td></tr></table>

とりあえずはこれで終了です。
タグを追加する場合は、こちらの一行をどんどん追加していくだけでオッケーです!

QTags.addButton('ID', 'ボタンのラベル', '開始タグ', '終了タグ');

簡単でしょ!!イェェェ~~~イ!!

【改良案】入れたいhtmlタグに改行を加えたい場合

実は、先程の方法では挿入するhtmlタグに改行を含んでいませんでした。
例えばもっと複雑なhtmlタグを登録したい場合など、出来れば最初から改行されてる状態で出てきた方が分かりやすいケースもありますよね。

(例)こういうテーブルをクイックタグボタンで挿入する場合

1番目のフレンズ わーい!1番だねー!
2番目のフレンズ 2番だってー!たーのしー!

投稿画面にはこのように出て来てくれると嬉しいのです。

<table>
<tr>
<th>1番目のフレンズ</th>
<td>わーい!1番だねー!</td>
</tr>
<tr>
<th>2番目のフレンズ</th>
<td>2番だってー!たーのしー!</td>
</tr>
</table>

では説明していきます。

追加するコード(改行を含めるVer.)

先にコードの全容を載せておきます。

// テキストエディタにクイックタグボタンを追加
function add_my_quicktag() {
?>
<script type="text/javascript">
//QTags.addButton('ID', 'ボタンのラベル', '開始タグ', '終了タグ');
QTags.addButton('table01', 'テーブル', '<table>' + '\n'
 + '<tr>' + '\n' + '<th>1番目のフレンズ</th>' + '\n' + '<td>わーい!1番だねー!</td>' 
 + '\n' + '</tr>' + '\n' + '<tr>' + '\n' + '<th>2番目のフレンズ</th>' 
 + '\n' + '<td>2番だってー!たーのしー!</td>' + '\n' + '</tr>' + '\n' + '</table>', '');
</script>
<?php
}
add_action('admin_print_footer_scripts',  'add_my_quicktag');
?>

改行の入れ方

  1. 1行を‘ ’で閉じる (例)’1行分のタグ’
  2. 改行を入れる場所に+ ‘\n’ +を入れる
  3. 繰り返す

これでオッケーです。

「終了タグ」が不要なら空欄にしておく

クイックタグのボタンって、1回押したら開始タグ→2回押したら終了タグが挿入される感じだと思いますけど、1回押すだけで全部出て来て欲しいって時は全然それで大丈夫です。

そういう時は「’終了タグ’」の部分を「”」にしておけば解決します。

私はどっちかというと1回クリックで済ませたい方なので、この終了タグはいつも無視🐞です。かわいそうですね。

〆サバちゃん!

ここまで書いておいて、正直AddQuicktag位なら入れておいても大丈夫と思います。そこまで重くならないと思うし、functions.phpを下手に弄って失敗するリスクを考えれば、プラグインで対応した方が良い気がします。

元々この記事を書いたのはサーバ環境をPHP7.0以上にした際にAddQuicktagの動作に不具合が出たのがきっかけだったので、その不具合が解消された今、特に当記事の方法を取る必要も無いかな~~と思います。笑

ただ、追々脱プラグインしたくなってくる事があるでしょうし、functions.phpの扱いの勉強を兼ねて、やってみても良いかなって。思ったりします。
今回のクイックタグ追加方法は比較的簡単に出来るので、ぜひチャレンジしてみては!

あと今更ですが。

※注意※
この記事の方法はテキストエディタのみ反映するものになっています。なのでビジュアルエディタにはボタンが表示されない仕様です。もっと頑張ればビジュアルエディタにも表示できますが、ちょっと横着してしまいました😭すみません。

ごめんねごめんね~~~~~(>人<;)