个人工具
名字空间
变换
操作

WordPress:Designing Headings

来自站长百科
跳转到: 导航, 搜索

目录

一个标题不是一个页眉

标题不是你的页眉,但是标题可以包含在你的页眉当中。感到困惑是吗?啊,你可以在这儿学学。

标题仅仅像一个文章标题。在HTML中,它的结构是使用标题标签例如H1, H2, H3,H4。一般来说,标题的数字越大,字体越小。 在WordPress中,H1标题一般是专给页眉中或者网页顶部发现的博客标题使用的。H2标题通常出现在文章标题,评论标题或者工具条中。这些中的每一个都可以设计的不同,取决于它们的层ID。H3标题通常评论中出现,虽然它可能被H2 标题代替,这取决于主题。

The H1 标题

默认情况下,H1标题在页眉旁边,一般认为是你的网页主题报头。它通常有bloginfo()模板标签。

<h1><?php bloginfo('name'); ?></h1>

在你的主题文件夹的style.css文件中,你会找到它的样式的信息。它通常被列为:

h1 {attributes}

或者

#header h1 {attributes}

你可以在你的网页的#header内部改变标题的外观。

许多人想用一个图像来替换他们的页眉,但是仍然将文件留在那儿,使其符合权限标准,也能提供给搜索引擎。通过将下面的添加到你的style.css标题参考或者列在head部分的header.php模板文件style中,你可以将h1description放在合适的位置上:

h1 {display: none; font-size: 150%; color: white....}

display:none指示浏览器不要在h1标签内部显示内容。

The H2 标题

在不同的WordPress 主题中都可以发现H2标题。它通常可以在文章标题评论标题工具条或者菜单中发现。设计这些,许多H2标题可以变得稍微复杂。

让我们来看看,哪个可能是你的style.css中不同的H2标签的形式。

h2 {font-family: Verdana, Arial, Helvetica, sans-serif;
       font-size: 110%; color: green; font-weight: bold; }

#评论 h2 {font-size: 90%; color: yellow; font-weight: bold;
       padding: 2px; background: green; border: solid 1px navy; } 

#工具条 h2 {font-size: 85%; color: navy; background: transparent;
       font-weight: bold; border-bottom: dashed 2px yellow; }

在WordPress中,这些部分中的每一个都有一个H2标题,但是每一个的设计都不同。

默认情况下,使用第一个例子,任何时候列出了H2,它看起来都是那样的。通过在H2标签前,加上一个ID或者级别选择器,你就可以更改外观。但是,CSS样式通常有一个but,在一个确认的ID或者一个级别选择器的外边,它的作用就像一个面板,影响其它的H2标题。

例如,如果我们没有为#comments H2设计字体color,那么颜色就是母亲的的 H2,是绿色的。注意要列出你可以更改的所有不同的属性,记住母亲的H2会填满你省去的任何空白。 你可以在, 发现并修理故障中的名称为 CSS母子关系的Codex文章上学习更多的CSS母/子关系的知识。

H3 和H4 标题

如果你有意想写长篇的文章,使用标题可以分开文章部分,表明主题的一个更改,或者仅仅加上一个小的有美感的"空格"或者图表的元素。当你写文章的时候,你创建了文章部分标题。一般来说,使用的是h3h4标题标签,虽然有时候也可能包含h5

你的主题有可能包括或者不包括h3h4。在有些主题中,h3标签是在评论内部使用的。通过搜索h3,你可以轻易地在你的style.css中查看。如果它没有被使用,你可以创建你自己的,如果它得到了使用,就使用h4标签。 如果你在文章中没有使用HTML,使用它们,你手工将它们输进部分标签周围的标签,在它们之前和之后留有两个空格。这样WordPress在产生文章的时候,就知道自动地添加段落标签。在你的写文章 界面上,它可能看起来像:

...我喜欢使用的 WordPress 用法。.

<h4>谈论更多的 WordPress 功能</h4>
我们喜欢谈论更多的WordPress提供给写博客的人的一些功能…. 

环球网标准显示的h3标签所拥有的类型,默认情况下,比h2标签稍微小一点,但是比h4标签字体大。你可以在style.css样式表内部控制大小的不同。但是你并没有局限在那儿。

在一篇文章中分割你的内容,不仅仅可以显示丰富多彩的和较大的字体。你可以在文章的这些分割部分添加图形和样式,以提高你站点的外观。让我们来看看两个例子。

在第一个例子中,我们使用了一个叶子的图像,放在文本左边的标题的背景上。Padding得到了调整,这样标题的文本会移动45px来为背景图形挪出空间。注意,我们也将背景图形设置成了no-repeat,因此只会出现一个叶子。否则的话,整个的标题都会充满着叶子。

left
More Talk About WordPress Features

我们喜欢谈论更多的WordPress提供给写博客的人的功能….

style.css中关于这个的CSS可能看起来像:

h3 {font-size:130%; color:#A30000; font-weight:bold; 
背景:url(leaf.gif) left no-repeat; 
padding: 10px 10px 10px 45px}

中心

关于WordPress功能的更多的讨论

我们喜欢谈论WordPress提供给写博客的人的很多的功能....

在第二个标题例子中,我们移动了叶子图像,这样它便出现在标题的上面,看起来叶子图像就像在文章段落之间漂浮。这个段落之间添加了更多的空格。在style.css中关于这个的CSS也许看起来像:

h3 {font-size:130%; color:#A30000; font-weight:bold; 
背景:url(leaf.gif) no-repeat top center; 
padding: 60px 10px 10px; text-align:center}

标题可以给你的站点的总体设计添加许多的精彩,因此运用你的想象力,愉快地设计你的标题。

标题详细信息

在WordPress中,许多文章标题只在文章的标题上添加信息。许多标题包括时间,日期,作者,以及文章所属的类别。你可以为你的标题选择包括或者不包括什么样的信息。

下面是一个完全载入的文章标题的例子。

<h2>
<a href="<?php the_permalink() ?>" 
     rel="bookmark" title="Permanent Link to 
     <?php the_title(); ?>">
     <?php the_title(); ?></a>
</h2>
<small>
Posted <?php the_time('F jS, Y') ?> 
by <?php the_author() ?>
in <?php the_category(', ') ?></small>

它以一个h2标题标签开始,然后包含一个对于文章标题的链接。在下一个部分中,由<small>控制的是,关于时间,作者和类别的模板标签。它可能看起来像这样:

在WordPress中说故事
Harriet Smith在2005年二月二十一日,星期一发表的 in WordPress, Tales

你可以将作者标签改为the_author_posts_link(),或者给文章标题添加更多的信息像时间。或者移除这些标签。在自定义你的文章Meta 数据库部分中的文章中学习更多的关于文章meta数据库部分。

设计标题

既然你现在已经知道了在WordPress主题的哪个部分中找到基本的标题,现在是有些乐趣的时候了设计或者修改你自己的主题。有许多种方式可以控制你的标题设计。你可以改变字体大小,颜色,字体种类,或者添加图形和有趣的背景。发挥你的想象力来做这件事! 这儿有一些资源,帮助你设计你的标题。

留言