Как добавить бесконечный свиток?


Моя главная страница настроена так, что у меня есть цикл из 3 разных строк. В строке 1 у меня есть одно сообщение, а затем в строке 2 и 3 у меня 3 сообщения. Я повторяю этот цикл дважды, так что у меня 14 сообщений. После 14 сообщений я хочу добавить бесконечную прокрутку. Однако вместо того, чтобы включать бесконечную прокрутку с помощью прокрутки, я просто хочу кнопку с надписью "Загрузить больше". Кто-нибудь может помочь мне найти простой способ добавить это?

Пример того, чего я хочу enter image description here

Вот мой 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'  => __( '&mdash; Select &mdash;' ),
                    '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');
Author: prosti, 2016-10-14

1 answers

Это всего лишь один подход.

У вас есть кнопка Загрузить больше, и как только вы нажмете, вы запросите больше сообщений через Ajax.

Сначала вам нужно освоить Ajax в WordPress и вызвать WP_Query с конкретными аргументами, соответствующими вашему случаю.

Как только вы получите результаты с помощью Ajax, вам нужно использовать JavaScript или jQuery, чтобы добавить их на страницу.

Вы можете проверить код реактивного ранца, если вам действительно лень.

 1
Author: prosti, 2016-10-14 20:28:11