Category: WordPress进阶

  • WordPress 3.3背景功能失效解决方案

    随着WordPress 3.3正式版的发布,很多盆友都在第一时间将程序升级到最新版,不过很快发现某些具备“背景”功能的主题(包括 HotNews主题)之前设置的背景失效了。

    WordPress早在2.8版就增加了自定义背景body_class()函数,直到3.0版才在默认主题中增加了“背景”功能,具备此功能的主 题也不是很多,可能大部分主题设计者会觉得这个功能有些鸡肋,简单通过修改CSS样式就可实现的功能,没有必要增加一次数据库查询,但这句 body_class()函数初衷,并不是为了简单更换整个站点所有页面的背景,而是方便设计人员灵活的控制不同页面中各个元素样式,大道理不说了,下面 说一下具体的解决方案:

    方案一 WordPress 3.3版在程序wp-includes目录theme.php中增加一个custom-background 标签,这是造成“背景”功能失效的问题所在,打开theme.php程序文件,在第1797行找到:

    body.custom-background { <?php echo trim( $style ); ?> }

    删除其中的 .custom-background 变为:

    body { <?php echo trim( $style ); ?> }

    此方法适合所有之前支持“背景”功能的主题,但需修改程序文件,不建议使用。

    方案二 这是标准的解决的方案,打开默认主题Twenty Eleven的header.php模版,你会发现有一句:

    <body <?php body_class(); ?>>

    代替了正常的<body>标签,这是关键,将上面的代码替换自己所使用主题header.php模板<body>标签即可。

    方案三 用

    <body class="custom-background">

    替换header.php模版<body>标签,不让其增加额外的标签,此方法方便实用,适合所有主题。

  • WordPress主题嵌入淘宝商铺

    之前有童鞋问,另一个站的淘宝商铺是如何加到Wordpress主题中的,其实使用iframe 标签可以很轻松实现这一功能。

    通过添加iframe 标签可以使任何HTML页面实现内联框架,方便嵌入任意网页,代码如下:

    <IFRAME src="http://wopus.taobao.com/" style=" margin: 10px 0 0 1px;" width=976  height=1530 scrolling=no ALLOWTRANSPARENCY="no"></IFRAME>

    其中:

    • http://wopus.taobao.com/为嵌入的网页的地址。
    • width=976  height=1530为嵌入的网页的宽度和高度,可根据自己的页面大小适当调整。
    • scrolling=”no” 为嵌入的网页的滚动设置,当内容范围大时,可设置为允许滚动 scrolling=”yes”。
    • ALLOWTRANSPARENCY=”true” 为允许透明设置,把true改为no为不透明。

    将上面代码加到模版文件的适当位置即可。

    下面以WP默认主题twentyeleven为例,教大家制作一个独立的商铺页面模版:

    复制一份twentyeleven主题page.ph模版,重命名为:taobao.php,打开这个模版文件在最上面添加:

    <?php
    /*
    Template Name: taobao
    */
    ?>

    其中的模版名称:taobao  可以任意。

    并用:

    <?php get_header(); ?>
    <div id="primary">
    <IFRAME src="http://wopus.taobao.com/"  style=" margin: 10px 0 0 10px;" width=976  height=1530 scrolling=no ALLOWTRANSPARENCY="no"></IFRAME>
    </div><!-- #primary -->
    <?php get_footer(); ?>

    替换原来模版中的所有代码,保存之后,进入WP后台新建一个页面,右下模板选择:taobao,发布即可。

    效果演示

    是不是有些像淘宝客,可进入WP后台—设置—阅读—首页显示选择一个静态页,并选择这个新建的页面作为主页。

  • 为WordPress主题添加图片暗箱特效

    所谓的暗箱,就是点击小图片弹出窗口并显示大图片,类似的Wordpress插件众多,比如:wp-slimbox2、jQuery Lightbox、jQuery Colorbox、Gameplorer`s WPColorBox、shadowbox-js、Auto Highslide等等,功能效果都相似。其实不用插件简单几步就可将这一特效集成到WordPress主题中,而且加载的文件也比插件小的多。喜欢折腾的童鞋可以参照下面的方法操作:

    首先,下载所需文件,解压后将pirobox文件夹内的所有文件放到你所使用主题的目录中。

    文件下载:pirobox

    其次,打开主题header模版文件,在</head>前面,分别添加:

    所需样式:

    <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/img/style.css" />

    必须的jquery.min.js及特效pirobox.min.js文件:
    <script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery.min.js" ></script>
    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/pirobox.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    $().piroBox({
    my_speed: 400, //animation speed
    bg_alpha: 0.3, //background opacity
    slideShow : true, // true == slideshow on, false == slideshow off
    slideSpeed : 4, //slideshow duration in seconds(3 to 6 Recommended)
    close_all : '.piro_close,.piro_overlay'// add class .piro_overlay(with comma)if you want overlay click close piroBox
    });
    });
    </script>

    如果你所使用的主题已加载了jquery.js,可以免去jquery.min.js文件加载代码。

    最后,集成该特效除了加载必须的JS和样式文件,关键是为日志中的图片链接自动添加JS特效所需的固定标签属性(class=”pirobox_gall”)。将下面代码扔到主题functions.php中


    add_filter('the_content', 'pirobox_gall_replace');
    function pirobox_gall_replace ($content)
    {   global $post;
    $pattern = "/<a(.*?)href=('|")([^>]*).(bmp|gif|jpeg|jpg|png)('|")(.*?)>(.*?)</a>/i";
    $replacement = '<a$1href=$2$3.$4$5 class="pirobox_gall"$6>$7</a>';
    $content = preg_replace($pattern, $replacement, $content);
    return $content;
    }

    完成暗箱特效集成,简单吧。之后,点击日志中的图片,就会华丽地弹出窗口展示该日志中所有插入的图片,可手动播放也可以自动播放。下面的演示是通过shadowbox-js插件实现的,真正集成后的效果要比这个炫。或者到我的站:http://zmingcx.com/gallery/enjoy 查看真实效果。

    无图像只有图片链接一样会显示特效点(击链接查看效果)

    另外,集成该插件后,如果日志中有多张图片,只需正常插入一张就可以了,其它只需插入图片链接,可以加快页面打开速度。

    举一反三,你也可以尝试将http://www.pirolab.it/pirobox/中的特效集成到主题中,这个特效JS弹出窗口,可适应屏幕的大小,并可移动,关键就是为图片链接添加不同的标签属性。

  • WordPress 3.2 主要新增功能详解

    之前陆续写了一些关于WordPress 3.2的文章,但都不全面,今天把WordPress的官方文档中WordPress 3.2的阅读了一下并整理了WordPress 3.2的新功能。

    WordPress 3.2新功能:

    • 重新对控制面板的的结构做了调整,重新设计了UI,并且把功能做了系统的归属化(比如在发布日志这些快速链接按钮在控制面板的导航里消失了)。
    • 启用新的WordPress默认主题:Twenty Eleven。
    • WordPress编辑器全屏功能。
    • 管理员工具栏功能增强,增加了几个功能链接。(官方的表述是:Admin Bar,其实只要是注册并登陆之后,都可以看到工具栏,只是上面的功能不同。)
    • 提供浏览器兼容性。(a,不在支持IE6浏览器;b,开始淘汰对IE7的支持;c,如果使用WordPress后台不兼容的浏览器,会有很疯狂的提示。)关于浏览器的兼容需要多说几句,WordPress早期的开发是在Firefox下完成的,所以,有些朋友肯定知道,WordPress控制面板本身对IE浏览器的支持就很差,但IE也在改变,所以WordPress也开始尝试更好的支持IE高版本浏览器,比如IE8/9/10。另外一点就是,国内的浏览器,比如QQ浏览器,搜狗浏览器,360安全浏览器,遨游,世界之窗,都有可能不被支持,理由就是他们的内核都是基于IE的,当然如果双核的,比如webkit内核的,那就么什么问题。
    • WordPress运行环境的变化。(PHP版本:5.2.4或者更高;Mysql版本:5.0.15或者更高)这里有一个细节,5.2.4和5.2.17的版本高低,5.2.17>5.2.4;5.2.40>5.2.4;所以,5.2.4和5.2.40是不一样的。
    • WordPress代码更有效率,也更轻量级。

    另外,在WordPress控制面板,工具–可用功能 中,有一个快速发布的按钮,各位可以试试这个功能,这个功能比较有意思,可以把 快速发布 拖到书签栏中,然后把当前标签页的内容快速发布到WordPress博客中去。

    其他就是一些比较详细而细节的改变了。更多的改变还是在三个方面:控制面板;主题功能;插件功能。

  • Wopus问答第一期

    以后Wopus将不定时的从Wopus问答中分享一些精彩的问答内容给需要的同学:

    1、很多同学在下载主题之前都会关注很多相关的问题,其中有一个问题也是最常出现的,那就是主题的语言,如果碰上英文主题就会觉得很难用,那么这个问题将探讨一下中文主题与英文主题的区别:中文主题与英文主题的区别是什么;

    2、尽管WordPress已经步入3.0了,也一直有很多同学从其他的博客程序转到WordPress来,但还是有很多同学对WordPress不是很了解的,这个问答简略的介绍了WordPress能做些什么类型的网站:新手提问——WP能做什么;

    3、在WordPress内容页的评论里,除了评论的内容外还会显示非评论的内容,这些内容很大部分是站外的引用提醒,这个问题就解释下这些引用的内容是什么:pingback与trackback的区别是什么;

    4、WordPress的主题可以做得很简单,也可以做得非常复杂,但不管如何的简单或是复杂,都离不开主题的基本模板文件:WordPress的主题模板文件命名;

    5、文章内容太长,结果全显示在首页或是列表页上了,这样不但影响查看同时也因为内容太多而影响页面的加载速度,看看如何让列表只显示部分内容:文章列表显示“更多”;

    6、面包屑导航可以清晰明了的指明访客现在所处在博客的什么位置,就像清晰的路标一样,那么如何来制作这个“路标”呢:怎样制作WordPress的面包屑导航;

    7、WordPress的侧边栏可以显示很多不同的内容,可以是主题默认的内容,也可以是后台启用的Widget,但整个博客的侧边栏显示的内容都一样,就有些重复的严重,那就从这个教程里解决重复显示的问题吧:如何实现首页和文章页的侧边栏内容不同;

    8、WordPress不只是用在一个人的博客,也可以是个可以多作者的博客,不同的作者当然就要显示不同的内容了:如何在wordpress侧边栏调用某作者的最新文章列表;

  • WordPress的Tumblr化:Post format功能小试

    主机放在国外的一个好处就是升级 WordPress 变得很方便,看到 Dashboard 里提示有新的 WordPress 版本之后就随手点几下,新版本就自动装好了。这份方便也让 Lucifr 很少再去研究新版本的功能,以至于差点错过了 WordPress 3.1 中这个很不该忽视的 Post format (文章格式) 功能。

    什么是 Post format

    如果接触过 Tumblr 这个“不存在”的博客服务的话,可能会更加容易理解 Post format。简单来说 Post format 就像是一种针对主题的通用类别(Category),通过 Post format 可以将文章分为几类,从而方便主题(Theme)针对不同的类别采用相应的显示风格。

    有哪些 Post format

    目前 WordPress 3.1 已经支持的 Post format 分为以下几个:

    • aside
    • gallery
    • link
    • image
    • quote
    • status
    • video
    • audio
    • chat

    实际上除了这些以外还有一个就是普通类型的 standard,通常可以作为传统意义上的长文章来对待,未指定 post format 的文章都被归为此类。

    可以看出,和 Tumblr 类似,这些 Post format 基本上涵盖了各种文章类型,但与之前用户自定义的“类别”不同,Post format 是由 WordPress 官方定义的,也就是说主题创作者只可以从这些分类中进行选择,并为相应的分类制作出对应的风格来。这就确保了用户在不同主题之间切换时,Post format 保持了一致性。在这一点上和 Tumblr 的理念也是一样的。

    如何为主题添加 Post format 功能

    由于 Post format 基本上是为主题制作者设置的,对于普通用户来说,可能为既有主题添加 Post format 功能,并达到如 Tumblr 众多精美主题的风格水准并不是件很容易的事。所以以下的内容也只是供参考,并不是详细的教程。

    添加主题支持

    需要在主题的 function.php 中添加 add_theme_support() 来告诉 WordPress 主题中需要激活的 Post format 类型。如:

    add_theme_support( 'post-formats', array( 'aside', 'gallery' ) );
    

    这样就开启了对 aside 和 gallery 这两种 Post format 的支持。这时在 WordPress 后台的编辑文章页面就可以看到相应的 Post format 选项,并为文章指定相应的 Post format 了。

    post-format-backend

    在主题中整合 Post format

    经过上述这一步,只是添加了主题对 Post format 的支持而已,要在前台显示出不同 format 之间在风格上的区别,这才是主题制作上的重头戏,也留给了创作者很大施展的空间。

    如何将不同的类型的文章展示出不同的风格呢?简单来说,就是通过条件语句加上 CSS 的控制来达到的。

    目前 Lucifr 就在修改使用中的这个主题,以让其实现 Post format 功能,以 aside 类别的添加为例:

    <?php if ( has_post_format( 'aside' )) { ?>
        <div class="post clearfix format-aside">
            <a class="view_post" title="<?php the_title(); ?>" href="<?php the_permalink(); ?>">Permalink for this post</a>
            <div class="aside-pointer"></div>
            <div class="aside-entry">
            <?php the_content(); ?>
            </div>
        </div>
    <?php }else { ?>
    

    在显示文章列表的 entry.php 中添加了以上的代码之后,就为 aside 创建出了一个特殊的格式,配合一些 CSS:

    .aside-entry {
        background: none repeat scroll 0 0 #FFFFFF;
        border-radius: 4px 4px 4px 4px;
        box-shadow: 1px 1px 1px #A0A0A0;
        padding: 12px 30px;
        color: #666666;
        font-size: 14px;
    }
    
    .aside-entry a {
        color: #3174A3;
    }
    
    .aside-pointer {
        background: url("images/aside-pointer.png") no-repeat scroll 0 0 transparent;
        display: block;
        height: 17px;
        margin: 12px 0 0 -13px;
        position: absolute;
        width: 13px;
    }
    

    就可以显示出与正常(standard)文章不同的风格:

    post-format-aside

    如图所示,上方的 aside 属于简短形式的不重要的文章,所以一切从简,标题、作者、发表时间等信息都不予显示。

    同理,我们也可以为其它的 Post format 创造出独特的风格来。

    只要按照这样的写法就可以了:

    <?php if ( has_post_format( 'aside' )) { ?>
        这里写入 aside 的格式
    <?php } else if (has_post_format('gallery')) { ?>
        这里写入 gallery 的格式
    <?php } else if (has_post_format('link')) { ?>
        这里写入 link 的格式
    ...
    <?php }else { ?>
        最后是普通格式
    <?php } ?>
    

    这样的写法适合各种 Post format 之间差别很大的情况,如果是可以通过 CSS 进行调整的小修改,也可以通过活用 post_class() 函数的方式配合 CSS 来达到目的.比如:

    <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
        <h2 class="post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
        <?php the_content(); ?>
    </div>
    

    配合 CSS:

    .format-aside .post-title {
        display:none;
    }
    

    就达到了只在 aside 类型中隐藏文章标题的作用,同理也可以调整字体、背景等等。

    后记

    Post format 功能是 WordPress 向 Tumblr 的一次学习,在我看来,这反映出开发者们认识到了 WordPress 在个人使用时还不够简单、纯粹。

    目前已经有一些商用主题开始支持 Post format,相信之后个人用 WordPress 主题会涌现出更多的 Tumblr 风格吧。

    本文转载自:http://lucifr.com/40068/wordpress-3-1-getting-more-tumblrized-with-post-format/

  • 解决Win主机重定向死循环问题

    越来越多的童鞋反映,升级WordPress 3.1后,打开页面浏览器会提示,该网站有重定向循环问题。遇到这一问题的童鞋使用的都是不能完美支持WP的Win主机,新版对Win主机IIS 6.0有兼容问题,虽然我没有Win主机,但有童鞋问,就帮大家查找了一下解决办法,最后在官方论坛上看到有人给出了答案。

    安装下面这个禁用重定向插件可解决问题:

    http://wordpress.org/extend/plugins/permalink-fix-disable-canonical-redirects-pack/

    或者直接把这句代码加到主题的functions.php模板文件中:
    remove_filter('template_redirect', 'redirect_canonical');
    以上代码方法,未经本人测试,请自己酌情折腾!

  • 批量删除自定义栏目

    WordPress自定义栏目(自定义域)功能强大,很多主题和插件通过添加自定义栏目来实现一些特殊功能和效果,比如我做的热点新闻主题也 大量使用了自定义栏目,来显示指定的图片和调用相关内容,还有比较常用的日志浏览统计插件WP-PostViews也会向数据库写入自定义栏 目:views,如果你没有正常卸载,也会留言在数据库中成为垃圾数据。特别是一些喜欢在自己网站上试用CMS类型主题和插件的童鞋,这些垃圾数据将会更 多,更有甚者,我试过一款国外的CMS主题,启用后竟然自动为每篇文章添加了10几项自定义栏目…如果你的文章较多手动删除这些自定义栏目不现实,其 实只要执行一句SQL命令,就可批量删除这些自定义栏目添加的数据表。命令为:
    DELETE FROM wp_postmeta WHERE meta_key = "自定义栏目名称";
    具体操作:

    登录你的phpMyAdmin数据库,点击上面的“SQL”。

    进入数据库查询页面,在其中输入上边的命令,并执行即可:

    执行该命令后,可以在自定义栏目下拉列表中查看刚才的命令是否将该自定义栏目名称删除了。

    提示:操作数据库有风险,请提前做好备份,以防万一。

  • ScribeFire:博客离线发布工具

    ScribeFire ,一款出色的离线博客发布工具,让您轻松发布日志到您的博客,支持大部分博客系统,当然也包括Wordpress,功能强大。ScribeFire有不同 的版本,支持Firefox 、Chrome、 Opera和Safari浏览器扩展,目前只有Firefox扩展有中文版,界面也最友好,如图:

    ScribeFire完美结合各种主流浏览器,与WindowsLiveWriter相比小巧方便,可以离线写日志,在线再发,方便一稿多投,可调用博客模板预览效果,赶快用ScribeFire写篇日志,试试效果如何。

    请分别使用不同的浏览器点击相应链接,安装ScribeFire扩展工具。

    Firefox扩展安装 |Chrome 扩展安装 | Safari 扩展安装| Opera 扩展安装

  • 直接从www.gravatar.com主站加载头像

    近日,Gravatar网站CND(内容分发网络)未知原因出现问题,国内无法显示以0.gravatar.com和1.gravatar.com为前缀的头像,而以www.gravatar.com为前缀的却可以,如果你启用了头像缓存插件或主题具备头像缓存功能,空间主机又在国外,不会受到影响,而国内主机则无法实现头像缓存,这一问题严重拖慢了页面打开速度.
    可能有人会问,为什么有的站点的Gravatar头像地址是以www.gravatar.com开头,有的却是以0.gravatar.com和1.gravatar.com为前缀呢?WordPress 从2.5版开始集成了Gravatar头像功能,随着使用Gravatar头像的用户越来越多,为了减轻服务器负担,Gravatar网站采用CDN(内容分发网络),就近从Gravatar网站服务器加载头像,提高页面打开速度。正因为如此从WordPress 3.0开始,改进源代码适应CDN,提高头像加载速度。默认情况下还在使用老版本WordPress的用户,由于没有启用CDN功能,所以前缀是www.gravatar.com,直接从主站加载头像,不会受到影响。
    下面就说说如何修改WordPress源文件,直接从www.gravatar.com加载Gravatar头像。
    打开WordPress程序wp-includes目录中的pluggable.php
    在第1649行找到:
    $host = sprintf( "http://%d.gravatar.com", ( hexdec( $email_hash{0} ) % 2 ) );
    修改为:
    $host = sprintf( "http://www.gravatar.com", ( hexdec( $email_hash{0} ) % 2 ) );
    在第1651行找到:
    $host = 'http://0.gravatar.com';
    修改为:
    $host = 'http://www.gravatar.com';
    完成保存后覆盖原文件即可。
    再打开评论页面查看源文件,头像全部是以www.gravatar.com开头了。