如何在没有插件的 WordPress 中添加 Sticky Post Slider
如果您是 WordPress 新手并且正在建立您的第一个专业网站，那么您肯定会想阅读这篇文章。 这篇文章是关于如何在没有插件的情况下设置粘性帖子滑块的。
当然，您或任何人肯定会问的第一件事是我们为什么要费心手动完成，因为我们可以使用插件来做同样的事情。
好吧，大多数插件在大多数情况下都可以无缝运行，但是由于它们中的大多数都是第三方插件，所以你不能一直完全依赖它们。
手动完成总是个好主意，但问题是您需要精通 HTML、CSS3、PHP 等。如果您擅长编码，那么您绝对可以设置自己的粘性帖子滑块，一个展示你的贴子完美。
只需按照下面发布的说明进行操作，您就应该能够立即启动并运行您的粘性帖子滑块。
请记住，当您更新 WordPress 时，您合并的任何更改都可能会丢失，因此请务必在执行更改时保存更改。
您可能想要选择粘性帖子滑块而不是粘性帖子的原因之一是 WordPress 上的当前版本过多地关注最新帖子。
这就是为什么将您的粘性帖子作为滑块而不是使用当前版本是一个好主意的原因，这样做可以让您的用户更容易从标记的帖子中查看您网站上的各种帖子附上最新的贴子。
视频教程
在没有插件的 WordPress 中添加 Sticky Post Slider 的步骤
MooTools 和 noobSlide
为了这篇文章的目的，我主要使用 noobslide，但下面列出的代码也可以与其他滑块一起使用。
由于我们将使用 noobslide，因此您需要包含 MetoolsJavascript 库。 只需移动到模板中的 functions.php 文件并添加您在下面看到的代码，就是这样。
|
1 2 3 4 5 6 7 8 9 10 11 |
function register_custom_js() { wp_register_script( 'mootools', 'http://ajax.googleapis.com/ajax/libs/mootools/1.3.0/mootools-yui-compressed.js', '1.3.0' ); wp_register_script( 'noobslide', get_bloginfo('template_directory') . '/_class.noobSlide.packed.js' , array( 'mootools' ) ); } add_action( 'init', 'register_custom_js' ); function enqueue_noobslide() { if ( is_home() ) { // our slider only appear in the home page, so load the script only in home page wp_enqueue_script( 'noobslide' ); } } add_action( 'wp_print_scripts', 'enqueue_noobslide' ); |
缩略图
而且由于我们将使用帖子缩略图，如果主题不同，您可能希望将其添加到主题中。 只需按照下面列出的代码就可以了。
|
1 2 3 4 |
function custom_theme_setup() { add_theme_support( 'post_thumbnails' ); } add_action( 'after_setup_theme', 'custom_theme_setup' ); |
自定义阅读更多链接
诚然，您的 WordPress 网站已经带有一个不错的“阅读更多”链接，但它陈旧且过度使用，因此您可能需要考虑设置自己的自定义“阅读更多”CTA。
这应该会为您的网站带来更多的吸引力和更多的点击率。 只需按照下面列出的代码。 您需要做的第一件事是转到functions.php 文件并从中摘录这一行。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
//add_filter( 'get_the_excerpt', 'twentyten_custom_excerpt_more' ); Now, you need to add the following codes in its place to create your own custom read more ‘link’. function custom_excerpt_with_more( $excerpt ) { if ( has_excerpt() &amp;&amp; ! is_attachment() ) { global $post; return $excerpt . '<p class="slider-more"><a>ID ) . '"&gt;Continue reading</a></p>'; } return $excerpt; } add_filter( 'get_the_excerpt', 'custom_excerpt_with_more' ); function custom_excerpt_more( $more ) { global $post; return '<p class="slider-more"><a>ID ) . '"&gt;Continue reading</a></p>'; } add_filter( 'excerpt_more', 'custom_excerpt_more' ); |
请记住，custom_excerpt_with_more() 函数适用于那些被认为是自动或用户指定的带有阅读更多标签的摘录。
CSS 和 JavaScript
现在我们来到了最重要的部分，我们将 CSS 和 Javascript 添加到 functions.php 页面； 如果您希望粘性帖子滑块启动并运行，此步骤是必不可少的。 只需按照下面列出的代码复制，粘贴到您的functions.php文件中。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
function custom_slider_css_js() { if ( is_home() ) { // only in home page #slider{border:1px solid #ccc;width:640px;position:relative;overflow:hidden;height:213px;margin-bottom:20px;} #mask{position:absolute;height:213px;} .items{float:left;height:213px;width:640px;position:relative;} .items .wp-post-image {float:left;} .info{width:320px;float:left;font-family:Arial, Helvetica, sans-serif;} #content .info h2{font-size:20px;font-weight:bold;color:#1c3f95;margin:10px 10px 15px 10px;} #content .info p{font-size:11px;color:#1c3f95;line-height:16px;margin:10px;} .info a{font-size:10px;padding:5px 7px;background:#e1e1e1;text-decoration:none;text-transform:uppercase;font-weight:bold;color:#1c3f95;} .info a:hover{color:#ffffff;background:#1c3f95;} #slider .handle{position:absolute;bottom:0;right:5px;line-height:10px;text-align:center;font-size:25px;font-weight:bold;} .handle a{color:#ccc;height:20px;width:20px;display:inline-block;cursor:pointer;} .handle .active{color:#1c3f95;} .handle a:hover{color:#1c9f65;} /**/ } } add_action(&#039;wp_head&#039;, &#039;custom_slider_css_js&#039; ); |
WordPress主题修改
现在，我们可以修改 WordPress 的主题以包含滑块的代码。 我们需要转到循环文件，或者在本例中，是标记为 loop.php 的文件。
找到主题的文件，一旦找到相同的文件，将光标放在循环区域的正上方并输入滑块的代码，如下所示。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
$sticky ) ); have_posts()): $count = 0; ?&gt; <div id="slider"> <div id="mask"> have_posts() ): $slider-&gt;the_post(); $count++; ?&gt; <div class="items"> <div class="info"> <h2></h2> </div> </div> </div> <div class="handle"> 0; $count--): <a>&bull;</a> </div> </div> |
现在，我们几乎完成了——您需要做的就是检查您的网站，看看您的粘性帖子滑块是否已启动并运行。
如果您想进行额外的更改，您可以轻松地进行 - 您需要做的就是输入所需的代码，就可以了。 我们还需要做一件事，那就是摆脱常规的粘性帖子。
设置粘性帖子滑块背后的整个想法是，它不会分散您网站上列出的最新帖子的注意力。
这正是我们需要立即删除旧变体的原因，只需按照下面列出的代码进行操作即可。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
$sticky ) ); have_posts()): $count = 0; ?&gt; <div id="slider"> <div id="mask"> have_posts() ): $slider-&gt;the_post(); $count++; ?&gt; <div class="items"> <div class="info"> <h2></h2> </div> </div> </div> <div class="handle"> 0; $count--): ?&gt; <a>&bull;</a> </div> </div> query, array( 'post__not_in' =&gt; $sticky ) ); query_posts( $args ); |
现在，您应该可以在 WordPress 中享受功能齐全的 Sticky post 滑块了； 有了这个滑块，您的主页应该看起来不那么混乱，并且出于所有正确的原因肯定会脱颖而出。
请记住，您也可以对其他主题和滑块进行类似的更改。 由于这个滑块，您应该能够获得比以往更多的在线牵引力，这反过来应该会带来更多的流量和更好的 SEO。
1. 带 [亲测] 说明源码已经被站长亲测过!
2. 下载后的源码请在24小时内删除,仅供学习用途！
3. 分享目的仅供大家学习和交流，请不要用于商业用途！
4. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
5. 本站所有资源来源于站长上传和网络，如有侵权请邮件联系站长！
6. 没带 [亲测] 代表站长时间紧促,站长会保持每天更新 [亲测] 源码 !
7. 盗版ripro用户购买ripro美化无担保,若设置不成功/不生效我们不支持退款!
8. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
9. 如果你也有好源码或者教程，可以到审核区发布，分享有金币奖励和额外收入!
10.如果您购买了某个产品，而我们还没来得及更新，请联系站长或留言催更，谢谢理解 !
GG资源网 » 如何在没有插件的 WordPress 中添加 Sticky Post Slider
