Wordpressのオリジナルテーマを作成しています。
記事の一覧の下に「もっと読む」を実装して、ローディングして記事をローディングしていく実装をしたいと思っています。
http://makepo.jp/content/column/web-creation/diary/2015-02-18.html
こちらのサイトを真似ながらやっていたのですが、動きません。
エラー
動きません。
「もっと読む」ボタンを押すと、リンクが「.../page/2」、「.../page/3」と変わっていくが内容は一切変わらりません。
ソースコード
記事の一覧(index.php)
php
1 <div class="recent_list"> 2 3 <?php query_posts($args); ?> 4 <?php if (have_posts()) : ?> 5 <?php while (have_posts()) : the_post(); ?> 6 <a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>" id="article"> 7 <div class="item"> 8 <div class="box"> 9 <div class="item_img"> 10 <?php if (has_post_thumbnail()) : ?> 11 <?php the_post_thumbnail('thumbnail'); ?> 12 <?php else : ?> 13 <img src="<?php bloginfo('template_url'); ?>/images/image.jpeg" /> 14 <?php endif ; ?> 15 </div> 16 <div class="item_text"> 17 <h3><?php the_title(); ?></h3> 18 <p><?php the_time('Y/m/d/ g:i a') ?></p> 19 <div class="summary"> 20 <?php the_excerpt('続きを読む'); ?> 21 </div> 22 </div> 23 </div> 24 </div> 25 </a> 26 <?php endwhile; ?> 27 <div class="moreread"> 28 <a href="<?php echo next_posts(0, false); ?>"> 29 もっと見る 30 </a> 31 <img id="loading" src="<?php echo get_template_directory_uri() ?>/images/loading.gif" 32 alt="読み込み中" width="20" height="20" /> 33 </div> 34 <?php else : ?> 35 36 <?php endif; ?> 37 </div>
フッター(footer.php)
スクリプト部分のみ抜粋
php
1<script> 2 // 最大ページ数取得 3 var maxpage = <?php echo $wp_query->max_num_pages; ?>; 4 5 $('#loading').css('display', 'none'); 6 $.autopager({ 7 content: '#article',// 読み込むコンテンツ 8 link: '#moreread a', // 次ページへのリンク 9 autoLoad: false,// スクロールの自動読込み解除 10 11 start: function(current, next){ 12 $('#loading').css('display', 'block'); 13 $('#moreread a').css('display', 'none'); 14 }, 15 16 load: function(current, next){ 17 $('#loading').css('display', 'none'); 18 $('#moreread a').css('display', 'block'); 19 if( current.page >= maxpage ){ //最後のページ 20 $('#moreread a').hide(); //次ページのリンクを隠す 21 } 22 } 23 }); 24 25 $('#moreread a').click(function(){ // 次ページへのリンクボタン 26 $.autopager('load'); // 次ページを読み込む 27 return false; 28 }); 29</script>
これに加えて、「jquery.autopager-1.0.0.js」を入れています。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/01/30 13:48
退会済みユーザー
2018/01/30 14:07
2018/01/31 03:50