首页 > 主题开发 > cms主题开发 > WordpressCMS主题开发05-首页sidebar制作和友情链接添加
2018
05-25

WordpressCMS主题开发05-首页sidebar制作和友情链接添加

这节课,我们会学习:如何制作首页的sidebar和添加热门标签。

首先我们看一下首页,现在要做的就是这块区域

wordpress侧边栏 - WordpressCMS主题开发05-首页sidebar制作和友情链接添加

在这里,我们把“用户登录”改为热门文章,最新留言的功能保留,网友投票的功能删除。

创建sidebar.php文件

首先,创建sidebar.php文件,从index.php把以下代码拷贝到sidebar.php:

<div style="width: 262px; height: 856px;" class="page_other_msg right">
    <div class="left_row"></div>
    <div class="left_row">
    <div class="list">
  
    <p></p>
    <div class="list_bar">// 用户登录</div>
    <div class="list_content">
    <div id="div">分类目录</div>
    </div>
    </div>
    </div>
    <div class="left_row">
    <div class="list">
    <div class="list_bar">// <a href="jeecms/Guestbook.html" target="_blank">最新留言</a></div>
    <div class="list_content">
    <div class="msg_title">匿名网友:</div>
    <div class="msg_content"> 只是想在网上赚点钱,哪怕只是一点点,够我生活费就行&nbsp;<br/>qq2205526845 </div>
    
    <div class="msg_title">匿名网友:</div>
    <div class="msg_content"> 我只是想在网上赚点钱,哪怕只是一点点,够我生活费就行&nbsp;<br/> </div>
    
    <div class="msg_title">匿名网友:</div>
    <div class="msg_content"> 我想要赚点外块,够我付房费就可以了, </div>
    
    <div class="msg_title">匿名网友:</div>
    <div class="msg_content"> 我只是想在网上赚点钱,哪怕只是一点点,够我生活费就行&nbsp;<br/>QQ:964546238 </div>
    
    <div class="msg_title">匿名网友:</div>
    <div class="msg_content"> 我只是想在网上赚点钱,哪怕只是一点点,够我生活费就行 </div>
    </div>
    </div>
    </div>
    <div class="left_row">
    <div class="list">
    <div class="list_bar">// 网友投票</div>
    <div class="list_content"><script language="javascript">
function check_votes(allowCount) {
var voteItems=document.getElementsByName('voteItems');
  var count = 0;
  for(var i=0;i<voteItems.length;i++)
  {
   if(voteItems[i].checked){
     count++;
   }
  }
  if(count==allowCount&&allowCount>1){
   for(var i=0;i<voteItems.length;i++){
     if(!voteItems[i].checked){
       voteItems[i].disabled = true;
     }
   }
   return true;
  }
  else{
    for(var i=0;i<voteItems.length;i++){
       voteItems[i].disabled = false;
    }
  }
  if(count==0){
	  alert("对不起,请至少选择一个投票项!");
	  return false;0
  }
  return true;
}
</script>

	<form name="votes" action="http://www.xuhss.com/jeecms/VoteResult.jspx" method="post" target="_blank">
	<table width="100%" border="0" cellspacing="0" cellpadding="0">
		<tr>
			<td height="30" colspan="2" align="left">你是从哪儿得知本站的?
			<input type="hidden" name="topicId" value="1"/></td>
		</tr>
		<tr>
			<td width="12%" height="20" align="right"><input type="radio" name="voteItems" value="1"/></td>
			<td width="88%" align="left">朋友介绍</td>
		</tr>
		<tr>
			<td width="12%" height="20" align="right"><input type="radio" name="voteItems" value="2"/></td>
			<td width="88%" align="left">门户网站的搜索引擎</td>
		</tr>
		<tr>
			<td width="12%" height="20" align="right"><input type="radio" name="voteItems" value="3"/></td>
			<td width="88%" align="left">Google或百度搜索</td>
		</tr>
		<tr>
			<td width="12%" height="20" align="right"><input type="radio" name="voteItems" value="4"/></td>
			<td width="88%" align="left">别的网站上的链接</td>
		</tr>
		<tr>
			<td width="12%" height="20" align="right"><input type="radio" name="voteItems" value="5"/></td>
			<td width="88%" align="left">其它途径</td>
		</tr>
		<tr>
<td height="30" colspan="2" align="center">
<input type="submit" value="投 票" onClick="return check_votes(1)" style="border:#ccc 1px solid; background-color:#FFFFFF; font-size:12px; padding-top:3px;"/>&nbsp;<input type="button" value="查看结果" onclick="window.open ('/jeecms/VoteResult.jspx?topicId=1', 'newwindow', 'height=300, width=600, toolbar=no, menubar=no, scrollbars=no, resizable=yes, location=no, status=no') " style="border:#ccc 1px solid; background-color:#FFFFFF; font-size:12px; padding-top:3px;"/>
</td>
		</tr>
	</table>
	</form>
</div>
    </div>
    </div>
    <div></div>
    <div style="clear: both;"></div>
    <div></div>
    <!--主体下End--><!--友情链接Begin--><!--页脚End--></div>

然后,在index.php中调用:

    </div>
    <?php get_sidebar();?>
    </div>

刷新一下网站前台,没有变化,OK

修改sidebar.php

首先把“用户登陆”更改为“图文广告”

    <div class="left_row">
    <div class="list">
  
    <p></p>
    <div class="list_bar">// 图文广告</div>
    <div class="list_content">
    <div id="div">在sidebar.php中添加广告图片和文字</div>
    </div>
    </div>
    </div>

这里删除多余的p标签:

    <p></p>
    <div class="list_bar">// 图文广告</div>

保存,来到网站前台刷新,是我们想要的的效果:

You must be logged in to view the hidden contents.

这样可以方便用户修改模板。

“热门文章”功能添加

侧边栏的容器代码都是放在left_row这个div里面:

<div class="left_row"></div>

在这里,我们把“最新留言”的left_row拷贝一遍,在它的基础上进行修改,最后改成这样:

    <div class="left_row">
    <div class="list">
    <div class="list_bar">// <a href="jeecms/Guestbook.html" target="_blank">热门文章</a></div>
    <div class="list_content">

    </div>
    </div>
    </div>

这里我们改一下div的格式:

    <div class="list_bar">// <a href="jeecms/Guestbook.html" target="_blank">热门文章</a></div>
    <div class="orderlist">
	
    </div>
    </div>

然后添加“热门文章”的循环的标签代码:

<?php

$post_num = 10; // 设置调用条数

$args = array(

'post_password' => '',

'post_status' => 'publish', // 只选公开的文章.

'post__not_in' => array($post->ID),//排除当前文章

'caller_get_posts' => 1, // 排除置頂文章.

'orderby' => 'comment_count', // 依評論數排序.

'posts_per_page' => $post_num

);

$query_posts = new WP_Query();

$query_posts->query($args);

while( $query_posts->have_posts() ) { $query_posts->the_post(); ?>

<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">

<?php the_title(); ?></a><br/>

<?php } wp_reset_query();?>

网站前台的效果变成这样:

You must be logged in to view the hidden contents.

热门文章是根据评论的数量来显示的,评论越多,越靠前。

最新留言

先删除多余代码,留下最后一条留言即可:

最后剩下这段代码:

    <div class="list_content">
    <div class="msg_title">匿名网友:</div>
    <div class="msg_content"> 只是想在网上赚点钱,哪怕只是一点点,够我生活费就行&nbsp;<br/>qq2205526845 </div>
    </div>

然后我们拷贝“最新留言”调用的方式,粘贴到仅剩下的那条留言下面:

    <div class="list_content">
    <div class="msg_title">匿名网友:</div>
    <div class="msg_content"> 只是想在网上赚点钱,哪怕只是一点点,够我生活费就行&nbsp;<br/>qq2205526845 </div>
	
	<?php
$comments = get_comments('status=approve&number=5&order=asc');
foreach($comments as $comment) :
$output ='<div class="msg_title">' .get_comment_author().'发表评论说:</div><div class="msg_content">  <a href="' . esc_url( get_comment_link($comment->comment_ID) ) . '">' . $comment->comment_content . '</a><br/></div>';
echo $output;
endforeach;?>
	
    </div>

在这里,我们只需要对照div的样式,你会发现都是一样的,因为我预先调整好了。

然后,把参考代码删除掉,最后的效果就像这样:

<?php
$comments = get_comments('status=approve&number=5&order=asc');
foreach($comments as $comment) :
$output ='<div class="msg_title">' .get_comment_author().'发表评论说:</div><div class="msg_content">  <a href="' . esc_url( get_comment_link($comment->comment_ID) ) . '">' . $comment->comment_content . '</a><br/></div>';
echo $output;
endforeach;?>

wordpress最新留言 - WordpressCMS主题开发05-首页sidebar制作和友情链接添加

网友投票

那在这里,不需要这个功能,所以直接把代码删除掉即可。

热门标签

在最新留言下面,我们来添加“热门标签”的侧边栏:

基于“最新留言”的代码进行修改,然后添加对热门标签的调用:

最终的代码就像这样:

    <div class="left_row">
    <div class="list">
    <div class="list_bar">// 热门标签</div>
    <div class="list_content">
	
	<?php wp_tag_cloud('smallest=8&largest=36&'); ?> // 可以设置标签的最小河最大的数量
	
    </div>
    </div>
    </div>

现在因为我们的文章没有添加标签,所以这里不会有显示,你需要到文章中添加标签就没问题。

侧边栏的功能基本就是这些,随着文章内容增加,侧边栏的数据也会跟着丰富。、

友情链接

我们先把多余的代码删除掉,只保留一个div:

    <?php get_sidebar();?>
    </div>
    <div>
	<div class="page_row">
	</div> 
<?php get_footer();?>

然后,在这个div里面进行一个友情链接的调用:

	<div class="page_row">
		<div class="left foot_msg">
			<a href="http://www.xuhss.com" target="_blank">虚幻私塾</a> |
			<a href="http://www.oxox.work" target="_blank">虚幻大学</a> |
			<a href="http://www.xuhss.com" target="_blank">虚幻私塾</a> 
		</div>
	</div> 

来到网站前台,刷新:

wordpress友情链接的添加 - WordpressCMS主题开发05-首页sidebar制作和友情链接添加

 

 

 

 

最后编辑:
作者:MrBang
WordPress迷

留下一个回复