Snow Monkey Formsでpicadateを使い日付ピッカーを実装したい

0
いいねをした人: 居ません
  • このトピックには5件の返信、3人の参加者があり、最後にtegecatにより2年、 7ヶ月前に更新されました。
6件の投稿を表示中 - 1 - 6件目 (全6件中)
  • 投稿者
    投稿
  • #100275
    tegecat
    参加者
    3

    Snow Monkey Formsでpicadateを使い日付ピッカーを実装したい

    【お使いの Snow Monkey のバージョン】5.9.1
    【お使いの Snow Monkey Blocks のバージョン】14.1.1
    【お使いの Snow Monkey Editor のバージョン】7.0.1
    【お使いの Snow Monkey Forms のバージョン】3.1.1
    【お使いのブラウザ】chrome
    【当該サイトのURL】http://sanzokuya.com/wp/survey/

    ### 実現したいこと
    お世話になります。
    Snow Monkey Formsで来店日をpickadateを使い日付ピッカーを実装したいと思っています。
    このフォーラムで調べて必要なファイルをmy-snow-monkeyに配置しやってみましたが、
    以下のようなエラーが出ました。

    ### 発生している問題

    コンソールエラー(501
    Not Implementedとなるためとりあえず画像にて)

    ### 試したこと

    my-snow-monkey.phpに以下を書きました。

    main.jsは

    日付フォームには
    id:datepicker
    class:fieldset__input js__datepicker
    を指定しました。

    ファイル構成は

    以上になっています。
    おそらくwp enqueue scriptの書き方が間違っていると思うのですが、
    wp enqueue scriptの関数リファレンスを読んでも良くわかりませんでした。
    ここで聞くのは間違っているのかもしれませんがどうぞよろしくお願いします。

    0
    いいねをした人: 居ません
    #100278
    アバター画像キタジマ タカシ
    参加者
    2371

    wp_enqueue_style()wp_enqueue_script() の書き方が間違っているようです。どちらにも URL を列挙していますが、関数は引数の順番が決まっているのでそのように必要な文だけ列挙することはできません。

    <?php wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); ?>
    

    ファイルの URL(↑でいえば $src)は2番目の引数であり、3番目の引数は依存関係を指定するものになるので、3番目にしてするのが ['jquery'] にならないとダメです。

    複数のファイルを読み込ませたい場合は wp_enqueue_style()wp_enqueue_script() 自体を複数個書くことになります。

    0
    いいねをした人: 居ません
    #100280
    tegecat
    参加者
    3

    早々のご回答ありがとうございます。

    my-snow-monkey.phpのwp_enqueue_style()とwp_enqueue_script()を以下のように書き換えてみました。

    // css 読み込み
    add_action( 'wp_enqueue_scripts', 'msm_enqueue_style_script' );
    function msm_enqueue_style_script() {
    wp_enqueue_style(
    'msm_style',
    MY_SNOW_MONKEY_URL . '/assets/css/main.css',
    [],
    filemtime( MY_SNOW_MONKEY_PATH . '/assets/css/main.css' )
    );
    wp_enqueue_style(
    'msm_style',
    MY_SNOW_MONKEY_URL . '/assets/css/default.css',
    [],
    filemtime( MY_SNOW_MONKEY_PATH . '/assets/css/default.css' )
    );
    wp_enqueue_style(
    'msm_style',
    MY_SNOW_MONKEY_URL . '/assets/css/default.date.css',
    [],
    filemtime( MY_SNOW_MONKEY_PATH . '/assets/css/default.date.css' )
    );
    
    // js読み込み
    wp_enqueue_script(
    'msm_scripts',
    MY_SNOW_MONKEY_URL . '/assets/pickadate/picker.js',
    ['jquery'],
    filemtime( MY_SNOW_MONKEY_PATH . '/assets/pickadate/picker.js' ),
    true
    );
    wp_enqueue_script(
    'msm_scripts',
    MY_SNOW_MONKEY_URL . '/assets/pickadate/picker.date.js',
    [],
    filemtime( MY_SNOW_MONKEY_PATH . '/assets/pickadate/picker.date.js' ),
    true
    );
    wp_enqueue_script(
    'msm_scripts',
    MY_SNOW_MONKEY_URL . '/assets/pickadate/legacy.js',
    [],
    filemtime( MY_SNOW_MONKEY_PATH . '/assets/pickadate/legacy.js' ),
    true
    );
    wp_enqueue_script(
    'msm_scripts',
    MY_SNOW_MONKEY_URL . '/assets/pickadate/lang-ja.js',
    [],
    filemtime( MY_SNOW_MONKEY_PATH . '/assets/pickadate/lang-ja.js' ),
    true
    );
    wp_enqueue_script(
    'msm_scripts',
    MY_SNOW_MONKEY_URL . '/assets/js/main.js',
    [],
    filemtime( MY_SNOW_MONKEY_PATH . '/assets/js/main.js' ),
    true
    );
    }

    するとコンソールエラーは無くなったのですが、やはり日付ピッカーは動作しませんでした。

    しかしwp_enqueue_style()、wp_enqueue_script()の書き方がわかったので大進歩です。ありがとうございます。もう少し検証してみたいと思います。

    0
    いいねをした人: 居ません
    #100285
    アバター画像キタジマ タカシ
    参加者
    2371

    wp_enqueue_style()wp_enqueue_script () も第一引数はそのスタイル(やスクリプト)の名前になります(名前は自分で決めて大丈夫です)。名前はそれぞれのファイルに対して別々のものを指定しなければなりません。そうしないとどのファイルがどれか識別できないからです。['jquery'] というふうに依存関係を指定している部分がありますが、これも jquery という名前でスクリプトが登録されているからです。

    上記のコードだと すべてのスタイル・スクリプトが msm_stylemsm_scripts になっているので、これだと全部のスタイルやスクリプトが読み込まれていないのではないですかね?

    僕は picadate というライブラリを使ったことがないので使い方を知りませんが、↑の名前に関する記述を修正してすべてのスタイル・スクリプトが読み込まれたことを確認したあとも動作しないのでれば picadate を動かすためのコードに問題があるのかもしれません。

    0
    いいねをした人: 居ません
    #100294
    GONSY
    参加者
    836

    Contact Form 7には実装したことがありますが、いずれSnow Monkey Formsでも使うかもしれないので、試してみました。

    my-snow-monkey
    ├ my-snow-monkey.php
    └ scripts
       └ pickadate.js

    こんな構成です。

    必要なCSSとJSを読み込ませるためにwp_enqueue_scriptsを使いました。
    ※フォームを設置する特定のページにしか使わない場合、if( is_page() )などを用いて読み込みの制御をしてください。
    ※とくに意味はありませんがCDNです。

    my-snow-monkey.phpの中身
    記述方法に誤りや要改善点があればご指摘ください。

    /**
     * pickadate.js使ってSnow Monkey Formsにカレンダーから日付入力をする
     */
    add_action(
    	'wp_enqueue_scripts',
    	function() {
    
    		wp_enqueue_style(
    			'pickadate-default', // ハンドル名
    			'https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.6.4/themes/default.css',
    			[ Framework\Helper::get_main_style_handle() ],
    			false
    		);
    
    		wp_enqueue_style(
    			'pickadate-default_date',
    			'https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.6.4/themes/default.date.css',
    			[ Framework\Helper::get_main_style_handle() ],
    			false
    		);
    
    		wp_enqueue_script(
    			'pickadate',
    			'https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.6.4/picker.js',
    			['jquery'],
    			false,
    			true
    		);
    
    		wp_enqueue_script(
    			'pickadate-date',
    			'https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.6.4/picker.date.js',
    			['jquery','pickadate'],
    			false,
    			true
    		);
    
    		wp_enqueue_script(
    			'pickadate-legacy',
    			'https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.6.4/legacy.js',
    			['jquery','pickadate'],
    			false,
    			true
    		);
    
    		wp_enqueue_script(
    			'pickadate-translate',
    			'https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.6.4/translations/ja_JP.js',
    			['jquery','pickadate'],
    			false,
    			true
    		);
    
    		wp_enqueue_script(
    			'pickadate-orign',
    			MY_SNOW_MONKEY_URL . '/scripts/pickadate.js', // 環境に応じて
    			['jquery','pickadate'],
    			filemtime( MY_SNOW_MONKEY_PATH . '/scripts/pickadate.js' ), // 環境に応じて
    			true
    		);
    
    	}
    );

    pickadate.jsの中身

    jQuery(function($){
        $('#date_box').pickadate({ // 対象のID
            firstDay: 0,
            format: 'yyyy年m月d日(ddd)', // 適宜調整してください
            min: 0,
            max: 100
        });
    });

    Snow Monkey Formsでつくったフォームの【フォーム設定】で、日付を入れたい【Text】のidにdate_boxを入れて保存。
    固定ページにフォームを設置してできたのが以下です。

    @tegecat さん
    たぶんそこまでできていたら、あと少しだと思います。
    一応デモは動いてますが、提示したコードは正しくないと思って、参考程度にしてみてください。

    2
    いいねをした人:
    #100353
    tegecat
    参加者
    3

    キタジマ様、GONSY様

    アドバイスありがとうございました。

    お陰様でwp enqueue scriptの理解が進みました。

    GONCY様のコードを参考にやってみると前月以降に戻れなかったので最終的にこうなりました。

    構成

    my-snow-monkey
    ├ my-snow-monkey.php
    └ assets
    └ pickadate
    └css
    └default.css
    └default.date.css
    └js
    └lang-ja.js
    └legacy.js
    └pickadate.js
    └picker.date.js
    └picker.js

    my-snow-monkey.phpの中身

    // css読み込み
    add_action(
    	'wp_enqueue_scripts',
    	function () {
    		wp_enqueue_style(
    			'pickadate-default',
    			MY_SNOW_MONKEY_URL . '/assets/pickadate/css/default.css',
    			[ Framework\Helper::get_main_style_handle() ],
    			filemtime( MY_SNOW_MONKEY_PATH . '/assets/pickadate/css/default.css' ),
    			false
    		);
    
    		wp_enqueue_style(
    			'pickadate-default_date',
    			MY_SNOW_MONKEY_URL . '/assets/pickadate/css/default.date.css',
    			[ Framework\Helper::get_main_style_handle() ],
    			filemtime( MY_SNOW_MONKEY_PATH . '/assets/pickadate/css/default.date.css' ),
    			false
    		);
    
    		// js読み込み
    		wp_enqueue_script(
    			'pickadate',
    			MY_SNOW_MONKEY_URL . '/assets/pickadate/js/picker.js',
    			['jquery'],
    			filemtime( MY_SNOW_MONKEY_PATH . '/assets/pickadate/js/picker.js' ),
    			false,
    			true
    		);
    
    		wp_enqueue_script(
    			'pickadate-date',
    			MY_SNOW_MONKEY_URL . '/assets/pickadate/js/picker.date.js',
    			['jquery', 'pickadate'],
    			filemtime( MY_SNOW_MONKEY_PATH . '/assets/pickadate/js/picker.date.js' ),
    			false,
    			true
    		);
    
    		wp_enqueue_script(
    			'pickadate-legacy',
    			MY_SNOW_MONKEY_URL . '/assets/pickadate/js/legacy.js',
    			['jquery', 'pickadate'],
    			filemtime( MY_SNOW_MONKEY_PATH . '/assets/pickadate/js/legacy.js' ),
    			false,
    			true
    		);
    
    		wp_enqueue_script(
    			'pickadate-translate',
    			MY_SNOW_MONKEY_URL . '/assets/pickadate/js/lang-ja.js',
    			['jquery', 'pickadate'],
    			filemtime( MY_SNOW_MONKEY_PATH . '/assets/pickadate/js/lang-ja.js' ),
    			false,
    			true
    		);
    
    		wp_enqueue_script(
    			'pickadate-origin',
    			MY_SNOW_MONKEY_URL . '/assets/pickadate/js/pickadate.js',
    			['jquery', 'pickadate'],
    			filemtime( MY_SNOW_MONKEY_PATH . '/assets/pickadate/js/pickadate.js' ),
    			true
    		);
    	}
    );

    pickadate.jsの中身

    jQuery(function ($) {
      $("#date_box").pickadate();
    });

    これで無事動きました。

    お二人に感謝します。

    これでトピックを閉じます。

    2
    いいねをした人:
6件の投稿を表示中 - 1 - 6件目 (全6件中)
  • トピック「Snow Monkey Formsでpicadateを使い日付ピッカーを実装したい」には新しい返信をつけることはできません。

ドキュメント

Snow Monkey の設定方法やマニュアルを掲載しています。

ドキュメント

フォーラム

Snow Monkey の使い方やカスタマイズについてのご質問・ご要望等はサポートフォーラムで行っています。サポートフォーラムは誰でも閲覧できますが、書き込みできるのは Snow Monkey 購入者のみとなります。

サポートフォーラム

よくあるご質問

Snow Monkey のサービスについて不明な点がある場合は、まずはよくあるご質問をご確認ください。

よくあるご質問

お問い合わせ

よくあるご質問を見ても解決しなかった場合、試用版の申請については問い合わせフォームからお願いいたします。

お問い合わせ

Snow Monkey は Gutenberg ブロックエディターに対応した 100%GPL の WordPress テーマです。拡張性を意識した開発をおこなっており、カスタマイザーとブロックでスピーディーにサイトを立ち上げるだけでなく、CSS やフックを駆使した高度なカスタマイズにも柔軟に対応できます。