为你的Wordpress再加入一个主题样式表

Posted in 技术分享, 酋 长

感谢韩人的投稿
在遥远的俄罗斯，还惦记着Wopus中文平台和国内玩WordPress的朋友。俺们也祝福韩人早点找个俄罗斯的MM！

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

Xplosive Reloaded
Wpdesigner7


在绝大多数的情况下，每一个WordPress主题有一个style.css文件，你可以查看一下自己目前用的主题文件目录下是否有个 style.css。style.css是一个的样式表文件，它定义了主题的颜色，字体，等等等等，如果你不明白CSS是什么，那么你可以看看什么是CSS？它的能做些什么？。通常是在主题的header.php文件里有这样的一段代码。

  1. <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声明一下，如下面这段代码。

  1. <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文件的代码：

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

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

英文原文教程地址：http://www.blogohblog.com/integrating-alternative-stylesheets/

关联阅读

9 Comments

  • 辐射鱼 says:
    2008/07/22 at 07:36

    这个教程很好，同志们多投递啊，争取把我整下岗

    Reply
  • 二手科学家 says:
    2008/07/22 at 09:31

    辐射鱼,对自己太残忍了吧！

    Reply
  • zming says:
    2008/07/22 at 13:06

    有时间试一下

    Reply
  • dickym says:
    2008/07/22 at 14:31

    …慢慢摸索。。
    俄罗斯？
    很凉快的地方。。。
    好热的上海

    Reply
  • 辐射鱼 says:
    2008/07/22 at 15:04

    二手科学家：大家都来投稿我就清闲了撒，好享福

    Reply
  • sara says:
    2008/07/22 at 16:09

    老毛子可是很强悍的哈！

    Reply
  • willerce says:
    2008/08/15 at 21:10

    呃.老毛子是很强悍.

    Reply

    • Leave a Reply