所有分类
  • 所有分类
  • WP插件Pro
  • HTML模板
  • 微信小程序模板
  • 源码

WordPress 教程:如何创建无限滚动的 WP 网站

首先只显示基本内容,向下滚动时会添加更多内容。 这对于提高您网站的性能非常有用(红色ucing 加载时间),并改善用户体验(因为加载更多项目不需要任何操作,例如单击按钮)。

在这里,我们将了解为什么以及如何在您自己的网站中使用它

范例无限滚动网站

检查那些大傢伙在做什么总是好的,这种效果(很多次难以察觉)很多大型网站和应用程序,如Facebook(现场直播),Twitter,Pinterest,Feedly。

此技术将删除您网站的常规分页链接(“旧帖子”或帖子后的编号页面)。 这项技术的最大“专业”是加载时间,因为首先加载的项目较少,你可以有一个更快的网站,并且由于更多的项目没有页面重新加载,用户可以向下滚动10“页面”的帖子甚至没有注意,在您的网站停留更长时间。它可以应用于大多数站点,但它更适合于博客或类似投资组合的站点,在这些站点中,您拥有大量内容和图像,并且您不希望用大量内容压倒用户。

本指南不需要 编码 熟练度,老实说,你肯定会学到一点关于如何调整你的 WordPress 主题一点点。

资产

我们会用的 Paul Irish的JS插件。 下载并将其安装在主题的js文件夹中。 我们将使用Twenty Twelve进行学习建议,但可以随意在任何主题中使用它(如果它不适合你,也可以发布问题)。

另外,您还需要一个漂亮的gif图像作为“加载”消息。 您可以在那里找到很多,但是 AjaxLoad 网站有一个非常棒的工具,可以帮助您使用许多预设样式,您可以选择更适合您的配色方案的颜色。

一旦你有了Wp-content / themes / twentytwelve / js下的脚本和漂亮的gif图像,我们就可以开始了!

PHP 代码

好的,不要害怕,我们会给你一个复制和粘贴片段,但这是我们需要做的才能让它工作:

  • 创建一个将在内部加载和注册无限滚动插件的函数–这将防止 WordPress 从加载它两次并破坏主题的功能
  • 仅当您的页面不是单个帖子时才加载脚本-只有要显示多个帖子的页面才需要加载更多项。

功能。php 文件是您主题的核心。 所有功能通常都在那里,或者从其他文件中调用。 因此,我们可以在您的函数文件中添加此代码以添加无限滚动支持(将其添加到文件末尾):

<?php
/*************************
WEB REVENUE INFINITE SCROLLING
*************************/
/*
Function that will register and enqueue the infinite scolling's script to be used in the theme.
*/
function twentytwelve_script_infinite_scrolling(){
    wp_register_script(
        'infinite_scrolling',//name of script
        get_template_directory_uri().'/js/jquery.infinitescroll.min.js',//where the file is
        array('jquery'),//this script requires a jquery script
        null,//don't have a script version number
        true//script will de placed on footer
    );

    if(!is_singular()){ //only when we have more than 1 post
        //we'll load this script
        wp_enqueue_script('infinite_scrolling');        
    }
}


//Register our custom scripts!
add_action('wp_enqueue_scripts', 'twentytwelve_script_infinite_scrolling');

/*
Function that will set infinite scrolling to be displayed in the page.
*/
function set_infinite_scrolling(){

    if(!is_singular()){//again, only when we have more than 1 post
    //add js script below
    ?>    
        <script type="text/javascript">            
            /*
                This is the inifinite scrolling setting, you can modify this at your will
            */
            var inf_scrolling = {                
                /*
                    img: is the loading image path, add a nice gif loading icon there                    
                    msgText: the loading message                
                    finishedMsg: the finished loading message
                */
                loading:{
                    img: "<? echo get_template_directory_uri(); ?>/images/ajax-loading.gif",
                    msgText: "Loading next posts....",
                    finishedMsg: "Posts loaded!!",
                },

                /*Next item is set nextSelector. 
                NextSelector is the css class of page navigation.
                In our case is #nav-below .nav-previous a
                */
                "nextSelector":"#nav-below .nav-previous a",

                //navSelector is a css id of page navigation
                "navSelector":"#nav-below",

                //itemSelector is the div where post is displayed
                "itemSelector":"article",

                //contentSelector is the div where page content (posts) is displayed
                "contentSelector":"#content"
            };

            /*
                Last thing to do is configure contentSelector to infinite scroll,
                with a function jquery from infinite-scroll.min.js
            */
            jQuery(inf_scrolling.contentSelector).infinitescroll(inf_scrolling);
        </script>        
    <?
    }
}

/*
    we need to add this action on page's footer.
    100 is a priority number that correpond a later execution.
*/
add_action( 'wp_footer', 'set_infinite_scrolling',100 );
?>

替代方法 – 加载页面和自定义帖子类型

之前的代码将加载您的所有帖子,但如果您想要显示页面或自定义帖子类型(如投资组合项目,如果您的主题支持它)会怎样?好吧,我们可以稍微修改一下代码并使其正常工作。

唯一需要的调整是在索引,类别或任何其他将加载项目的文件中,您将用不同的代码替换当前循环。 您可以通过以下代码识别您的循环:

while(have_posts()) :

所以,一旦你找到它,你可以使用这个神奇的代码:

<?php         
/* 在無限滾動時只顯示頁面! 這是秘密:您可以根據需要設置 post_type ,這很簡單! 一些 post_types 可能是:portfolio, project, product 我們可以添加任意數量的帖子類型,用逗號分隔它們,例如 'post', 'page', 'product' */ $args = array( // 設置參數'post_type' => 'page', // 只有頁面 ); 查詢帖子($args); // 加載帖子 if ( have_posts() ) : ?> <?php /* 開始循環 */ ?> <?php 而(有_posts()):the_post(); //顯示這些項目的“通常”循環代碼?>

結論

这只是一篇“热身”文章。 你可以用这种方法做很多事情。 例如,您可以在商店中加载产品(使用 WooCommerce,也许)当用户滚动时,或者甚至在那里添加更多的 JS 和 CSS 代码来为帖子图像创建和类似视差的加载器。

你怎么看待这种技术?你喜欢它吗?你会用吗?使用评论部分分享您的想法!

原文链接:https://www.itaoda.cn/blog/3270.html,转载请注明出处。

0
使用和安装有任何问题
请加客服QQ:1442071397 或wechat:pufei889


免责声明

本站所发布的部分内容自网络,该部分内容限用于学习和研究目,有版权问题的,下载后的24个小时之内,从您的电脑中彻底删除。且不得将用于商业或者非法用途,否则,一切后果请用户自负,与本站无关。

评论0

请先
没有账号?注册  忘记密码?

社交账号快速登录

温性提示

演示站服务器在国外,网站打开速度有点慢,请耐心等待

多功能、多行业外贸商城 wordpress商城WOOCOMMERCE

23+
行业模板