站长百科 | 数字化技能提升教程 数字化时代生存宝典
首页
数字化百科
电子书
▼
建站程序
开发
服务器
办公软件
开发教程
▼
服务器教程
软件使用教程
运营教程
热门电子书
▼
CSS教程
WordPress教程
导航
程序频道
推广频道
网赚频道
人物频道
网站程序
网页制作
云计算
服务器
CMS
论坛
网店
虚拟主机
cPanel
网址导航
WIKI使用导航
WIKI首页
热点词条
最新资讯
网站程序
站长人物
页面分类
使用帮助
编辑测试
创建条目
网站地图
站长百科导航
站长百科
主机侦探
IDCtalk云说
跨境电商导航
WordPress啦
站长专题
网站推广
网站程序
网站赚钱
虚拟主机
cPanel
网址导航专题
云计算
微博营销
虚拟主机管理系统
开放平台
WIKI程序与应用
美国十大主机
编辑“
设计WordPress标题
”
人物百科
|
营销百科
|
网赚百科
|
站长工具
|
网站程序
|
域名主机
|
互联网公司
|
分类索引
跳转至:
导航
、
搜索
警告:
您没有登录。如果您做出任意编辑,您的IP地址将会公开可见。如果您
登录
或
创建
一个账户,您的编辑将归属于您的用户名,且将享受其他好处。
反垃圾检查。
不要
加入这个!
<span style="border:1px solid #000; text-align:center; float:right; padding:6px;"><strong>导航:</strong> [[WordPress进阶使用|上一页]] | {{Template:WordPress导航}}</span> <div style="clear:both;"></div> ==标题不是页头== 这里所说的标题(heading),不是[[网页]]上的页头(header)/标题栏,但标题也可以包含在页头信息中。是不是有些糊涂了?没关系,下面我们会慢慢向大家解释。 标题和文章题目有些相似。在[[HTML]]中,标题以H1, H2, H3与H4等heading标签为标记。一般情况下,标题字号的数字越大,标题字体越小。 在[[WordPress]]中,使用H1标题字号的主要是网页标题栏部分或标头部分的[[博客]]名称。日志标题、评论标题以及侧边栏标题则使用H2标题字号。根据各个标题的DIV ID,可以对标题进行不同的样式设计。评论或留言经常使用H3标题字号,但有时根据不同主题,也可能使用H2字号。 ==H1标题== 默认情况下,H1字号主要用于页头,也就是[http://www.wordpress.la/codex-%E4%BD%BF%E7%94%A8WordPress%E4%B8%BB%E9%A2%98.html 主题]上方的标头栏。H1字号主要用于模板标签[http://www.wordpress.la/codex-%E6%A8%A1%E6%9D%BF%E6%A0%87%E7%AD%BE-bloginfo%28%29.html bloginfo()]: < h1><?php bloginfo('name'); ?>< /h1> 在主题目录下的style.css文件中可以找到页头的样式信息,通常会以以下方式排列: h1 {attributes} or #header h1 {attributes} 可以在网页的#header部分修改标题的样式。 很多用户希望把页头换成图片,但考虑到可访问性标准和搜索引擎的收录,又想让页头的文字留在原来的位置上。这时可以在style.css页头引用或head部分的header.php模板标签中,加入以下代码,从而将h1和说明信息放在适当的位置上: h1 {display: none; font-size: 150%; color: white....} display:none指示服务器不显示h1标签内的文字。 ==H2标题== 很多[http://www.wordpress.la/codex-%E4%BD%BF%E7%94%A8WordPress%E4%B8%BB%E9%A2%98.html WordPress主题]中都能看见H2标题的身影。使用H2标题频率最高的是日志标题、评论标题与侧边栏(菜单栏)。修改这些H2标题的样式有一定难度。 首先我们来看看style.css文件中,哪些是不同H2标题的样式: h2 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 110%; color: green; font-weight: bold; } #comments h2 {font-size: 90%; color: yellow; font-weight: bold; padding: 2px; background: green; border: solid 1px navy; } #sidebar h2 {font-size: 85%; color: navy; background: transparent; font-weight: bold; border-bottom: dashed 2px yellow; } 每一部分都针对WordPress中的一个H2标题,但每一部分的样式都完全不同。 默认情况下,如果使用以上代码的第一部分,所有使用H2标题的文本格式都是相同的。在H2标签前插入一个ID或类选择符,可以修改H2标题样式。但是(用[[CSS]]进行设计时总会遇到例外情况),如果插入的不是ID或类选择符,这里的H2标题就会作为一个“父级”,影响到所有H2标题的样式,使之完全相同。 例如,假设我们没有事先规定#comments H2的字体颜色,#comments H2会使用父H2标题的颜色——绿色。因此我们一定要列出希望修改的所有属性,一旦有遗漏,父H2标题会以自己的样式填补。 可以在WordPress手册的[http://www.wordpress.la/codex-CSS%E7%96%91%E9%9A%BE%E8%A7%A3%E7%AD%94.html CSS之疑难解答]一文中“CSS父子关系”部分了解更多关于[[CSS]]父子关系的信息。 ==H3与H4标题== 篇幅较长的日志可以用不同字号的标题来区分各个段落或改变话题,也可以达到更好的页面效果。日志中的标题是我们在写日志时自己设定的。一般来说,H3和H4heading[[标签]]比较常见,有时也会用到H5 heading标签。 主题中可能有,也可能没有H3和H4字号的标题。在一些主题中,H3字号主要用在评论中。我们可以在style.css文件中查找H3。如果主题没有使用H3字号,我们可以自己规定在哪些文本中使用H3,如果主题使用了H3字号,继续查看主题是否使用H4。 如果我们要使用H3和H4标题,但日志中又不使用[[HTML]],那么就需要标签中的标题区前后分别手动输入两次空格符。这样,新日志生成时,WordPress就可以自动添加段落标签。在“添加新文章”界面上显示为: ...uses with WordPress that I enjoy using. < h4>More Talk About WordPress Features< /h4> We enjoy talking more about the many features WordPress has to offer the blogger.... 根据[[互联网]]标准,默认情况下h3标签中的字体显示在网页上时,要比h2标签中的字体稍小,但略大于h4标签中的字体。我们可以在style.css样式表单中设置各个标签字号的具体差异。 我们不仅可以设置日志正文的字体大小和颜色,还可以在各段落之间加入图形或其它设计,强化网站的页面效果。下面请看两个示例。 在第一个示例中,我们要在正文上方左侧、标题的背景部分添加一个树叶形的图案。调整页边距,使标题文本下移45像素,为图片留出空间。注意:要将背景图案设为no-repeat,让页面上只显示一片树叶。否则标题上会布满了相同形状的树叶。 [[Image:20100323001.jpg|设计WordPress标题]] style.css中的CSS代码类似于: h3 {font-size:130%; color:#A30000; font-weight:bold; background:url(leaf.gif) left no-repeat; padding: 10px 10px 10px 45px} [[Image:20100323001.jpg|设计WordPress标题]] 接下来是第二个示例,将树叶图移到标题上方,看上去仿佛树叶漂浮在两个段落之间。于是段落间隔因图片而有所扩展。这个示例在style.css中的CSS代码类似于: h3 {font-size:130%; color:#A30000; font-weight:bold; background: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 heading标签开始,之后是日志标题的链接。接下来由< small>标签控制的区块,是管理时间、作者与分类的模板标签。以上代码的页面显示结果是: [[Image:5.jpg|设计WordPress标题]] 还可以将作者标签替换成[http://codex.wordpress.org/Template_Tags/the_author_posts_link the_author_posts_link()],也可以在日志标题中添加其它信息,比如日志发表时间。或者删除这些标签。[http://www.wordpress.la/codex-%E6%97%A5%E5%BF%97%E5%85%83%E6%95%B0%E6%8D%AE.html 日志元数据]中有关于日志信息(日志元数据)的详细介绍。 ==设计标题== 了解[http://www.wordpress.la/codex-WordPress%E4%B8%BB%E9%A2%98%E5%BC%80%E5%8F%91.html WordPress主题]中的基本标题后,就可以在开发主题时用上这些标题了。修改标题样式的方法有很多,比如说改变标题字体大小、颜色、字体类型,或者添加图片以及背景。创意决定一切! 下面是一些关于标题设计方面的资料: *[http://www.pixy.cz/blogg/clanky/rubberheaders/ Rubber Headers] *[http://www.stopdesign.com/articles/replace_text/ Using Background-Image to Replace Text] *[http://www.desilva.biz/css/inline.html Desilva's Headings Side by Side] *[http://www.webreference.com/authoring/style/sheets/headlines/ Making Headlines with Cascading Style Sheets] *[http://www.htmldog.com/guides/htmlbeginner/headings/ HTMLDog's Headings] *[http://webdesign.about.com/library/tags/bltags-headings.htm About.com's Web Design: HTML and Headings (Technical Specifications)] *[http://www.cameraontheroad.com/index.php?p=153 CSS Design Experiments] *[http://www.prelovac.com/vladimir/do-it-yourself-optimize-your-page-headings Optimize Your Page Headings] ==相关条目== *[[Drupal]] *[[OBLOG]] *[[X-Space]] *[[SaBlog-X]] *[[Bo-Blog]] [[category:WordPress中文文档|S]] [[category:WordPress使用|S]]
摘要:
请注意,您对站长百科的所有贡献都可能被其他贡献者编辑,修改或删除。如果您不希望您的文字被任意修改和再散布,请不要提交。
您同时也要向我们保证您所提交的内容是您自己所作,或得自一个不受版权保护或相似自由的来源(参阅
Wordpress-mediawiki:版权
的细节)。
未经许可,请勿提交受版权保护的作品!
取消
编辑帮助
(在新窗口中打开)
本页使用的模板:
模板:WordPress导航
(
查看源代码
)(受保护)