【简介】感谢网友“lookoneyear”参与投稿，以下文章小编为您整理的在WordPress页面中直接切换css文件(共3篇），供大家阅读。

篇1：在WordPress页面中直接切换css文件

首先请看以下这三个用WordPress搭建的站点：

Xplosive Reloaded

Wicked Lemon

Wpdesigner7

注意它们的右上角位置都有几个色块，点击这几个色块，可以立即更改整个站点的配色，实际上是即时切换了style. sheet(css)文件，以实现这种效果，其实切换css文件可不仅仅可以改配色，把整个主题翻个底朝天都不难。那么这种华丽的效果在代码上是如何实现的呢？BlogOhBlog的Jai专门写了一篇文章教导大家。当然了，我很乐意将其用方块字重新描述一遍与大家分享。

第一步，让我们来看看WordPress是怎样调用css文件的，在header.php里头，可以找到类似：

这样的一行，其中rel=“stylesheet”说明这是在调用css。

好，现在假设你有两个别的css文件，一个叫orange.css，另一个叫blue.css，你希望站点能实时切换这几个css文件，那要怎么办呢？

首先必须在header里面加入定义，把那两个css文件放在你正在使用的模板目录下(也就是原始的style.css所在的路径)，然后在header.php方才那行的下面加上这样两行：

当然，也可以放在别的地方，以上两行的路径做相应修改即可，

管理资料

其次，点击下载styleswitcher.js文件 （酷勤网备用下载地址：styleswitcher.js），将其也放在正在使用的模板目录下。

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

最后，就是在你的WordPress页面中加入几个按钮来切换css。这就没有什么统一的代码了，你想怎么弄都行，发挥想象力吧。下面是一例，随便在模板哪个地方加上：

Orange Blue

那么，教程结束了，很简单吧。自己动手试试看？

来自：webabie.com/switch-style-sheet-real-time/

篇2：在移动Web页面中使用CSS固定页脚

这篇文章主要介绍了在移动Web页面中使用CSS固定页脚,作者推荐使用box-sizing的百分比调整方法,需要的朋友可以参考下

一种单页应用的页面结构

面向移动端的单页应用（Single Page Web Application），从页面代码上来说，会使用较一般网页不同的结构，单页应用并不是说应用只需要一个视图，而是说可以将组成应用的多个视图集合在一个网页内呈现，且在视图之间能够自由切换（平滑的动画形式居多）。

我制作单页应用使用的是一种常见方法，像下面这样：

CSS Code复制内容到剪贴板

“view-page view-current”>

“view-page”>

“view-page”>

.view-page{

display:none;

position:absolute;

width: 100%;

height: 100%;

left: 0;

top: 0;

}

.view-current{

display:block;

}

可以看出，其原理是视图都由绝对定位的覆盖屏幕大小（可见视口）的元素构成，在某一时间点，只会显示一个视图。

固定页脚的问题

那么，固定页脚是一个什么问题呢？请看下图：

先说说什么是固定页脚吧。上图右可以看到，当页面内容较多，超出一屏的高度时，页脚是“自然地”紧跟在内容后边，滚动到底部时，才会看到位于最下方的页脚。同时，上图左可以看到，当页面内容较少时，页脚则直接位于屏幕最下方，剩余区域则是空白。这就是固定页脚，它可以算是一种比较理想的“总是在它应该在的位置”的页脚。

那么，问题来了。参考上图左，除了固定页脚的效果之外，现在还要求当页面内容较少时，页面内容（Content）可以水平垂直居中于剩余的空间（Container）。在上述单页应用的页面结构中，应该如何实现呢？

方法探讨

水平垂直居中与Flexbox

让我们一步一步来。先完成“水平垂直居中”。由于内容高度不确定，所以这里适合使用弹性盒模型（Flexbox）。

关于弹性盒模型的指南，推荐阅读A Complete Guide to Flexbox 和Dive into Flexbox 。

应用Flexbox实现水平垂直居中可以先得到这样的代码（由于其他视图不再需要，这里只保留一个视图）：

CSS Code复制内容到剪贴板

“view-page view-current”>

“container flex-container justify-content-center align-items-center”>

“content”>

上面的div.container对应前面图中的剩余空间（作为容器），div.content则是需要水平垂直居中的内容。对应的css是：

CSS Code复制内容到剪贴板

.container{

min-height: 100%;

}

flex-container、justify-content-center、align-items-center都是弹性盒模型的辅助class（熟悉了Flexbox就可以很快理解）。使用辅助class是因为弹性盒模型从前到后几经变化，兼容处理需要稍多代码，

这些辅助class的css是：

CSS Code复制内容到剪贴板

.flex-container{

display: -webkit-box;

display: -webkit-flexbox;

display: -ms-flexbox;

display: -webkit-flex;

display: flex;

}

.justify-content-center{

-webkit-box-pack:center;

-webkit-flex-pack:center;

-ms-flex-pack:center;

-webkit-justify-content:center;

justify-content:center;

}

.align-items-center{

-webkit-box-align:center;

-webkit-flex-align:center;

-ms-flex-align:center;

-webkit-align-items:center;

align-items:center;

}

到此，水平垂直居中就完成了。

实现固定页脚

现在加入页脚的部分。这时候html代码变成：

CSS Code复制内容到剪贴板

“view-page view-current”>

“container flex-container justify-content-center align-items-center”>

“content”>

“footer”>

注意，div.view-page是绝对定位，且定义了height: 100%;，而此时div.container也定义了min-height: 100%;。考虑到要“为页脚留空间”，结合传统网页中的固定页脚的做法，得到完整的css：

CSS Code复制内容到剪贴板

.container{

min-height: 100%;

margin-bottom: -120px;

padding-bottom:120px;

-webkit-box-sizing:border-box;

box-sizing:border-box;

}

.footer{

height:120px;/*假定页脚的高度为120px*/

}

以上就是在这种条件下的固定页脚的实现方法。虽然最后看起来只是这样一小段代码，但我还是思考了相当一段时间加上试验才得到。其中padding-bottom和负值的margin-bottom的结合应用很关键。此外，作为移动端的网页，要想到使用box-sizing这个配合百分比会非常有用的CSS3属性。

其他形式的尝试？

我也试过使用主轴为垂直方向的Flexbox来实现，但可惜经过测试，flex-direction: column;还没有被现在的主流手机浏览器所支持。

传统网页的固定页脚

关于传统网页的固定页脚，有一个专门的站点HTML5 CSS Sticky Footer介绍了其实现方法和原理，你也可以阅读我以前写的简单实现固定在页面底部的页脚。

结语

移动Web单页应用的页面结构是比较特别，所以固定页脚这么有用的东西做起来又是一个新话题了。想到并试验成功后，我第一反应就是赶紧记下来，真是担心以后忘掉了还得费劲重想...

如果你也碰到过类似的需求或有过类似的想法，相信本文可以提供一点参考！

篇3：在WordPress文章中调用另一个页面内容的方法

随着WordPress的功能越来越强大，我们几乎可以使用WordPress来做任何想做的事（似乎有点夸张了⊙n⊙b汗），

很多时候，也许我们并不需要在一篇文章中调用另一篇文章或单页面的内容（至少大多数人不需要这样做）；但是这并不是让我们放弃WordPress强大功能的理由。

我们可以拿WordPress来开发一个电子商务网站，或者来做一个大型的门户网站，这些都不成问题。我们遇到的问题可能是，一些通用的内容如何在 每个文章页面中显示出来？比如电子商务网站中的购买须知、产品介绍、公司介绍等（每个单独的产品可能都具有一些共同的介绍），是否意味着我们每次都要单独 添加这些内容呢？那我们维护起来将会是一项很庞大的工程。

如果我们可以在WordPress文章中调用到另一个页面的内容，那问题不就解决了吗？事实上，我就是这么做的。

思路就是利用了WordPress的自定义栏目这个功能，在需要调用的文章下面添加一个指定的自定义栏目（默认的）和值（需要调用的那个page的别名）。

好了，直接上代码：

the_content();//正常日志内容

$key = “fireuikey”;//自定义栏目名称

$fireuiinfo = get_post_meta($post->ID, $key , true);

if ($fireuiinfo != ''):$fireui_com_key = array('pagename' => $fireuiinfo);//pagename就是需要调用的那个页面的别名，必须是英文

query_posts($fireui_com_key);

if (have_posts()) : while(have_posts()) : the_post(); the_content(); endwhile; endif;

wp_reset_query();

endif;

endwhile;

endif;

?>

因为当初做这个项目比较急，因此代码可能会比较草率，或者还有其他的方法，

但，至少可以肯定的是，我所使用的这个方法到目前为止一直使用良好。

使用方法，上面的代码替换single.php中的主循环部分（当然，你可以根据你模板的实际情况进行调用和添加样式）。添加文章时，同时添加一个 自定义栏目，栏目名称为”fireuikey”（可以换成任何你喜欢的变量名称，需要同步修改上面的代码！），值就填写需要被调用的page的别名（英 文）。如果自定义栏目为空或者不添加，那么将不会执行调用，默认文章也会完美呈现。