Logo

wp/wordpress将参数传递给get_template_part()模板:动态添加带序号的class名字

photo

2024年04月19日

今天想实现一个动态列表class的功能:从列表的第一个开始,添加class为div0,第二个列表的class名为div1,第三个列表的div的class名字为div2……效果如下图:

这样的需求在wp开发的时候怎么实现呢?我们知道wp/wordpress有一个主循环,我们在主循环中调用一个变量,然后循环结束前将这个变量自动加1,就能实现,原理很简单,看看下面怎么实现的:

<?php
$i = 0;
 // 主循环
 if ( have_posts() ) : while ( have_posts() ) : the_post();
?> 
<li class="list-animation-leftIn <?php echo 'delay-'.$i; ?>"> 
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><span class="text-h1"><?php the_title(); ?></span><time><?php the_time('Y-m-d') ?></time></a>
</li> 
 <?php
$i++;
endwhile;
 ?> 

按着以上代码就能实现动态添加带序号的class名字。不过七娃在开发过程也遇到另一个问题:我的主循环列表用了模板:get_template_part进行调用,即便php声明了全局变量global,模板内也不能获取到参数,最后发现这个wp模板函数可以传参:

//设置参数
set_query_var('参数名', 值);

//获取参数
get_query_var('参数名');

这样大家就属性了,在主循环内先设置参数$i,然后模板从新获取一下这个参数就可以了:

1.主循环代码:

<?php
$i = 0;//生命参数
 // 主循环
if ( have_posts() ) : while ( have_posts() ) : the_post();
set_query_var('i', $i);//设置参数
get_template_part( 'tool/loop' ); //调用模板
$i++;//参数自动加+
endwhile; ?> 

2.模板内代码:

<?php  
$i = get_query_var('i');//获取参数
<?php } ?>
<li class="list-animation-leftIn <?php echo 'delay-'.$i; ?>"> 
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><span class="text-h1"><?php the_title(); ?></span><time><?php the_time('Y-m-d') ?></time></a>
</li>  
版权声明:原创作品,允许转载,转载时请务必以超链接形式标明文章
原始出处 、作者信息和本声明。否则将追究法律责任。

橙子主题打折出售

其实我不卖,主要是这里是放广告的,所以就放了一个
毕竟主题都没做完,卖了也是坑.

购买它
所有附件
本文为原创文章,请注意保留出处!

在WordPress中如何按你的意愿显示页面,关键看你是否了解WordPress主题模板页面。这里...剖析WordPress模板文件【转】

新增了主题的小工具模块,可自由使用主题提供的小工具配置侧边栏,如下:在后台可以随意配置:现在还有...开发日记:侧边栏的开发

热门文章

WordPress 后台编辑器样式实现直接预览 在WordPress3.0以后,有一个新的实用功能:你可以更改默认后台编辑器(TinyMCE)的样...WordPress后台编辑器样式实现直接预览 作者:Pastore Antonio
1533 浏览量
【干货】Chrome插件(扩展)开发全攻略 写在前面我花了将近一个多月的时间断断续续写下这篇博文,并精心写下完整demo,写博客的辛苦大家懂的...【干货】Chrome插件(扩展)开发全攻略 作者:Pastore Antonio
1488 浏览量
memcached 处理 多端口:https://blog.csdn.net/Erica_1230/article/deta...memcached处理 作者:Pastore Antonio
1481 浏览量
使用Nginx+WordPress搭建个人网站 背景很多研究技术的朋友喜欢写博客。如果希望搭建一个完全属于自己的网站,也并不困难。这里简要分享一下...使用Nginx+WordPress搭建个人网站 作者:Pastore Antonio
1453 浏览量
C#图片处理 通常对一幅图片的处理包括:格式变换,缩放(Scale),翻转(Rotate),截取(Clip),滤镜...C#图片处理 作者:Pastore Antonio
1446 浏览量