wordpress 主题一步步制作教程!第25课 留言模板(图解)

你几乎完成了。坚持一下最后这一篇课程。这篇你将涉及到所有博客的最重要的东西;评论模板。在我看来,一个博客将不成为我博如果它不允许读者留言。可能对一些人来说,评论或者留言并不是那么重要,但是我觉得这是非常奇怪的去想象不可以留言博客。

你应该知道:

  • 没有快速的方式在 comments.php 建立评论模板
  • 大部分的 WordPress 设计者使用来自 WordPress 默认主题(Kubrick)默认评论模板根据
  • 一些设计者会修改默认的评论模板去适合他们自己的需求。
  • 你将使用我的对默认评论模板的修改版本。

 

第1步

  • 创建一个新文件:comments.php.
  • 把我的 comments.txt 文件中的内容拷贝到你的 comments.php
  • 保存 comments.php 文件。

第2步

  • 把我的 comments-template-css 文件中的内容拷贝到你的 style.css 文件中。
  • 复制到 style.css 的底部或者刚好 #footer 的上面。

第3步

single.php 文件中,entry DIV 的下面,输入以下代码:

<div class=”comments-template”>
<?php comments_template(); ?>
</div>

comments-template.gif

comments_template() 这个函数是用来从 comments.php 文件调用评论模板。 comments.php 文件然后就会根据它的模板(或者代码)去显示评论列表。列表中的每个条目是一条评论。

你同样可以把 comments_template() 函数用到 page.php 文件以让人们可以在静态页面也可以留言。是否这么做取决于你,如果你喜欢,重复上面的三步修改 page.php 文件。

第4步

第四步是验证你的代码,然而可以不进行第四步的,因为你在使用的是我已经整理过的默认主题评论模板的修改版。我已经替你验证过代码了。

验证:

  • 查看 > 页面源代码
  • 拷贝所有源代码
  • 然后到 validator
  • 把你的代码粘贴到 Direct Input 框中。
  • 点击 Check

以后的参考(当你创建你自己的主题和评论模板),下面是需要验证的页面:

  • 主页 — Home page
  • 存档页面 — Archive pages
  • 类别页面 — Category pages (如果你自定义了类别页面)
  • 搜索结果页面 — Search result pages
  • 静态页面 — Pages (如:About)
  • 单一日志页面 — Single post view page
  • 单一日志没有留言 — Single post with no comments
  • 单一日志有留言 — Single post with comments
  • 单一日志含有必须登录信息 — Single post with must login message
  • 单一日志没有必须登录信息 — Single post with no login required message
  • 密码保护的单一日志并有留言 — Password protected single post with comments

评论模板的进一步解释

  • 评论模板从根本上说是一个有序列表(OL),不是无序的,尽管它们基本上同样方式工作。 无序列表是以圆点列表组织的。有序列表则是以数字列表组织的(每个条目都有一个数字,从1开始)。
  • single.php 文件中,你用 comments-template DIV 围住comments_template()。现在你的评论模板在一个 DIV 标签中的一个有序列表中。

当你你的日志是密码保护的,你的评论同样是密码保护的:

password-protected.gif

这个修改版的留言模板有一个 H2 子标题显示 Password Protected。默认的留言模板是没有的。

下面展示了哪些东西组成了你的留言列表:

comments-template-core.gif

还有这里是那些实际的意思:

comments-template-simple.gif

comment_text() 函数就是用来调用每条留言的。

我不会解释留言模板的 CSS 代码的意思。不像 comments.php 文件中的代码,你可以随便测试你的 CSS 代码而不会弄坏留言模板。自己去测试回比我的解释对你更有好处。

今天没有课程回顾,你已经完成了

首批关于主题的系列教程已经完成了,将来的课程将会涉及到更加高级的设计和样式化技术。

请查看教程目录:WordPress 主题教程系列

本文转自“我爱水煮鱼”

原文地址:http://fairyfish.net/2007/07/13/wp-theme-lesson-16-comments-template/

wordpress 主题一步步制作教程!第24课 子模板文件(图解)

继续我们我们教程,你将和像昨天的 header.phpsidebar.phpfooter.php 一样创建更多的子模板文件。

现在 index.php 文件已被拆分,这一切都变得更简单。

 

第1步

在你做这步之前,查看你的侧边栏,点击其中的一个存档链接,结果的页面是不是和你的首页没有什么不同?

  • 创建一个新文件:archive.php
  • index.php 中所有东西复制到 archive.php
  • 保存 archive.php
  • 在 archive.php 文件,把 the_content 改成 the_excerpt.
  • 再次保存 archive.php 文件

通过创建一个 archive.php 文件并把改成和 index.php 不一样,就是在定制化存档页面的外观。

现在如果你刷新你的存档页面,它将只显示摘要而不是全文的日志。

为什么你想这么做呢? — 防止 Google 以为重复内容惩罚你的博客,如果一个存档页面和首页显示相同的内容,那就是重复的内容。

如果是私人的博客呢?那么就没有必要去区分首页和存档页面。但这并不是说摘要对私人博客没有用。

同样 — 默认你的类别页面将会从 archive.php 上寻找说明如何显示内容。如果你没有 archive.php 文件,类别页面将会寻找 index.php

如果你想类别页面首页存档页面看起来不一样,创佳一个 category.php 文件并定制化它。

第2步

  • 创建一个新文件:search.php
  • archive.php 中所有东西复制到 search.php
  • 保存就完成了。

现在所有的,所有的搜索结果将会返回摘要。如果没有 search.php 这个模板文件,搜索选项将会转向 index.php 去如何显示搜索结果。

(可选)你可以返回到课程1去回顾者层次结构

第3步

  • 创建两个新文件:page.phpsingle.php
  • index.php 中所有内容拷贝到 page.phpsingle.php。(从现在开始,页面和单篇日志应该是一样的。)
  • 保存页面和单篇日志文件,关闭它们。

第4步

还记得静态页面页面之间的不同吗?page.php 模板文件是用来定制化这些特殊特殊静态页面。

第一,在 page.php 中,在 <?php the_content(); ?> 输入以下代码:

<?php link_pages(’<p><strong>Pages:</strong> ‘, ‘</p>’, ‘number’); ?>

<?php edit_post_link(’Edit’, ‘<p>’, ‘</p>’); ?>

第二,从 page.php 中移除 postmetadata 代码。结果如下:

page-php.gif

第三,在 page.php 中移除 posts_nav_link() 或者导航模块。

remove-navigation.gif

刚才发生了什么

第一行代码是用于显示子页面的链接。

nextpage.gif

举个例子,编辑你的 About 页面。根据我的屏幕截图增加代码:

add-nextpage.gif

当你想把一个非常长的页面分成几个页面的时候,这是非常有用的。

第二行代码是用于显示你的管理员的编辑链接。

你的页面通常没有分类,并且你通常不想给他们显示时间戳,所以你需要去移除 postmetadata。你同样要移除 posts_nav_link() 代码因为静态页面不会显示后一页前一页的链接。

保存 page.php 文件并关闭它。

第5步

点击一个日志的标题去阅读日志其余部分带你到了单篇日志查看模式。single.php 模板就是用于处理单篇日志查看使得外观。

single.php 中,在 <?php the_content() ?> 下输入:

<?php link_pages(’<p><strong>Pages:</strong> ‘, ‘</p>’, ‘number’); ?>

是的,这是相同的用于编码子页面链接的代码。你同样可以把日志分成多篇子日志。

第二,在 postmetadata 区域,移除 <?php comments_popup_link(); ?> 函数和前面的 <br /> 标签。不要移除整个 postmetadata

移除了留言链接函数是因为在单篇日志查看模式下留言链接函数是不起作用的所以它在 singel.php 文件中是没有用的。只有管理员可见的编辑链接,在 BR 标签的左边。你不想跳过一行才能看到这个本来你可以在右边看到链接?这就是移除 BR 标签的原因。

第三,用以下代码取代 <?php posts_nav_link(); ?>

<?php previous_post_link(’« %link’) ?> <?php next_post_link(’ %link »’) ?>

在前面,存档,分类和搜索页面,你可以使用 posts_nav_link() 函数去调用后一页前一页的链接。对于查看单一日志的页面,它是没有后一页和前一页链接的,你可以使用 previous_post_link()next_post_link() 函数去调用前一篇日志和后一篇日志的链接。

保存 single.php 文件,到某篇日志下查看在导航区域的不同。

课程回顾

  • 你创建了四个新的文件或者或者子模板:archive.php,search.php,page.phpsingle.php
  • archive.phpsearch.php 模板文件是相同的。
  • Pages (和日志不同)是没有分类的,他们同样没有后一页前一页的链接。
  • Single.php 不会显示留言链接(被 comments_popup_link() 函数调用)并且他不用 posts_nav_link() 去调用导航链接。

请查看教程目录:WordPress 主题教程系列

本文转自“我爱水煮鱼”

原文地址:http://fairyfish.net/2007/07/11/wp-theme-lesson-15-sub-template-files/

wordpress 主题一步步制作教程!第23课 底部和拆分Index(图解)

这篇,我们完成样式化和开始把 index.php 文件分成多个小文件。在这篇中,你可能先需要 style.css 文件,然后你将把 index.php 分成一些新的文件。

打开 Xampp,主题文件夹,Firefox,IE,index.php 和 style.css。

 

第1步

footer DIV 增加 10px 顶部填充。你还记得如何增加填充?我这次不给你代码了.

第2步

给 footer 里的所有的 P 标签 18px 行距。那是 #footer p{}.。(今天关于 CSS 的就这么多。)

第3步

  • 创建一个新文件,把它命名为 header.php。确认是 PHP 文件而不是文本文档。
  • index.php 文件中,把 header DIV 上面所有东西都拷贝到 header.php 文件中。

 

create-headerphp

copy-header

这是我的 header.php 文件。不要从我的这里拷贝,从你自己的 index.php 文件拷贝。

第4步

为了使所有的东西从 index.php 中拷出的东西依然在 index.php 文件中,输入以下代码:

<?php get_header(); ?>

get-header

 

这是个 WordPress 主题系统特别用来包含 header.php 文件的函数,而不用使用:<?php include (TEMPLATEPATH . ‘/header.php’); ?>.

保存并刷新浏览器,你应该看到没有变化。如果你的改变破坏了主题,那么肯定有错误。

第4步

  • 和第4步一样,更多相同的事情。这次,创建 sidebar.php 文件。
  • index.php 文件中的 Sidebar DIV 开始到结尾都拷贝到 sidebar.php 文件中。
  • 那么,在 index.php 文件,取代为:<?php get_sidebar(); ?>.
  • 保存并刷新浏览器,再一次,你应该看到没有变化。
  • 这是我的 sidebar.php 文件。

 

get-sidebar

第5步

  • footer.php 重复上面的步骤。
  • 这是我的 footer.php 文件。

 get-footer

教程回顾

  • 你创建了三个新文件:header.phpsidebar.phpfooter.php
  • 你学到了三个新的函数:get_header()get_sidebar()get_footer()
  • 下面是这节课结束之后的文件:indexstyleheadersidebarfooter。不要拷贝并使用它们取代你自己打。如果有错误或者你的主题没有显示正确,在和我的代码对照检查下。

本文转自“我爱水煮鱼”

原文地址:http://fairyfish.net/2007/07/09/wp-theme-lesson-14-footer-and-dividing-index/

wordpress 主题一步步制作教程!第22课 样式化侧边栏(图解)

在对侧边栏样式化之后,这系列教程将几乎完成了。以后我将通过案列学习来进一步探讨(详细解释我如何创建我的主题)。

再一次,你今天不需要 index.php 文件。打开 Xampp,主题文件夹,Firefox,IE 和 style.css 文件。

 

第1步

.sidebar{} 下输入:

.sidebar ul{
list-style-type: none;
margin: 0;
padding: 0 10px 0 10px;
}

现在你已经为侧边栏样式化父级无序列表(UL)标签。所有的子 ULs 或者内嵌的 ULs 将会击继承同样的样式。在这里,它是无列表样式,零空白和10像素的填充。

如下所示:

inheritance.gif

第二级的(或内嵌的) UL 继承了第一级 UL 的样式。如果你给了第一级 UL 应用了边框,第二级的 UL 同样也会有个边框。

保存并刷新就可以看到列表条目现在已经没有前面的圆点了。

注意下你是如何增加顶部和底部填充的。

no-top-padding.gif

第2步:

.sidebar ul{} 下输入:

.sidebar ul li{
padding: 10px 0 10px 0;
}

这是现在的填充:

top-padding.gif

为什么不在第一个地方的 UL 标签增加10像素的填充呢?你需要一种区分 LI 同其他 LI 的方法。在给 .sidebar ul li{} 增加填充之前,在搜索框日历之间以及日历页面之间是没有空间。在每个模块之间的空间就是为 .sidebar ul li{} 添加的10像素顶部和底部填充起的作用。如果给 UL 标签添加了四个方向的填充而不仅仅是左边和右边(0 10px 0 10px),那么你将会有20像素的顶部填充和20像素的底部填充在区分 LI 的时候,明白我在讲什么吗?

如果不明白,那么就去给 .sidebar ul{} 增加顶部和底部填充。

第3步

.sidebar ul li{} 下输入:

.sidebar ul li h2{
font-family: Georgia, Sans-serif;
font-size: 14px;
}

还记得样式化在 .post{} 下的子标题是不会起作用的因为你是在仅仅在样式化在 .post{} 下的子标题?现在你在样式化侧边栏下的不受影响的子标题,结果如下:

h2-and-unnecessary-padding.gif

这就是我的页面链接的样子。你的可能只有一个链接, About。我给我的离线 WordPress 增加了多重页面链接为了测试最低级别的链接看起的样子,注意到不必要额外的填充在底部,我已圈出。这是一个非常好的关于样式继承的例子。这里不是10像素而是20。

因为你给 .sidebar ul li{} 增加了填充,为了解决这个问题,直行第4步。

第4步:

.sidebar ul li h2{} 下输入:

.sidebar ul ul li{
padding: 0;
}

.sidebar ul ul li{} 中连续的 UL 指明了你是在定义第级别的 LIs。再说一次,当所有的值都为 0 的时候,你不需要 px 这个后缀。

结果如下:

ul-ul-li.gif

行距太近了,所以我们把行高改成 24px。

增加 line-height: 24px;.sidebar ul ul li{}.

line-height.gif

另外,如果你在 IE 下,搜索框下有多出了额外的空白,在下面增加 form:

body, h1, h2, h3, h4, h5, h6, address, blockquote, dd, dl, hr, p{
margin: 0;
padding: 0;
}

改成:

body, h1, h2, h3, h4, h5, h6, address, blockquote, dd, dl, hr, p, form{
margin: 0;
padding: 0;
}

第5步(可选的)

执行这一步,如果你想让你的日历的数据能够扩展并覆盖整个侧边栏的宽度。当前你的日历应该是这样的:

calendar1.gif

为了样式化日历,找出在里面的标签和这个便签的名字或者 id。 查看 > 页面源代码或者源代码。你的侧边栏是在底部,所以到源代码的底部查找 Calendar。

caledar-id.gif

现在你知道日历是在一个 TABLE 标签中并以 wp-calendar 作为 id。那么如何在 style.css 文件中锁定 wp-calendar table 呢?

答案是 table#wp-calendar{}。为什么?早前,你学了使用 # 号当样式化使用 id 而不是 class 命名的 DIV。在这里,是 table 而不是 DIV,跟着是 id 的值,wp-calendar

如果仅仅 #wp-calendar{} 也是可以的因为它是唯一的而且 WordPress 不会使用 #wp-calendar 给别的标签。但是你应该试着特定化当能够的时候。如果要更加特定化 使用 .sidebar ul li table#wp-calendar{},想更加特定化?好的,使用 .sidebar ul li#calendar table#wp-calendar{}. 因为列表条目(LI)包含日历子标题和一个 id 被命名为 calendar 的日历表格。

现在你知道可以使用什么,如何怎么扩展 table,给表格加上 width: 100%;

.sidebar ul ul li{} 下输入:

table#wp-calendar{
width: 100%;
}

保存和刷新,结果如下:

calendar-width.gif

width: 100%; 因为你想日历表格适应到侧边栏的宽度,无论你把侧边栏改成多少像素。

这看起来并不好,但是你正在学习如何改进。日历需要更多的样式去看起来更好。技巧:再次查看源代码,找出在 TABLE 下的哪个标签你可以样式化。

这篇到此为止。

本文转自“我爱水煮鱼”

原文地址:http://fairyfish.net/2007/07/07/wp-theme-lesson-13-styling-sidebar/

wordpress 主题一步步制作教程!第21课 日志样式化和其他杂项(图解)

这篇不需要 index.php。

打开Xampp Controltheme 文件夹FirefoxInternet Explorerstyle.css 文件。

第1步:

style.css 文件中的 body{} 上面输入以下代码来处理大部分页边空白和填充:

 

body, h1, h2, h3, h4, h5, h6, blockquote, p{
margin: 0;
padding: 0;
}

  • 我们使用的是 margin: 0; 而不是 margin: 0 0 0 0;。当所有的值都是一样的话,只用一个数字就够了,对于填充的设置也是一样的。
  • 保存,刷新 Firefox 和 IE。不用当心,你可以增加空白和填充到你想它们出现的地方。

第2步:

样式化 H1 标题,在 body{}输入以下代码:

h1{
font-family: Georgia, Sans-serif;
font-size: 24px;
padding: 0 0 10px 0;
}

  • font-family: Georgia, Sans-seriff; 把 H1 标题的字体从 Arial 改成 Georgia。如果没有 Georgia,网页就会寻找 Sans-serif;
  • font-size: 24px; 意思是显而易见的。你在 body{} 中把字体设置为 12pxH1H2 标签是不会遵守的。这就是因为题目标签遵循他们自己的规则。为了控制他们,你需要特别的去样式化它们。
  • padding: 0 0 10px 0; 意思是 10 像素的底部填充。这是为了在你博客的标题和描述之间增加空间。

保存,刷新,结果如下:

h1-styled.gif

第3步:

#container{}下面输入以下代码:(可以在输入每块代码之后,保存并刷新去查看其中的变化。)

.post{
padding: 10px 0 10px 0;
}

(给每个 class 名字为 post 的 DIV 增加 10 像素的顶部和底部空白。)

.post h2{
font-family: Georgia, Sans-serif;
font-size: 18px;
}

(.post h2 不是一般的 CSS 规则。他是特别样式化在 post DIV 中的 H2 子标题。在侧边栏中的 H2 子标题就不受影响。)

.entry{
line-height: 18px;
}

(设置 entry DIV 中行距。)

第4步:

a:hover{} 下输入以下代码:

p{
padding: 10px 0 0 0;
}

(给每个段落标签增加 10 像素的顶部填充。)

第5步:

.entry{} 下面输入:

p.postmetadata{
border-top: 1px solid #ccc;
margin: 10px 0 0 0;
}

还记得你赋给它 class 名字为 postmetadata 的段落标签呢?样式化一个特定的段落标签和样式化 DIV 是非常相同的。你可以同时给两者应用边框,框外空白,填充和背景。

对于 postmetadata 这个段落便签,你给它增加一个灰色的边框和10像素顶部空白。

border-top 意思是仅仅顶部边框 border-left 意思是仅仅左边边框,等等。 如果只是单独的 border,没有 -top-right-bottom 或者 -left 则意味着所有的边框。如 border: 1px solid #ccc; 意思为所有的四边都有1像素的灰色的边框。

第6步:

p.postmetadata{} 下输入:

.navigation{
padding: 10px 0 0 0;
font-size: 14px;
font-weight: bold;
line-height: 18px;
}

对于 Next pagePrevious page 链接外面的的 navigation DIV 标签,你

  • 增加了一个10像素的顶部填充。
  • 把字体大小改成14像素。
  • 把字体改成粗体。
  • 把行高增加到18像素。

这篇到此为止。

 

本文转自“我爱水煮鱼”

原文地址:http://fairyfish.net/2007/06/29/wp-theme-lesson-12-post-formatting-and-miscellaneous/

wordpress 主题一步步制作教程!第20课 宽度和布局(图解)

这篇将涉及如何设置每个 DIV 的宽度和布局排版。同样也会向你展示如何让你的主题显示正确,并同时在 Firefox 和 IE 显示相同。

在我们开始之前,打开下面这些东东:Xampp Control主题文件夹Firefox 浏览器,IE 浏览器,index.phpstyle.css这两个文件。

 

第1步:

第一件你要去做的事情就是你要决定你主题的总体宽度。我们使用 750px(750 像素);每个 100 像素是1英寸。你的主题取决于你绝大多数博客访问者的查看规格。你需要避免的是使用 900px 的主题,如果你的读者都大多数使用 800px × 600px 的屏幕,这样的话,你的 900px 主题将会有 100px 超出他们的屏幕。那是无法接受的。

不管怎样,你怎么样把你总体宽度设置为 750px 呢?
你需要把所有的东东放入一个 750px 盒子中或者 DIV 标签。所有东西是指包括:header,container,sidebar 和 footer。

<body> 之后增加:<div id=”wrapper”>

</body> 之前增加:</div>

style.css 文件中输入以下代码:
#wrapper{
margin: 0 auto 0 auto;
width: 750px;
text-align: left;
}

在 CSS,具体是在 style.css 中, # 号是你用来指向跟着 id 的 DIV。而点号是用来指向跟着 class的 DIV。举个 class 的例子,如果你的代码是 <div class=”wrapper”>,那么就用 .wrapper 来替代 #wrapper 去指向 wrapper DIV 标签。

同时保存 index.php 和 style.css 文件。刷新 Firefox 和 IE 浏览器(按 F5)查看所做的改动。

进一步解释:

  • margin: 0 auto 0 auto; 意思是(准确次序):0上页边空白右自动页面空白0下页边空白左自动页面空白。从现在开始,记得设置左右页边空白为自动将使得居中对齐。
  • width: 750px; 显而易见是 750 像素。
  • text-align: left; 是让 wrapper DIV 中的文本向左对齐因为你会改变 body{ text-align: left;}text-align: center;

第2步:

body{} 中的 text-align: left; 改成 text-align: center;

为什么?(我假设你使用的是 Firefox 和 Internet Explorer 6)。你的布局可能你看起来是正确的,但对于使用早前版本的 IE 用户可能不正确。还记得设置左边和右边的页边空白为自动是居中吗?但是这并不是对所有的 IE 都适用,所以 body{ text-align: center; } 是让 wrapper DIV 居中在旧版本 IE 的一种解决方案。

(随便说一下,在 Firefox 和 IE 中文本大小是不同的,我们稍后解决。)

第3步:

Header 浮到左边并且设置它的宽度为 750px:

#header{
float: left;
width: 750px;
}

第4步:

Container 浮到左边并且宽度为 500px:

#container{
float: left;
width: 500px;
}

第5步:

Sidebar 浮到左边,宽度为240px,并且给它灰色的背景:

.sidebar{
float: left;
width: 240px;
background: #eeeeee;
}

注意,你没有使用 # 号去指出 Sidebar DIV,而是使用点号。#ffffff 是白色而background: #eeeeee; 是非常浅的灰色。你给侧边栏增加一个背景颜色只是去查看当增加剩下的 10 像素之后的不同之处。

第6步:

Footer 浮到左边,左右两边都没有东西,并且宽度为:750px:

#footer{
clear: both;
float: left;
width: 750px;
}

HeaderFooter 的样式有什么区别呢?答案是 footer{} 中有 clear: both;。它在那儿使得 Footer 不能和它上面的东西(如 Sidebar 或者 Container)连接起来。

保存并刷新浏览器。

第7步:

给侧边栏增加其余的 10 像素的页边空白。现在你的侧边栏应该是下面这个样子:

.sidebar{
float: left;
width: 240px;
background: #eeeeee;
margin: 0 0 0 10px;
}

保存并刷新浏览器去查看 10 像素的空白增加到侧边栏的左边了。
margin: 0 0 0 10px; 具体的意思是:上边空白为0,右边空白为0,底部空白为0,左边空白为10像素。当大小为0的时候,px 单位不是必需的。

第8步(额外的步骤):

这是为了一旦你使用了20像素的页边距而不是10像素。20像素的页边距可能会破坏你的布局并把侧边栏挤到页面的底部,因为一个20像素的页边距使得 Container 和 Sidebar 的宽度之和为 760px 而不是 750px。这额外的步骤是 Internet Explorer 的错,这个使得双倍页边距的 bug 在 Firefox 中并不存在。

为了解决这个问题,增加 display: inline; 到侧边栏。现在你的侧边栏应该是:

.sidebar{
float: left;
width: 240px;
background: #eeeeee;
margin: 0 0 0 10px;
display: inline;
}

这篇到此为止,如果你有什么问题就请大胆问吧,我会进自己最大努力帮你的,不要让你仅仅成为只是来这里逛逛的常客。

这里是我的现在的 indexstyle 文件的内容.

 

本文转自“我爱水煮鱼”

原文地址:http://fairyfish.net/2007/06/21/wp-theme-lesson-11-widths-and-floats/

wordpress 主题一步步制作教程!第19课 十六进制颜色代码和样式化链接(图解)

继续昨天介绍 CSS 的课程,我们今天将介绍如何着色十六进制颜色代码

颜色属性,跟着的是一个十六进制代码,是用于给文本上色。如 body { color: #000000;} 意思是你页面的 body 的所有文本将是黑色的。

背景颜色属性,跟着的是一个十六进制代码,是给除背景上色。如 body{ background: #ffffff; } 意思是为 body 上白色背景。

 

十六进制代码

  • 每个十六进制代码前都有 # 号,然后跟着六位数字。这些数字的范围是从 #ffffff(白色)到 #000000(黑色)。
  • #ffffff,#eeeeee,#dddddd,#cccccc,#bbbbbb,#aaaaaa,#999999,#888888,#777777,#666666,#555555,#444444,#333333. #222222,#111111
  • 前两位表示红色,第三和第四代表绿色,而最后两位代表蓝色。#ff0000 是红色(red)。#550000 是暗红色(dark red)。 #220000 是更黑色的红色(darker red)。 #00ff00 是绿色(green)。 #0000ff 是蓝色(blue)。等下,难道黄色不是主要的颜色吗?哪个十六进制代码是黄色呢? #ffff00 就是黄色(yellow)。 #ff00ff 是紫色(violet)。

第1步:

body{ } 选择器下输入以下代码:

a:link, a:visited{
text-decoration: underline;
color: #336699;
}

style-links.gif

  • 这些代码是干吗用的?给你所有的链接都加上下划线的(text-decoration: underline;)和上了蓝色(color: #336699;)。这是不同色调的蓝色,但是它确实是蓝色因为最后两个数字(代表蓝色)是最高值的数字。
  • a:link 用于样式化链接。当你想把一个词转变为链接的时候,用什么实现呢?使用 <a></a> 这对标签,因此样式化链接就是样式化 a:link
  • a:visited 用于样式化已经访问过的链接。
  • 另外一种输入方式:
    a:link{
    text-decoration: underline;
    color: #336699;
    }

    a:visited{
    text-decoration: underline;
    color: #336699;
    }

  • 当给a:linka:visited这两个选择器应用 text-decoration: underline;color: #336699; 这两个属性的时候。可以使用逗号来区分。

第2步:

a:link, a:visited{ } 下输入以下代码:

a:hover{
text-decoration: none;
}

这些代码是干吗用的呀? 你当你把指针移到链接上面时候下划线消失。

如果你不想在默认情况下有下划线而是在当你把指针移到链接上面的时候出现下划线,那么就在 a:linka:hover 之间交换下 text-decoration: 的值。

如果你想更改你链接悬停时的颜色,那么就增加 color: 和任何你想要的十六进制代码,如:

a:hover{
text-decoration: none;
color: #ff0000;
}

 

本文转自“我爱水煮鱼”

原文地址:http://fairyfish.net/2007/06/17/wp-theme-lesson-10-hex-codes-and-styling-links/

wordpress 主题一步步制作教程!第18课 Style.css和CSS介绍(图解)

学习 CSS 最好的方法就是去用它,不像 XHTML 和 PHP,你不需要接触模板的核心文件,你同样不要需要理解任何基本概念,只要去用它。试用和错误是你前进的方法。

在我们开始之前,你应该已经有些内容在你的 style.css 文件了。让我们现在找出这部分信息是干什么的?

 

theme-info.gif

  • 第一行显而易见就是主题的名字。
  • 第二行是这个主题的地址,如果你的主题只是私用的而不准备发布的话,那就不用考虑它。
  • 第三行是主题的描述。
  • 第四行是版本号,这是非常重要的,特别是当你公开发布你主题新版本的时候。
  • 第五和第六行分别是你的名字和主页。

在主题信息两边的 /* 和 */ 符号是为了阻止主题的信息影响该文件的其他内容。这是 CSS 的注释。当输入 CSS 代码去样式化你的网页的时候,你可能想在这里增加些注释使得能够往后追踪代码。但是你并不想你的注释影响你的代码,所以你使用 /* 和 */ 这一对符号使得你的注释无形。

下面是处理后的主题信息

theme-info-thumbnail.gif

第1步

  • 打开 Xampp,主题文件夹,FireFox,IE 浏览器和 style.css 文件。
  • 在两个浏览器的地址栏都输入:http://localhost/wordpress

从这里开始,你需要同时在 FireFox 和 IE 上测试你的主题,不同的浏览器对 CSS 的代码解释是不同的。如果能够在尽可能多的浏览器器上和尽可能多的操作系统上测试你的主题是最好的(Safari,Opera,Linux, Netscape等等)。如果你和我一样懒,那就只在 FireFox 和 IE 上测试你的主题吧。

(注释:在这篇中你不必在记事本中打开 index.php 文件。如果你不能用记事本代开 style.css 文件,右健点击该文件,选择属性,点击更给打开方式,选择记事本。)

第2步

在 style.css 文件中输入以下代码:

body{
margin: 0;
font-family: Arial, Helvetica, Georgia, Sans-serif;
font-size: 12px;
text-align: left;
vertical-align: top;
background: #ffffff;
color: #000000;
}

像 XHTML 和 PHP 一样,通过制表符增加缩进来组织代码:

add-body.gif

保存 style.css 文件,刷新 两个浏览器 FirefoxInternet Explorer 查看变化。(现在开始你将同时在两个浏览器上工作。)

body{ } 看作一个标签,然后它里面所有的东西看作属性和值,和处理 XHTML 时一样。{ 是开始符,} 是结束符。在 {} 之间,冒号意思是开始分号意思是结束。(我在涉及到 XHTML,PHP,CSS的时候都使用标签,属性和值这些术语是为了保持简单,实际上 PHP 和 CSS 有不同术语。如参数(parameters),选择器(selector)和属性(property)。)

在我们继续之前,我需要解释下为什么使用 body{ } (CSS 选择器),是因为你是在样式化网页的绝大基本部分(或者说是总体部分),<body> 标签。你不会样式 <head> 因为这个标签没有东西需要样式化。你网页上展示的绝大部分的东西是在 <body></body> 标签之间。

然后,在后面你会样式化 ID 为 header 的 DIV 标签。

进一步的解释

margin: 0; 处理 body 标签的默认的页边空白,如果你要页边空白或者更大的页面空白,把 0 改成 10px,20px 或者其他。PX 意思是像素。每个像素使你电脑屏幕的一个点。当你的页边空白是 0 的话,就不需要后面跟上 px。

在下面的图片中,红色高亮的区域就是应用于 body 标签的默认的页边空白。

show-margin.gif

当给其样式化为 margin: 0;,下面是没有页边空白的相同页面:

margin-0.gif

font-family: Arial, Helvetica, Georgia, Sans-serif; 为你的网页或者网站选择使用哪种字体。这些字体中的第一个,Arial 是可替换的,如果你的用户没有在他们的电脑上安装 Arial 这种字体,style.css 文件就会寻找 Helvetica,然后是 Georgia,再接着是 Sans-serif。你可以在字体文件夹(我的电脑 > 系统盘 > Windows下面)找到你的字体列表。

font-size: 12px; 显而易见是字体大小。可以把它改大或改小以查看变化。

text-align: left; 让你的文本向左对齐。把它改成 text-align: right; 去查看不同之处。

vertical-align: top; 使得所有的东西从上面开始。如果是中部或底部排行你的 body 标签,所有东西将会向下推。

background: #ffffff; 意思是白色背景。#ffffff 是白色十六进制代码。#000000 是黑色十六进制代码。

color: #000000; 意思是你的文本颜色是黑色。

如果你想向前更进一步或者自己学习 CSS,最好的地方是 w3schools.com

 

本文转自“我爱水煮鱼”

原文地址:http://fairyfish.net/2007/06/16/wp-theme-lesson-9-stylecss-and-css-intro/

wordpress 主题一步步制作教程!第17课 如何XHTML验证(图解)

在进入学习 CSS 和 修改 style.css 文件之前,你需要学习如何验证你的代码。简单说,验证(Validate/Validating/Validation)就是确认代码没有错误。在开始这个系列教程之前,我给了你两个链接,XHTML ValidatorCSS Validator。在这篇,你将学到 XHTML 验证器。

我会保持这篇非常简短,因为你需要更多的时间去理解你所学到 XHTML 和 PHP 知识。不要一直往前学习哦,花些时间在脑海中回想和回顾下代码,你如何开始 DIV 标签的?ID 和 Class 之间有什么区别呢?分别哪个 PHP 函数可以用来调用博客的标题,博客的描述呢?你回想的越多,你会记得更多。

这篇之后,你最好准备好,我们将开始 CSS,我将深入研究它,因为我们将会有80%的时间花在和 style.css 文件打交道。

 

对于这篇的课程,你只需打开 Xampp Control 和浏览器(进入 http://localhost/wordpress)。

在浏览器,到菜单查看 > 页面源代码

全选。然后拷贝所有的源代码。

把浏览器导向 XHTML Validator

到页面的底部,把源代码粘贴到 Validate by Direct Input 框中。
paste-codes.gif

点击 Check 之后,验证器会检查你的代码,然后反馈给你结果页面。如果反馈回来的信息是绿色的,那么你的代码没有错误。
passed-validation.gif

 

本文转自“我爱水煮鱼”

原文地址:http://fairyfish.net/2007/06/13/wp-theme-lesson-8-how-to-validate/

wordpress 主题一步步制作教程!第16课 尾部(图解)

关于 尾部(footer)的这篇教程将会很简单。只要在侧边栏下增加个 DIV 标签,然后输入一些版权信息。其实你完全可以不用我说明就能自己做,去试下吧。然后返回这里再仔细检查下。

 

第1步:增加个 DIV 标签

在侧边栏的 DIV 标签下输入以下代码:

<div id=”footer”>

</div>

add-footer.gif

第2步:把尾部的文本放入段落标签中,你可以输入任何你想要的东西,这里是我的:

<p>
Copyright © 2007 <?php bloginfo(’name’); ?>
</p>

add-footer-text.gif

保存并刷新浏览器,结果如下:

footer.gif

如果你没有使用上面的尾部文本,© 用于显示版权符号。还记得在头部代码时候使用的 bloginfo() 函数吗?我在尾部再次使用,“name”是用于调用博客标题,而“url”调用博客的地址。

如果你想你的博客标题成为一个链接,查下头部就知道怎么做了。