今天我来给大家分享一个教程,一个主题使用多个样式表,并可以在页面上快速切换,你可能已经见过了这样的主题,如果你还不明白它有什么用处。那么你可以看看下面几个例子。
通过点击页面右上角落上不同颜色的小图,就可以改变主题的配色。
例如这两个主题:Xplosive Reloaded | Wpdesigner7
在绝大多数的情况下,每一个WordPress主题有一个style.css文件,你可以查看一下自己目前用的主题文件目录下是否有个 style.css。
style.css是一个的样式表文件,它定义了主题的颜色,字体,等等等等,如果你不明白CSS是什么,那么你可以看看什么是CSS?它的能做些什么?通常是在主题的header.php文件里有这样的一段代码。
<link rel=\"stylesheet\" href=\"<?php bloginfo(\'stylesheet_url\'); ?>\" 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 bloginfo(\'template_directory\'); ?>/blue.css\" media=\"screen\" title=\"blue\" /></link>
现在,在header.php中声明了blue.css文件的存在,CSS文件也有了,但是,我们暂时没有使用它,它只是个替补,我们采用JavaScript以供页面上样式切换功能的实现。
点击下载styleswitcher.js文件,并将它放在主题目录下
继续编辑header.php,在标签前面加上调用这个js文件的代码:
<script type=\"text/javascript\" src=\"<?php bloginfo(\'template_directory\'); ?>/styleswitcher.js\"></script>
好了。教程到这里结束了,本文重在讲述的过程,而没有对CSS修改等具体问题进行讨论,有问题,欢迎留言!
1. 资源都是经过站长或作者收集测试修改后发布分享。如若转载请在文内以超链形式注明狐狸库文章出处,谢谢合作!
2. 本站除原创内容,其余所有内容均收集自互联网,仅限用于学习和研究目的,本站不对其内容的合法性承担任何责任。如有版权内容,请通知我们或作者删除,其版权均归原作者所有,本站虽力求保存原有版权信息,但因众多资源经多次转载,已无法确定其真实来源,或已将原有信息丢失,所以敬请原作者谅解!
3. 本站用户所发布的一切资源内容不代表本站立场,并不代表本站赞同其观点和对其真实性负责,若您对本站所载资源作品版权归属存有异议,请留言附说明联系邮箱,我们将在第一时间予以处理 ,同时向您表示歉意!为尊重作者版权,请购买原版作品,支持您喜欢的作者,谢谢!
4. 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客如有发现请立即向站长举报;本站资源文件大多存储在云盘,如发现链接或图片失效,请联系作者或站长及时更新。
请登录后查看评论内容