现在的位置: 首页 > Wordpress > WP技巧 > 正文
WordPress侧边栏
2010年06月03日 WP技巧 ⁄ 共 4125字 评论数 59 ⁄ 被围观 9,070+

插件折腾得差不多了,现在开始折腾侧边栏了。因为以前侧边栏都是靠插件以及主题自带的小工具来实现的,现在插件没了,小工具又不可能面面俱到,只好放弃小工具了,全部采用代码实现。这样做的好处是可以随心所欲定制自己的侧边栏,缺点就是需要尝试众多的代码,工作量比较大,不像小工具托动即可实现。而且要是换主题的话就要全部重来,好在已经决定不换主题了,就用这个了。

下面以我自己的侧边栏为例,介绍一些常用的侧边栏调用代码。也就是说,调用代码直接放在主题目录下的sidebar.php文件里,无须是使用任何小工具即可实现侧边栏的各种功能。

首先是搜索栏,去掉wordpress默认的搜索,换成google的搜索广告,既满足了在站内搜索的需求,又可以及时搜索网络,省去了另外打开新页面的繁琐。当然前提是要申请到google adsense才行,所以代码就不贴了,每个人都是不一样的。

接着是最新文章,代码如下:

<h2>最新文章</h2>
          <ul>
            <?php wp_get_archives('type=postbypost&limit=10'); ?>
          </ul>

其中数字10是显示文章数目,可以自定义。

再接下来还是个google的小广告,无须多说。自定义个名称如“喜欢你没道理”,然后直接复制代码过来即可。

然后是文章分类和文章索引栏目,一般都是以列表显示的,个人觉得有些占空间,所以采用下拉框,还把两个放在一栏,这样显得紧凑些。因为不是很懂代码,所以还是采用原始的笨方法,就是用一个表格来实现:

<table><tr><td>
		  <h2>文章分类</h2>
		  <form action="<?php bloginfo('url'); ?>/" method="get">
	      <?php
	      $select = wp_dropdown_categories('show_option_none=文章分类&show_count=1&orderby=name&echo=0');
	      $select = preg_replace("#<select([^>]*)>#", "<select$1 onchange='return this.form.submit()'>", $select); echo $select; ?>
	      <noscript><input type="submit" value="View" /></noscript>
          </form></td>
		  <td>
		  <h2>文章索引</h2>
		  <select name="archive-dropdown" onChange='document.location.href=this.options[this.selectedIndex].value;'>
	      <option value=""><?php echo attribute_escape(__('Select Month')); ?></option>
	      <?php wp_get_archives('type=monthly&format=option&show_post_count=1'); ?>
          </select></td></tr></table>

虽然麻烦了点,但至少自己能看懂。

再接着就是最新评论了,说完整了是带头像显示的最新评论代码。核心代码来自ZWWoOoOo童鞋的带头像显示的最新评论代码- 完善篇。稍微有些复杂:
1、复制下面的代码到主题目录下的functions.php文件里。

function cut_str($string, $sublen, $start = 0, $code = 'UTF-8')
{
 if($code == 'UTF-8')
 {
 $pa = "/[x01-x7f]|[xc2-xdf][x80-xbf]|xe0[xa0-xbf][x80-xbf]|[xe1-xef][x80-xbf][x80-xbf]|xf0[x90-xbf][x80-xbf][x80-xbf]|[xf1-xf7][x80-xbf][x80-xbf][x80-xbf]/";
 preg_match_all($pa, $string, $t_string);
 if(count($t_string[0]) - $start > $sublen) return join('', array_slice($t_string[0], $start, $sublen))."...";
 return join('', array_slice($t_string[0], $start, $sublen));
 }
 else
 {
 $start = $start*2;
 $sublen = $sublen*2;
 $strlen = strlen($string);
 $tmpstr = '';
 for($i=0; $i<$strlen; $i++)
 {
 if($i>=$start && $i<($start+$sublen))
 {
 if(ord(substr($string, $i, 1))>129) $tmpstr.= substr($string, $i, 2);
 else $tmpstr.= substr($string, $i, 1);
 }
 if(ord(substr($string, $i, 1))>129) $i++;
 }
 if(strlen($tmpstr)<$strlen ) $tmpstr.= "...";
 return $tmpstr;
 }
}

2、调用代码到sidebar.php里。

<h2>最新评论</h2>
<ul class="recentcomments">
<?php
global $wpdb;
$sql = "SELECT DISTINCT ID, post_title, post_password, comment_ID, comment_post_ID, comment_author, comment_date_gmt, comment_approved, comment_type,comment_author_url,comment_author_email, comment_content AS com_excerpt FROM $wpdb->comments LEFT OUTER JOIN $wpdb->posts ON ($wpdb->comments.comment_post_ID = $wpdb->posts.ID) WHERE comment_approved = '1' AND comment_type = '' AND comment_author != 'ifenwen' AND post_password = '' ORDER BY comment_date_gmt DESC LIMIT 10";
$comments = $wpdb->get_results($sql);
foreach ($comments as $comment) {
$output .= "n<li>".get_avatar(get_comment_author_email('comment_author_email'), 16)."<a href="" . get_permalink($comment->ID) ."#comment-" . $comment->comment_ID . "" title="on " .$comment->post_title . "">" . cut_str(strip_tags($comment->com_excerpt),16)."</a></li>";
}
$output = convert_smilies($output);
echo $output;
?>
</ul>

其中LIMIT 10是显示评论数量,com_excerpt),16) 中的16是每条评论要显示的文字数量,ifenwen是用户名,目的是不显示此用户的评论,改为自己的用户名吧,comment_author_email'), 16)中的16是头像尺寸大小。

再来个随机文章:

<?php
$rand_posts = get_posts('numberposts=10&orderby=rand');
foreach( $rand_posts as $post ) :
?>
<!--下面是你想自定义的Loop-->
<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endforeach; ?>

再者是友情链接了,本可以直接调用函数,不过为了手动调整,所以还是采用a代码的形式,即普通文字链接显示。

然后是网站统计信息:

<p>日志总数:<?php $count_posts = wp_count_posts(); echo $published_posts = $count_posts->publish;?></p>
<p>评论总数:<?php echo $wpdb->get_var("SELECT COUNT(*) FROM $wpdb->comments");?></p>
<p>网站天数:<?php echo floor((time()-strtotime("2010-4-26"))/86400); ?></p>
<p>标签总数:<?php echo $count_tags = wp_count_terms('post_tag'); ?></p>
<p>页面总数:<?php $count_pages = wp_count_posts('page'); echo $page_posts = $count_pages->publish; ?></p>
<p>链接总数:<?php $link = $wpdb->get_var("SELECT COUNT(*) FROM $wpdb->links WHERE link_visible = 'Y'"); echo $link; ?></p>

最后是网站管理入口:

<h2>选项</h2>
            <ul>
                <?php wp_register(); ?>
                <li>
                    <?php wp_loginout(); ?>
                </li>
                <?php wp_meta(); ?>
            </ul>

就这样,我的侧边栏终于有了雏形了,当然不足的地方还有很多,还要不停的完善才行。欢迎交流!

参加活动:乐铺活动验证



目前有 59 条留言 其中:访客:59 条, 博主:0 条

  1. 否何 : 2011年11月14日22:59:14  31楼

    你右侧边栏显示广告的那个不错,怎么弄的呢?

  2. 蚊哥 : 2012年07月03日22:07:19  32楼

    额。。不知为什么,我的主题复制过来的代码在侧边栏上统统看不见效果…每个位置都试了一遍…求指教是什么原因?


  3. 管理员
    admin : 2012年07月04日07:59:34  33楼

    什么功能看不到?文章里讲了很多项啊 直接用小工具-文本添加即可

  4. 镜界 : 2012年09月09日15:08:37  34楼

    搜到了,学习了


    • 管理员
      admin : 2012年09月10日08:05:33  地下1层

      谢谢


如果觉得文章或者网站对您有帮助请点击 向TA付款 捐赠作者或者点击下面的分享按钮支持作者

更多

给我留言

留言无头像?

无觅相关文章插件,快速提升流量

×