ベストセラー人気 WordPress テーマTop 30 詳細

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

Last Updated:2023年7月16日| | 2のコメント

次の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ボタンを追加する方法は、次の記事を参照してください。

メモ:


2のコメント

コメント

    • こんにちは、クザク様。

      次の記事で紹介するプラグインで試しましたか?
      https://www.thewordcracker.com/intermediate/%EC%9B%8C%EB%93%9C%ED%94%84%EB%A0%88%EC%8A%A4%EC%97%90%EC%84%9C-load-more-button%EB%8D%94-%EB%B3%B4%EA%B8%B0-%EB%B2%84%ED%8A%BC%EC%9D%84-%EC%B6%94%EA%B0%80%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95/

      私は現在、 KBoardを使用していなくてテストすることができないため、正常になるかについては保証することができない点ご了承ください。

      基本的にAjaxを理解して応用すると、必要に応じ可能になります。

      https://codex.wordpress.org/AJAX_in_Plugins

      応答