最佳答案

在WordPress中，有两种常见的方式来实现无限滚动和加载更多按钮：使用插件或自定义代码。

方法一：使用插件

1. Jetpack插件：

Jetpack是一个功能强大的插件，其中包含了许多有用的工具和功能，其中包括无限滚动功能。要使用Jetpack插件，您需要先安装并激活它。

安装完成后，转到“Jetpack”选项卡并启用“无限滚动”功能。然后，您可以自定义无限滚动的设置，如滚动时加载的帖子数量、滚动修饰符等。

2. Ajax Load More插件：

Ajax Load More是另一个功能强大的插件，可让您通过Ajax加载和显示更多帖子。您可以自定义按钮的样式、加载的帖子数量、加载更多的文本等。安装并激活Ajax Load More插件后，您将在帖子编辑器的右上方看到“Ajax Load More”按钮，可以使用它来添加加载更多功能。

方法二：自定义代码

如果您更喜欢自定义代码，可以尝试以下步骤：

1. 首先，打开您的WordPress主题文件夹，找到`functions.php`文件。

2. 在`functions.php`文件中添加以下代码段：

```php

function infinite_scroll_js() {

if ( is_home() || is_archive() || is_search() ) {

wp_enqueue_script( 'infinite-scroll', get_template_directory_uri() . '/js/infinite-scroll.js', array( 'jquery' ), '', true );

}

}

add_action( 'wp_enqueue_scripts', 'infinite_scroll_js' );

这段代码将在主题中加载一个名为`infinite-scroll.js`的脚本。

3. 在主题文件夹中创建一个名为`js`的文件夹，并在其中创建一个名为`infinite-scroll.js`的JavaScript文件。

4. 在`infinite-scroll.js`文件中添加以下代码段：

```javascript

(function($) {

var canBeLoaded = true, // 是否可以加载

bottomOffset = 2000, // 距离底部多少像素时加载

page = 2, // 默认页数为2，用于加载更多

loadMoreBtn = $('#load-more-btn'), // 加载更多按钮的ID或类

loadingMessage = $('#loading-message'); // 加载中的提示信息的ID或类

function loadPosts() {

if( canBeLoaded ) {

canBeLoaded = false;

loadingMessage.show();

$.ajax({

url: ajaxurl, // AJAX请求的URL

type: 'POST',

data: {

'action': 'load_more_posts', // 自定义的AJAX处理函数

'page': page

},

success: function( data ) {

if( data ) {

$('.posts-container').append( data ); // 显示加载的帖子

canBeLoaded = true;

page++;

}

loadingMessage.hide();

}

});

}

}

$(window).scroll(function() {

if( $(document).scrollTop() > ( $(document).height() - bottomOffset - $(window).height() ) ) {

loadPosts();

}

});

loadMoreBtn.on('click', function(e) {

e.preventDefault();

loadPosts();

});

})(jQuery);

这段代码通过Ajax加载和显示更多的帖子。您可以根据需要进行自定义，如按钮选择器、滚动到底部后加载的方式等。

5. 保存并重新加载您的网站，无限滚动和加载更多按钮功能就应该可以正常使用了。

无论您选择使用插件还是自定义代码，确保备份您的网站，并测试所有功能以确保它们与您的主题和其他插件兼容。

其他答案

在 WordPress 中，实现无限滚动和加载更多按钮功能是可以通过使用插件或手动代码来完成的。下面介绍两种常见的实现方式。

方式一：使用无限滚动插件

1. 登录到 WordPress 后台，点击左侧菜单的“插件”选项，然后点击“添加新插件”。

2. 在搜索框中输入“Infinite Scroll”，然后点击“搜索插件”按钮。

3. 找到并点击“Infinite Scroll”插件，然后点击“安装”。

4. 安装完成后，点击“激活”按钮启用插件。

5. 设置插件参数。在 WordPress 后台的“设置”菜单中，找到并点击“Infinite Scroll”选项。

- 选择要应用无限滚动功能的页面类型，例如文章列表、搜索结果或分类页面等。

- 根据主题需要，设置滚动时加载新内容的触发条件，例如滚动到页面底部、点击按钮或滚动到指定元素等。

- 根据主题需要，设置新内容的加载方式，例如直接在当前页面加载、替换主要内容或追加到当前内容之后。

- 其他可选的设置项包括加载动画、加载更多按钮等，根据需要进行设置。

6. 点击“保存更改”按钮保存设置。

方式二：手动添加加载更多按钮

1. 打开你所使用的 WordPress 主题的主题文件。

2. 在需要添加无限滚动或加载更多按钮的页面（例如文章列表、搜索结果或分类页面）中，找到需要替换的代码部分，通常是文章循环的代码。

- 如果你不确定代码所在位置，可以在 WordPress 后台的“外观”菜单下点击“编辑”选项来找到对应的文件。

3. 将原来的循环代码替换为新的代码段。以下是示例代码：

```php

$args = array(

'post_type' => 'post',

'post_status' => 'publish',

'posts_per_page' => 10,

'paged' => (get_query_var('paged')) ? get_query_var('paged') : 1

);

$query = new WP_Query($args);

if ($query->have_posts()) :

while ($query->have_posts()) : $query->the_post();

// 显示文章内容

endwhile;

endif;

wp_reset_postdata();

4. 在需要添加加载更多按钮的位置加入如下代码：

加载更多

5. 在你的主题的 `functions.php` 文件中添加以下 JavaScript 代码：

```javascript

jQuery(function($){

var page = 2;

$('#load-more-button').on('click', function() {

var data = {

'action': 'load_more_posts',

'page': page,

'security': '<?php echo wp_create_nonce("load_more_posts"); ?>'

};

$.post('<?php echo admin_url("admin-ajax.php"); ?>', data, function(response) {

$('.load-more-container').before(response);

page++;

});

});

});

6. 添加 AJAX 功能。在你的主题的 `functions.php` 文件中添加以下 PHP 代码：

```php

function load_more_posts() {

check_ajax_referer('load_more_posts');

$page = $_POST['page'];

$args = array(

'post_type' => 'post',

'post_status' => 'publish',

'posts_per_page' => 10,

'paged' => $page

);

$query = new WP_Query($args);

if ($query->have_posts()) :

while ($query->have_posts()) : $query->the_post();

// 显示文章内容

endwhile;

endif;

wp_reset_postdata();

wp_die();

}

add_action('wp_ajax_load_more_posts', 'load_more_posts');

add_action('wp_ajax_nopriv_load_more_posts', 'load_more_posts');

7. 保存并上传你的修改后的主题文件。

通过以上两种方式之一，你可以在 WordPress 中实现无限滚动和加载更多按钮的功能。根据你的具体需求和技术水平，你可以选择使用插件或手动代码实现。选择适合你的方式，让你的网站更加友好和高效。