使用 CSS 为 Wordpress 中每个刷新/页面的新徽标图像答案

【问题标题】：New logo image for each refresh/page in Wordpress using CSS使用 CSS 为 Wordpress 中每个刷新/页面的新徽标图像
【发布时间】：2015-07-28 08:29:24
【问题描述】：

我有 5 张不同的徽标图片，尺寸相同，只是颜色不同。我希望每次有人访问该网站并且页面重新加载时旋转图像，以便他们看到不同的颜色。

有没有办法用 CSS 做到这一点？

谢谢！

【问题讨论】：

感谢@Michael Jones 的回答。那么我将在哪里插入 php 代码？进入主题的文件之一？我更喜欢 CSS，因为我可以轻松地将它添加到它们中，而不必担心在更新内容时会丢失代码。
谢谢@essmahr 的回答。我和迈克尔有同样的问题。我将在哪里插入 javascript 代码？进入主题的文件之一？如果我更新主题，我会丢失自定义编辑吗？

标签： css wordpress image

【解决方案1】：

嗯，我有一个简单的想法可以做到这一点。基本上，生成一个随机数，然后根据数字显示一个图像。因此每次页面加载时，都会有一个新的 RANDOM 图片。

下面是一段代码示例：

<?php
$imagenum = rand(1,10);
if (($imagenum = 1) or ($imagenum = 2)) {
    //Display Image #1 Here
    echo "<img src=''>";
}
elseif (($imagenum = 3) or ($imagenum = 4)) {
    //Display Image #2 Here
    echo "<img src=''>";
}
elseif (($imagenum = 5) or ($imagenum = 6)) {
    //Display Image #3 Here
    echo "<img src=''>";
}
elseif (($imagenum = 7) or ($imagenum = 8)) {
    //Display Image #4 Here
    echo "<img src=''>";
}
else {
    //Display Image #5 Here
    echo "<img src=''>";
}

这样，用户获得的图像总是是随机的。

编辑

你问是否有办法在 CSS 中做到这一点。答案是否定的，CSS 无法做到这一点。 CSS 不是动态的原因，它也照你说的做，而且它不能思考（据说）。

【讨论】：

【解决方案2】：

来点 Javascript 怎么样？

function updateImgSrc() {
  var img = document.getElementById('my-logo');
  var rand = Math.round(Math.random()*5) + 1;
  img.src = img.src.slice(-5, img.src.length) + rand + ".jpg";

}

$(document).ready(function(){
  updateImgSrc();
});

...这意味着如果您有一个 id 为 #my-logo 的图像，则在每次加载页面时，它将更新图像路径以在末尾包含一个介于 1 和 5 之间的不同（随机）数字文件名。如果您适当地命名您的徽标（logo-variation-1.jpg、logo-variation-2.jpg 等），您将在每次页面加载时获得不同的图像。

如果你的 logo 包含一个 CSS 背景图片，你可以很容易地让 javascript 为元素添加一个类，然后从你的样式表中拉入一个合适的图片：

function updateImgClass() {
  var imgElement = $('my-logo');
  var rand = Math.round(Math.random()*5) + 1;
  imgElement.addClass('logo-' + rand);

}

$(document).ready(function(){
  updateImgClass();
});

css:

#my-logo.logo-1 {
  background-image: url('path-to/image-here.jpg')
}

#my-logo.logo-2 {
  background-image: url('path-to/image-here2.jpg')
}

.. et cetera

【讨论】：