WordPress:投稿の編集画面にtableやdlを記述するボタンを作成する方法

ウオトミズ(UOTOMIZU)の中の人

tableやdlリスト等のコードを簡単に挿入できるボタンが作成できないかと思っていたところ、WordPressにクイックタグというものがあることを知った。

クイックタグで簡単にtableやdl等のコードを記述できる

クイックタグとは、コードを簡単に挿入できるボタンのこと。function.phpに独自のクイックタグを作成するコードを記述することで、tableやdlのような面倒なコードをボタン一つで作成できるようになる。

クイックタグ

記述するコード

コードは以下のような感じ。

function.php


function add_quicktags() {
?>
<script type="text/javascript">
QTags.addButton('table', 'テーブル', '<table><tbody><tr><th></th><td></td></tr><tr><th></th><td></td></tr><tr><th></th><td></td></tr><tbody></table>', '');
</script>
<?php
}

add_action('admin_print_footer_scripts', 'add_quicktags');

カスタマイズ後に[テキスト]モードにて、以下のボタンが表示されたらOK。

カスタマイズ後のクイックタグ

他にも応用が可能。 よく使うコードのクイックタグを作っておくと作業が捗る。

ビジュアルモードのボタンを追加するには

[ビジュアル]モードでボタンを追加したい場合は、TinyMCEカスタムボタンというものを作成する必要がある。

TinyMCE Custom Buttonについては、以下の記事。

https://code.tutsplus.com/tutorials/guide-to-creating-your-own-wordpress-editor-buttons–wp-30182

 

.
スポンサーリンク

商用利用可な素材配布しています!!

商用利用可なフリー素材ULOCO商用利用可なフリー素材ULOCO