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

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

热门文章

修复群晖Synology Drive client右键菜单缺失问题 本教程主要解决windows10右键菜单中没有SynologyDrive菜单的问题,整体思路是找到...修复群晖SynologyDriveclient右键菜单缺失问题 作者:Pastore Antonio
1848 浏览量
docker如何查看一个镜像内部的目录结构及其内部都有哪些文件 前言:有时候我们会在docker上下载一个镜像,或者是上传一个镜像到docker上,甚至有时候就是在...docker如何查看一个镜像内部的目录结构及其内部都有哪些文件 作者:Pastore Antonio
1822 浏览量
Adobe Acrobat Pro 激活 这里记录了一些AdobeAcrobat的激活教程和组件。浏览量:1,705 作者:Pastore Antonio
1550 浏览量
configure: error: Package requirements (oniguruma) were not met configure:error:Packagerequirements(oniguruma)...configure:error:Packagerequirements(oniguruma)werenotmet 作者:Pastore Antonio
1548 浏览量
追寻日出,找回自己 为什么我要去追寻日出?其实我是一个很懒的人,每次都起不来,直到有一次我在租房中睡到了大天亮,阳光照...追寻日出,找回自己 作者:Pastore Antonio
1535 浏览量