サポート » 使い方全般 » jQueryのコードをhtmlからwordpress上に移植すると動かない

  • jQueryのコードをhtmlからwordpress上に移植して動くようにしたいと思いました。

    初心者でも分かる!モーダルウィンドウの作り方
    http://syncer.jp/jquery-modal-window

    cssとjsはそのままで単純に呼び出し方をwordpress用に書き換えればよいと理解しています。
    実際の呼び出しのコードです。

    function register_jQuery(){
    wp_enqueue_style( 'modal', get_stylesheet_directory_uri() . '/css/modal.css');
    
    wp_deregister_script('jquery');
    	$url = 'https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js';
    	wp_register_script('jquery', $url);
    	wp_enqueue_script('jquery');
    	wp_enqueue_script('modal', get_stylesheet_directory_uri() . '/js/modal.js', array('jquery'), NULL, true);
    }
    add_action('wp_enqueue_scripts', 'register_jQuery');

    こちらのサンプルを動かした場合、

    ソースを確認すると、urlのパスはあっています。
    cssは適応されています。
    クリックすると画面が黒くなります(だから、正常に読まれていると理解しています。)。
    しかし、ウィンドウが開きません。

    ちなみに、他のhtml用のjQueryのサンプルも利用しましたが、同様に動きませんでした。

    何か作業に問題がありますでしょうか?

    テーマは最初、他のものをつかっていましたが、今はテスト用にTwenty Fifteenを使っています。
    最終的に子テーマのfunctions.phpにコードを書いて動作させたいです。
    プラグインはすべて停止させています。

    初心者ではありますが、どうぞよろしくお願いします。

8件の返信を表示中 - 1 - 8件目 (全8件中)
  • こんにちは、

    質問の趣旨とは異なりますが、古いブラウザへの対応が厳しくなければ、CSSだけで出来ると思いますが、どうですか?


    http://jsfiddle.net/kumarmuthaliar/GG9Sa/1/

    CSSをちょっと変更

    #content .modalDialog {
        position: fixed;
        font-family: Arial, Helvetica, sans-serif;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.8);
        z-index: 99999;
        opacity:0;
        -webkit-transition: opacity 400ms ease-in;
        -moz-transition: opacity 400ms ease-in;
        transition: opacity 400ms ease-in;
        pointer-events: none;
    }
    #content .modalDialog:target {
        opacity:1;
        pointer-events: auto;
    }
    #content .modalDialog > div {
        width: 400px;
        position: relative;
        margin: 10% auto;
        padding: 5px 20px 13px 20px;
        border-radius: 10px;
        background: #fff;
        background: -moz-linear-gradient(#fff, #999);
        background: -webkit-linear-gradient(#fff, #999);
        background: -o-linear-gradient(#fff, #999);
        color:#000;
    }
    #content .close {
        background: #606061;
        color: #FFFFFF;
        line-height: 25px;
        position: absolute;
        right: -12px;
        text-align: center;
        top: -10px;
        width: 24px;
        text-decoration: none;
        font-weight: bold;
        -webkit-border-radius: 12px;
        -moz-border-radius: 12px;
        border-radius: 12px;
        -moz-box-shadow: 1px 1px 3px #000;
        -webkit-box-shadow: 1px 1px 3px #000;
        box-shadow: 1px 1px 3px #000;
    }
    #content .close:hover {
        background: #00d9ff;
    }

    で、こちらの環境だと、Twentyfifteenで動作するようですが、

    トピック投稿者 mame777

    (@mame777)

    いつもありがとうございます。

    こういうやり方もあるのですね。
    動作確認したところ、たしかにこれでできて問題ありません。
    とても参考になりました。

    ただ、jqeryのプラグインを、今後、Wp上で使いたいです。
    なぜwp上で動かないのか、気になるため、引き続き回答を求めます。
    解答がつかないのなら、一旦締めきって別の質問でださせてもらうかもしれません。

    どうぞよろしくお願いいたします。

    勉強用という事なら

    http://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/wp_enqueue_script

    jQuery noConflict ラッパー あたりを読んでみてください

    $(function(){

    jQuery(function($){

    に書き換えてみるとどうですか?

    または、

    (function($) {
    
    // code...
    
    })(jQuery);

    余談

    WordPressで使っている jQuery 以外のバージョンを使う必要がある場合は、本体への副作用が出るといけないので、

    deregister するよりも

    https://core.trac.wordpress.org/ticket/22896#comment:30

    にあるような方法がいいかも、、、でも、言ってる本人もよくわかっていないんですが、、、

    トピック投稿者 mame777

    (@mame777)

    たびたびありがとうございます。
    動作用のコードが正しくない気がします。jQueryは頭につけるようにしましたが、
    呼び出し方はいろいろ変えたのですが、いまいちよくわかっていません。

    <script>
    jQuery(function(){
        // ↓ここの書き方がいまいち自信がない。。
        // この状態だとクリックすると無反応
        jQuery('#openModal').modal();
    });
    </script>

    動作用のコードは、wp_head() より下に書く必要があると理解していて、
    このコードはfooter.phpに入れています。。
    たぶん簡単なところがよく理解できていない気がしています。。
    今のところウィンドウは開きません。

    http://tenman.info/labo/snip/files/test-1.gif

    (function($) {
    
        //モーダルウィンドウを出現させるクリックイベント
        $("#modal-open").click( function(){
    
                //キーボード操作などにより、オーバーレイが多重起動するのを防止する
                $( this ).blur() ;	//ボタンからフォーカスを外す
                if( $( "#modal-overlay" )[0] ) return false ;		//新しくモーダルウィンドウを起動しない (防止策1)
                //if($("#modal-overlay")[0]) $("#modal-overlay").remove() ;		//現在のモーダルウィンドウを削除して新しく起動する (防止策2)
    
                //オーバーレイを出現させる
                $( "body" ).append( '<div id="modal-overlay"></div>' ) ;
                $( "#modal-overlay" ).fadeIn( "slow" ) ;
    
                //コンテンツをセンタリングする
                centeringModalSyncer() ;
    
                //コンテンツをフェードインする
                $( "#modal-content" ).fadeIn( "slow" ) ;
    
                //[#modal-overlay]、または[#modal-close]をクリックしたら…
                $( "#modal-overlay,#modal-close" ).unbind().click( function(){
    
                        //[#modal-content]と[#modal-overlay]をフェードアウトした後に…
                        $( "#modal-content,#modal-overlay" ).fadeOut( "slow" , function(){
    
                                //[#modal-overlay]を削除する
                                $('#modal-overlay').remove() ;
    
                        } ) ;
    
                } ) ;
    
        } ) ;
    
        //リサイズされたら、センタリングをする関数[centeringModalSyncer()]を実行する
        $( window ).resize( centeringModalSyncer ) ;
    
                //センタリングを実行する関数
                function centeringModalSyncer() {
    
                        //画面(ウィンドウ)の幅、高さを取得
                        var w = $( window ).width() ;
                        var h = $( window ).height() ;
    
                        //コンテンツ(#modal-content)の幅、高さを取得
                        var cw = $( "#modal-content" ).outerWidth( {margin:true} );
                        var ch = $( "#modal-content" ).outerHeight( {margin:true} );
    
                        //センタリングを実行する
                        $( "#modal-content" ).css( {"left": ((w - cw)/2) + "px","top": ((h - ch)/2) + "px"} ) ;
    
                }
    
    })(jQuery);

    で、こちらでは動作しています :)

    トピック投稿者 mame777

    (@mame777)

    何度もありがとうございます。

    ただ、申し訳ございません。。。
    画面が黒くなるだけでウィンドウが開かず、理由がわかりません。。
    念のためですが、functions.phpとhtmlはどのようになっていますでしょうか?
    それとも挟んでいるところがまずく実行のタイミングがいけないのでしょうか?

    <?php
    function register_jQuery(){
    wp_enqueue_style( 'modal', get_stylesheet_directory_uri() . '/css/modal.css');
    
        wp_deregister_script('jquery');
    	$url = 'https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js';
    	wp_register_script('jquery', $url);
    	wp_enqueue_script('jquery');
    	wp_enqueue_script('modal', get_stylesheet_directory_uri() . '/js/modal.js', array('jquery'), NULL, true);
    }
    add_action('wp_enqueue_scripts', 'register_jQuery');
    /**
     * Twenty Fifteen functions and definitions
     *
     * Set up the theme and provides some helper functions, which are used in the
     * theme as custom template tags. Others are attached to action and filter
     * hooks in WordPress to change core functionality.
     *

    jsファイルがキャッシュされていて、変更が行われていないとかという事も起きるかも

    wp_enqueue_scriptの第4引数 NULLにしているようですが、NULLだとバージョン番号が追加されず、キャッシュの更新が行われずらくなりますよ。
    バージョンは、キャッシュ削除用の設定みたいなものなので、、、

    トピック投稿者 mame777

    (@mame777)

    たびたびありがとうございます。

    とりあえず、ウィンドウがあることはわかりました。
    モバイルPCを使っているせいなのか?わかりませんが、
    cssで座標を強制的に書き換えたらでてきました。

    console.logで調べたところ、呼び出しはうまくいっているのですが、
    自分のWPの環境ではcenteringModalSyncerがうまく動いていない気がします。。

    cssでウィンドウの位置を制御しようとすると、
    やり方がよくないからかもしれませんが、
    とくにスマホなどのデバイスではウィンドウがはみでてしまいます。
    閉じるボタンが隠れてしまう場合もあるようです。

    引数の件も勉強になりました。修正しました。

8件の返信を表示中 - 1 - 8件目 (全8件中)
  • トピック「jQueryのコードをhtmlからwordpress上に移植すると動かない」には新たに返信することはできません。