我目前正在制作自己的Wordpress主题。我想如果在侧边栏上有一个下拉框,你可以在其中选择不同的主题,它会改变页面背景,边框颜色等,这将是很酷的。
问题是,对于一个主题(默认的),我在header.php文件中有Javascript,其中头图像将在每次刷新时更改。我希望这个标题图像在切换样式表时消失,但它只是重叠另一个。我该如何改变这一点?
如果你想自己看,这个框在右边栏的蓝色按钮下面。这是我的测试网站。忽略000webhost的内容。
http://trainman1405.site11.com/wordpress/谢谢!
一般的解决方案是在一个工作表中定义所有的样式,但是命名它们,这样您可以简单地在body
上更改class
,新的样式就会生效。(您也可以使用名称空间在单独的工作表中定义它们,并简单地引用<head>
中的每个工作表。)
例如:
body a { color: #00f; } /* default */
body.green a { color: #090; }
body.red a { color: #f00; }
然后当你想改变它时(使用jQuery,尽管纯Javascript也可以完成这项工作):
$('#theme_select').change(function()
{
$('body').removeClass('green').removeClass('red'); // remove existing classes
$('body').addClass($(this).val());
});
看起来你可以使用一个叫做jquery的javascript库。你可以用它来隐藏和显示新图像,例如
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script type="text/javascript">
function piczotheme() {
$("defualttheme").hide()
$("mountaintheme").hide()
//and then show load add your picture
$('#defualt').css("background-image", "url(url of the picture)");
}
</script>
然后你需要设置一个按钮来触发这个效果
所以…
<button onclick="piczotheme()"> click </button>