wopus.org

Tag: 主题DIY

  • WordPress随机显示本地头像

    WordPress随机显示本地头像

    随机显示本地头像

    Gravatar头像加载缓慢的问题，一直困扰着我们，启用头像本地缓存或者缓存到类似七牛云上可能是唯一可行的办法。

    还有一个让人郁闷的是，很多评论留言者并没有申请Gravatar头像，只能显示WordPress自带的古怪头像，看着很不爽。

    下面分享一段随机显示本地评论头像的代码，预先准备一些漂亮的图片代替WordPress自带的头像。

    添加代码

    将下面代码添加到当前主题functions.php中：

    1. add_filter( ‘get_avatar’ , ‘local_random_avatar’ , 1 , 5 );
    3. function local_random_avatar( $avatar, $id_or_email, $size, $default, $alt) {
    4.     if ( ! empty( $id_or_email->user_id ) ) {
    5.         $avatar = ”.get_template_directory_uri().’/avatar/admin.jpg’;
    6.     }else{
    7.         $random = mt_rand(1, 10);
    8.         $avatar = ”.get_template_directory_uri().’/avatar/’. $random .’.jpg’;
    9.     }
    10.     $avatar = “<img alt='{$alt}’ src='{$avatar}’ class=’avatar avatar-{$size} photo’ height='{$size}’ width='{$size}’ />”;
    11.     return $avatar;
    12. }

    其中：mt_rand(1, 10);数字为随机图片张数可以自行修改。

    准备头像图片

    在当前主题目录中新建一个名称为avatar的文件夹，里面放10张名称连续的jpg图片，比如1.jpg、2.jpg、3.jpg………，和一张用于管理员的图片，名称为admin.jpg

    下载头像图片

    添加上述代码后，只有管理员是显示固定的图片，其他留言者都是随机显示预先准备的头像图片，包括注册用户。

    可以安装本地上传头像插件：Simple Local Avatars，让注册用户在后台上传头像，从而显示自己固定的头像。

    可能有童鞋会问，已申请Gravatar头像的留言者，是否能显示正常的Gravatar头像，理论上是可以通过判断实现的，不过这就需要到Gravatar头像站点去检测，会严重拖慢速度，得不偿失。

  • 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后台—设置—阅读—首页显示选择一个静态页，并选择这个新建的页面作为主页。

  • 为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;
    }

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