Подтвердить что ты не робот

Как добавить карусель совы на главную страницу

Я использую предварительно созданную тему для своего сайта. Я хотел бы добавить карусель совы на верхнюю часть моей первой страницы, на которой отображаются самые популярные сообщения за последний месяц на моем сайте. Предварительно сделанная тема уже поставляется с совой карусели. Итак, мой вопрос: как я могу добавить карусель на свою первую страницу сейчас? Я нашел виджет совой карусели в файле плагинов, поэтому я попробовал добавить виджет на свою первую страницу, но я не думаю, что добавил его правильно, потому что ничего не изменилось. Есть ли у кого-нибудь предложения о том, как я мог бы это достичь?

вот мои полные файлы темы при необходимости - https://www.dropbox.com/s/624p2sdn2i0jsqf/novablogshare.zip?dl=0

мой пользовательский front-page.php

<?php

get_header(); 
the_widget("owl_Widget"); //trying to call the owl carousel widget but it is not working

?>


<script>
    var now=2; // when click start in page 2

    jQuery(document).on('click', '#load_more_btn', function () {

        jQuery.ajax({
            type: "POST",
            url: "<?php echo get_site_url(); ?>/wp-admin/admin-ajax.php",
            data: {
                action: 'my_load_more_function', // the name of the function in functions.php
                paged: now, // set the page to get the ajax request
                posts_per_page: 15  //number of post to get (use 1 for testing)
            },
            success: function (data) {

            if(data!=0){
                jQuery("#ajax").append(data);  // put the content into ajax container
                now=now+1; // add 1 to next page
            }else{
                jQuery("#load_more_btn").hide();
            }
            },
            error: function (errorThrown) {
                alert(errorThrown); // only for debuggin
            }
        });
    });
</script>

<section id="ajax"><!-- i have to change div to section, maybe a extra div declare -->
<?php

$the_query = new WP_Query( [
    'posts_per_page' => 15, // i use 1 for testing
        'orderby' => 'post_date',
'order' => 'DESC',
    'paged' => get_query_var('paged', 1) //page number 1 on load
] );

if ($the_query->have_posts()) {

        $i = 0;
        $j = 0;
        while ($the_query->have_posts()) {
            $the_query->the_post();

            if ( $i % 5 === 0 ) { // Large post: on the first iteration and every 7th post after... ?>
                <div class="row">
                    <article <?php post_class( 'col-sm-12 col-md-12' ); ?>>
                        <div class="large-front-container">
                            <?php the_post_thumbnail('full', array('class' => 'large-front-thumbnail')); ?>
                        </div>
                        <div class="front-page-date"><?php echo str_replace('mins', 'minutes', human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'); ?></div>
                        <div class="front-page-post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div>
                        <p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p>
                        <div class="front-page-post-info">
                            <a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
                            <?php get_template_part( 'includes/front-shop-the-post' ); ?>
                            <?php get_template_part( 'includes/share-buttons' ); ?>
                            <div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>
                        </div>
                    </article>
                </div>
            <?php } else { // Small posts ?>
                <?php if($j % 2 === 0){ echo '<div class="row">';} ?>
                <article <?php post_class( 'col-sm-6 col-md-6' ); ?>>
                    <div class="two-front-container">
                    <?php the_post_thumbnail('full', array('class' => 'medium-front-thumbnail')); ?>
                        <div>
                    <div class="front-page-date"><?php echo human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'; ?></div>
                    <div class="front-page-post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div>
                    <p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p>
                    <div class="front-page-post-info">
                        <a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
                        <?php get_template_part( 'includes/front-shop-the-post' ); ?>
                        <?php get_template_part( 'includes/share-buttons' ); ?>
                        <div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>
                    </div>
                </article>
                <?php $j++; if($j % 2 === 0){ echo '</div>';}?>
                <?php
            }
            $i++;
        }?>
    <?php
}?>
</section>

<button id="load_more_btn">Load More Posts</button> <!-- button out of ajax container for load content and button displayed at the bottom -->
<?php
get_footer();
4b9b3361

ОТВЕТЫ

Ответ 1

@user6738171 Я считаю, что вам не нужно the_widget("owl_Widget"); Просто создайте html, который вы хотите показать (используя php), а затем вызовите карусель с помощью JQuery следующим образом:

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

    $(".homepage-slides").owlCarousel({
        items: 1,
        nav: true,
        dots: false,
        autoplay: true,
        loop: true
    });

});

Прочитайте документацию для правильной структуры элементов карусели https://github.com/OwlCarousel2/OwlCarousel2. Если вам нужна помощь в строительстве карусели, дайте мне знать.: -)

Ответ 2

Что-то вроде этого:

<?php
?>
<div class="homepage-slides">
    <div>
        <?php the_post_thumbnail('thumbnail', array('class' => 'thumbnail')); ?>
        <?php the_title(); ?>
        <?php the_excerpt(); ?>
    </div>
</div>

<?php

И jquery сверху. Конечно, внутри цикла

Ответ 3

Попробуйте этот код, он прокручивается через сообщения с предоставленным пользовательским запросом и выставляет их соответствующим образом. Единственное, что вам нужно сделать, это рассчитать, сколько сообщений вы хотите показать и отредактировать количество каруселей.

<?php
    $month = date('m'); 
    $year = date('Y'); 
    $new_query = new WP_Query( array('posts_per_page' => $carousel_count, 'meta_key' => 'wpb_post_views_count', 'orderby' => 'meta_value_num', 'order' => 'DESC','monthnum'=>$month,'year'=>$year )); 
?>
<?php if ( $new_query->have_posts() ) : ?> 
<div class="homepage-slides">
    <?php while ( $new_query->have_posts() ) : $new_query->the_post(); ?>
         <div>
            <?php the_post_thumbnail('thumbnail', array('class' => 'thumbnail')); ?>
            <?php the_title(); ?>
            <?php the_excerpt(); ?>
         </div>
    <?php endwhile; wp_reset_postdata(); ?>
</div> 
<?php else : ?> 
    <p><?php _e(); ?></p> 
<?php endif; ?>


<script>
    jQuery(document).ready(function($){

        $(".homepage-slides").owlCarousel({
            items: 4,
            nav: true,
            dots: false,
            autoplay: true,
            loop: true
        });
    });
</script>