記事を作っていると、
似た構成にしたい、
何回も同じコードを使って書いている、
なんてことがあると思います。
デフォルトのブロックエディタでは、
コードを登録しておき、それを呼び出すことができますが、
テキストエディタでは、できません。
同様の機能として使えるのが、クイックタグです。
今回は。クイックタグを登録する方法を確認したいと思います。
クイックタグを使うには
簡単にクイックタグを登録するプラグインとして、AddQuickTagが有名です。
プラグインを使わずに、クイックタグを追加するには、
functions.php
の編集が必要となります。
クイックタグの追加手順
バックアップを取ってから進めていきましょう。
※ローカル環境では、ATOMなどのテキストエディタか、エクスプローラー上で、
ファイルのコピーを取っておきましょう。
※本番環境の場合、ファイルのコピーを取り、ダウンロードしたファイルをテキストエディタで編集しましょう。
functions.php編集手順
①ATOMなどのテキストエディタで、以下ファイルを開く。
※本番環境の場合、[XAMPPのインストールディレクトリ]部分を本番環境のドメイン名に変更する。
②以下コードを最後に追記し、保存する。
※本番環境の場合、ファイルをアップロードする。
function add_button_quicktag() {
?＞
＜script type="text/javascript"＞
QTags.addButton('＜クイックタグのID＞','＜ボタン名＞','＜1クリック目で追加するコード＞','＜2クリック目で追加するコード＞');
＜/script＞
＜?php
}
add_action('admin_print_footer_scripts', 'add_button_quicktag');
JavaScriptを使うための宣言をします。
- QTags.addButton(‘<クイックタグのID>’,'<ボタン名>’,'<1クリック目で追加するコード>’,'<2クリック目で追加するコード>’);
追加するクイックタグの情報を定義し、ボタンを追加します。
引数は以下のとおりです。
それぞれの引数はクォーテーションで囲みます。
| 項目名 | 必須 | 内容 |
|---|---|---|
| クイックタグのID | 必須 | 各クイックタグを分類するためのID。 |
| ボタン名 | 必須 | エディタ上に表示するボタン名。 |
| 1クリック目で追加するコード | 必須 | ボタンを1回クリックした際に、編集画面に追加されるコード。 |
| 2クリック目で追加するコード | ボタンを2回目にクリックした際に、編集画面に追加されるコード。 |
- <?php
JavaScriptの記載を終了し、
再びphpのコードを記載することを宣言する。
- add_action(‘admin_print_footer_scripts’, ‘add_button_quicktag’);
フッターにコードやデータを追加するタイミングで、
定義したクイックタグの追加関数を呼び出し処理をさせています。
サンプルコード
例えば、次のコードを追加してみてください。
function add_button_quicktag() {
?＞
＜script type="text/javascript"＞
QTags.addButton('add_customcode','コード追加','＜button type="button" onclick="copy()" class="btn-square-slant"＞クリップボードへコピー＜/button＞＜div id="cpbtn" class="in_code"＞[cfview name="customcode"]＜/div＞');
＜/script＞
＜?php
}
add_action('admin_print_footer_scripts', 'add_button_quicktag');
カスタムフィールドにcustomcodeという名前でコードを追加し、
以下2つの対応もしていれば
画面上にカスタムフィールドに追加したコードが表示され、
また、その上部にコピーするためのボタンが表示されます。
※当コードが正しく実行されるためには、
ボタンにIDを付与しているため、1投稿につき、1ボタンのみになります。
まとめ
いかがでしたか？
もし他にもクイックタグを追加したい場合は、
下記のように、QTags.addButton関数のみを追加すれば、ボタンが追加されます。
function add_button_quicktag() {
?＞
＜script type="text/javascript"＞
QTags.addButton('＜ID1'＞,'＜ボタン名1＞','1クリック目のコード'
,'2クリック目のコード');
QTags.addButton('＜ID2'＞,'＜ボタン名2＞','1クリック目のコード'
,'2クリック目のコード');
＜/script＞
＜?php
}
add_action('admin_print_footer_scripts', 'add_button_quicktag');
クイックタグも必要に応じて作成し、
作成をより簡素化していきたいですね。
