「Load More」（もっと見る）ボタンを追加する（jQuery）

次のjQueryを使用して、 "Load More」（もっと見る）ボタンを追加することができます。 たとえば、全体の項目が100個の初期に10の（あるいは20個）が表示されていて、「その他」をクリックすると、10ずつ表示されるようにしたい場合などに使用することができます。

$(function(){
$("div").slice(0, 10).show(); // 최초 10개 선택
$("#load").click(function(e){ // Load More를 위한 클릭 이벤트e
e.preventDefault();
$("div:hidden").slice(0, 10).show(); // 숨김 설정된 다음 10개를 선택하여 표시
if($("div:hidden").length == 0){ // 숨겨진 DIV가 있는지 체크
alert("더 이상 항목이 없습니다"); // 더 이상 로드할 항목이 없는 경우 경고
}
});
});
// Source: http://stackoverflow.com/

• デモ

このコードを WordPress プラグインKBoard掲示板に適用してみました。 ここでテストしてみてください。 デフォルトでは、5つの項目が表示されていて[もっと見る]を押すと、さらに5つの項目がロードされます。 (KBoard 掲示板はすべて削除しました。）

WordPressでAjax Load Moreボタンを追加する方法は、次の記事を参照してください。

• WordPressでLoad More（もっと見る）ボタンを追加する方法

メモ：

• WordPress無限スクロール機能を使用する