WordPress企业高级主题:Karma v2.5

最近一直在翻看不少国外的主题,越看越觉得国人的主题技术含量离国外的差距不是一点点啊,虽然自己不会做主题,但是好坏还是能看得出来的。分享一款国外truethemes的牛B的企业高级主题:Karma v2.5。自带20种不同的页面模板,20个华丽的色彩变化

  • 强大的管理面板
  • 令人惊叹的3D滑块
  • 100 +简码
  • 20个华丽的色彩变化
  • 拖放到共享社会书签
  • 无限侧边栏
  • 20种不同的页面模板
  • 7个独特的画廊布局
  • 令人惊叹的价格表
  • 强大的内置联系表生成器(带reCAPTCHA)
  • 完整的教学培训视频集
  • XML的安装演示内容

演示地址:http://themes.truethemes.net/Karma/?style=karma-teal-grey
Karma v2.5下载     本站备份下载

转自http://lllllll.me/wordpress/1851.html

WordPress模板的image.php

目前大多数WordPress主题都没有包含image.php,如果没有这个文件,我们可以复制一个single.php重命名为image.php来做相册的个性化调整。
首先查找 the_content 参数,在他的php标签上面,添加代码:

http://uicss.cn/photo/
原文: http://uicss.cn/wordpress-image-theme/
//转自http://www.wpued.com/1682.html

WordPress图片路径用二级域名的好处和实现方法

启动子域名作为分类目录或者作为专题的时候,能提高URL的权重,从而起到SEO的作用和功效,比如我本站所有图片用img.missroad.com作为图床。
用二级域名作为图片路径的图床可以随时将博客里的图片搬家到更快的主机上,只需要把图片上传后改一下子域名解析即可,甚至是国内有CDN服务的主机,就可以大大加快浏览速度,还能减轻很多服务器的负担。
由于博客是使用www子域名的,这样cookie不会污染到img子域名,可以享受cookie-free,可以加快访问速度。
下面说一下操作步骤:
绑定子域名
首先去域名面板绑定一个子域名A记录,到主机的IP,然后在主机面板上添加这个子域名,不会操作可以咨询域名商或主机商。

转移图片
绑定子域名以后一般情况下会自动建立一个以这个子域名为目录名的目录,如绑定img.missroad.com,就会自动生成一个img目录,如果是WordPress博客,就将wp-content/uploads目录下的文件复制到img目录下。
WordPress设置
因为img目录仍然是放在现在的主机上,所以在写博客的时候还是可以使用Wordpress自带的编辑器或Windows Live Writer来插入图片的,设置方法是:
进入Wordpress控制板,进入“设置”下的“媒体”,然后将“默认上传路径”更改为你的img目录完整路径,如迷失乐园的设置是:

/home/****/domains/missroad.com/wordpress/img

如果不清楚路径是什么可以问主机商,还可以随便输入一个如/img,在点击“保存更改”后会提示出错或没有权限,里面会提示路径,然后复制过来就可以了。
将“文件的完整URL地址”修改为:http://img.missroad.com。注意后面不要有“/”。

替换数据库中原图片路径
进入PHPMyAdmin,在Wordpress的数据库中,运行以下SQL语句,前提最好先备份下数据库:

UPDATE wp_posts SET post_content = REPLACE( post_content, ‘http://www.missroad.org/wordpresshttp://img.wpued.com/’, ‘http://img.missroad.com/’) ;

其中“’http://www.missroad.org/wordpresshttp://img.wpued.com/”是原图片路径,“http://img.missroad.com/”是新路径。
检查效果
修改以后先看刷新一下页面看图片是否正常显示,然后检查一下图片的路径是否是新的子域名的路径。
进入Wordpress文章编辑,使用自带的编辑器插入图片,看是否正常显示,再检查图片路径是否为新的子域名的路径。
若使用Windows Live Writer写博客,依次进入Windows Lvie Writer菜单中的“日志”,“编辑日志设置”,点击“更新帐户配置”,然后用Windows Lvie Writer新建一个文章,插入一张图片,然后“将草稿发布到日志”,再进入Wordpress编辑器检查这篇文章的图片显示和路径是否正确。
如果出现错误也可以使用Windows Live Writer的FTP上传方式。
Cookie-free
据说如果直接使用根域名如missroad.com作为博客域名的话,使用子域名作为图床是无法实现Cookie-free的,要是想做支持 Cookie-free的图床就需要一个其它的域名来做了,而博客使用的是www.missroad.com的子域名,是没有问题的。
在网上查到的方法是在wp-config.php中加入以下语句:

/** 指定cookies域*/
define(‘COOKIE_DOMAIN’, ‘www.missroad.com’);

其它
如果一切正常,那我们的修改就大功告成了,以后日志中的图片就会保存在img目录下,需要转移图片的时候只需要将img目录打包上传到其他主机上,然后修改img.missroad.com域名指向就可以了。
另外我们还可以将主题中的图片和CSS及JavaScript文件保存在这个目录中,因为老耿的博客本身使用了WP Minify,所以只将主题中的图片转移到了img目录中。
修改完成以后我们可以使用Firefox中的YSlow插件来查看效果,博客使用YSlow的Small Site or Blog模式检测,得分是96分,唯一有点瑕疵的地方是cnzz的统计代码不支持Gzip压缩。
 
来源:迷失乐园 » WordPress图片路径用二级域名的好处和实现方法

强化 WordPress 后台编辑器样式

通常在 WordPress 的后台编辑器上面编辑文章的时候显示的是 WordPress 的默认样式,而我们发布出去的文章内容使用的是 WordPress 主题上的样式。我想在 WordPress 的默认编辑器里面显示 WordPress 主题的文章内容样式。
简单一点通过下面两张图片了解这是什么:
WordPress 编辑器默认的效果(这是在没有自定义的情况下显示的效果):

通过自定义 CSS 文件实现的 WordPress 编辑器所见即所得效果:

图示的两张图片是我在我的博客上的一篇《给新手的 HTML 进阶秘籍》文章在编辑时的效果,我把 WordPress 主题自带的文章内容样式搬到了 WordPress 后台编辑器上。这样当我想预览编辑的内容在主题上面显示的效果的时候就不用一次一次的去点预览了。在 Windows live writer 上也有类似的功能,不过这篇文章讨论的是如何将这个功能加到你自己的 WordPress 主题上。

实现 WordPress 后台编辑器预览效果

这次操作需要修改你的 WordPress 主题,所以修改之前请注意备份。主要内容是修改 functions.php 以及创建一个 editor.css 的文件。

创建给 WordPress 后台编辑器的 editor.css 文件

这个文件时专门为 WordPress 后台编辑器写的样式文件,你可以从你的 WordPress 主题中的 style.css 文件中提取出你文章内容的样式(重要:提取时请注意修改 CSS 的选择器)。由于 WordPress 的后台编辑器的编辑区用的是 Ifram ,所以编辑样式表的时候只需要直接给类似于


…等标签样式即可。
下面是我博客的一个实例:(需要根据主题编写,请勿照搬)
我的主题在 style.css 中文章内容的样式规则是:
body{
background:url(“images/page-bg.jpg”) repeat-x scroll 0 1px #ECEEEF;
border-top:1px solid #FFFFFF;
color:#0A0A0A;
font:12px Arial,Helvetica,”Lucida Grande”,”Verdana”,”Helvetica Neue”,sans-serif;
margin:0 0 40px;
}
/*POST*/
.post .p-entry,.post .entry{
font-size:14px;
font-family:Georgia,Arial,serif,sans-serif;
}
.post .p-entry p{
margin:10px 0;
}
#container #content .post .p-entry h2{
border-bottom:1px solid #EDEDED;
font-size:16px;
margin:20px 0 15px;
}
#container #content .post .p-entry h3{
border-bottom:1px solid #EDEDED;
font-size:14px;
margin:15px 0 10px;
}
#container #content .post .p-entry table {
background:none repeat scroll 0 0 #FFFFFF;
border:2px solid #CCCCCC;
border-collapse:collapse;
margin:10px auto;
}
#container #content .post .p-entry th, .post .entry td {
border:1px solid #CCCCCC;
padding:3px 10px;
text-align:left;
vertical-align:top;
}
#container #content .post .p-entry tr.even td {
background:none repeat scroll 0 0 #F7F7F7;
}
#container #content .post .p-entry th {
background:none repeat scroll 0 0 #EDEFF0;
}
.post .p-entry blockquote{
border-left:5px dashed #CCCCCC;
color:#777777;
margin:5px 10px;
padding-left:15px;
}
.post .p-entry p code{
background-color:#F8F8F8;
border:1px dashed #CCCCCC;
color:#666666;
font:11px/180% “Lucida Console”;
padding:2px 3px;
margin:0 2px;
}
.post .p-entry code.block{
background-color:#F8F8F8;
border:1px dashed #CCCCCC;
color:#666666;
display:block;
overflow:auto;
font:12px/180% “Lucida Console”;
margin:10px 20px;
padding:5px 10px;
}
.post .p-entry p cite{
color:#888888;
padding:2px 5px;
}
.post .p-entry img{
border:1px solid #CCCCCC;
display:block;
margin:10px auto;
padding:3px;
}
.post .p-entry img.wp-smiley {
border:none;
display:inline;
margin:0;
padding:0;
vertical-align:middle;
}
.post .entry object,.post .p-entry object{
display:block;
margin:0 auto;
}
.post .entry img{
display:block;
margin:5px auto;
}
.post .p-entry a{
color:#27BCEE;
}
.post .p-entry ul li,.post .p-entry ol li{
margin-left:25px;
}
.post .p-entry strong{
font-weight:bold;
color:#0099ff;
}
根据我原来的代码,我新建了一个 editor.css 文件在主题目录下:
/* LOO2K editor styles */
*{margin:0;padding:0;}
#htmlSource{
border-collapse:collapse;
font:13px/180% “lucida Grande”,Verdana;
height:515px;
padding:5px;
white-space:pre-wrap;
width:702px;
word-wrap:break-word;
}
body{
font:14px/28px Georgia,Arial,serif,sans-serif !important;
}
p{
margin:10px 0;
}
h2{
border-bottom:1px solid #EDEDED;
font-size:16px;
margin:20px 0 15px;
}
h3{
border-bottom:1px solid #EDEDED;
font-size:14px;
margin:15px 0 10px;
}
table {
background:none repeat scroll 0 0 #FFFFFF;
border:2px solid #CCCCCC;
border-collapse:collapse;
margin:10px auto;
}
td {
border:1px solid #CCCCCC;
padding:3px 10px;
text-align:left;
vertical-align:top;
}
td {
background:none repeat scroll 0 0 #F7F7F7;
}
th {
background:none repeat scroll 0 0 #EDEFF0;
}
blockquote{
border-left:5px dashed #CCCCCC;
color:#777777;
margin:5px 10px;
padding-left:15px;
}
code{
background-color:#F8F8F8;
border:1px dashed #CCCCCC;
color:#666666;
font:11px/180% “Lucida Console”;
padding:2px 3px;
margin:0 2px;
}
code.block{
background-color:#F8F8F8;
border:1px dashed #CCCCCC;
color:#666666;
display:block;
overflow:auto;
font:12px/180% “Lucida Console”;
margin:10px 20px;
padding:5px 10px;
}
cite{
color:#888888;
padding:2px 5px;
}
img{
border:1px solid #CCCCCC;
display:block;
margin:10px auto;
padding:3px;
}
object{
display:block;
margin:0 auto;
}
img{
display:block;
margin:5px auto;
}
a{
color:#27BCEE;
}
ul li,ol li{
margin-left:25px;
}
b,strong{
font-weight:bold;
color:#0099ff;
}
其中,我去掉了选择器里一些多于的内容。#htmlSource相当于编辑器的body。(以上代码仅供参考)

把样式表添加到 WordPress 编辑器上

既然已经写好了样式表,现在就只剩最后一步——把样式表链接 WordPress 到编辑器上。这个时候需要编辑你的 functions.php :
/******************/
function editor_styles($url) {
if (!empty($url)) $url .= ‘,’;
$url .= trailingslashit(get_stylesheet_directory_uri()).’editor.css’;
return $url;
}
if(current_user_can(‘edit_posts’)):
add_filter(‘mce_css’, ‘editor_styles’);
endif;
/******************/
?>
直接添加add_editor_style(‘editor.css’);即可  //2011.12.6更新
按照上面的形式将代码添加到 functions.php 文件中即可。

WordPress 后台编辑器的其他强化

根据上面的办法,你可以打开你的 WordPress 后台编辑器测试下效果了。这样的预览效果估计能让你的 WordPress 后台编辑文章的时候更方便一点。
还有几个想法:

  • 不知 WordPress 的编辑器,其他的编辑器也可以这样弄
  • 制作 WordPress 主题的朋友可以参考下
  • 不一定要修改主题代码,也可以用 Firefox 的 Stylish插件实现
  • 还可以用 Greasemonkey这个插件实现

但是现在还有几个问题:

  • WordPress 后台编辑器功能太烂
  • WordPress 后台编辑器的 HTML 代码编辑器很不方便
  • 或许可以使用外部的编辑器,如 notepad++

文章来源:http://loo2k.com/wordpress-editor/
转自http://www.wpued.com/3447.html

WordPress在不同的位置调用不同的模板

之前介绍过在第一篇文章下显示广告的方法也是同理, WordPress可以在不同的位置调用不同的模板, 具体实现方法如下.


接着在它的顶部加上一句:,使变成:



然后找出下面的代码:

把它改成下面的样子:









看出来了吧, 这里调用了 4 个广告模板

query_posts()详细解释

将query_posts()放在LOOP之前限定你所需要的条件,wp_query会产生一个新的使用你的参数的SQL查询,而忽视通过URL接 收到的其它的参数,如果想不忽略,可以在调用中使用$query_string。

query_posts($query_string . "&order=ASC")

设置文章显示的顺序,但是不干扰其余的查询字符串,参数前须有“&”符号
其他还有N多用途~~

  • 主页不显示某一分类下的日志

  • 获得特定的日志

  • 获得特定的页面

  • 创建所有文章列表,并且提供分页功能

==========================================

类别 参数

显示属于某个类别的文章

  • cat
  • category_name

根据ID显示一个类别
只显示来自一个类别ID的文章

query_posts('cat=4');

根据名称显示一个类别
只显示属于某个类别名的文章

query_posts('category_name=Staff Home');

显示几个类别及ID
显示属于几个类别ID的文章

query_posts('cat=2,6,17,38');

删除某个类别的文章
显示所有的文章,但是类别ID前面有个’-’(负号)负号的类被除外。

query_posts('cat=-3');

删除属于类别3的所有文章。有一个限制性条款:会删除只属于类别3的所有文章。如果一个类别也同时属于其它的类别,这个类别仍然不会被删除。

标签参数

显示与某个标签相关的文章

  • tag

为某个标签提取文章

query_posts('tag=cooking');

获得拥有任何这样的标签的文章

query_posts('tag=bread,baking');

获取拥有这三个标签的文章

query_posts('tag=bread+baking+recipe');

作者参数

你也可以根据作者限制文章数目

  • author_name=Harriet
  • author=3

author_name在 user_nicename区操作, 同时作者 在作者id上操作。

文章 & 网页参数

返回一篇单独的文章或者一个单独的网页

  • p=1 – 使用文章 ID来显示第一篇文章
  • name=first-post – 使用 post Slug显示第一篇文章
  • page_id=7
  • pagename=about
  • showposts=1 (你可以使用 showposts=3,或者其它的任何数字显示一定数目的文章)

由于模板层级方 面的原因, home.php先执行了。这意味这你可以编写一个home.php,home.phh调用query_posts()重新得到一个特别的网页并且将那个 网页设置为你的首页。没有任何插件或者hacks,你需要运行一个机制,并且显示和维护一个非博客的首页。
更有用的方法,可能是利用WP的网页功能并且为你的首页使用这个功能。你可以将”关于网页”设置为entry point或者设置为站点的末页。你可能执行一些更动态的步骤,设置一个自定义网页,显示最近的评论,文章,类别,存档。请看看下面的例子。

时间参数

得到某个特别的时间段内发表的文章

  • hour=
  • minute=
  • second=
  • day= – 一个月中的每一天; 显示,例如,十五号发表的所有文章。
  • monthnum=
  • year=

网页参数

  • paged=2 -显示使用”以前发表的文章”链接时,通常在网页2上显示的文章。

  • posts_per_page=10 -每个网页显示的文章数目;-1这个值,会显示所有的文章。

  • order=ASC -按时间顺序显示文章,以相反的顺序显示DESC(默认)

Offset 参数

你不能转移或者忽视一个或者更多的原始文章,这些文章一般是你的query同时使用offset参数收集到的。
下面的函数会显示(1)最近的5篇文章

query_posts('showposts=5&offset=1');

根据参数排序

根据这个区给得到的文章排序

  • orderby=author
  • orderby=date
  • orderby=category
  • orderby=title
  • orderby=modified
  • orderby=modified
  • orderby=menu_order
  • orderby=parent
  • orderby=ID
  • orderby=rand

同时考虑”ASC”或者的”DESC”的排序参数

联合参数

你可能从上面的例子中注意到,你使用一个&(&符号)将参数组合在一起,像:

query_posts('cat=3&year=2004');

类别13,关于当前月份显示在主页上的文章:

if (is_home())  {
query_posts ($query_string . '&cat=13&monthnum=' . date('n',current_time('timestamp'))); }

在2.3版本中,这个参数组合会返回属于类别1同时属于类别3的文章,只显示两篇(2)文章,根据标题,按降序排列:

query_posts(array('category__and'=>array(1,3),'showposts'=>2,'orderby'=>title,'order'=>DESC));

在2.3和2.5版本中,你可能期待下面的内容,返回属于类别1并且标签为”苹果”的所有文章

query_posts('cat=1&tag=apples');

一个bug阻止这个运行。请看看Ticket #5433,一个工作区要搜索几个使用+的标签

query_posts('cat=1&tag=apples+apples');

对于先前的查询,这个会产生期待的结果。注意使用’cat=1&tag=apples+oranges’能够产生期待的结果。
转自http://www.wpued.com/2623.html

WordPress判断语句大全

is_single()
判断是否是具体文章的页面
is_single(’2′)
判断是否是具体文章(id=2)的页面
is_single(’Beef Stew’)
判断是否是具体文章(标题判断)的页面
is_single(’beef-stew’)
判断是否是具体文章(slug判断)的页面
comments_open()
是否留言开启
pings_open()
是否开启ping
is_page()
是否是页面
is_page(’42′)
id判断,即是否是id为42的页面
is_page(’About Me’)
判断标题
is_page(’about-me’)
slug判断
is_category()
是否是分类
is_category(’6′)
id判断,即是否是id为6的分类
is_category(’Cheeses’)
分类title判断
is_category(’cheeses’)
分类 slug判断
in_category(’5′)
判断当前的文章是否属于分类5
is_author()
将所有的作者的页面显示出来
is_author(’1337′)
显示author number为1337的页面
is_author(’Elite Hacker’)
通过昵称来显示当前作者的页面
is_author(’elite-hacker’)
下面是通过不同的判断实现以年、月、日、时间等方式来显示归档
is_date()
is_year()
is_month()
is_day()
is_time()
判断当前是否是归档页面
is_archive()
判断是否是搜索
is_search()
判断页面是否404
is_404()
判断是否翻页,比如你当前的blog是http://domain.com 显示http://domain.com?paged=2的时候,这个判断将返 回真,通过这个函数可以配合is_home来控制某些只能在首页显示的界面,
例如:

//这里写你想显示的内容,包括函数

或者:

//这里写你想显示的内容,包括函数

WordPress菜单栏设计:菜单关联效果

WordPress菜单栏设计有很多种方法,通过javascript或是css样式实现菜单关联效果并高亮显示都是可以的,我们今天要讲的是 WordPress菜单栏设计css实现的方法,方法很简单,只要你弄清楚wordpress如何更换菜单函数就可以很轻松的通过css达到菜单关联效果 并高亮显示的了。
当前菜单的wordpress样式是 current-menu-item
当前父级菜单的样式是 current-menu-parent
当前最高级菜单样式是 current-menu-ancestor
知道这些样式的变化就好办了, 我们在style.css给这几个样式做些定义就可以轻松实现菜单关联效果了,简单吧。
转自http://www.wpued.com/6377.html

为WordPress添加评论验证码 – 代码版

效果:

验证码

为了杜绝垃圾评论,就添加了个验证码,效果非常不错,垃圾评论再也没有来了,方法非常简单,就是在function.php文件里添加个随机码的函数,在comments.php里相应的位置调用即可实现随机验证码,具体代码如下:

function yanzhengma(){
if ( !$user->ID ) {
$pcodes = trim($_POST[pcodes]);
$subpcodes = trim($_POST[subpcodes]);
if((($pcodes)!=$subpcodes)|| empty($subpcodes)){
wp_die( __(‘错误提示:请输入正确的验证码。’) );
}
}
}
add_filter(‘pre_comment_on_post’, ‘yanzhengma’);

在comments.php里调用即可
转自http://www.wpued.com/6143.html

WordPress删除内置主题编辑器

WordPress有一个内置的的编辑器,在那里你可以编辑在你的插件的代码。不是非常专业的开发人员估计也没有人用这个功能,但是如果随便点了几下,可能会破坏你整个网站,使用下端代码,可以删除主题中的这个功能,避免失误。

function remove_editor_menu() {
remove_action(‘admin_menu’, ‘_add_themes_utility_last’, 101);
}
add_action(‘_admin_menu’, ‘remove_editor_menu’, 1);
 

原文:http://www.wordpress.la/removethemeeidt.html