Как добавить бесконечный свиток?
Моя главная страница настроена так, что у меня есть цикл из 3 разных строк. В строке 1 у меня есть одно сообщение, а затем в строке 2 и 3 у меня 3 сообщения. Я повторяю этот цикл дважды, так что у меня 14 сообщений. После 14 сообщений я хочу добавить бесконечную прокрутку. Однако вместо того, чтобы включать бесконечную прокрутку с помощью прокрутки, я просто хочу кнопку с надписью "Загрузить больше". Кто-нибудь может помочь мне найти простой способ добавить это?
Вот мой front-page.php
<?php
/*
* Template Name: learningwordpress
*/
get_header();
get_template_part ('inc/carousel');
$i = 0;
$args = array(
'posts_per_page' => 14,
'paged' => 1
);
$the_query = new WP_Query($args);
if ( $the_query->have_posts() ) {
while ( $the_query->have_posts() ) {
if( $i %2 == 1 ) {
$the_query->the_post(); ?>
<article class="post col-md-4">
<?php the_post_thumbnail('medium-thumbnail'); ?>
<h2><a class="post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p class="post-excerpt">
<?php echo get_the_excerpt(); ?>
</p>
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
</article>
<?php $the_query->the_post(); ?>
<article class="post col-md-4">
<?php the_post_thumbnail('medium-thumbnail'); ?>
<h2><a class="post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p class="post-excerpt">
<?php echo get_the_excerpt(); ?>
</p>
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
</article>
<?php $the_query->the_post(); ?>
<article class="post col-md-4">
<?php the_post_thumbnail('medium-thumbnail'); ?>
<h2><a class="post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p class="post-excerpt">
<?php echo get_the_excerpt(); ?>
</p>
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
</article>
<?php $the_query->the_post(); ?>
<article class="post col-md-4">
<?php the_post_thumbnail('medium-thumbnail'); ?>
<h2><a class="post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p class="post-excerpt">
<?php echo get_the_excerpt(); ?>
</p>
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
</article>
<?php $the_query->the_post(); ?>
<article class="post col-md-4">
<?php the_post_thumbnail('medium-thumbnail'); ?>
<h2><a class="post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p class="post-excerpt">
<?php echo get_the_excerpt(); ?>
</p>
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
</article>
<?php $the_query->the_post(); ?>
<article class="post col-md-4">
<?php the_post_thumbnail('medium-thumbnail'); ?>
<h2><a class="post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p class="post-excerpt">
<?php echo get_the_excerpt(); ?>
</p>
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
</article>
<?php
}
else {
$the_query->the_post(); ?>
<article class="post col-md-12">
<?php the_post_thumbnail('large-thumbnail'); ?>
<h2><a class="post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p class="post-excerpt">
<?php echo get_the_excerpt(); ?>
</p>
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
</article>
<?php
}
?>
<?php
$i++;
}
}
else {
echo '<p>Sorry, no posts matched your criteria.</p>';
}
get_footer();
И functions.php
<?php
define( 'WP_DEBUG', true );
function learningWordPress_resources() {
wp_enqueue_style('style', get_stylesheet_uri());
wp_enqueue_script( 'bootstrap-js', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css', array('jquery'), '3.3.7', true );
wp_enqueue_style( 'bootstrap-style', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );
}
add_action('wp_enqueue_scripts', 'learningWordPress_resources');
//Navigation Menus
register_nav_menus(array(
'primary' => __('Primary Menu'),
'footer' => __( 'Footer Menu'),
));
class CSS_Menu_Walker extends Walker {
var $db_fields = array('parent' => 'menu_item_parent', 'id' => 'db_id');
function start_lvl(&$output, $depth = 0, $args = array()) {
$indent = str_repeat("\t", $depth);
$output .= "\n$indent<ul>\n";
}
function end_lvl(&$output, $depth = 0, $args = array()) {
$indent = str_repeat("\t", $depth);
$output .= "$indent</ul>\n";
}
function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {
global $wp_query;
$indent = ($depth) ? str_repeat("\t", $depth) : '';
$class_names = $value = '';
$classes = empty($item->classes) ? array() : (array) $item->classes;
/* Add active class */
if (in_array('current-menu-item', $classes)) {
$classes[] = 'active';
unset($classes['current-menu-item']);
}
/* Check for children */
$children = get_posts(array('post_type' => 'nav_menu_item', 'nopaging' => true, 'numberposts' => 1, 'meta_key' => '_menu_item_menu_item_parent', 'meta_value' => $item->ID));
if (!empty($children)) {
$classes[] = 'has-sub';
}
$class_names = join(' ', apply_filters('nav_menu_css_class', array_filter($classes), $item, $args));
$class_names = $class_names ? ' class="' . esc_attr($class_names) . '"' : '';
$id = apply_filters('nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args);
$id = $id ? ' id="' . esc_attr($id) . '"' : '';
$output .= $indent . '<li' . $id . $value . $class_names .'>';
$attributes = ! empty($item->attr_title) ? ' title="' . esc_attr($item->attr_title) .'"' : '';
$attributes .= ! empty($item->target) ? ' target="' . esc_attr($item->target ) .'"' : '';
$attributes .= ! empty($item->xfn) ? ' rel="' . esc_attr($item->xfn ) .'"' : '';
$attributes .= ! empty($item->url) ? ' href="' . esc_attr($item->url ) .'"' : '';
$item_output = $args->before;
$item_output .= '<a'. $attributes .'><span>';
$item_output .= $args->link_before . apply_filters('the_title', $item->title, $item->ID) . $args->link_after;
$item_output .= '</span></a>';
$item_output .= $args->after;
$output .= apply_filters('walker_nav_menu_start_el', $item_output, $item, $depth, $args);
}
function end_el(&$output, $item, $depth = 0, $args = array()) {
$output .= "</li>\n";
}
}
// Add Widget Areas
function ourWidgetsInit() {
register_sidebar( array(
'name' => 'Sidebar',
'id' => 'sidebar1',
'before_widget' => '<div class="widget-item">',
'after_widget' => '</div>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
));
register_sidebar( array(
'name' => 'Footer Area 1',
'id' => 'footer1',
'before_widget' => '<div class="widget-item">',
'after_widget' => '</div>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
));
register_sidebar( array(
'name' => 'Footer Area 2',
'id' => 'footer2',
'before_widget' => '<div class="widget-item">',
'after_widget' => '</div>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
));
register_sidebar( array(
'name' => 'Footer Area 3',
'id' => 'footer3',
'before_widget' => '<div class="widget-item">',
'after_widget' => '</div>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
));
register_sidebar( array(
'name' => 'Footer Area 4',
'id' => 'footer4',
'before_widget' => '<div class="widget-item">',
'after_widget' => '</div>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
));
}
add_action('widgets_init', 'ourWidgetsInit');
// Theme setup
function learningWordpress_setup() {
// Navigation Menus
register_nav_menus(array(
'primary' => __('Primary Menu'),
'footer' => __( 'Footer Menu'),
));
// Add featured image support
add_theme_support('post-thumbnails');
add_image_size('medium-thumbnail', 446, 345, true);
add_image_size('large-thumbnail', 1386, 595, true);
add_image_size('popular-posts', 256, 256, true);
}
add_action('after_setup_theme', 'learningWordpress_setup');
// Carousel
function carousel_scripts() {
wp_enqueue_style( 'owl.carousel', get_template_directory_uri() . '/css/owl.carousel.css' );
wp_enqueue_style( 'owl.theme', get_template_directory_uri() . '/css/owl.theme.css' );
wp_enqueue_script( 'owl.carousel', get_template_directory_uri() . '/js/owl.carousel.js', array('jquery'), '20120206', true );
wp_enqueue_script( 'effects', get_template_directory_uri() . '/js/effects.js', array('jquery'), '20120206', true );
}
add_action( 'wp_enqueue_scripts', 'carousel_scripts' );
// Custom control for carousel category
if (class_exists('WP_Customize_Control')) {
class WP_Customize_Category_Control extends WP_Customize_Control {
public function render_content() {
$dropdown = wp_dropdown_categories(
array(
'name' => '_customize-dropdown-category-' . $this->id,
'echo' => 0,
'show_option_none' => __( '— Select —' ),
'option_none_value' => '0',
'selected' => $this->value(),
)
);
$dropdown = str_replace( '<select', '<select ' . $this->get_link(), $dropdown );
printf(
'<label class="customize-control-select"><span class="customize-control-title">%s</span> %s</label>',
$this->label,
$dropdown
);
}
}
}
// Register slider customizer section
add_action( 'customize_register' , 'carousel_options' );
function carousel_options( $wp_customize ) {
$wp_customize->add_section(
'carousel_section',
array(
'title' => 'Carousel settings',
'priority' => 202,
'capability' => 'edit_theme_options',
)
);
$wp_customize->add_setting(
'carousel_setting',
array(
'default' => '',
)
);
$wp_customize->add_control(
new WP_Customize_category_Control(
$wp_customize,
'carousel_category',
array(
'label' => 'Category',
'settings' => 'carousel_setting',
'section' => 'carousel_section'
)
)
);
$wp_customize->add_setting(
'count_setting',
array(
'default' => '6',
)
);
$wp_customize->add_control(
new WP_Customize_Control(
$wp_customize,
'carousel_count',
array(
'label' => __( 'Number of posts', 'theme_name' ),
'section' => 'carousel_section',
'settings' => 'count_setting',
'type' => 'text',
)
)
);
}
//Comments Continued
if ( get_option ('thread_comments') ) {
wp_enqueue_script('comment-reply');
}
//Comments
function custom_comments ($comment, $args, $depth) {
$GLOBALS['comment'] = $comment; ?>
<li <?php comment_class(); ?> id="li-comment-<?php comment_ID() ?>">
<div id="comment-<?php comment_ID(); ?>">
<header class="comment-author-vcard">
<?php echo get_avatar($comment, $size='48', $default='<path_to_url>' ); ?>
<?php printf (__('<cite_class="fn">%s</cite> <span class="says"> says:</span>'), get_comment_author_link()) ?>
</header>
<?php if ($comment->comment_approved =='0') : ?>
<em><?php _e('Your Comment is Awaiting Moderation.') ?> </em>
<br />
<?php endif ; ?>
<div class="comment-meta commentmetadata"><a href="<?php echo htmlspecialchars( get_comment_link($comment->comment_ID )) ?>"><?php printf(__('%1$s at %2$s'), get_comment_date(), get_comment_time() ) ?></a><?php edit_comment_link(__('(Edit)'), ' ', ' ') ?> </div>
<?php comment_text() ?>
<div class="reply">
<?php comment_reply_link(array_merge($args, array('depth' => $depth, 'max_depth' => $args['max_depth'] ))) ?>
</div>
</div>
<?php
}
// Wordpress
function load_fonts() {
wp_register_style('et-googleFonts', 'https://fonts.googleapis.com/css?family=David+Libre|Crimson+Text|Questrial|Catamaran|Work+Sans:400,500,600,700');
wp_enqueue_style( 'et-googleFonts');
}
add_action('wp_print_styles', 'load_fonts');
// Popular Posts
function wpb_set_post_views($postID) {
$count_key = 'wpb_post_views_count';
$count = get_post_meta($postID, $count_key, true);
if($count==''){
$count = 0;
delete_post_meta($postID, $count_key);
add_post_meta($postID, $count_key, 0);
}else{
$count++;
update_post_meta($postID, $count_key, $count);
}
}
//To keep the count accurate, lets get rid of prefetching
remove_action( 'wp_head', 'adjacent_posts_rel_link_wp_head', 10, 0);
function wpb_track_post_views ($post_id) {
if ( !is_single() ) return;
if ( empty ( $post_id) ) {
global $post;
$post_id = $post->ID;
}
wpb_set_post_views($post_id);
}
add_action( 'wp_head', 'wpb_track_post_views');
1 answers
Это всего лишь один подход.
У вас есть кнопка Загрузить больше, и как только вы нажмете, вы запросите больше сообщений через Ajax.
Сначала вам нужно освоить Ajax в WordPress и вызвать WP_Query с конкретными аргументами, соответствующими вашему случаю.
Как только вы получите результаты с помощью Ajax, вам нужно использовать JavaScript или jQuery, чтобы добавить их на страницу.
Вы можете проверить код реактивного ранца, если вам действительно лень.