为WordPress主题再加入一个样式表

知更鸟 2008年7月21日22:13:4636.4K1

转自:Wopus中文平台 http://www.wopus.org/integrating-alternative-stylesheets.html
今天我来给大家分享一个教程,一个主题使用多个样式表,并可以在页面上快速切换,你可能已经见过了这样的主题,如果你还不明白它有什么用处。那么你可以看看下面几个例子。
通过点击页面右上角落上不同颜色的小图,就可以改变主题的配色。文章源自知更鸟-https://zmingcx.com/for-your-wordpress-theme-to-add-a-style-sheet.html

例如这两个主题:Xplosive Reloaded Wpdesigner7

在绝大多数的情况下,每一个WordPress主题有一个style.css文件,你可以查看一下自己目前用的主题文件目录下是否有个 style.css。style.css是一个的样式表文件,它定义了主题的颜色,字体,等等等等,如果你不明白CSS是什么,那么你可以看看什么是CSS?它的能做些什么?。通常是在主题的header.php文件里有这样的一段代码。文章源自知更鸟-https://zmingcx.com/for-your-wordpress-theme-to-add-a-style-sheet.html

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" /></link>文章源自知更鸟-https://zmingcx.com/for-your-wordpress-theme-to-add-a-style-sheet.html

这是代码表示这个主题调用CSS,并且指出了CSS文件的地址。文章源自知更鸟-https://zmingcx.com/for-your-wordpress-theme-to-add-a-style-sheet.html

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

<link rel="alternate stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/blue.css" media="screen" title="blue" /></link>文章源自知更鸟-https://zmingcx.com/for-your-wordpress-theme-to-add-a-style-sheet.html

现在,在header.php中声明了blue.css文件的存在,CSS文件也有了,但是,我们暂时没有使用它,它只是个替补,我们采用JavaScript以供页面上样式切换功能的实现。文章源自知更鸟-https://zmingcx.com/for-your-wordpress-theme-to-add-a-style-sheet.html

点击下载styleswitcher.js文件,并将它放在主题目录下文章源自知更鸟-https://zmingcx.com/for-your-wordpress-theme-to-add-a-style-sheet.html

继续编辑header.php,在标签前面加上调用这个js文件的代码:文章源自知更鸟-https://zmingcx.com/for-your-wordpress-theme-to-add-a-style-sheet.html

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/styleswitcher.js"></script>文章源自知更鸟-https://zmingcx.com/for-your-wordpress-theme-to-add-a-style-sheet.html

好了。教程到这里结束了,本文重在讲述的过程,而没有对CSS修改等具体问题进行讨论,有问题,欢迎留言!文章源自知更鸟-https://zmingcx.com/for-your-wordpress-theme-to-add-a-style-sheet.html

英文原文教程地址:http://www.blogohblog.com/integrating-alternative-stylesheets/文章源自知更鸟-https://zmingcx.com/for-your-wordpress-theme-to-add-a-style-sheet.html

文章源自知更鸟 | 崇尚专注 追求极致 分享交流WordPress经验与技巧,关注前端设计与网站制作,打造自己专属的WordPress主题,让你的博客与众不同!
weinxin
版权声明
本站原创文章转载请注明文章出处及链接,谢谢合作!
WordPress 添加动态版权日期 WordPress

WordPress 添加动态版权日期

一般网站都会在页脚添加个类似Copyright ©2000-2021版权信息,如果嫌每年都改这个日期麻烦,可以通过下面的方法添加一个动态版权日期。 将下面代码添加到当前主题函数模板functions....
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定

评论:3   其中:访客  3   博主  0
    • 呆瓜小贼
      呆瓜小贼 0

      请教鸟哥,怎样直接调用后台用户设置好的主题样式,而不使用默认的style.css呢?不胜感激。

      • JV
        JV 3

        这个屌炸天啊!

        • 宜品布艺窗帘窗纱
          宜品布艺窗帘窗纱 0

          styleswitcher.js的内容打不开? :?: