Zenn
🐙

スライドメニューのコードの入れ替え案

2024/03/01に公開
HTML
jQuery
PHP
WordPress
tech

WordPressで、コンタクトフォーム７をアップデートすると、何故かスライドメニューが機能しなくなり、メニューのページが表示されたままになる現象に遭遇しました。
しらべたところsidrという古いJavascriptのコードを使って、スライドメニューを実装していることが分かりました。

sidr の情報

こちらがsidrのGithubのページです。

https://github.com/artberri/sidr

こちらかsidrのページです。

https://www.albertovarela.net/sidr/

このsidrのページは、セキュリティ上問題があるようです。

そのためアクセスは、自己責任でお願いします。

このJavascriptのコードは、WordPressのfunctions.phpで、エンキューされていました。
そのためGoogle Advancedに質問して、下記のコードを生成しました。
そして試したのですが、Javascriptのエラーは、改善されませんでした。

function my_scripts(){
  wp_enqueue_style('sidr_css', 'https://cdn.jsdelivr.net/jquery.sidr/2.2.1/stylesheets/jquery.sidr.min.css');
  wp_enqueue_script('sidr_js', 'https://cdn.jsdelivr.net/jquery.sidr/2.2.1/jquery.sidr.min.js');
  // 他のスクリプトのエンキューコード
}
add_action('wp_enqueue_scripts', 'my_scripts');

ブラウザのコンソールでは、このエラーが、出ています。

jquery-migrate.min.js?ver=3.4.1:2 JQMIGRATE: Migrate is installed, version 3.4.1
jquery.min.js?ver=3.7.1:2 jQuery.Deferred exception: jQuery(...).sidr is not a function TypeError: jQuery(...).sidr is not a function
    at HTMLDocument.<anonymous> (https://www.hoge/:796:32)
    at e (https://www.hoge/wp-includes/js/jquery/jquery.min.js?ver=3.7.1:2:27028)
    at t (https://www.hoge/wp-includes/js/jquery/jquery.min.js?ver=3.7.1:2:27330) undefined
ce.Deferred.exceptionHook @ jquery.min.js?ver=3.7.1:2

色々検討しましたが、別のJavascriptのコードに入れ替えることにしました。
下記のコードをテストしたら、簡単に左からスライドして表示されるメニューを作ることができました。
このコードは、リートンでGPT-4を活用して制作しました。
https://wrtn.jp/

<!DOCTYPE html>
<html>

<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width">
 <title>replit</title>
 <link href="style.css" rel="stylesheet" type="text/css" />
 <!-- jQuery MobileのCSS -->
 <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
 <!-- jQueryライブラリ -->
 <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
 <!-- jQuery MobileのJavaScriptファイル -->
 <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<style>
 #sidr.open, #main.open {
  transform: translateX(50%); /* メニューを表示 */
 }

 #sidr, #main {
  transform: translateX(0); /* メニューを左側から非表示 */
  transition: transform 0.3s; /* スムーズなアニメーション効果 */
 }
</style>

<body>

 <div id="main">
  <div data-role="page">
   <div data-role="header">
    <h1>デモページ</h1>
   </div>
   <div role="main" class="ui-content">
    <p>ここにコンテンツが入ります。</p>
   </div>
  </div>
  <a class="simple-menu btn_menu" href="#">サイトの目次</a>
 </div>
 <div id="sidr">
  <ul>
   <li><a href="#">項目 1</a></li>
   <li><a href="#">項目 2</a></li>
   <li><a href="#">項目 3</a></li>
  </ul>
 </div>
</body>
 <script>
 // JavaScript コードでメニューの開閉を制御

 const menuButton = document.querySelector('.simple-menu');
 const sidrMenu = document.querySelector('#sidr');
 const mainContent = document.querySelector('#main');

 menuButton.addEventListener('click', () => {
  sidrMenu.classList.toggle('open');
  mainContent.classList.toggle('open');
 });
 </script>
</html>

昔は大変でした

昔は、Javascriptを使ってスマホのスライドメニューを作るのは、大変だった記憶があります。
でも今は、CSSとJavascriptの数行のコードで、簡単にスライドメニューを実装できたので、とても助かりました。

sidrのHTMLのコードを活かして

今回HTMLのsidrを呼び出している部分をそのまま利用できるので、今回の状況に似た人のお役に立てるかもしれないと思い記事にまとめました。

今回のエラーが解決した方法

コンタクトフォーム７を更新するとJQueryの読み込みの順番に、問題が生じるようです。
そのため下記のコードを、functions.phpでsidrを読み込む前に、書いたら直りました。

// 先頭に jQuery ライブラリを読み込む
wp_enqueue_script('jquery');

ちなみに私は、半年前に別のWordPressで、同じ不具合に遭遇していたようです。
https://ja.wordpress.org/support/topic/更新するとスライドメニューが表示されたままに/

Discussion