【WordPress + Contact Form 7 Datepicker】選んだテーマが反映しない。効かない。 | 株式会社エンタースクウェア

一つ前の記事で、Contact Form 7 Datepickerについて投稿しました。

【WordPress + Contact Form 7】日付のカレンダーで今日以前は選択できないようにする

さて、

やりたい事としては問題なかったものの、jQueryUIのテーマを変更しようという運びになりました。

このプラグイン、便利なもので、インストールするとContact Form 7の設定「お問い合わせ」に「Detepicker Theme」というタブが追加され、

テーマを選べるようになっているんです。

このタブで、選んでそれで反映するかと思いきや…

どうしてもデフォルトのテーマ「Smoothness」のままで、変更したテーマが反映されません。

原因：wpcf7_support_html5_fallback

Contact Form 7（3.4以上）のカレンダーはHTML5入力タイプに対応したフォームとの事で、

HTML5を使いたくない場合、

もしくは、

HTML5の全機能をサポートしていないブラウザでも使用したい場合は、HTML5を無効にする事ができます。

Contact Form 7 は HTML5 の入力タイプをサポートしますか?
はい。Contact Form 7 3.4 以上からこれらの HTML5 入力タイプに対応したフォームタグをサポートします: email、tel、url、number、range、date。
HTML5 の入力タイプを使いたくない場合は、次のコードをテーマの functions.php ファイルに追加することで無効化できます:
1
add_filter( 'wpcf7_support_html5', '__return_false' );
https://contactform7.com/ja/faq/does-contact-form-7-support-html5-input-types/

この記載をfunction.phpにすると、HTML5が無効になり、カレンダーはjQueryUIを使うようになります。

今回、この記載があったため、

Contact Form 7 Datepickerから吐き出される「変更したいテーマのCSS」は、Contact Form 7が吐き出した「デフォルトのテーマのCSS」に上書きされていた事で、反映しなかったという事でした。

解決方法：add_filter( ‘wpcf7_support_html5’, ‘__return_false’ );をコメントアウト

今回の件では、カレンダーがjQueryUIになれば問題なかったのでコメントアウトで終了しました。

もし、HTML5を無効のまま、Contact Form 7 Datepickerのテーマを使いたいという事であれば、Contact Form 7のソースを少し触る必要があります。

HTML5を無効のまま、Contact Form 7 Datepickerのテーマが使いたい

Contact Form 7の以下ファイルに、jQueryUIのテーマを吐き出しているコードがあります。

そこをコメントアウトしてしまえば、上書きされる事がなくなります。

plugins/contact-form-7/includes/controller.php
※バージョン5.1.4の場合

98行目のsmoothnessというテーマのCSSを読み込んでいる箇所をコメントアウトします。

if ( wpcf7_style_is() ) {
    /*ここをコメントアウト
    wp_enqueue_style( 'jquery-ui-smoothness',
    wpcf7_plugin_url(
        'includes/js/jquery-ui/themes/smoothness/jquery-ui.min.css' ),
    array(), '1.11.4', 'screen' );   
    */ここまで
}