Category: WordPress进阶

  • WordPress 3.0多站点功能解析(三)

    链接地址:

    一,WordPress 3.0 多站点功能解析(一):

    https://www.wopus.org/wordpress-news/wordpress-30/2121.html

    二,WordPress 3.0 多站点功能解析(二):

    https://www.wopus.org/wordpress-news/wordpress-30/2138.html

    WordPress多站点功能全解析第三篇文章,主要是重新梳理一下这个功能,因为在和很多朋友接触的过程中,很多朋友都还在使用二级域名,然后在对应的目录里上传一个新的WordPress来完成新的站点安装,这样不但麻烦,也很消耗服务器的资源,相信WordPress官方推出多站点功能,就是为了让大家使用更加方便,同时也解决WordPress很消耗服务器资源的老问题。

    一,如何开启WordPress的多站点功能,各位可以查看WordPress多站点功能解析(一),这里需要说明的是,WordPress官方在WordPress 3.0.1里对多站点功能有几个更新,第一个是关于多站点功能的目录结构选择,看图:

    wp_network

    如果是想使用子域名,也就是themes.wopus.org这种格式的,勾选第一种格式即可。

    二,WordPress在更新中,也增加了对域名的DNS检测功能,我在点击 Install(安装)之后,出现了一个域名泛解析是否设置好的检测功能,如图:

    wp_network_1

    Wopus帮助站推荐文章:域名泛解析功能全解析

    之后的设置,各位可以参照提示,但在设置之前,还请备份 .htaccess 文件。

    三,WordPress 3.0.1也对安全机制做了加强,在按照提示设置之后,重新登陆,看到了如图的提示:

    wp_network_2

    安装提示,添加到wp-config.php文件即可。

    四,重新登陆之后,已经可以看到多站点功能:

    wp_network_3

    到这里之后,不是马上设置添加二级域名,而是到空间控制面板里绑定泛解析的域名。CPanel主机设置泛解析:Cpanel中设置泛解析域名;DirectAdmin设置域名泛解析。

    关于域名的泛解析,Wopus这里有必要提醒一下,因为泛解析就表示任何一个二级域名都是可以访问的,所以,如果在搜索引擎优化中,这样有可能不利于SEO,所以建议各位在使用WordPress多站点功能的时候,在域名管理的地方不直接使用泛解析,而是使用哪个二级域名就解析哪个。

    五,设置上在主机控制面板的绑定和域名在管理控制面板的解析之后,就可以使用WordPress 3.0的多站点功能了。

    这里Wopus尝试创建了一个测试的,完全正常:

    wp_network_4

    wp_network_5

    六,各位如果有任何疑问,请直接留言。

  • 十大设计精美的基于WordPress的网站

    做为全球最知名的开源程序之一的WordPress的强大是众所皆知的,WordPress几乎已经成了独立博客程序的代名词。而事实上,随着WordPress的开发一直在前进着,WordPress已经开始有了CMS的味道,除了独立博客会选择WordPress程序外,众多的中小型企业网站或是资讯网站也开始使用WordPress来搭建,WordPress已经成了轻量型的CMS首选。

    欣赏一下10个由WordPress搭建的精美网站(博客):

    Cafundoe Studio

    Cafundoe Studio

    (more…)

  • 教程:Akismet获取API KEY的方法

    2011年2月4号更新:

    之前,Akismet和WordPress是关联起来的,但进入2011年之后,Automattic公司开始发力,并对Akismet做了系列的升级,对Akismet的官网也做了改版。Akismet会成为一款重量级的产品。互联网越发达,网络营销越深入,各种互联网广告层出不穷,需要一款好的防垃圾评论插件。

    既然这样,那获取Akismet的方法也就容易多了,主要是不用再和WordPress.com关联。只要在Akismet注册,即可获得API Key。

    Akismet获取API KEY的详细步骤:

    1,访问Akismet官网:http://www.akismet.com

    2,点击 sign up for aksimet:
    1

    3,有一系列的注册:

    现在Akismet的使用范围已经被扩大,而第三点,一个网络应用或者社交网站应用,这可能是Akismet今后一段时间的发展重点,大家一般都是WordPress个人博客,选择第一个: a single site即可。

    下面是对网站网站的表述,一般选择第一个即可:is for my personal blog.

    2

    4,点击 continue之后,需要填写个人信息:

    邮箱地址,如果已经使用了,会有提醒,我们只要点击:request to have your key resent(再次发送key即可),如果邮箱密码不记得,那就找一个自己常用的邮箱地址。

    现在Akismet开始更多的尝试收费,当然,收费是一个可选项,直接把滚动条拉到最左边即可。

    4

    5,填写用户名:

    5

    6,点击最后一个 continue之后,会有这样的一个提示:

    Done!
    Your Akismet subscription is now active.

    An email has been sent to micery@gmail.com with your API key, and instructions on how to activate Akismet in WordPress.

    If you have any questions about your subscription, or need technical support with Akismet, you can contact us using our support form, or by email to support@akismet.com.

    现在我们到邮箱里,可以看到一封akismet的邮件,里面包含一个Akismet API Key,这样就完成了。

    整个注册流程,现在简单而实用很多,各位今后直接自己注册即可。

    提醒一下,就像我前面说的,akismet或许回想sns方面有所动作,所以,想一个好的用户名,然后不要把自己的akismet api key共享。

  • WordPress3.0导航菜单图文使用教程

    上一篇写过如何为WordPress主题添加多个自定义导航菜单,可能很多刚接触WordPress3.0的朋友对这个自定义菜单功能,不知如何使用,今天弄个图文教程,也是为了配合新发布的HotNews pro 2.2版的一个补充使用教程。

    这个新增加的自定义菜单功能,使用其实很简单。

    一、首先,选择进入自定义导航菜单设置页面。

    (以WOPUS发布的WordPress 3.01中文语言包中文为例),还可以下载中文字体样式文件,上传到languages文件夹中,来改善中文字体小,不美观问题。WordPress3.0汉化中文样式文件下载

    登录WordPress后台,管理首页→外观→导航菜单

    如果你的主题不支持WordPress3.0导航菜单功能,顶部会有下图的提示:

    可以参考下面两篇文章,增加主题对导航菜单功能的支持。

    为主题添加多个WordPress3.0自定义菜单

    WordPress 3.0来了,你的主题准备好了吗?

    也可以下载我新发布的HotNews pro 2.2版主题,完全支持WordPress3.0导航菜单功能。

    二、接下来是新建一个自定义菜单.

    在菜单名输入框中键入一个菜单名称(任意),之后点击“创建菜单”。

    也可点击上边的+号,创建多个菜单,这里分别创建了”菜单A”和”菜单B’两个自定义菜单。

    三、菜单创建完成,下面开始进行菜单内容组合。

    选择准备显示在菜单中的内容,包括自定义链接、页面、分类等,点击“添加到菜单”,添加到"菜单A"中.

    最后不要忘记点击"保存菜单",完成菜单组合设置.如下图:

    同样为”菜单B”,添加内容,不要忘记保存菜单.

    第三,在不同的位置显示”菜单A”和”菜单B’(以HotNews pro 2.2版为例).

    分别在不同的位置选择不同的菜单组合,最后点"保存",完成全部菜单功能设置.

    另外,就是如何显示多级下拉菜单.

    这里有一个小技巧,就是用鼠标按住某个菜单项目,向右拖动,就会形成下级菜单或多级菜单,修改后,同样不要忘记保存菜单.不过会不会显示下拉菜单,这就要看主题有无此功能了,HotNews pro 2.2版可支持多级下拉菜单.

    最后形成下图所示:

  • 为主题添加多个WordPress3.0自定义菜单

    一直认为菜单管理功能(Menus),是WordPress3.0的一个亮点(除了集成了MU,这也可能是唯一的亮点),让你可以灵活地控制导航菜单。通 过便捷的拖放界面,摆脱主题自身的限制,自由创建各种组合的链接:内部链接、外部链接、分类等,并且可以将这些自定义菜单嵌入到主题的任意位置,感觉WordPress越来越接近CMS程序了。当然这些功能都需要主题的支持。之前写过一篇让主题如何支持Wordpress3.0自定义菜单的文章。今天教大家,如何添加多个自定义菜单,就以两个为例。
    一、激活主题WordPress3.0自定义菜单功能。
    打开主题的functions.php模板文件,添加:

    // 自定义菜单
    register_nav_menus(
    array(
    'header-menu' => __( '导航自定义菜单' ),
    'footer-menu' => __( '页角自定义菜单' )
    )
    );

    其中:header-menu和footer-menu是菜单的名称之后会用到(可以任意),中文部分将显示在后台菜单设置页面中。

    注:添加上面函数后,主题将不能在WordPress3.0以下版本中使用。
    二、将调用代码添加到准备显示的位置。
    一般是在header中,打开header.php,查找类似:

    <?php wp_list_pages('depth=2&title_li='); ?>

    或

    <?php wp_list_categories('title_li=&orderby=id'); ?>

    替换为:

    <?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>

    或

    <?php wp_nav_menu( array( 'theme_location' => 'footer-menu' ) ); ?>

    其中:header-menu和footer-menu是调用的菜单名称,要与第一步中的相同。
    上面的两句函数先只用一个,另一个可放在其它位置,比如sidebar或footer中,看自己喜好了。
    三、根据不同的位置适当定义一下CSS样式。
    至此完成全部主题修改操作。
    再打开后台菜单选项页面,会看到如下显示:

    nav-5ff

    然后根据自己需要组合不同的两组菜单,分别应用到两个菜单中。

  • 为WP主题添加”网页加载中”特效

    为了加强浏览者的体验,不在等待页面加载时感到枯燥,从而关闭网页,很多网站都会制作一个“网页正在加载中”的提示效果或显示加载进程,加载完成后提示消失,大部分都应用在网站的首页,今天我教大家把这一特效添加到Wordpress主题中。要实现该特效同样要用到jquery,如果大家和我目前用的主题一样,为了实现其它特效已提前加载了jquery,那么正好充分利用jquery的强大功能,添加此特效何乐而不为呢?当然仅仅为了实现这个特效,而去加载50几K的jquery就有点得不偿失了。具体效果可以看我的博客。
    实现方法:

    打开header.php模板文件

    第一步:加载jquery.min.js

    外链接格式:

    <script type=”text/javascript” src=”http://jqueryjs.googlecode.com/files/jquery-1.2.3.min.js”></script>

    内链格式:

    <script type=”text/javascript” src=”<?php bloginfo(‘stylesheet_directory’); ?>/js/jquery.min.js” ></script>

    第二步:在</head>前添加一段JS代码

    <script type=”text/javascript”>
    jQuery(function(){
    jQuery(‘#loading-one’).empty().append(‘页面加载完毕.’).parent().fadeOut(‘slow’);
    });</script>

    第三步:在<body>后添加显示效果样式

    <div id=”loading” style=”position:fixed !important;position:absolute;top:0;left:0;height:100%; width:100%; z-index:999; background:#000 url(这里输入一个图片地址) no-repeat center; opacity:0.6; filter:alpha(opacity=60);font-size:14px;line-height:20px;” onclick=”javascript:turnoff(‘loading’)”>
    <p id=”loading-one” style=”color:#fff;position:absolute; top:50%; left:50%; margin:50px 0 0 -50px; padding:3px 10px;” onclick=”javascript:turnoff(‘loading’)”>页面载入中,请稍后…</p>
    </div>

    图片大小格式不限,不加图片也可以,到此该特效添加完毕.

  • 利用jquery实现图片显隐特效

      大家可以先看看 我博客 的效果,当鼠标悬停到图片上时,图片变得透明,效果很炫是不是。如何实现这一特效呢?当然要用到如日中天、功能强大的jquery,很多WordPress主题中都有加载jquery来实现一些特效,比如滑动菜单、图片幻灯等。下面就教大家如何把这一特效加入到你的WordPress主题中。
      首先需要在header.php中加载jquery,可以使用外链也可以内链。
      外链可以利用google为我们提供的JS库,据说可以提高js加载速度,格式如下:

    <script type=”text/javascript” src=”http://jqueryjs.googlecode.com/files/jquery-1.2.3.min.js”></script>

      内链格式为:

    <script type=”text/javascript” src=”<?php bloginfo(‘stylesheet_directory’); ?>/js/jquery.min.js” ></script>

      然后再在header.php中添加:

    <script type=”text/javascript”>
    $(function () {
    $(‘img’).hover(
    function() {$(this).fadeTo(“fast”, 0.5);},
    function() {$(this).fadeTo(“fast”, 1);
    });
    });
    </script>

      保存后,刷新一下页面看看效果如何。上面的代码是使页面中所有的图片都具有显隐特效,你也可以在上面的代码中添加选择器,让特定Div容器中的图片具有显隐特效,修改(‘img’)为例如(‘.thumbnail img,.entry img’)。
      上面的特效是鼠标悬停到图片上时,图片变得透明,我目前用的主题采用的就是上面代码,还有一种是鼠标悬停到图片上时,图片变得清晰,我制作的HotNews pro2.1主题随机日志缩略图采用是这种效果,代码如下:

    <script type=”text/javascript”>
    $(function() {
    $(‘img’).animate({“opacity”: .5 });

    $(‘img’).hover(function() {
    $(this).stop().animate({ “opacity”: 1 });
    }, function() {
    $(this).stop().animate({ “opacity”: .5 });
    });
    });
    </script>

      代码修改方法同上,采用哪种图片显隐特效就看你喜好了,这一特效支持所有浏览器。

  • 脱离插件,实现主题分页功能

    越少的使用插件,却能让使用者完全体验到主题的各项功能,才是真正好的主题,这也是所有主题设计者应考虑的问题。网上不使用插件实现WordPress功能的文章也很多,之前我也写过WordPress相关日志函数一文,今天再补一个不使用插件实现翻页功能的函数代码。
    WordPress默认翻页功能很弱,一页页翻,弄到你手麻,所以类似wp-pagenavi翻页插件,几乎是WordPress博客必装的插件,也是普及率很高的一款插件。虽然网上有如何把wp-pagenavi插件集成到WordPress主题的教程,但wp-pagenavi插件函数代码拖沓,只是变相启用插件而已,并没有真正脱离wp-pagenavi插件。下面一段轻量级的函数,加上寥寥数行css样式就可以完全替代分页插件了。

    具体实现方法:

    首先将下面一段函数代码添加到主题的functions.php模板文件中:

    function kriesi_pagination($query_string){
    global $posts_per_page, $paged;
    $my_query = new WP_Query($query_string .”&posts_per_page=-1″);
    $total_posts = $my_query->post_count;
    if(empty($paged))$paged = 1;
    $prev = $paged – 1;
    $next = $paged + 1;
    $range = 2; // only edit this if you want to show more page-links
    $showitems = ($range * 2)+1;

    $pages = ceil($total_posts/$posts_per_page);
    if(1 != $pages){
    echo “<div class=’pagination’>”;
    echo ($paged > 2 && $paged+$range+1 > $pages && $showitems < $pages)? “<a href=’”.get_pagenum_link(1).”‘>最前</a>”:””;
    echo ($paged > 1 && $showitems < $pages)? “<a href=’”.get_pagenum_link($prev).”‘>上一页</a>”:””;

    for ($i=1; $i <= $pages; $i++){
    if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems )){
    echo ($paged == $i)? “<span class=’current’>”.$i.”</span>”:”<a href=’”.get_pagenum_link($i).”‘ class=’inactive’ >”.$i.”</a>”;
    }
    }

    echo ($paged < $pages && $showitems < $pages) ? “<a href=’”.get_pagenum_link($next).”‘>下一页</a>” :””;
    echo ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) ? “<a href=’”.get_pagenum_link($pages).”‘>最后</a>”:””;
    echo “</div>n”;
    }
    }

    接下来用下面的代码替换原来模板中默认翻页代码或分页插件代码:

    <?php kriesi_pagination($query_string); ?>

    最后再把下面的样式代码添加到style.css中,刷新一下页面,与使用插件实现的翻页效果一样。

    .pagination{
    line-height:23px;
    }
    .pagination span, .pagination a{
    font-size:12px;
    margin: 2px 6px 2px 0;
    background:#fff;
    border:1px solid #e5e5e5;
    color:#787878;
    padding:2px 5px 2px 5px;
    text-decoration:none;
    }
    .pagination a:hover{
    background: #8391A7;
    border:1px solid #fff;
    color:#fff;
    }
    .pagination .current{
    background: #fff;
    border:1px solid #8d8d8d;
    color:#393939;
    font-size:12px;
    padding:2px 5px 2px 5px;
    }

    上面的样式是我目前用的主题样式,根据不同的主题修改一下边框与背景,基本就可以了,之后删除分页插件。

  • WordPress桌面评论管理软件

    WordPress评论是每个使用WordPress的用户不能忽视的,特别是一些人气很旺的博客,除了来访者有留言的热情,博主也都积极的回复,所以,能及时获知每一个留言,就显得特别重要。当然对邮件有依赖的朋友都能及时发现评论,但如果有一个桌面客户端,能及时通知新评论,那肯定是非常不错的。

    有WordPress爱好者就写了一个这样的桌面客户端。软件是开源的,除了兼容WordPress之外,还兼容了WordPress MU,强大!文件有3.3M,安装之后,输入博客地址,用户名和登录密码,会在任务栏里里显示一个iCon的图标。

    2

    管理界面也算强大,和WordPress管理后台的评论管理页面,功能一样。详细功能各位可以下载测试体验。

    需要说明的,软件是通过 WordPress XMLRPC API 和服务器进行通信,所以如果有使用其他博客平台的朋友想使用这个软件,需要把如下的代码粘贴到博客的API管理的地方:

    wp.deleteComment
    wp.editComment
    wp.newComment
    wp.getComments
    wp.getComment
    wp.getCommentCount

    这个软件和Gmail的桌面管理软件功能是一样的,是一款很不错的程序。最后需要说明的,这是一款国人插件,作者详细信息可以到作者博客上查看。

    程序下载:Google Code下载 | Wopus下载

  • 让WordPress主题随机显示缩略图

    之前本人的新作Hot News主题使用timthumb.php函数自动调整缩略图大小,并生成缓存文件,国外大部分CMS主题也都是采用此方法生成缩略图。但这一方法无法截取外链图片,这一致命弱点最终让我放弃使用timthumb.php函数。目前我使用的新版HotNews pro2.0采用比较普遍的显示缩略图的方法,添加自定义域,并通过CSS控制缩略图大小。有时文章中没有图片,也懒得特意作缩略图,虽然有默认占位图代替缩略图的位置,但文章发多了看着非常单调,也失去了缩略图吸引读者眼球的作用,于是忽随机显示默认缩略图的想法就出来了,下面请看具体的实现方法。
    一般 WordPress杂志型主题,都具备缩略图功能,采用的通用缩略图函数代码如下:

    <?php if ( get_post_meta($post->ID, ‘thumbnail’, true) ) : ?>
    <?php $image = get_post_meta($post->ID, ‘thumbnail’, true); ?>
    <a href=”<?php the_permalink() ?>” rel=”bookmark” title=”<?php the_title(); ?>”><img src=”<?php echo $image; ?>” alt=”<?php the_title(); ?>”/></a>
    <?php else: ?>
    <a href=”<?php the_permalink() ?>” rel=”bookmark” title=”<?php the_title(); ?>”><img src=”<?php bloginfo(‘template_directory’); ?>/images/img.jpg” alt=”<?php the_title(); ?>” /></a>
    <?php endif; ?>

    只需在默认占位图链接位置添加一句”rand()”函数就可随机调用特定目录下的多个图片,下面是修改后的:

    <?php if ( get_post_meta($post->ID, ‘thumbnail’, true) ) : ?>
    <?php $image = get_post_meta($post->ID, ‘thumbnail’, true); ?>
    <a href=”<?php the_permalink() ?>” rel=”bookmark” title=”<?php the_title(); ?>”><img src=”<?php echo $image; ?>” alt=”<?php the_title(); ?>”/></a>
    <?php else: ?>
    <a href=”<?php the_permalink() ?>” rel=”bookmark” title=”<?php the_title(); ?>”><img src=”<?php bloginfo(‘template_directory’); ?>/images/random/img<?php echo rand(1,5)?>.jpg” alt=”<?php the_title(); ?>” /></a>
    <?php endif; ?>

    修改后的代码说明:

    /images/random/img<?php echo rand(1,5)?>.jpg

    前面的img是图片的名称,我们可以新建几个名称为:img1.jpg, img2.jpg,img3.jpg,img4.jpg,img5.jpg的图片,放到/images/random/(图片所在的位置,可根据实际修改。)目录中,也可以是其它格式的图片。将上面的代码添加到模板适当位置,刷新一下页面看看效果如何。
    大家可以刷新一下我博客的首页zmingcx.com,看看随机缩略图的实际效果,还是很不错,不过大家要手下留情,刷几下也就算了,呵呵…