カテゴリー
WordPress

WordPress Twenty Nineteen 子テーマ作成。位置がメインのメニューに検索フォームを設置するとクリックしてもフォーカスが外れないようにする

WordPress Twenty Nineteen 子テーマ作成。位置がメインのメニューに検索フォームを設置するとクリックしてもフォーカスが外れる原因を探る – oki2a24 で原因を特定できました。

今回は、改善できましたので、その記録です。

コードでやったことのまとめ

  1. 親テーマの JavaScript ファイルをデキューする。
  2. 親テーマの JavaScript を修正したファイルを子テーマでエンキューする。

詳細。親テーマの JavaScript ファイルをデキューする。

親テーマでの JavaScript ファイルの読み込み方

親テーマで読み込んだ JavaScript ファイルを削除したいです。

そもそもですが、親テーマでは、 wp_enqueue_script() で JavaScript ファイルを読み込んでいました。

前後を抜粋します。 functions.php です。

/**
 * Enqueue scripts and styles.
 */
function twentynineteen_scripts() {
... 略 ...
	if ( has_nav_menu( 'menu-1' ) ) {
... 略 ...
		wp_enqueue_script( 'twentynineteen-touch-navigation', get_theme_file_uri( '/js/touch-keyboard-navigation.js' ), array(), '1.1', true );
	}
... 略 ...
}
add_action( 'wp_enqueue_scripts', 'twentynineteen_scripts' );

つまり、

  • wp_enqueue_script() でエンキューし、 add_action() で ‘wp_enqueue_scripts’ にメソッドを追加している。
  • ‘menu-1’ というナビメニューがある時のみ読み込む。

となります。テンプレートファイルで直に読み込む、などではないのです。

ですので、子テーマでもテンプレートファイル等でなんとかするのではなく、 functions.php でなんとかするのが自然です。

子テーマでの親テーマの JavaScript の wp_enqueue_script() を削除する方法

色々調べまして、どうやら、デキューするメソッドがあることがわかりました。

上記参考ページを真似てみましたけれども、うまくいきません＞＜。公式ページの使い方をやってみますと、あっさり解決できました♪

ポイントは、

  • 親テーマの JavaScript をデキューするときは、 ‘wp_print_scripts’ を add_action() に指定する。
  • add_action() の第 ３ 引数に、 100 などを指定し、実行の優先順位を下げる。これにより、ファイルがエンキューされた後にデキューが実行されるようにする。

ということでした。

最終的に、次のコードで実現できました♪

/**
 * 親テーマの JavaScript ファイルをデキューします。
 *
 * Hooked to the wp_print_scripts action, with a late priority (100),
 * so that it is after the script was enqueued.
 */
function wpdocs_dequeue_script() {
   wp_dequeue_script( 'twentynineteen-touch-navigation' );
}
add_action( 'wp_print_scripts', 'wpdocs_dequeue_script', 100 );

詳細。親テーマの JavaScript を修正したファイルを子テーマでエンキューする。

これは簡単で、子テーマの作り方の公式ページにある通りです。

親テーマからコピーした、デキューした JavaScript に手を加えたものを子テーマでエンキューします。

/**
 * JavaScript や CSS を読み込みます。
 */
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
  wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
  wp_enqueue_script(
    'twentynineteen-child-touch-navigation',
    get_stylesheet_directory_uri() . '/js/touch-keyboard-navigation.js',
    array('twentynineteen-priority-menu'),
    false,
    true
  );
}

親テーマの JavaScript に手を加えた内容

  • blur() を回避する判定を加えた。

具体的な差分は次となります。

# diff -up twentynineteen/js/touch-keyboard-navigation.js oki2a24com-twentynineteen-child/js/touch-keyboard-navigation.js 
--- twentynineteen/js/touch-keyboard-navigation.js	2019-03-05 22:49:41.498473744 +0000
+++ oki2a24com-twentynineteen-child/js/touch-keyboard-navigation.js	2019-03-10 23:27:14.000000000 +0000
@@ -193,6 +193,10 @@
 		var o;
 
 		for ( i = 0; i < getFocusedElements.length; i++) {
+			// 親テーマからの修正箇所: メインメニューの検索フォームのフォーカスアウトは除外
+			if (getFocusedElements[i].className === 'search-field') {
+				continue;
+			}
 			getFocusedElements[i].blur();
 		}
 
#

親テーマ JavaScript の該当メソッドのリンクです。

おわりに

今回の内容で、私の行いたい子テーマでのカスタマイズは完了です。

あと行いたいのは、細かい調整で、

  • 今回の子テーマでの JavaScript 読み込みは、 menu-1 がある場合に限定する。
  • 親テーマのテーマカスタマイザーメソッドの一部修正を、リファクタリングして差分のみで済ませられるようにする。

ということを検討する予定です。

以上です。

コメントを残す