HI,欢迎来到我爱模板网!

如何让WordPress快速切换主题,再加入一个样式表

今天我来给大家分享一个教程,一个主题使用多个样式表,并可以在页面上快速切换,你可能已经见过了这样的主题,如果你还不明白它有什么用处。那么你可以看看下面几个例子。 通过点击页面右上角落上不同颜色的小图,就可以改变主题的配色。 例如这两个主题:Xplosive Reloaded | Wpdesigner7在绝大多数的情况下...

今天我来给大家分享一个教程,一个主题使用多个样式表,并可以在页面上快速切换,你可能已经见过了这样的主题,如果你还不明白它有什么用处。那么你可以看看下面几个例子。

通过点击页面右上角落上不同颜色的小图,就可以改变主题的配色。

例如这两个主题:Xplosive Reloaded | Wpdesigner7

在绝大多数的情况下,每一个WordPress主题有一个style.css文件,你可以查看一下自己目前用的主题文件目录下是否有个 style.css。

style.css是一个的样式表文件,它定义了主题的颜色,字体,等等等等,如果你不明白CSS是什么,那么你可以看看什么是CSS?它的能做些什么?通常是在主题的header.php文件里有这样的一段代码。

<link rel="stylesheet" href="<?php%20bloginfo('stylesheet_url');%20?>" type="text/css" media="screen" /></link>

这段代码表示这个主题调用CSS,并且指出了CSS文件的地址。

明白了这些,现在,你需要新建一个CSS文件,根据原先主题的CSS,更改外观或布局。例如,你可以改变颜色的背景,字体,定位工具栏,页眉图像等,(CSS修改不在本文的讨论范围)你新建的CSS文件,将成为你主题的第二个样式表,以供页面上风格切换的调用,你应该为它取个名字,比如 blue.css。我们应该像默认的CSS文件那样,在header.php声明一下,如下面这段代码。

<link rel="alternate stylesheet" type="text/css" href="<?php%20bloginfo('template_directory');%20?>/blue.css" media="screen" title="blue" /></link>

现在,在header.php中声明了blue.css文件的存在,CSS文件也有了,但是,我们暂时没有使用它,它只是个替补,我们采用JavaScript以供页面上样式切换功能的实现。

点击下载styleswitcher.js文件,并将它放在主题目录下

继续编辑header.php,在标签前面加上调用这个js文件的代码:

<script type="text/javascript" src="<?php%20bloginfo('template_directory');%20?>/styleswitcher.js"></script>

好了。教程到这里结束了,本文重在讲述的过程,而没有对CSS修改等具体问题进行讨论,有问题,欢迎留言!

给TA打赏
共{{data.count}}人
人已打赏
wordpress教程

wp_head()详细优化方法 网站头部大瘦身

2023-2-16 15:45:42

wordpress教程

WordPress Flash上传图片失败的原因(解决方法)

2023-2-16 15:45:54

【腾讯云】11.11云上盛惠!云服务器首年1.8折起,买1年送3个月!
11.11云上盛惠!海量产品·轻松上云!云服务器首年1.8折起,买1年送3个月!超值优惠,性能稳定,让您的云端之旅更加畅享。
查看更多相关信息>>
站长

(工作日 10:00 - 22:30 为您服务)

2026-01-30 05:36:31

您好,无论是售前、售后、意见建议……均可通过联系工单与我们取得联系。

猜你想问:

  • 购买的模板免费包安装吗?

  • 这个演示地址有吗?

  • 购买vip会员可以下载哪些模板?

您的留言我们已经收到,我们将会尽快跟您联系!
取消
立即选择任一渠道联系我们