最佳答案

要为WordPress首页添加一个加载更多功能，你可以按照以下步骤进行操作。

1. 在主题文件中打开functions.php文件：进入WordPress后台，依次点击"外观" -> "主题编辑"，然后在右侧选择functions.php文件。

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

```php

function load_more_scripts() {

global $wp_query;

wp_enqueue_script('jquery');

wp_register_script('loadmore', get_stylesheet_directory_uri().'/js/loadmore.js', array('jquery'));

wp_localize_script('loadmore', 'loadmore_params', array(

'ajaxurl' => site_url() . '/wp-admin/admin-ajax.php',

'posts' => json_encode($wp_query->query_vars),

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

'max_page' => $wp_query->max_num_pages

));

wp_enqueue_script('loadmore');

}

add_action('wp_enqueue_scripts', 'load_more_scripts');

function load_more_posts() {

$args = json_decode(stripslashes($_POST['query']), true);

$args['paged'] = $_POST['page'] + 1;

$args['post_status'] = 'publish';

query_posts($args);

if(have_posts()):

while(have_posts()): the_post();

get_template_part('content', get_post_format());

endwhile;

endif;

die;

}

add_action('wp_ajax_loadmore', 'load_more_posts');

add_action('wp_ajax_nopriv_loadmore', 'load_more_posts');

3. 创建一个新的JS文件loadmore.js： 在你的主题文件夹下创建一个新的文件夹"js"，然后在该文件夹下添加一个新的JS文件loadmore.js。在该文件中添加以下代码：

```javascript

jQuery(function($){

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

var button = $(this),

data = {

'action': 'loadmore',

'query': loadmore_params.posts,

'page' : loadmore_params.current_page

};

$.ajax({

url : loadmore_params.ajaxurl,

data : data,

type : 'POST',

beforeSend : function ( xhr ) {

button.text('加载中...');

},

success : function( response ) {

if( response ) {

$('#main-content-container').append( response );

button.text( '加载更多' );

loadmore_params.current_page++;

if ( loadmore_params.current_page == loadmore_params.max_page )

button.remove();

} else {

button.remove();

}

}

});

});

});

4. 在你的主题文件中更新首页模板：在你的主题文件中打开首页模板（通常是index.php）并添加以下代码：

加载更多

现在你的WordPress首页应该可以加载更多文章了。每当用户点击“加载更多”按钮时，它将通过Ajax请求加载更多的文章并追加到页面上。记得点击保存按钮保存你的更改，并确保你的主题文件夹中有相应的文件夹和文件。

其他答案

要实现WordPress首页文章加载更多功能，可以考虑使用AJAX技术来动态获取更多文章并将其插入到页面中。

以下是一种实现方式的步骤：

1. 首先，在主题的functions.php文件中添加以下代码，以创建一个新的AJAX处理函数来获取更多文章：

function load_more_posts() {

$paged = $_POST['paged'];

$args = array(

'post_type' => 'post',

'posts_per_page' => 6,

'paged' => $paged

);

$query = new WP_Query($args);

if($query->have_posts()) {

while($query->have_posts()) {

$query->the_post();

// 在这里定义你想要展示的文章内容和格式

}

wp_reset_postdata();

}

die();

}

add_action('wp_ajax_load_more_posts', 'load_more_posts');

add_action('wp_ajax_nopriv_load_more_posts', 'load_more_posts');

2. 在主题的index.php或类似的文件中，添加一个用于展示文章的容器，例如：

<div id="post-container" class="post-container">

<!-- 这里是你的首页文章，初始加载的文章数量 -->

</div>

<div class="load-more-btn-container">

<button id="load-more-btn" class="load-more-btn">加载更多</button>

</div>

3. 接下来，添加以下JavaScript代码到主题的JavaScript文件或在HTML文件中的<script>标签中：

jQuery(document).ready(function($) {

var paged = 2; // 初始加载的文章页码

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

$.ajax({

url: ajaxurl, // 必须使用ajaxurl全局变量

type: 'post',

data: {

action: 'load_more_posts',

paged: paged

},

success: function(response) {

$('#post-container').append(response);

paged++; // 更新页面计数器

}

});

});

});

4. 最后，在主题的functions.php文件中，添加以下代码来加载JS脚本和一个AjaxURL的全局变量：

function enqueue_scripts() {

wp_enqueue_script('custom-js', get_template_directory_uri() . '/js/custom.js', array('jquery'), '1.0', true);

wp_localize_script('custom-js', 'ajaxurl', admin_url('admin-ajax.php'));

}

add_action('wp_enqueue_scripts', 'enqueue_scripts');

以上步骤完成后，刷新你的网页，你将会看到一个“加载更多”按钮。点击该按钮后，将会使用AJAX技术动态加载更多的文章并插入到页面中。请注意，你需要自行编写HTML和CSS代码来展示你想要的文章内容和格式。