小编use*_*171的帖子

我正在为我的网站使用预制的wordpress主题.但是,我想制作一个自定义的front-page.php,所以我做了,但现在问题是我无法弄清楚如何添加ajax加载更多按钮.我的主题已经使用了ajax加载更多按钮,所以我认为添加起来很简单.但我想我可能会在错误的位置添加代码,或者让我的疑问搞砸了？

谁能帮我添加这个加载更多按钮？

我的自定义front-page.php

<?php 

    get_header(); 
    get_template_part ('inc/carousel'); 

    $the_query = new WP_Query( [ 
        'posts_per_page' => 13, 
        'paged' => get_query_var('paged', 1) 
    ] ); 

    if ( $the_query->have_posts() ) { ?> 
        <div id="ajax"> 
        <?php 
            $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')); …

On my front page I have my posts set up as 1 post on a row, 2 rows of 2 posts on a row, 1 post on a row, and so on. Then after every 15 posts the load more button appears (example below). The load more button works perfectly, so I am trying to duplicate it on my search page.

I would like to add the same load more button to my search page. However, I have my posts …

我正在为我的网站使用预制主题.我想在我的首页顶部添加一个猫头鹰轮播,显示上个月我网站上最受欢迎的帖子.预制主题已经配有猫头鹰旋转木马.所以我的问题是我现在如何将轮播添加到我的头版？我在插件文件中找到了owl carousel小部件,所以我尝试将小部件添加到我的首页,但我认为我没有添加它,因为没有改变.有没有人对我如何实现这一点有任何建议？

如果需要,这里是我的全部主题文件- 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: …

我的按钮文字会显示在Safari中的一行上（即使在首次点击后也是如此），但是在谷歌浏览器中，当您第一次进入该按钮时，我的按钮会显示在一行上，但是当您浏览更多帖子并再次遇到加载更多按钮时，该文字搞砸了。这仅发生在谷歌浏览器上。

当您第一次进入“加载更多”按钮时。

当您第二次访问更多加载按钮时。

这是我的CSS ...我尝试增加宽度，虽然它解决了按钮然后没有居中的问题

.elm-wrapper {
margin: 1em auto;
text-align: center;
}

.elm-button {
-webkit-transition: all 0.15s ease;
transition: all 0.15s ease;
background-color: #ffffff;
text-shadow: none;
    box-shadow: none;
    border: none;
    padding-top: 45px;
    padding-bottom: 25px;
font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    font-size: 19px;
    color: #848484;
    outline: none;
}

.elm-button.ajax-inactive {
display: none;    
}
.elm-button.is-loading .elm-button-text {
	display: none;
}

.elm-loading-anim {
	display: none;
}

.elm-button.is-loading .elm-loading-anim {
display: block;
}


.elm-loading-icon {
width: 1.5em;
height: 1.5em;
}
.elm-button:not(.is-loading)::before {
            content: "v"; …