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

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

热门文章

Windows Server IIS+ARR反向代理(配置反向代理服务器) 1.概念说明:反向代理反向代理服务器位于用户与目标服务器之间,但是对于用户而言,反向代理服务器就相...WindowsServerIIS+ARR反向代理(配置反向代理服务器) 作者:Pastore Antonio
1618 浏览量
ffmpeg 生成水印 1:先要配置ffmpeg的滤镜:参考:https://www.jianshu.com/p/9d24...ffmpeg生成水印 作者:Pastore Antonio
1527 浏览量
Navicat Premium 12.0.22 安装与破解 一、安装  NavicatPremium12.0.22的下载链接:https://pan.ba...NavicatPremium12.0.22安装与破解 作者:Pastore Antonio
1472 浏览量
谷歌浏览器扩展程序报错 The message port closed before a response was received. 问题描述ChromeExtension报错:Uncheckedruntime.lastEr...谷歌浏览器扩展程序报错Themessageportclosedbeforearesponsewasreceived. 作者:Pastore Antonio
1463 浏览量
天地光阴,唯深情可依 如果光阴把一切席卷而去,最后剩下的,一定是一抹幽兰。如果爱情把一切席卷而去,最后留下的,也定是带着蓝色记忆的最初的心动。 作者:Pastore Antonio
1460 浏览量