WordPress:Styling Lists with CSS

来自站长百科
跳转至： 导航、​ 搜索

当显示列表内容时，WordPress使用标准的XHTML元素：

  • <ol> 为一个有序的列表 (每条的顺序很重要，所以通常用数字表示)
  • <ul> 为一个无序的列表(通常情况下显示bullets)
  • <li> 为一个列表中一条，可以有序也可以无序。

默认情况下，WordPress中多数列表(和一些列表条目)通过id或者class属性来识别，使样式列表变的简单。通过很小的style.css文件的改动，你可以水平显示出列表而不是垂直显示，设置动态高亮菜单，[[WordPress:#Styling_the_Bullet|改变 bullet符号]]或者给样式编号，移除全部bullet符号，或者这些符号的组合。

WordPress 1.5 嵌套列表设计[ ]

通过WordPress v1.5中的主题创新，不同的主题格式列表有不同的方式。使用者通常想要修改的最多的列表就是边栏目录列表。因为很多边栏有嵌套列表，让我们更深入的研究一下

从检查你使用的主题文件夹中找到的style.css文件开始，多数WordPress主题把边栏菜单部分用sidebar或者menu标示，或者是两者的组合。这样，寻找边栏模板文件，尤其是sidebar.php。以下是sidebar.php文件的样本，你的版本可能有所不同，但是思想概念是一样的。 

<div id="sidebar">
<ul>
  <li id="search"><form method="get" id="searchform"
      action="/wordpress/index.php">
    <div><input type="text" value="" name="s" id="s" />
	<input type="submit" id="searchsubmit" value="Search" />
    </div></form></li>
  <li id="pagenav"><h2>Pages</h2>
    <ul>
    <li class="page_item">
       <a href="http://www.examplesite.com/wordpress/?page_id=2"
	title="About Us">About Us</a></li>
    <li class="page_item">
       <a href="http://www.examplesite.com/wordpress/?page_id=4"
        title="Contact">Contact</a></li>
    <li class="page_item">
       <a href="http://www.examplesite.com/wordpress/?page_id=8"
        title="Site Map">Site Map</a></li>
	</ul></li>
  <li><h2>Archives</h2>
      <ul>
	<li><a href='http://www.examplesite.com/wordpress/?m=200502'
	 title='February 2005'>February 2005</a></li>
	<li><a href='http://www.examplesite.com/wordpress/?m=200501'
	 title='January 2005'>January 2005</a></li>
	<li><a href='http://www.examplesite.com/wordpress/?m=200412'
	 title='December 2004'>December 2004</a></li>
	<li><a href='http://www.examplesite.com/wordpress/?m=200411'
	 title='November 2004'>November 2004</a></li>
      </ul></li>
  <li><h2>Categories</h2>
     <ul>
	<li><a href="http://www.examplesite.com/wordpress/?cat=47"
	 title="Stories of our life">Stories</a></li>
	<li><a href="http://www.examplesite.com/wordpress/?cat=48"
	 title="Computer Tips">Computer Tips</a></li>
	<li><a href="http://www.examplesite.com/wordpress/?cat=6"
	 title="WordPress Tips">WordPress Tips</a></li>
	<li><a href="http://www.examplesite.com/wordpress/?cat=28"
	 title="Web Page Design Advice">Web Page Design</a></li>
     </ul></li>
  </ul>
</div>

当你使用嵌套列表并想要每个列表都有自己的样式的时候，你必须在样式表(style.css)中重建"嵌套"。 

#sidebar ul {attributes}
#sidebar li {attributes}
#sidebar ul li {attributes}
#sidebar ul ul li {attributes}
#sidebar ul ul ul li {attributes}
#pagenav {attributes}
#pagenav ul {attributes}
#pagenav ul li {attributes}


ul
第一个样式(#sidebar ul)设置整体列表的外观. 通常包含整个列表的页边空白和填充样式，也可能包含字体库，颜色和别的内容。
li
#sidebar li 分配样式给现有的列表项目. 这里你可以设置是否包含bullet 符号，你也可以改变字体，字号，或者颜色，你还可以加入边线.
ul li
#sidebar ul li确定第一个嵌套类表的样式. 每个第一级嵌套列表都在这里制定,但是如果它们有详细的CSSID的话，你可以设计每个嵌套的子列表。上述例子中，#search 部分之后, 第一级嵌套列表是#pagenav. 如果你使用页面，这里是页面的列表生成的地方。因为 页面工作在WordPress循环之外, 并且通常高亮显示特殊的信息比如"About Us", "Contact", and "Site Map", 你可能想通过把关于页面外观特殊信息输入#pagenav来设计页面，使它的样式与列表的其他部分不同.
ul ul li
#sidebar ul ul li在#sidebar ul ul中提供了连接的样式 以帮助定义列表的外观。另外，如果你已经定义了#pagenav列表，将会和你剩下的的嵌套列表不同。
ul ul ul li
#sidebar ul ul ul li是二级子表的样式。如果你有一个带有子类的分类列表，分类 标题将是列表的第一级，分类是第二级，而任何子类将是第三级，或者是子表，如下面的例子。一些设计者喜欢在第三级使用一些较小的字体，不同的符号，或者不同的颜色，高亮显示，以区别它们上一层的项目：
  • Category Title
    • Category One
    • Category Two
      • Sub-Category One
      • Sub-Category Two
    • Category Three



设计特定列表项目[ ]

你想让你的分类列表看起来与文档列表不同吗？打开index.php或者sidebar.php，仔细的加入如下样式参数来更改列表项目：

<li id="categories"><h2>Categories</h2>.....

<li id="archives"><h2>Archives</h2>....


要想自定义分类和文档列表，把下列代码加入样式表来单独定义： 

#categories {attributes}
#categories ul {attributes}
#categories ul li {attributes}
#archives {attributes}
#archives ul {attributes}
#archives ul li {attributes}

检查列表的其它部分，给它们一个样式参数名，把它们加入到你的样式表。当你能识别出列表的哪一部分控制列表的哪一方面时，就是改变列表外观的时候了。

设计个人条目[ ]

如果你想使用图片替换技巧设计你的列表，那么每个LI标签需要它自己的类别或者ID，你可以试试Classy wp_list_pages插件。


设计列表[ ]

列表的一个重要部分就是着重号 – 一个吸引访问者眼球的点或者图片，告诉他们"这是个列表"。一个列表中的符号或者数字的样式由样式表中的list-style-type property决定。默认的值是disc。其它基本值是circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, and none。我们把默认值改成别的东西如方块。 

#sidebar li {
   list-style: square;
}

不用输入list-style-type，你可以使用速记形式list-style，而且代替了默认的disc，列表现在使用的是小方块了。


但是不是所有的列表都需要这种着重号，通过他们的整体规划，你只需要知道列表是一个列表就够了。要消除着重号，只需要把样式表修改成这样： 

#sidebar li {
   list-style: none;
}

现在，任何带有<li>的标签，#sidebar内的ID的DIV标签内，都不会在有着重号了。你可以尝试其他不同的值来看看你可能得到什么样的结果。

提示:根据易用性，整齐的列表要比不整齐的列表更容易浏览。

使用图片代替着重号[ ]

厌倦了乏味的着重号吗？让我们用几个CSS技巧来处理这乏味的东西。在这里，使用list-style-image来指示浏览器使用你的图片代替乏味的默认着重号。

找一些有趣的着重图片然后把下面的代码加入你的样式表，来加入一些好看的着重号到你的列表中： 

#sidebar ul {
 list-style-image: url(/wp-images/image.gif);
 }

注意你也可以使用绝对连接而不是相关连接。简单的把url(/wp-images/image.gif )改为url(http://example.com/wp-images/image.gif)就可以了

Adding a Border to Your List[ ]

To add a border, like an underline, after your title, you can simply add a border style to the top of the ul under the title, rather than on the title itself. 

#sidebar ul ul {...; border-top: solid 1px blue; ....}

给你的列表添加边框[ ]

想添加边框，如标题之后的下划线，你可以简单的加入一个边框样式到ul的顶部，标题下边，而不是在标题本身上添加。 

#sidebar ul ul {...; border-top: solid 1px blue; ....}

Go a step further and add a whole box around your list with the title sitting atop it: 

#sidebar ul ul {...; border: solid 1px blue; ....}

更深一步的添加一个带有上方标题的整个围绕列表的方框： 

#sidebar ul ul {...; border: solid 1px blue; ....}


Add a colored background to your list along with its new border: 

#sidebar ul ul {...; border-top: solid 1px blue;
     background:#CCFFFF; ....}

给你的列表连同新的边框一起添加彩色背景： 

#sidebar ul ul {...; border-top: solid 1px blue;
     background:#CCFFFF; ....}


你的最终结果可能显示如下：

Category Title
Category One

Category Two

Category Three

或者也可能扩展成这样：

Category Title
Category One

Category Two

Category Three

你可以从列表设计和着重号上找到很多乐趣。如果你有困难，查看下面列出的资源然后访问WordPress 支持论坛获得帮助。

发现并解决嵌套列表问题[ ]

如果你对你的嵌套列表有疑问，下面的内容可能提供了一些解决方法。同样查看CSS问题解决以获得更多有关样式的帮助。


不合适的标签结构[ ]

导致嵌套列表中的错误或者是non-validation的首要原因就是缺少合适的列表结构。这里是一个很简单的正确的嵌套列表设计。注意当一个新的列表形成(嵌套)的时候，最后一个列表项结束的地方</li>不是闭合的。它是开放的，直到新的嵌套列表完成，然后闭合。 

<ul>
   <li>Category One</li>
   <li>Category Two     <----Note: No Closing List Tag
      <ul>
          <li>Sub-Category One</li>
          <li>Sub-Category Two     <----Note: No Closing List Tag
              <ul>
                 <li>Sub-Sub-Category One</li>
                 <li>Sub-Sub-Category Two</li>     <----Note: Closing List Tag
              </ul></li>           <----Note: Nested List Closed
           <li>Sub-Category Three</li>
      </ul></li>       <----Note: Nested List Closed
    <li>Category Three</li>
</ul>      <----Note: End of entire list

模板标签列表[ ]

列表中使用的不同的模板标签有不同的使用方法并且依赖于列表标签。一些标签自动包含UL 和 LI，这样你所需要做的就是把标签放进列表，它就会做好一切工作。一些标签需要通过模板标签把UL放在合适的，然后它会生成它自己的标签。一些标签要求指明，如果没有在标签参数中列出的话，哪种列表标签形式是需要的或者完全不需要的，

如果你在使用模板标签时，如wp_list_cats or wp_list_pages，对你的嵌套列表产生了什么问题，查阅它们的参数，看看它们如何使用列表标签，与你的使用方法做做比较。

Parent/Child Relationships[ ]

Discussed in The CSS Parent and Child Relationship, lists are one of the big culprits. Styles in the child list items are influenced by its "parents". If the parent's list style features the color "red" and you want the children to be in "blue", then you need to specify the color in the children's list styles to be "blue" so they will override the parent's style

父/子关系[ ]

在 CSS 父和子的关系中讨论过的，列表是很多故障出现的原因之一。子列表项的样式受它的"父"列表的影响。如果父级的列表样式使用了"红色"，而你想让子列表使用"兰色"，那么你需要在子列表样式中进行设置，这样它们才会不受父列表的影响。

WordPress边栏中的嵌套列表通常包括连接。这样，当你设计你想要的列表时，连接的样式将不受列表样式影响。你可以通过给出一个特定的样式，来控制列表中的连接的样式，包括它们的属性： 

#sidebar a {attributes}
#sidebar a:hover {attributes}
#categories a {attributes}
#categories a:hover {attributes}
#archives a {attributes}
#archives a:hover {attributes}

资源[ ]

取自“https://www.zzbaike.com/wiki/index.php?title=WordPress:Styling_Lists_with_CSS&oldid=1617”