MasonryというjQueryが動きません。

  • 解決済 necco388

    (@necco388)


    10年、 8ヶ月前

    WP上でなくHTMLとCSSのみで作っていたときはちゃんと動きました。ですが、WP上では動きません
    なにぶん初めてサイトを作っているので、基本的なこともわかっておらず、根本的に間違っているかもしれませんが、もしなにかおわかりななる方がおられましたら、アドバイスをお願いします。

    header.phpのファイルです↓

    <?php wp_deregister_script(‘jquery’); ?>
    <script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js”></script&gt;
    <script type=”text/javascript” src=”js/jquery. masonry. min.js”></script>
    <script>
    $(function(){
    $(‘#masonry’).masonry({
    itemSelector: ‘.boite’,
    columnWidth: 230,
    isAnimated:true,
    });
    });
    </script>
    <?php wp_head(); ?>

    style.cssのファイルです↓

    #masonry {
    width:80%;
    margin:0 auto;
    }
    .boite {
    background: #FFF;
    width: 230px;
    padding: 10px;
    margin: 10px;
    float: left;
    }

    about.php（実際のページ）のファイルです↓

    <div id=”masonry”>
    <div class=”boite”><img src=”<?php bloginfo(‘template_url’); ?>/img/about.jpg” width=”200″ height=”500″ /></div>
    <div class=”boite”><img src=”<?php bloginfo(‘template_url’); ?>/img/about.jpg” width=”200″ height=”400″ /></div>
    <div class=”boite”><img src=”<?php bloginfo(‘template_url’); ?>/img/about.jpg” width=”200″ height=”200″ /></div>
    <div class=”boite”><img src=”<?php bloginfo(‘template_url’); ?>/img/about.jpg” width=”200″ height=”300″ /></div>
    <div class=”boite”><img src=”<?php bloginfo(‘template_url’); ?>/img/about.jpg” width=”200″ height=”400″ /></div>
    </div>

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • sysbird

    (@sysbird)

    10年、 8ヶ月前

    もしmasonryをテーマディレクトリに置かれているのでしたら、
    以下のようなパスで指定します。

    <script src="<?php echo get_template_directory_uri(); ?>/js/jquery.masonry.min.js" type="text/javascript"></script>

    他の方法として、
    最近のWordPressにはmasonryが入っていますので、functions.phpに以下のように書くことで読み込むこともできます。

    function my_scripts() {
    wp_enqueue_script('jquery-masonry');
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );

    お試しください。

    トピック投稿者 necco388

    (@necco388)

    10年、 8ヶ月前

    sysbirdさんこんにちは。
    具体的なアドバイス、どうもありがとうございます！

    早速どちらも試してみたのですが、動かないようです…。
    実は、ネット上で調べていたときに、sysbirdさんのサイトも見せていただいて、すでに一度試しておりました。
    たくさんの方がネット上で書いておられることを、全部試してみて、動かないということは、なにか常識的なレベルで間違っている気がします。
    ちなみに、ちょっとしたjqueryのコード（どこそこの色を変えるとか）は大丈夫なようです。
    初歩的な事で申し訳ないのですが、テーマディレクトリ、というのは、themes→サイトフォルダ→jsの中のことですよね。
    そこに、Masonryからダウンロードしたmasonry.pkgd.minというファイルを、どなたかが名前をmasonry. min変えると書いておられたので、名前を変えて保存しています。名前を変えたのがいけないのかと思って、戻したりもしたのですが、ダメなようです。

    もう少しいろいろ見直してみますね。
    どうもありがとうございました。

    sysbird

    (@sysbird)

    10年、 8ヶ月前

    こんばんわ！

    HTMLとCSSのみで作っていたときは動いていたということでしたら、
    やはりパスの問題ではないかと思います。

    jquery.masonry.min.jsはここに設置されているかと思います。
    ドメイン名/wp-content/themes/テーマ名/js/jquery.masonry.min.js

    もしnecco388さんが子テーマでやっていらっしゃるようでしたら、
    パスはこのようになります。

    <script src="<?php echo get_stylesheet_directory_uri(); ?>/js/jquery.masonry.min.js" type="text/javascript"></script>

    ブラウザ上でページのソースを表示してみて、
    この部分が思ったとおりに出力されているか確認してみるとよいと思いますよ。

    トピック投稿者 necco388

    (@necco388)

    10年、 8ヶ月前

    何度もお付き合いいただき、ありがとうございます！
    一時はもう自分が今何をやっているのかわからない状態だったのですが…先ほど、sysbirdさんに教えていただいたコードと、他のコードを組み合わせたりしていたところ、突然バシッと整列しました！…う、うれしい！感謝です！

    とりあえず、私が最終的に書いたコードです。

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/masonry.pkgd.min.js" type="text/javascript"></script>
<script>
$(function(){
$('#masonry3').masonry({
itemSelector: '.boite3',
isAnimated:true,
});
});
</script>
<?php wp_head(); ?>

    あと、関係ないかもしれませんが、masonryという名前がいけないのかと思って、3という数字を入れたり、サイズ表示を無くしたりしました。

    ですが…まだ問題が。
    通常ならサイズを縮めると、パラパラっと動くはずなのに（HTMLとCSSのみの時はそうなりました）うんともすんとも動きません。
    整列しただけでもありがたいのですが、どうせなら動いて欲しいと思うのです…なにか考えられることはありますでしょうか。

    でも、一時はもうだめかとガックリ膝を折りかけたところを、とりあえず隙間なく画面が埋まっているのを見られただけで、大満足です。
    本当にありがとうございました！
    それと、ブラウザ上でページのソースを表示してみて、読み込まれているかどうか確認すればいいということも知らなかったので、大変勉強になりました。

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • トピック「MasonryというjQueryが動きません。」には新たに返信することはできません。