WordPress, 投稿ページごとのJavaScirpt挿入をチェックするだけで行う方法

『JavaScriptを挿入したいけど特定のページだけにしたい』とき、テンプレートやエンキュー登録での方法は、全ページ共通で挿入されるのでよろしくない。

Googleのサイト評価でも無駄があると下がります。

今回は、投稿/固定ページの編集画面メニューに『JSを挿入する/しない』チェックボックス機能を追加します。

プラグインなし・自作をしようと思った動機

投稿ページごとにJavaScriptを挿入する機能はプラグインやテーマの機能として多く提供されていますが、ボクの求めてる100%のものはありませんでした。

CSS, JavaScriptを個別に指定するもので<script>や<styles>のコードを入れるのは論外。複数ページで使うコードだったとき、同じものをコピペするのは面倒だし、修正が入ったとき何度も同じ修正をするのが面倒。

そして、一番求めているのは『いくらでも拡張ができること』。ちょっと応用すれば管理画面の機能を便利にできるから。

今回サンプルコードをお見せしますが、応用を利かせるためのベーシックなコードです。正直、あれもできるこれもできるとアイディアが出てくるんですが、出すぎて書ききれません。

その点はご了承ください。

サンプルコード

いきなりですがサンプルコードです。

<?php
add_action('save_post', function ( $post_id ) {
	if( defined('DOING_AUTOSAVE') && DOING_AUTOSAVE ){
		return;
	}

	$meta_key = '_post_use_js';
	$request_post = json_encode( $_POST[ $meta_key ] );
	if ( isset( $request_post ) ) update_post_meta( $post_id, $meta_key, $request_post );
});
add_action('add_meta_boxes', function() {
	add_meta_box('post_use_js', __( '個別JavaScript設定', 'theme_name' ), 'post_use_js', ['post', 'page'], 'side', 'high');
});

function post_use_js() {
	global $post;
	$post_id = $post->ID;
	$meta_key = '_post_use_js';
	$meta_value = get_post_meta( $post_id, $meta_key, true );
	$meta_array = [];
	if ( $meta_value ) $meta_array = json_decode( $meta_value, true );

	$name = $meta_key . '[enabled]';
	$checked = ( !empty( $meta_array ) && $meta_array['enabled'] === '1' ) ? 'checked' : '';
	?>
	<div>
	<input type="hidden" name="<?php echo $name; ?>" value="">
	<label for="post_use_js_enabled"><input type="checkbox" name="<?php echo $name; ?>" id="post_use_js_enabled" value="1"  <?php echo $checked; ?> /> <?php _e('〇〇を使う', 'theme_name'); ?></label>
	</div>
	<?php
}

add_action( 'wp_enqueue_scripts', function(){
	global $post;
	$post_id = $post->ID;
	$meta_key = '_post_use_js';
	$meta_value = get_post_meta( $post_id, $meta_key, true );
	$meta_array = [];
	if ( $meta_value ) $meta_array = json_decode( $meta_value, true );

	if ( empty( $meta_array ) ) return;
	if ( empty( $meta_array['enabled'] ) ) return;

	$src= 'https://****.com/sample.js';
	wp_enqueue_script( 'post_use_js', $src, [], false, true );
} );

コードの説明も書こうかと思いましたがここで辞めることにしました。WordPressはこの方法を推奨していません。

メタボックスはブロックエディタ（JavaScript）で実装

WordPressはバージョン5になってから、管理画面の投稿/固定の編集ページはGutenbergが採用され、ブロックエディターで編集することになっています。

細かい話はここではしませんが、JavaScriptで用意したブロックというコンテンツをはめ込んでページを作ります。

今までと同じように書いている文章も『段落ブロック』というJavaScriptで実装されたコンテンツ。

それはメタボックスやサイドバーでも変わりません。編集画面のコンテンツはエディタ部分だけでなく設定のメニューもブロックで、JavaScriptで実装します。

PHPプログラムは仮の実装にしましょう。

さっきのサンプルはPHPで実装したプログラム。同じような機能を作りますがプログラミングの内容はまったくちがう。

（プログラム言語がちがうので当たり前。）

WordPressは下位互換のためにPHPプログラムでもOKにしていますが、推奨しているのはJavaScriptでの実装です。

ただWordPressをPHPメインでカスタムしていた人にとっては結構きついです。ボクもJavaScriptのコードサンプルを紹介しようと思いましたが、サクッとできそうな気がしませんでした。

今は、WordPress.orgのブロックエディターハンドブックの紹介に留めておきます。

（JavaScript版を作る予定。ただしケツは決めていない。）