web-dev-qa-db-ja.com

wordpressでjquery datepickerを使用します

wordpressテンプレートページのフォームのだれにdatepickerを使用したいのですが、機能しません。

これは、子テーマのfunctions.phpのコードです。

function modify_jquery() {
    if (!is_admin()) {
        // comment out the next two lines to load the local copy of jQuery
        wp_deregister_script('jquery');
        wp_register_script('jquery', 'http://ajax.googleapis.com/ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js', false, '2.1.1');
        wp_enqueue_script('jquery');
    }
}
add_action('init', 'modify_jquery');
function load_jquery_ui_google_cdn() {
    global $wp_scripts;

    wp_enqueue_script('jquery-ui-core');
    wp_enqueue_script('jquery-ui-slider');

    // get the jquery ui object
    $queryui = $wp_scripts->query('jquery-ui-core');

    // load the jquery ui theme
    $urlui = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js";
    wp_enqueue_style('jquery-ui-smoothness', $urlui, false, null);
}

add_action('wp_enqueue_scripts', 'load_jquery_ui_google_cdn');

それから私はこれをpage-mypage.phpに入れました：

                <script>
  $(function() {
    $( "#datepicker" ).datepicker();
  });
                </script>
...other code...
Date: <input type="text" id="datepicker">
...other code...
        </form>

しかし、それは表示されません。何が悪いのかを教えてくれませんか。

javascriptphpjquerywordpressdatepicker
13
testermaster

JQueryのロードに使用しているコードが無効であり、datepicker（jQuery UI Datepicker）をまったくロードしていません。 WordPressでjQueryを使用する正しい方法に関するいくつかの回答を投稿したので、詳細を確認したい場合は、実際の例とリンクを提供します。

子テーマのfunctions.phpに挿入したコードを次のコードに置き換えます。

/**
 * Load jQuery datepicker.
 *
 * By using the correct hook you don't need to check `is_admin()` first.
 * If jQuery hasn't already been loaded it will be when we request the
 * datepicker script.
 */
function wpse_enqueue_datepicker() {
    // Load the datepicker script (pre-registered in WordPress).
    wp_enqueue_script( 'jquery-ui-datepicker' );

    // You need styling for the datepicker. For simplicity I've linked to the jQuery UI CSS on a CDN.
    wp_register_style( 'jquery-ui', 'https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css' );
    wp_enqueue_style( 'jquery-ui' );  
}
add_action( 'wp_enqueue_scripts', 'wpse_enqueue_datepicker' );

最後に、使用法を次のものに置き換えます。

<script>
    jQuery(document).ready(function($) {
        $("#datepicker").datepicker();
    });
</script>

jqueryには、$ではなくWord Jqueryが必要です

47
Nathan Dawson

ベローズスクリプトとスタイルをロードするには、テーマのfunctions.phpファイルにベローズコードを追加します。

フロントエンド用のスクリプト

function add_e2_date_picker(){
//jQuery UI date picker file
wp_enqueue_script('jquery-ui-datepicker');
//jQuery UI theme css file
wp_enqueue_style('e2b-admin-ui-css','http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/base/jquery-ui.css',false,"1.9.0",false);
}
add_action('wp_enqueue_scripts', 'add_e2_date_picker');

バックエンド用のスクリプト

    function add_e2_date_picker(){
    //jQuery UI date picker file
    wp_enqueue_script('jquery-ui-datepicker');
    //jQuery UI theme css file
    wp_enqueue_style('e2b-admin-ui-css','http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/base/jquery-ui.css',false,"1.9.0",false);
    }
    add_action('admin_enqueue_scripts', 'add_e2_date_picker');

このコードをfuntions.phpファイルに追加するか、これらのコードを怒鳴らせてください。

function register_datepiker_submenu() {
    add_submenu_page( 'options-general.php', 'Date Picker', 'Date Picker', 'manage_options', 'date-picker', 'datepiker_submenu_callback' );
}

function datepiker_submenu_callback() { ?>

    <div class="wrap">

    <input type="text" class="datepicker" name="datepicker" value=""/>

    </div>

    <script>
    jQuery(function() {
        jQuery( ".datepicker" ).datepicker({
            dateFormat : "dd-mm-yy"
        });
    });
    </script> 

<?php }
add_action('admin_menu', 'register_datepiker_submenu');
?>

このコードを追加すると、AdminMenu-> Settigns-> Date Pickerに日付ピッカーが表示されます。

jQuery DatePickerをWordPressテーマまたはプラグインに追加 の詳細を参照してください

6
csehasib