WordPress + jQuery Mobile で Infinite Scroll を使ってみる

CATEGORY: WordPress | TAG: jQuery Mobile, プラグイン

2013年10月2日

WordPress と jQuery Mobile で構築したサイトで Infinite Scroll を使ってみた際のメモ。

WordPress で構築したサイトで Infinite Scroll を使うのとそれほど違いはないが、いくつか気づいた点。

Infinite Scroll の読み込みと記述

Infinite Scroll のインストール：「WordPress で Infinite Scroll を使ってみる」
jQuery Mobile のインストール：「WordPress のテーマを jQuery Mobile でスマートフォン対応に」

以下は、header.php で読み込んで記述する例。この場合、infinitescroll のコールバック関数で jQuery Mobile の関数を記述することが可能。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>?ver=20131001" type="text/css" /> 
<!-- jQuery Mobile の CSS の読み込み  -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile.structure-1.3.2.min.css" /> 
<!-- jQuery の読み込み  -->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
<!-- infinitescroll.min.js の読み込み  -->
<script src="<?php echo get_template_directory_uri(); ?>/js/jquery.infinitescroll.min.js"></script>
<script>  
  $(document).bind("mobileinit", function(){
    $.mobile.ajaxEnabled = false;
  });
  $(document).bind("mobileinit", function(){
  $.mobile.pushStateEnabled = false;
  }); 
  //infinitescroll の記述
  jQuery(function($){
    $('#content').infinitescroll({
      navSelector : ".pagenavi", // ナビゲーション要素を指定
      nextSelector : ".pagenavi a:last",　// ナビゲーションの「次へ」の要素を指定
      itemSelector : ".work"  // 表示させる要素を指定
    }); 
  }); 
  .....（省略）.....  
</script> 
<!-- jQuery Mobile の読み込み  -->
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> 
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>

上記の「$.mobile.ajaxEnabled = false」や「$.mobile.pushStateEnabled = false」の指定は、必要ではないと思うが、この環境で作成したので一応記述。

以下は functions.php で Infinite Scroll を読み込んで、Infinite Scroll を実行するテンプレートファイルに記述する例。

//functions.php
function add_my_scripts() {  
  if(is_admin()) return; 
  wp_enqueue_script('jquery'); //WordPress内蔵の jQuery をロード  

  if(is_post_type_archive('works') || is_tax('works_tag')){
    wp_enqueue_script('infinite', //「infinitescroll」をロード
    get_template_directory_uri(). '/js/jquery.infinitescroll.min.js',
    array('jquery'),
    '20130926' 
    );
  }  
}
add_action('wp_print_scripts', 'add_my_scripts');

テンプレートに記述した例。この場合、infinitescroll のコールバック関数で jQuery Mobile の関数を記述するには、$.getScript() など何らかの方法で「jquery.mobile-1.3.2.min.js」を読み込む必要がある。

<?php get_header(); ?>
<div id="content">
<?php if(have_posts()): while(have_posts()): the_post(); ?>

<div class="work"><!-- この部分をロードする-->
<h3><a href="<?php the_permalink(); ?>" ?>"><?php the_title(); ?></a></h3>
・・・省略・・・
</div><!-- end of .work --><!-- ここまで-->

<?php endwhile; endif; ?>
<?php wp_reset_postdata(); ?>

<?php pagenavi(); ?>

</div><!-- end of #content -->
<?php get_sidebar(); ?>
<?php get_footer('xxxx'); ?>

<script type="text/javascript">
//infinitescroll の記述
jQuery(function($){
    $('#content').infinitescroll({
        navSelector  : ".pagenavi",     // ナビゲーション要素を指定       
        nextSelector : ".pagenavi a:last",　// ナビゲーションの「次へ」の要素を指定
        itemSelector : ".work"   // 表示させる要素を指定  
    });  
});  
</script>
</body>
</html>

jquery.mobile-1.3.2.min.js を「$.getScript()」で読み込んでコールバックで jQuery Mobile の関数を使用する例。（この方法が効率的かどうかは別）

<script type="text/javascript">
jQuery(function($){
    //jquery.mobile-1.3.2.min.js の読み込み
    $.getScript('http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js');
    $('#content').infinitescroll({
        navSelector  : ".pagenavi",     // ナビゲーション要素を指定       
        nextSelector : ".pagenavi a:last",　// ナビゲーションの「次へ」の要素を指定
        itemSelector : ".work"   // 表示させる要素を指定  
    }, function ()  //コールバック関数
        {
     $( "div[data-role=page]" ).page( "destroy" ).page();
    });    
});  
</script>

コールバック関数の利用

Infinite Scroll で読み込んだ（ロードした）コンテンツは、jQuery Mobile での処理がないため jQuery Mobile がリンク要素に付けるクラスなどが付かない。そのため、リンク要素の色が適用されない。

Infinite Scroll ではコールバック関数が利用できるので、ロードしたコンテンツに jQuery Mobile が付けるクラスを付加することができる。以下はロードしたコンテンツのリンク要素にクラス「ui-link」を付ける例。

jQuery(function($){
    $('#content').infinitescroll({
        navSelector : ".pagenavi", 
        nextSelector : ".pagenavi a:last",　
        itemSelector : ".recent_work"
    }, function (){
        $('.work a').each(function(n){
            $(this).attr('class','ui-link' );
            });
     });
});

または、jQuery Mobile の page() などを使って以下のようにしても可能。冒頭の「$.getScript」は head 内に他の jQuery Mobile の設定などと記述する場合は不要。

jQuery(function($){
   $.getScript('http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js');
    $('#content').infinitescroll({
        navSelector : ".pagenavi", 
        nextSelector : ".pagenavi a:last",　
        itemSelector : ".recent_work" 
    }, function (){
           $( "div[data-role=page]" ).page( "destroy" ).page();
           //または $( "div[data-role=page]" ).trigger('create');
     });
});

ロードしたコンテンツの間にリンクを追加

今回 Infinite Scroll を利用したサイトでは、ナビゲーションメニューが下部にあるため、ロードするコンテンツが多い場合、ナビゲーションメニューになかなか到達しない。そのためロードしたコンテンツの間にリンクを追加。

変数「extra_menu」にリンク要素を格納
コールバック関数でロードされたコンテンツに「extra_menu」を付加 $(‘.work:last’).after(extra_menu);
ロードが完了したら、errorCallback（ロード完了後またはエラー時に呼び出されるコールバック）を利用してリンクを削除 $(‘ul.extra_menu’).remove();

jQuery(function($){
  var extra_menu = "<ul class='extra_menu'><li class='fLeft'><a class='ui-link' href='<?php echo home_url(); ?>'>ホーム</a></li><li class='fRight'><a class='ui-link' data-rel='back' href='<?php echo home_url(); ?>'>戻る</a></li></ul>";
   $('#content').infinitescroll({
        navSelector  : ".pagenavi",          
        nextSelector : ".pagenavi a:last",　
        itemSelector : ".work", 
        errorCallback: function () {$('ul.extra_menu').remove(); }
    }, function (){
      $('.work a').each(function(n){
        $(this).attr('class','ui-link' );
      })
      $('.work:last').after(extra_menu);
    });  
});

Web Design Leaves