こんにちは
メニュー内のリンクをクリックしても、プルダウンされたメニューが閉じてくれません。
ページが遷移しない場合、メニューは閉じないようです。
適当なフックや設定もないようなので、JavaScript でアンカーリンクのクリック時に閉じるボタンをクリックさせる方法はどうでしょうか？
テーマの functions.php に、
function my_enqueue_script() {
$script = <<<SCRIPT
(function ($) {
$('#site-navigation a[href^="#"]').on('click', function() {
$('.primary-nav-trigger').trigger("click");
});
}(jQuery));
SCRIPT;
wp_add_inline_script( 'yuuta-scripts', $script );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_script' );
ishitakaさん、ご回答ありがとうございます。
functions.phpに入れてみましたが、特に変化がありませんでした。
functions.phpの書き方がおかしいでしょうか？
子テーマのfunctions.phpの現在の全文を掲示させていただきます。
<?php
add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );
function theme_enqueue_styles() {
wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
}
//SVG
function add_file_types_to_uploads($file_types){
$new_filetypes = array();
$new_filetypes[‘svg’] = ‘image/svg+xml’;
$file_types = array_merge($file_types, $new_filetypes );
return $file_types;
}
add_action(‘upload_mimes’, ‘add_file_types_to_uploads’);
function my_enqueue_script() {
$script = <<<SCRIPT
(function ($) {
$(‘#site-navigation a[href^=”#”]’).on(‘click’, function() {
$(‘.primary-nav-trigger’).trigger(“click”);
});
}(jQuery));
SCRIPT;
wp_add_inline_script( ‘yuuta-child-scripts’, $script );
}
add_action( ‘wp_enqueue_scripts’, ‘my_enqueue_script’ );
よろしくお願いいたします。
$('#site-navigation a[href^="#"]').on('click', function() {
↓
$('#site-navigation a').on('click', function() {
では、どうでしょうか？
やってみましたが変化がありませんでした。
codeの件、お恥ずかしい。。。
ご指摘ありがとうございます。
現在はこのようになっています。
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
//SVG
function add_file_types_to_uploads($file_types){
$new_filetypes = array();
$new_filetypes['svg'] = 'image/svg+xml';
$file_types = array_merge($file_types, $new_filetypes );
return $file_types;
}
add_action('upload_mimes', 'add_file_types_to_uploads');
function my_enqueue_script() {
$script = <<<SCRIPT
(function ($) {
$('#site-navigation a').on('click', function() {
$('.primary-nav-trigger').trigger("click");
});
}(jQuery));
SCRIPT;
wp_add_inline_script( 'yuuta-child-scripts', $script );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_script' );
CG
(@du-bist-der-lenz)
アンカーでリンクしているのは、フロントページであるとか、そのページ内でのセクション移動ですよね。ドロワーメニューはひとまずは隠されているのですから、他ページのリンクで良いと思ってます。
wp_add_inline_script( 'yuuta-child-scripts', $script );
「yuuta-child-scripts」は意図的に変更されたのでしょうか？
JavaScript が出力されているかどうか、ページのソースを確認してみてください。
CGさん。ご回答ありがとうございます。
https://webkcampus.com/sample/toggle-navi-single/ng.html
このページは、まったく関係ない他のサイトのぺーじですが、起こってる現象が同じなので参考までにご確認ください。こちらもやはりクリックしても、ハンバーガーメニューが閉じないです。
よろしくお願いします。
ishitakaさん。
「yuuta-child-scripts」これは模索してるときに、変えてしまいました。
もしかしたらChildにするのかな？って思って。すみません。
ですが、元に戻してみましたが、変化はありませんでした。
JavaScript が出力されてるかは、ソースの何を確認すればいいでしょうか？
ど素人で申し訳ありません。。
下記の JavaScript が、テーマの theme.js より後方に出力されているかどうか確認してください。
(function ($) {
$('#site-navigation a[href^="#"]').on('click', function() {
$('.primary-nav-trigger').trigger("click");
});
}(jQuery));
テーマの theme.js というのはこれのことでしょうか？
<script type='text/javascript' src='https://beckproject-eq.jp/wp2/wp-content/themes/yuuta/assets/js/theme.js?ver=20170212'></script>
これより後方に
(function ($) {
$('#site-navigation a[href^="#"]').on('click', function() {
$('.primary-nav-trigger').trigger("click");
});
}(jQuery));
の表示はありませんでした。前方にもありませんでした。
よろしくお願いします。
おっと、失礼しました。
add_action( 'wp_enqueue_scripts', 'my_enqueue_script' );
↓
add_action( 'wp_enqueue_scripts', 'my_enqueue_script', 11 );
ですね。m(__)m
