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模板文件【转】

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

热门文章

C#图片处理 通常对一幅图片的处理包括:格式变换,缩放(Scale),翻转(Rotate),截取(Clip),滤镜...C#图片处理 作者:Pastore Antonio
1717 浏览量
memcached 处理 多端口:https://blog.csdn.net/Erica_1230/article/deta...memcached处理 作者:Pastore Antonio
1677 浏览量
AssemblyInstaller 的应用 usingSystem;usingSystem.Configuration.Install;us...AssemblyInstaller的应用 作者:Pastore Antonio
1669 浏览量
WordPress上传文件大小限制修改 WordPress上传媒体文件默认大小限制是2M或8M,当文件大于这个限定大小时,是上传不了的。其实...WordPress上传文件大小限制修改 作者:Pastore Antonio
1642 浏览量
Layui开发日记 丰富版table:https://saodiyang.gitee.io/layui-soul-ta...Layui开发日记 作者:Pastore Antonio
1594 浏览量