给Puma 添加随机banner 图片

Puma 是我开发的一款免费主题,顶部的banner 算是主题特色之一,可以说对于这个主题,一种banner 就是一种心情。我们可以通过技术手段,让主题的banner 不断的变化,可以是随机,也可以是按照日期来显示。

无论是如何显示,要编辑的都是header.php这个文件。找到下面这一行

<header class="site-header u-textAlignCenter">

如果是随机输出,则修改为

<header class="site-header u-textAlignCenter"<?php echo 'style="background-image:url(' . get_template_directory_uri() . '/static/img/' . rand(1,10). '.jpg)"'?>>

注意rand函数是随机数的范围,这个和你的图片数量已经名称对应,比如你有10张,并且命名是1到10,则是1,10,如果是5张,则1,5。图片名也要为数字。

如果是按照日期来输出,则用日期的日和你图片数量求余即可,由于整除的时候求余结果为0,所以你的图片要从0开始命名。

<header class="site-header u-textAlignCenter"<?php echo 'style="background-image:url(' . get_template_directory_uri() . '/static/img/' . data('d') % 10 . '.jpg)"'?>>

图片上传到主题目录下的static/img文件夹下。

以上均为wordpress中的操作。

下面提供一些banner图片供大家选择,已经裁剪为最佳大小,直接另存为上传即可。