プラグインを使わずにwordpressでemmetを使いたい

メタデータ

公開日：2018/03/05
更新日：2021/07/11
カテゴリ：コード
タグ：JavaScript, PHP, WordPress

リアクション

【こちらは前サイトからの移植記事になります。】

　タイトル通り、時々wordpressでemmetを使いたいときがあります。
　emmetに慣れるともう半角カッコとか打つの面倒、リンクとか、見出しとか簡単なものは使いたい！
　しかも、プラグインは使いたくない！　っていうかない！

　そんな時にはemmet for textareaを使っちゃいましょう。
　emmet.min.jsをテーマのjsフォルダにアップし、以下のコードをfunctions.phpに追加します。

function add_emmet_setting_script() {
    echo '<script src="' . get_bloginfo('stylesheet_directory') . '/js/emmet.min.js"></script>';
    echo '<script>
    emmet.require("textarea").setup({
        pretty_break: true, //改行後のインデントを引き継ぐ
        use_tab: true //タブで展開
    });
    </script>'.PHP_EOL;
}
add_action('admin_print_scripts-post.php', 'add_emmet_setting_script');
add_action('admin_print_scripts-post-new.php', 'add_emmet_setting_script');

function add_emmet_setting_script() {

echo '<script src="' . get_bloginfo('stylesheet_directory') . '/js/emmet.min.js"></script>';

echo '<script>

emmet.require("textarea").setup({

pretty_break: true, //改行後のインデントを引き継ぐ

use_tab: true //タブで展開

});

</script>'.PHP_EOL;

}

add_action('admin_print_scripts-post.php', 'add_emmet_setting_script');

add_action('admin_print_scripts-post-new.php', 'add_emmet_setting_script');

　２行目でjsを呼び出し、３～８行目でemmetを設定。
　10、11行目で新規投稿時、更新時にjsを呼び出すようにしています。
　なぜemmet.min.jsを読み込む際にwp_enqueue_scriptを使わないのかというと、こちらの方がemmet.min.jsと呼び出すjsの記述順が確実だから＆必要ないページで読み込まなくていいようにするためです。

　これで投稿時にemmetを使えるはずです。
　また、固定ページ投稿時やカスタム投稿時にも使えます。