質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.46%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Q&A

0回答

1993閲覧

MW WP Formでdatepickerが動作しない

beginner-nha

総合スコア0

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

0グッド

0クリップ

投稿2021/12/20 09:03

前提・実現したいこと

WordpressのMW WP Formでdatepickerを動作させたい

起こっていること

datepicker 動かないで検索して出てくることはあらかた試して
以下のように読み込ませることで、開発ツールを用いてもconsoleにエラーが吐き出されず、カレンダーも表示されずテキストでの入力しかできず困っております。

header.phpに以下の記述

php

1          <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/styles/vendors/reset.css" /> 2   <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/styles/vendors/slick-theme.css" /> 3   <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/styles/vendors/slick.css" /> 4   <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/styles/vendors/jquery-ui.css"> 5   <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css"> 6 <?php wp_head(); ?> 7 <?php wp_deregister_script('jquery'); ?> 8 <script src="<?php echo get_template_directory_uri(); ?>/scripts/vendors/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> 9 </head>

footer.phpに以下の記述

php

1</html> 2<?php wp_footer(); ?> 3 4<script src="<?php echo get_template_directory_uri(); ?>/scripts/vendors/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

開発ツールでの表示

html

1<input type="text" name="date_1" class="input date hasDatepicker" size="30" value="2021年1月1日" id="dp1639988722721"> 2<script type="text/javascript"> 3jQuery(function($) { 4 $("input[name='date_1']").datepicker({ 5 "yearSuffix":"\u5e74","dateFormat":"yy\u5e74mm\u6708dd\u65e5","dayNames":["\u65e5\u66dc\u65e5","\u6708\u66dc\u65e5","\u706b\u66dc\u65e5","\u6c34\u66dc\u65e5","\u6728\u66dc\u65e5","\u91d1\u66dc\u65e5","\u571f\u66dc\u65e5"],"dayNamesMin":["\u65e5","\u6708","\u706b","\u6c34","\u6728","\u91d1","\u571f"],"dayNamesShort":["\u65e5\u66dc","\u6708\u66dc","\u706b\u66dc","\u6c34\u66dc","\u6728\u66dc","\u91d1\u66dc","\u571f\u66dc"],"monthNames":["1\u6708","2\u6708","3\u6708","4\u6708","5\u6708","6\u6708","7\u6708","8\u6708","9\u6708","10\u6708","11\u6708","12\u6708"],"monthNamesShort":["1\u6708","2\u6708","3\u6708","4\u6708","5\u6708","6\u6708","7\u6708","8\u6708","9\u6708","10\u6708","11\u6708","12\u6708"],"showMonthAfterYear":"true","changeYear":"true","changeMonth":"true" }); 6}); 7</script>

また、header.phpのjquery読み込み部分を、消してfooter.phpのwp_footer直後に記載したバージョンを試すと以下のエラーを確認することができます。

(index):188 Uncaught ReferenceError: jQuery is not defined

jQuery(function($) { $("input[name='date_1']").datepicker({ "yearSuffix":"\u5e74","dateFormat":"yy\u5e74mm\u6708dd\u65e5","dayNames":["\u65e5\u66dc\u65e5","\u6708\u66dc\u65e5","\u706b\u66dc\u65e5","\u6c34\u66dc\u65e5","\u6728\u66dc\u65e5","\u91d1\u66dc\u65e5","\u571f\u66dc\u65e5"],"dayNamesMin":["\u65e5","\u6708","\u706b","\u6c34","\u6728","\u91d1","\u571f"],"dayNamesShort":["\u65e5\u66dc","\u6708\u66dc","\u706b\u66dc","\u6c34\u66dc","\u6728\u66dc","\u91d1\u66dc","\u571f\u66dc"],"monthNames":["1\u6708","2\u6708","3\u6708","4\u6708","5\u6708","6\u6708","7\u6708","8\u6708","9\u6708","10\u6708","11\u6708","12\u6708"],"monthNamesShort":["1\u6708","2\u6708","3\u6708","4\u6708","5\u6708","6\u6708","7\u6708","8\u6708","9\u6708","10\u6708","11\u6708","12\u6708"],"showMonthAfterYear":"true","changeYear":"true","changeMonth":"true" }); }); </script>

scripts.js?ver=5.8.2:2

(anonymous) @ scripts.js?ver=5.8.2:2

html

1<script type="text/javascript"> 2jQuery(function($) { 3 $("input[name='date_1']").datepicker({ 4 "yearSuffix":"\u5e74","dateFormat":"yy\u5e74mm\u6708dd\u65e5","dayNames":["\u65e5\u66dc\u65e5","\u6708\u66dc\u65e5","\u706b\u66dc\u65e5","\u6c34\u66dc\u65e5","\u6728\u66dc\u65e5","\u91d1\u66dc\u65e5","\u571f\u66dc\u65e5"],"dayNamesMin":["\u65e5","\u6708","\u706b","\u6c34","\u6728","\u91d1","\u571f"],"dayNamesShort":["\u65e5\u66dc","\u6708\u66dc","\u706b\u66dc","\u6c34\u66dc","\u6728\u66dc","\u91d1\u66dc","\u571f\u66dc"],"monthNames":["1\u6708","2\u6708","3\u6708","4\u6708","5\u6708","6\u6708","7\u6708","8\u6708","9\u6708","10\u6708","11\u6708","12\u6708"],"monthNamesShort":["1\u6708","2\u6708","3\u6708","4\u6708","5\u6708","6\u6708","7\u6708","8\u6708","9\u6708","10\u6708","11\u6708","12\u6708"],"showMonthAfterYear":"true","changeYear":"true","changeMonth":"true" }); 5}); 6</script>

試したこと

以下記事の内容
https://meshikui.com/2020/10/15/2985/
https://www.d-grip.com/blog/seisaku/5815
https://takaraism.com/blog/2020/07/29/entry_98/

補足情報(FW/ツールのバージョンなど)

ローカル環境で実装中なのでサイトを共有することができませんが、
環境は以下です。
WordPress 5.8.2
jquery-3.4.1.min.js

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問