WP主题制作-第6-1课:侧边栏

您一直在期待补充工具栏吗?乍一看,Sidebar看起来很困难,但一点也不难。一旦适应了它的结构,就可以非常快速地对其进行编码和样式化。

在跳到补充工具栏上之前,这是您的index.php文件的外观。

<div id =“header”> 
<h1>
<a href="<?php bloginfo('url'); ?>“> <?php bloginfo('name'); ?> </A>
</ H1>
<?php bloginfo('description'); ?>
</ div>
<div id =“ container”>
<?php if(have_posts()):?>
<?php while(have_posts()):the_post(); ?>
<div class =“ post” id =“ post-<?php the_ID();?>”>
<h2> <a href="<?php the_permalink(); ?>“ title =” <?php the_title();?>“> <?php the_title(); ?> </A> </ H2>
<div class =“ entry”> <?php the_content(); ?>
<p class =“ postmetadata”> <?php _e('Filed under&#58;'); ?> <?php the_category(',')?> <?php _e('by'); ?> <?php the_author(); ?> <BR/> <?php comments_popup_link('无评论&#187;','1评论&#187;','%评论&#187;'); ?> <?php edit_post_link('Edit','&#124;',''); ?> </ p>
</ div>
</ div>
<?php结束;?>
<div class =“ navigation”> <?php posts_nav_link(); ?> </ div> <?php else:?>
<div class =“ post”> <h2> <?php _e('未找到'); ?> </ H2> </ div> <?php endif; ?>
</ div> </ BODY> </ HTML>

别忘了打开Xampp Control…

步骤1:让我们在侧边栏中的所有内容周围包装一个带有名为侧边栏 的类的框  。在容器  框下</ body> 标签上方  键入以下代码  :

<div class =“ sidebar”>

</ DIV>

类侧边栏

第2步:在新的侧边栏框中启动无序列表。

<ul>  –打开无序列表

</ ul>  –关闭无序列表

UL

第3步:添加列表项目(LI无序列表(内部)UL),并把该列表项(内部子标题LI)。

<li> <h2> <?php _e('Categories'); ?> </ H2>

</ LI>

李类别

请注意在组织的<li>  和  </ li>  标记之前添加的制表符间距  。

<li>  –打开列表项
<h2>  –打开子标题
<?php _e('Categories'); ?>  –打印  类别
</ h2>  –关闭子标题
</ li>  –关闭列表项

同样,您不需要包装  <?php e('');。?>  围绕“ 类别 ”一词  。如果您要自己构建此主题,则子标题为<h2>类别</ h2>没关系 

保存index.php文件并刷新浏览器。您应该看到“  类别”  子标题的结构如下:

H2-类别

子标题前面的小项目符号或小圆点表示该子标题位于列表项(LI)中。如果您的无序列表(UL)中有两个列表项,则应该有两个项目符号。这就像做项目符号笔记。每个项目都正确吗?

步骤4
在清单项目中添加以下代码:

<ul> 
<?php wp_list_cats('sort_column = name&optioncount = 1&hierarchical = 0'); ?> 
</ ul>

分类链接,添加

这是什么意思:

<ul>  –打开另一个无序列表
<?php wp_list_cats(); ?>  –调用类别链接列表
</ ul>  –关闭无序列表

保存并刷新浏览器。我的类别链接如下所示:

分类链接

您的默认类别是  未分类。如果未在多个类别下发布,则类别链接列表应仅包含一个链接,即“未分类”。

进一步说明:

  • sort_column = name  –按字母顺序列出类别链接
  • optioncount = 1  –显示每个类别下的帖子数量
  • hierarchial = 0  –不要将子类别转换为子列表项,这说明了为什么我的“  子类别”  链接列在列表的第一级。
  •   –每次添加另一个属性时,必须先键入    才能将其与现有属性分开。例如,    位于sort_column  和  optioncount之间  。

为什么没有 在<?php wp_list_cats()周围包裹  <li>  和  </ li>标记  ;?>

使用wp_list_cats()调用类别链接列表时  ,它会 在每个链接周围自动附加一组  <li>  和  </ li>(列表项)标签。查看您的浏览器,转到“  查看”>“页面源”  或“  源”;窗口弹出后,滚动到底部以查看类别链接列表的代码;请注意,每个链接周围都有一组列表项标签。

未经允许不得转载:创之梦博客 » WP主题制作-第6-1课:侧边栏

赞 (0)
分享到:更多 ()

欢迎各位吐槽评论 2

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. 程志辉不错!推荐使用blankslate主题为模板,在此基础上你可以快速的做出一个自己的wordpress主题!回复