如何使用css为wordpress页面淡入动画特效

利用CSS3动画属性“@keyframes ”可实现一些动态特效，具体语法和参数可以网上自行学习。这篇文章主要是实践应用一下这个动画属性，实现页面淡入特效，在火狐24版、chrome29版、IE10中测试通过。IE9及以下浏览器不支持此特效。 淡入代码：

创新互联-专业网站定制、快速模板网站建设、高性价比方正网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式方正网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖方正地区。费用合理售后完善，十多年实体公司更值得信赖。

@keyframes fade-in {

0% {opacity: 0;}/*初始状态 透明度为0*/

40% {opacity: 0;}/*过渡状态 透明度为0*/

100% {opacity: 1;}/*结束状态 透明度为1*/

}

@-webkit-keyframes fade-in {/*针对webkit内核*/

0% {opacity: 0;}

40% {opacity: 0;}

100% {opacity: 1;}

}

#wrapper {

animation: fade-in;/*动画名称*/

animation-duration: 1.5s;/*动画持续时间*/

-webkit-animation:fade-in 1.5s;/*针对webkit内核*/

}

直接将上述代码添加到主题style样式文件中，并修改其中 #wrapper 为你的主题ID或类的名称即可。

另外，可针对页面某部分延长显示时间，比如侧边栏，再加上一句：

#sidebar {

animation: fade-in;

animation-duration: 4s;

-webkit-animation:fade-in 1.5s;

}

同理，可对页面不同的部分设定不同的淡入显示时间，实现分段显示。

如何用纯代码方法实现WordPress面包屑导航效果

1、层级较深的网站，面包屑导航适合层级较深的网站，如果只有一级分类的话，通过主导航就可以起到快速定位的作用。比如“豆瓣网”类型扁平构架的网站就没有使用面包屑导航的作用。

2、独立不交叉的网站机构，由于面包屑网站导航路径是线性结构的，因此网站内容必须划分的非常清晰，且不存在交叉；否则，面包屑导航的路径就不是唯一的，同一分类可能出现在不同的路径中，让用户感到困惑。

在wordpress中添加面包屑导航的话，可以直接使用插件来实现，不过很多站长都不喜欢用插件，还是认为如果能用代码解决的话是最理想的。我最近也找了一些关于面包屑导航的资料。下文中就有详细解决怎么用代码来实现wordpress面包屑导航：

一、在wordpress博客当前主题的functions.php文件（没有就创建一个）中添加以下代码：

//面包屑导航

functionget_breadcrumbs()

{

global$wp_query;

if(!is_home()){

//StarttheUL

echo'ulclass="breadcrumbs"';

//AddtheHomelink

echo'liahref="'.get_settings('home').'"'.get_bloginfo('name').'/a/li';

if(is_category())

{

$catTitle=single_cat_title("",false);

$cat=get_cat_ID($catTitle);

echo"li?".get_category_parents($cat,TRUE,"?")."/li";

}

elseif(is_archive()!is_category())

{

echo"li?Archives/li";

}

elseif(is_search()){

echo"li?SearchResults/li";

}

elseif(is_404())

{

echo"li?404NotFound/li";

}

elseif(is_single())

{

$category=get_the_category();

$category_id=get_cat_ID($category[0]-cat_name);

echo'li?'.get_category_parents($category_id,TRUE,"?");

echothe_title('','',FALSE)."/li";

}

elseif(is_page())

{

$post=$wp_query-get_queried_object();

if($post-post_parent==0){

echo"li?".the_title('','',FALSE)."/li";

}else{

$title=the_title('','',FALSE);

$ancestors=array_reverse(get_post_ancestors($post-ID));

array_push($ancestors,$post-ID);

foreach($ancestorsas$ancestor){

if($ancestor!=end($ancestors)){

echo'li?ahref="'.get_permalink($ancestor).'"'.strip_tags(apply_filters('single_post_title',get_the_title($ancestor))).'/a/li';

}else{

echo'li?'.strip_tags(apply_filters('single_post_title',get_the_title($ancestor))).'/li';

}

}

}

}

//EndtheUL

echo"/ul";

}

}

二、在显示面包屑导航的位置添加以下调用代码：

?php

if(function_exists('get_breadcrumbs')){

get_breadcrumbs();

}

?

三、在主题的css样式文件中添加以下样式代码：

ul.breadcrumbs{list-style:none;font-size:12px;}

ul.breadcrumbsli{float:left;margin-right:5px;}

如何在wordpress博客中添加炫酷的加载中动画特效

　Edge Animate是Adobe最新出品的制作HTML5动画的可视化工具，简单的可以理解为HTML5版本的Flash Pro。在之后的文章中，我会逐一的介绍这款新的HTML5动画神器。这篇文章先说一说如何把Edge Animate制作的HTML5动画作品嵌入到Wordpress中。

如何给WordPress博客网站添加评论输入特效

因为主题缺少评论模板，你可以这样：在single.php之类的文章详情页（一般主题仅有single.php和page.php是文章详情页），的之后某个地方（要考虑CSS布局）直接添加来调用Wordpress默认的评论样式，这个评论样式不好看，没关系你可以：1.修改默认评论样式的CSS；2.在WP后台插件安装页面搜索有言之类的评论插件，装上后，效果就好多了！

名称栏目：wordpress加特效 wordpress样式
网站网址：http://chengdu.cdxwcx.cn/article/ddiodoh.html