WordPress-加載更多get_categories按鈕

Question

我喜歡創建一個加載更多按鈕。

我正在使用get_categories顯示我的類別。 （我有一個電視節目的網站，所以我使用類別來顯示系列和職位是從情節。 例 ）

這是我的代碼，可以幫助我將分頁更改為“ 加載更多”按鈕嗎？

<?php
  $args = array(
      'orderby' => 'cat_name',
      'hide_empty' => 1,
      'hierarchical' => 1,
      'parent' => '0'
    );
    $categories = get_categories($args);
    $numOfItems = 25;
    $page = isset( $_GET['pagina'] ) ? abs( (int) $_GET['pagina'] ) : 1;
    $to = $page * $numOfItems;
    $current = $to - $numOfItems;
    $total = sizeof($categories);
      for ($i=$current; $i<$to; ++$i) {
        $category = $categories[$i];
       if ($category->name) { 
         echo '<a class="cover margin-ultimos" href="' . get_category_link( $category->term_id ) . '">';
         echo '<div id="cover-home" class="gray-shadow">';
          echo '<img src="'. get_field( 'portada', 'category_'.$category->term_id ). '" alt="Portada '. get_cat_name ( $category->term_id ) . '" />';
        echo '</div>';
        if ( strlen(get_cat_name ( $category->term_id )) > 20 ) { echo '<p class="text-ultimos menor">'.substr(get_cat_name ( $category->term_id ), 0, 20).'...</p>'; } else { echo '<p class="text-ultimos menor">'.get_cat_name ( $category->term_id ).'</p>';} 
         echo '<p class="last-info">'.$category->category_count.' Episodios</p></a>';
      }
  }
    unset($category);

    echo '<div class="clr"></div>';
    echo '<div class="paginacion">';

    echo paginate_links( array(
        'base' => add_query_arg( 'pagina', '%#%' ),
        'format' => '',
        'prev_text' => __('<i class="fa fa-chevron-left"></i> Anterior'),
        'next_text' => __('Siguiente <i class="fa fa-chevron-right"></i>'),
        'total' => ceil($total / $numOfItems),
        'current' => $page
    ));
    echo '</div>';
?>

提前致謝

Answer 1

您的html分頁為：

<div class="paginacion"><span class="page-numbers current">1</span>
<a class="page-numbers" href="/?pagina=2">2</a>
<a class="page-numbers" href="/?pagina=3">3</a>
<a class="next page-numbers" href="/?pagina=2">Siguiente <i class="fa fa-chevron-right"></i></a></div>

請使用“加載更多”進行更改，例如：

<div class="paginacion" id="loadmore">Load More</div>

使用jquery創建事件處理程序並使用ajax：

$(document).ready(function(){

// count length catalog diplay first
   var start = $("#ultimos-episodios > a").size();
   var offset = start*2;
   var clone = $("#ultimos-episodios > a").eq(0).clone();

 $('#loadmore').click(function(){

   $.ajax({
    url:"linktoyourphpcategory.php", 
    dataType:"json",
    type:"post",
    data:{start_p:start,offset_p:offset},
    success:function(data) {
       clone.find('a').attr('href',data.href);
       clone.find('img').attr('src',data.src);
       clone.find('img').attr('alt',data.alt);
       clone.find('p').eq(0).text(data.title);
       clone.find('p').eq(1).text(data.episode);

       // add that
       $("#ultimos-episodios").append(clone);

       //reset clone
       clone = clone.clone();

       // update start and offset
       start = start+start;
       offset = offset+start;
    }
   });


 });
});

最后，在您的php代碼中，也許像這樣：

$numOfItems = $_POST['start_p'];
$offset= $_POST['offset_p'];

$args = array(
      'orderby' => 'cat_name',
      'hide_empty' => 1,
      'hierarchical' => 1,
      'parent' => '0',
      'offset' => $offset,
      'limit' => $numOfItems 
    );

$categories = get_categories($args);

$item = array();
foreach($category as $cat){
  $item[]= array("href" => $cat->'yourlink',
  "src" => $cat->'yoursourcefile',
  "alt" => $cat->'yourtitlealtcategory',
  "title" => $cat->'yourtitlecategory',
  "episode" => $cat->'yourepisode');
}

echo json_encode($item);

Answer 2

我找到了解決問題的方法。

所以，這是我的解決方案，也許這會有所幫助。

JavaScript的

var cvr = 1;
function caverload(){
    $('#textito').hide();
    $('#cargando').show();
        $.ajax({
            type: 'get',
            url: '/index.php',
            data: 'pagina='+(cvr+1),
            success: function(html){
                a = html.split('<span id="spliteado">');
                b = a[1].split('</span>');
                (b[0]==='' || b[0].length<20 || b[0]===null)? $('#nohaymas').show() : $('#ultimos-episodios').append(b[0]);
                cvr = (cvr+1);
            },
                complete: function(){
                    $('#cargando').hide();
                    $('#textito').show();
                }
        });
    return false;
}

PHP

<span id="spliteado">
<?php
  $args = array(
      'orderby' => 'cat_name',
      'hide_empty' => 1,
      'hierarchical' => 0,
      'parent' => '0'
    );
    $categories = get_categories($args);
    $numOfItems = 20;
    $page = isset( $_GET['pagina'] ) ? abs( (int) $_GET['pagina'] ) : 1;
    $to = $page * $numOfItems;
    $current = $to - $numOfItems;
    $total = sizeof($categories);
      for ($i=$current; $i<$to; ++$i) {
        $category = $categories[$i];
       if ($category->name) { 
         echo '<a class="cover margin-ultimos" href="' . get_category_link( $category->term_id ) . '">';
         echo '<div id="cover-home" class="gray-shadow">';
          echo '<img src="'. get_field( 'portada', 'category_'.$category->term_id ). '" alt="Portada '. get_cat_name ( $category->term_id ) . '" />';
        echo '</div>';
        if ( strlen(get_cat_name ( $category->term_id )) > 20 ) { echo '<p class="text-ultimos menor">'.substr(get_cat_name ( $category->term_id ), 0, 20).'...</p>'; } else { echo '<p class="text-ultimos menor">'.get_cat_name ( $category->term_id ).'</p>';} 
         echo '<p class="last-info">'.$category->category_count.' Episodios</p></a>';
      }
  }

    echo '</span>';
    unset($category);
    echo '<div class="clr"></div>';

    echo '<div class="lalala">';
    echo paginate_links( array(
        'base' => add_query_arg( 'pagina', '%#%' ),
        'format' => '',
        'prev_text' => __('A'),
        'next_text' => __('S'),
        'total' => ceil($total / $numOfItems),
        'current' => $page
    ));
    echo '</div>';
?>
</div>  
<div class="clr"></div>
<div  id="caverload" class="paginacion" onclick="return caverload();">
        <a id="textito">Cargar Más Series</a>
    <div id="cargando" style="display:none">
        <a style="padding-bottom: 2px; padding-right: 117px; padding-left: 117px;">
            <img src="http://a.disquscdn.com/1427500112/img/loader.gif"/>
        </a>
    </div>
    <div id="nohaymas" style="margin-top: -20px;display:none">
        <a>Eso es Todo Amigos</a>
    </div>
</div> 

我拆分內容，點擊按鈕。

您可以在此處顯示其工作方式

無論在何處，非常感謝您對所有評論者的幫助