Question

我如何集成“加载更多”按钮来加载自定义查询中的下10个帖子？我已经尝试了许多插件，css和js方式，但是似乎无法加载它。您如何在点击点击后加载更多帖子？任何提示都非常感人

<div class="container">
  <div class="row featured-akcije">
    @foreach(get_field('actions') as $action)
      @php($query = new WP_Query(array('post_type' => 'condo', 'p' => $action['akcions']->ID)))
      @php($query->the_post())
      <div class="col-md-4 col-xl-3 action">
        <div class="box-shadow-posts hoverPic">
          <div class="row">
            <div class="col-12 col-md-12">
              <div class="row">
                <div class="col-4 col-md-6 col-xl-6">
                  <div class="action-img">
                    <img src="{{ get_the_post_thumbnail_url() }}" class="img-fluid">
                    <p class="action">action</p>
                  </div>
                </div>
                <div class="col-8 col-md-6 pl-md-0">
                  <div class="row info-action">
                    <div class="col-md-12"><h2 class="title">
                      {{ the_title() }}
                    </h2></div>
                    <div class="col-md-12 price-info">
                      <div class="divider">
                      </div>
                      <?php if( get_field('price_off') ): ?>
                      <p class="price">price from <?php the_field('price_from'); ?>e</p>
                      <?php endif; ?>
                      <p class="detail"><a href="{{ the_permalink() }}"><span class="nav-border"></span><span>detail <i
                        class="fas fa-arrow-right"></i></span></a></p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      @php(wp_reset_postdata())
    @endforeach
  </div>
</div>

Answer 1

我为这样的自定义查询实现了加载更多功能：

创建wp ajax终结点，称为“在加载更多按钮时使用javascript”
端点获取偏移量以加载哪个帖子？例如从11到20，并返回带有渲染帖子的html
Javascript将返回html附加到页面html的适当位置

如何创建端点？以下是创建端点并通过javascript调用它的示例：https://codex.wordpress.org/AJAX_in_Plugins在端点中，您应调用获取这样的帖子：const buffer = new ArrayBuffer(1024); const md5 = require('md5'); // https://www.npmjs.com/package/md5 const hash = md5(buffer); // 441018525208457705bf09a8ee3c1093 const hexString = hash.toString('hex'); console.log(hexString); // not correct，并在参数中传递适当的偏移量，呈现html模板并返回它。

为自定义查询wp

1 个答案: