プラグインなしで記事毎のbody閉じタグ前にJavaScriptのコードを出力させるフィールドを作るスニペット

JSの入力欄

JavaScript(以降JSと省略します)を記述する場所は、<body>〜〜</body>タグの最後(クロージングタグ前)に書くことが推奨されています。

この記事で紹介するスニペットは、コピペするだけで記事内にJSのコード入力欄ができ、それを<body>〜〜</body>タグの最後(クロージングタグ前)に出力してくれるコピペ用コードです。

かかかず
かかかず

jQueryやReactなどのJSを、記述して動かすことももちろん可能な入力欄をつくります。

今回は、そんなフィールドを作るスニペットについて紹介します。

実装後のサンプル

早速、実装後のサンプルです。

下記のように、記事毎にテキストボックスの入力欄が下部に表示されます。

記事内の表事例

ここに js のコードを記述すると、そのコードを <body>〜</body> のクロージングタグ前に、<script type="text/javascript">〜〜</script> の 〜〜 の部分に出力します。

かかかず
かかかず

記事毎に、jsで試したいもがある場合に最適です。

テキストボックスに何も記述しない場合

このテキストボックスに何も記述しなかった場合は、script タグをはじめ何も出力されないので、ソースが汚れることはありません。

使い方の例

例えば、その記事に

functions.php

<script type="text/javascript">
$('.acc-btn').click(function(){
    if ( $(this).next().is( ":hidden" ) ) {
      $('.acc-content').slideUp('selected');
      $(this).next().slideDown('selected');
    } else {
      $(this).next().slideUp('selected');
    };
});
</script>

のようなJSのコードを出力させたい場合があったとします。その場合、このテキストボックスで入力するのは、

functions.php

$('.acc-btn').click(function(){
    if ( $(this).next().is( ":hidden" ) ) {
      $('.acc-content').slideUp('selected');
      $(this).next().slideDown('selected');
    } else {
      $(this).next().slideUp('selected');
    };
});

のタグを除いた記述のみでOKで、script タグはテキストボックスに書く必要はありません。

注意点

この記事のスニペットは、基本コピペで実装できますが functions.php をいじります。

functions.phpは色々なことができるファイルですが、いじるのをミスってしまうと、WordPress全体が真っ白のエラーになってしまうこともあるので、注意が必要です。

バックアップをとってからやりましょう。

functions.phpをいじる場合、ftpで必ずバックアップを取ってから行い、テーマ本体ではなく子テーマの方に関数をコピペするようにしましょう。

コピペ用コード

以下がコピペ用のコードです。function.php に貼り付けすれば、記事ページにテキストボックスが生成されます。

コードを表示する

functions.php

//Custom footerJS Widget
add_action('admin_menu', 'custom_footerjs_hooks');
add_action('save_post', 'save_custom_footerjs');
add_action('wp_footer','insert_custom_footerjs', 999, 3);
function custom_footerjs_hooks() {
    add_meta_box('custom_js', 'Custom ReactJS', 'custom_footerjs_input', 'post', 'normal', 'high');
    add_meta_box('custom_js', 'Custom ReactJS', 'custom_footerjs_input', 'page', 'normal', 'high');
}
function custom_footerjs_input() {
    global $post;
    echo '<input type="hidden" name="custom_js_noncename" id="custom_js_noncename" value="'.wp_create_nonce('custom-js').'" />';
    echo '<textarea name="custom_js" id="custom_js" rows="5" cols="30" style="width:100%;">'.get_post_meta($post->ID,'_custom_js',true).'</textarea>';
}
function save_custom_footerjs($post_id) {
    if (!wp_verify_nonce($_POST['custom_js_noncename'], 'custom-js')) return $post_id;
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id;
    $custom_js = $_POST['custom_js'];
    update_post_meta($post_id, '_custom_js', $custom_js);
}
function insert_custom_footerjs() {
    if (is_page() || is_single()) {
        if (have_posts()) : while (have_posts()) : the_post();
            echo '<script type="text/javascript">'.get_post_meta(get_the_ID(), '_custom_js', true).'</script>';
        endwhile; endif;
        rewind_posts();
    }
}

ざっくりとしたコードの解説

先生

最後に、ざっくりとしたコードの解説です。主に、関数についての説明がメインです。

meta boxでテキストボックスを作る

custom_footerjs_hooks() で、管理画面にmeta boxを追加することができるadd_meta_box() を使い、テキストボックスを作ります。

functions.php

function custom_footerjs_hooks() {
    add_meta_box('custom_js', 'Custom ReactJS', 'custom_footerjs_input', 'post', 'normal', 'high');
    add_meta_box('custom_js', 'Custom ReactJS', 'custom_footerjs_input', 'page', 'normal', 'high');
}

そして、以下の add_action を使い、テキストボックスに何かが入力された時、記録されるようにします。

functions.php

add_action('save_post', 'save_custom_footerjs');

関数を定義

meta boxを作ったら、以下3つの関数をそれぞれ定義していきます。

  • custom_footerjs_input() … 管理画面のテキストボックスの大きさやclass
  • save_custom_footerjs($post_id) … 記事毎の記録方法
  • insert_custom_footerjs() … 表示される時の条件と出力内容
かかかず
かかかず

何もテキストボックスに入力していない時は、insert_custom_footerjs() の条件分岐で何も出力しない設定にしています。

カテゴリーのイラスト

同じカテゴリの記事一覧

ボタンの影