Category: 主题DIY

  • 为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的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/

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

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

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

    Cafundoe Studio

    Cafundoe Studio

    (more…)

  • 为主题添加多个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主题

    在2009年即将过去之际,给大家推荐三款刚出笼的WordPress主题,每款主题都提供了五种颜色风格,主题设计精致,虽然是同一作者的主题,但风格迥异,该系列主题最大的特点就是不需要添加自定义字段就可以自动截取缩略图,这一功能在免费的WordPress的主题中还是比较少见的,主题兼容最新的WordPress2.9版本,对中文的支持也非常好,绝对是重量级的免费WordPress的主题。主题使用也很简单,到主题后台控制面板中选择一颜色风格,再设置一下首页幻灯要显示的分类,其它广告位及社会功能不设置也不会影响整个页面,但是建议安装下面的相关插件,以保证页面正常显示。

    WordPress Theme: Maamo

    1262180154666

    WordPress Theme: Matipid

    183177398

    WordPress Theme: Maliksi

    262183145846

  • 9款WordPress圣诞节风格主题

    圣诞节快到了,WOPUS特意为各位准备了一份圣诞礼物,就是精选出的九款圣诞节风格WordPress主题,为您的博客也增添圣诞喜庆氛围。这九款都是比较新的圣诞风格主题,虽然还有很多类似风格的主题,但大多数没有什么实用价值或较旧,如果大家发现还有更好的圣诞风格主题,欢迎您推荐给我们!

    圣诞风格主题:Christmas Carol

    christmas-6

    圣诞风格主题:christmas-green

    christmas-7

    圣诞风格主题:Hello Snowman

    christmas-7

    圣诞风格主题:ChristmasWaves

    christmas-7

    圣诞风格主题: Winter

    christmas-7

    圣诞风格主题:Christmas Theme

    christmas-7

    圣诞风格主题:jPoison

    christmas-7

    圣诞风格主题:Flower Power

    christmas-7

    圣诞风格主题:Merry Christmas

    christmas-7


  • WordPress技巧:根据发布日期展示广告

    前几天,Wopus分享了一篇:在WordPress第一篇文章里添加广告的文章,今天再分享一篇类似的文章,主要的功能是让广告根据日志发布日期展示。

    假设,我们需要在发布时间超过15天的文章中展示广告,我们今天只需要简单的设置一下代码,就能完成。

    第一步:

    功能实现起来很简单,用PHP编辑器打开当前模版的 functions.php文件。

    复制以下代码进去:
    function is_old_post($post_id=null){
    $days = 15;
    global $wp_query;
    if(is_single() || is_page()) {
    if(!$post_id) {
    $post_id = $wp_query->post->ID;
    }
    $current_date = time();
    $offset = $days *60*60*24;
    $post_id = get_post($post_id);
    $post_date = mysql2date('U',$post_id->post_date);
    $cunning_math = $post_date + $offset;
    $test = $current_date - $cunning_math;
    if($test > 0){
    $return = true;
    }else{
    $return = false;
    }
    }else{
    $return = false;
    }
    return $return;
    }

    第二步:

    打开 single.php文件,把以下代码复制进去:
    < ?php if(is_old_post()){ ?>
    INSERT AD CODE HERE
    < ?php } ?>

    修改完之后,广告只会显示在发布日期超过15天的日志里,当然这个时间是可以修改的。在复制到functions.php中的代码中,有一句是:$days = 15; 这里是$days=num; num的值可以随意设定。

  • 蓝色主题DynaBlue完全使用手册

    主题地址:http://themes.wopus.org/wpthemes/two-column/1242.html

    1、这款主题有很多广告位可以使用,在主题LOGO右侧,可以放置一个468×60的banner广告。
    添加办法:
    在 header.php中找到如下代码:

    < ?php theme_banner_468_ads_show(); ?>

    找到广告代码,替换

    < ?php theme_banner_468_ads_show(); ?>

    2、顶部幻灯片轮换这里,展示4篇文章,这里可以只是文字,也可以是图文的,图片大小是:161×107,这里需要使用到这个插件:featureme.zip,启用插件之后,在发布日志页面,最下方有一行文字:This is a really cool entry, Feature it!,勾选之后,这篇日志就会出现在幻灯片轮换这里了。
    如果需要在幻灯片轮换中加入图片,需要使用到自定义字段功能,创建一个名为:thumbnail的自定义字段,然后自定义字段的值是图片的完整路径。

    3、Feed的地址可以通过在header.php里添加。Twitter的地址可以在后台添加。ID就是在twitter上的登录用户名。

    4、九宫格AD,可以在后台左侧下面主题设置中有125×125 Ads项中,输入相应的链接地址及图片地址,并可设置显示几个AD。

    主题的使用基本就到这里了。主题还是很不错的,大家可以配合这篇教程来使用这款主题。