wordpress 主题一步步制作教程!第四课开始Header 模板(图解)

如果你尚未准备好,就请从头查看我的关于创建 WordPress 主题的系列教程。如果不是,我们继续。前面我向你展示了如何启动 Xampp,安装主题并向你介绍了 PHP,这篇我们将继续 PHP 并学习如何调用你博客的标题。

记住,输入所有代码。而不是拷贝我给你的代码。这都是让你尽量记得你所学到的。

 

第1步:

打开 Xampp。然后打开你的主题文件夹,xampp/htdocs/wordpress/wp-content/themes/tutorial。你应该看到你上次创建的两个文件:index.phpstyle.css

index-and-style.gif

你的 index.php 和 style.css 文件的内容应该符合:index.txtstyle.txt.

第2步

– 打开新的浏览器窗口,转到 http://localhost/wordpress。你应该看到一个空白的页面因为上次你安装了一个空白的主题。
– 返回你的主题文件夹并打开 index.php 文件。为此,你应该右击 index.php,选择属性,点击更改,找到记事本或者你使用的文本编辑器,选择记事本并按OK。更改之后,双击 index.php 文件。

view-php-with-notepad.gif change-view-tool-for-php.gif select-notepad.gif

到目前为止,你打开了你的主题文件夹浏览器 index.php 文件

review.gif

第3步

编辑 index.php 文件。在 <body></body> 这两个标签之间输入 <?php bloginfo(’name’); ?>,保存它。

bloginfo-name.gif save-it.gif

返回到你的浏览器,刷新。你应该能够看到你的博客的标题。博客的标题是 Demo Theme Development。

refreshed.gif

刚才发生什么了?

你在网页的主体之间加入了一行 PHP 代码到你的 index.php。哪一行调用了你博客的信息呢?bloginfo()。具体它是调用了你博客的标题。这个名字是你在 option 页面中的 Weblog Title

<?php – 开始 PHP 代码
bloginfo(’name’) – 调用博客信息,具体是博客的标题。
; – 结束调用博客信息
?> – 结束 PHP 代码

每次你在 index.php 文件中增加或者更改任何东西之后,你都可以保存,然后刷新页面去查看结果。

第4步

把博客的标题放入超链接中,你需要一个 XHTML 标签。

返回你的 index.php 文件。

在同一行增加 <a href=”#”></a>。此时新行的代码应该是:
<a href=”#”><?php bloginfo(’name’); ?></a>

返回到你的浏览器,刷新,然后你就可以看到你的博客的标题变成了链接。

refreshed2.gif

现在它是一个链接,但是它没有链接到哪里。因为这个是你博客的标题,应该让它链接到首页。为此,在 href=后的双引号中输入 <?php bloginfo(’url’); ?>

保存,你现在的代码应该是:
<a href=”<?php bloginfo(’url’); ?>”><?php bloginfo(’name’); ?></a>

返回到你的浏览器,刷新,当你鼠标在你的链接上面的时候,浏览器的状态栏应该显示 http://localhost/wordpress

status-bar.gif

现在你点击这个链接,它应该让你返回首页。你可能看到是相同的页面,但是用 # 或者 http://localhost/wordpress 作为你的链接地址是完全不一样的。你会在接下来的课程学到到他们之间的不同。

刚才发生什么了?
你把你的网站名字变成了链接,并使它链接到博客的主页。

bloginfo(’url’) – 调用你博客基本信息,具体是首页的的地址或者 URL
<a> – 是一个用于添加链接的 XHTML 标签
</a> – 链接的结束标签。否则你的网页将不知道哪里结束链接,这样会使得页面接下来的内容都变成链接。还记住规则 #1吗?关闭你打开的所有标签。
href=”” – 超文本的简写。在引号之间就是它的值。

最终代码为:
<a href=”<?php bloginfo(’url’); ?>”><?php bloginfo(’name’); ?></a>

意思为:开始一个链接,链接的地址是博客的URL,用 PHP 函数 bloginfo(’url’) 去调用这个地址或者URL。这个链接的文本是博客的标题并使用 PHP 函数 bloginfo(’name’) 去调用博客的标题。最后结束链接。

我这篇向你介绍了 XHTML,并在这里结束。希望没有把你累坏。

 

本文转自“我爱水煮鱼”

原文地址:http://fairyfish.net/2007/06/04/wp-theme-lesson-4-header-template/

wordpress 主题一步步制作教程!第三课开始index.php(图解)

开始 Index.php 是我创建 WordPress 主题系列教程的第三篇。如果你没有看过该教程的,我建议你先看它们。否则你会对我这篇讲什么迷惑。

现在是开始动手创建你的 WordPress 主题了的时候。在这篇中,你将要着手写些 WordPress 代码。在这里你真正需要把 WordPress blog 安装到你的电脑上,不是安装到服务器上,因为本地更方便测试。

 

第1步:打开 Xampp 控制面板。

转到你的 xampp 文件夹。通常是:C:xampp

双击 xampp-control.exe 将会弹出一个新的窗口。单击 Apache 和 MySQL 的启动按钮。如下图所示:

xampp-control.gif

启动之后你看最小化窗口了。

第2步:创建你的主题文件夹。

转到你的 WordPress 主题文件夹,应该在xampp/htdocs/wordpress/wp-content/themes。创建一个新的文件夹,命名为 tutorial

第3步:创建 index.phpstyle.css 文件。

打开记事本或者你选择的文本编辑器,记事本是在开始 > 程序 > 附件 > 记事本

index.txt 这个文件的所有内容拷贝到你的记事本。

保存为 index.php 到 tutorial 文件夹。

save-as-indexphp2.gif

打开另外一个记事本,直接保存为 style.css 到相同的文件夹下.

现在有两个文件了: index.php and style.css.
index-and-style.gif

index.php 解释

indexphp-explain.gif

点击上面的图片查看大图。我会向你解释每个红色圆圈区域是什么意思。

Doctype – 指明哪种类型的代码你用来编码你的主题。Doctype 此时还不必去思考它的确切的意思。

<html> 是网页开始的地方。

<head> 是你的网页头部开始的地方。每个网页都有一个头部和主体。</head> 是头部结束的地方。

<?php bloginfo(’stylesheet_url’); ?> 是一个 PHP 函数,它能取得 style.css 文件所在的路径,这样主题就能链接到它并能样式化页面上所有元素。任何时候,PHP 代码都是在 <?php?> 之间的。PHP 代码和其他的代码不一样的,在 PHP 中,<?php 时开始 PHP 代码而 ?> 是结束 PHP 代码。

所以:

  • <?php – 开始 PHP 代码
  • bloginfo(’stylesheet_url’) – 调用 style.css 文件所在的路径
  • ; – 停止调用函数。分号是用来结束一个 PHP 语句。
  • ?> – 结束 PHP 代码

继续……

<body> – 这是网页主体开始的地方。你能在网页上看到和读到的东西就是主体部分。你正在阅读的这个教程说明你在正在看当前这个网页的主题部分。</body> 是网页主体结束的地方。

</html> 是网页结束的地方,没有东西在它的后面了。

第4步:把 style.txt 中所有的东西拷贝到你的 style.css 文件中。保存和关闭它。

第5步:安装你的主题。

打开浏览器。在地址栏输入输入http://localhost/wordpress/wp-login.php。登录到你的 WordPress 管理界面。(这里能够看到 WordPress 登录页面是因为你在第1步的时候启动了 Xampp。否者的话,在这里你的浏览器会报找不到的错误。)

在管理界面下到 Presentation 菜单并点击名字为 Tutorial 的主题去激活它。

theme-empty-screenshot.gif

注意,你的主题文件没有屏幕缩略图,所以是空白的。一旦激活了,WordPress 就会告诉你激活信息。

theme-activated.gif

现在打开一个新的浏览器或者标签页(如果你的浏览器支持标签页浏览)并在地址栏输入 http://localhost/wordpress。你应该得到一个空白页面,恩,完全空白的页面。如果不是,那你就是在错误的页面上了。

你的主题已经创建好了,这就是这个课程,下一步我们将讨论头部模板。

不要忘记关闭 Xampp。双击它在任务栏中小图标,点击 Apache 和 MySQL 的停止按钮,然后点击推出。

xampp-control-close.gif

有问题吗?给我留言吧。

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

模板文件(template files)和模板(template)是我的关于创建 WordPress 主题 系列教程 的第二篇。如果你还没有看过第一课,请先回去看教程一,否则你将无法理解在教程二中使用的名词。

现在我们已经学过了规则和术语,这篇将让你更熟悉模板文件,模板,已经每个页面的结构。

有件事情你必须牢记的是:你博客的每个页面有多个模板文件组成的
这里是首页的例子:

index.gif

在上面的例子,我们可以看出首页是由4个模板文件组成: header.phpindex.phpsidebar.phpfooter.php

Header 模板文件:

header-template.gif
通常在这个文件中包含你博客的标题(title)和描述(description)。而且它们通常在整个博客中保持一致。

Index 模板文件:

这个模板文件包含你的日志的标题内容(每篇日志的文本和图片)和日志元数据 (指的是每篇日志的信息,包括谁是作者,什么时候发表,在那个分类下,有多少留言等等)。

index-template.gif

Sidebar 模板文件

这个模板文件控制你的页面链接列表类别链接列表存档链接列表blogroll 列表其他东东。(侧边栏不一定要求布局到右边,我正在使用的主题是经典的两列的 博客布局。)

sidebar-template.gif

Footer 模板文件:

footer-template.gif

像 header.php 模板文件一样,footer 通常不会因为页面的改变而改变,你可以在这里放置任何东西,但是通常是版权信息

现在让我解释为什么上面图片中的 index.php 所在的区域是红色的。Index.php 所在区域是红色是说明那块区域将会改变,取决于你在博客的那个页面。

如果你在单一日志页面,这时候页面将会包含这四个模板文件:header,single,sidebar 和 footer。

single.gif

本文转自“我爱水煮鱼”

原文地址:http://fairyfish.net/2007/06/04/wp-theme-lesson-2-template-files-and-templates/

wordpress 主题一步步制作教程!第一课 基础知识(图解)

这篇是我的关于创建 WordPress 主题 系列教程 的第一篇。我不会一次就教你所有的东西,那样只会让你更加迷惑。我向你展示的也不是 WordPress 主题制作的参考,而我所做的是一步一步的教你如何制作主题。如果你想所有关于 WordPress 主题的参考资料,请查阅 WordPress.org 的文档,设计和布局。否则就请看读我的教程。

这篇将涉及到:

  • 基本规则
  • 术语 / 行话
  • 层式结构

 

基本规则:

  • 规则 #1:以正确顺序关闭所有标签。正确和错误关闭标签的方法在错误关闭标签的方法中,关闭的 ul 标签是不按次序的。每个标签都是在 <> 中,是否有斜线 /,则指明这个标签是开始标签还是结束标签。如:<> 是开始标签,而</> 是结束标签。在上面的例子中,我使用 ul(无序列表)li (列表元素)标签。注意开始和结束 li 标签在开始和结束 ul 标签的里面,这就是标签正确嵌套。
  • 规则 #2:每个主题至少有这两个文件 – style.cssindex.php。index.php 告诉你的主题所有的元素该如何布局,style.css 则告诉你主题所有的元素该如何展示。下面是完整的主题文件列表(现在不用担心这个列表):
    • style.css
    • index.php
    • home.php
    • single.php
    • page.php
    • archive.php
    • category.php
    • search.php
    • 404.php
    • comments.php
    • comments-popup.php
    • author.php
    • date.php

专业术语:

  • Template(模板) — 其实就是一个代码集,很多地方会利用到这个代码集,把它整合成一个代码集,就不必一遍遍输入这些重复代码。
  • Template file(模板文件) — 一个包含一个或者多个代码集(模板)文件。每个主题是由多个模板文件组成的,如:index.php,style.css,sidebar.php 等等。
  • Theme(主题)或者 WordPress theme(WordPress 主题) — 所有你正在使用的文件:文本,图像,代码等等。注意: WordPress theme(主题)和 WordPress template(s)(模板)是两个不同的东西,尽管有些人认为他们一样。
  • Post(日志) — 现在你读的就是一篇日志。此外,它是你 blog 的一个简单的条目,如:一个页面或者一篇日记。
  • Page(静态页面) — 一种特殊的 post,它不是以分类组织的。它有别于你其他的日志。注意:在 WordPress,page(页面)和 Page(静态页面)是两种不同的东西。

层式结构:

下面这幅图简单的向你展示,一旦你主题中的某个文件丢失了,WordPress 主题系统将会寻找什么。这里列出了6个文件而不是完整的13个,因为这6个是你需要或更大时间去关注的。在接下来的教程中,你将学到余下的文件。

main-hierarchy.gif

我们可以通过他们的在图中位置知道他的重要性级别,上面,左边是最重要的,下面和右边是最不重要的

为什么会存在模板文件的层式结构或者说是重要性级别呢?因为如果 archive.php 文件(用来显示存档页面)丢失了,那么 WordPress 将会指定 index.php 去控制存档页面如何显示。

如果 single.php 模板文件丢失了呢,哪个模板文件它会去寻找用来显示单一日志呢?它会寻找 index.php。

如果你有什么问题,请放手来问,请最好给我们留言而不是给我们 email。那样的话,如果其他人寻找相同的答案就不用重复他们的问题了。

 

本文转自“我爱水煮鱼”

原文地址:http://fairyfish.net/2007/06/04/wp-theme-lesson-1-intro/

险点被盗!

刚才过马路的时候 !相机差点摸 !感觉有点轻了 !回头一个 !那斯儿在我后头正准备拉出我相机 !被我发现急忙跑开 !在原地没想离开 !只想什么如此昌狂哟!这是几十人在赶的斑马线上耶 !汗
最气人的是他跑到一角落反看着我笑 ! 像他妹妹淫笑 !我靠 !

国内COM域名不停降,国外COM域名不停涨

最近想买个COM域名,听很多听独立博客的朋友说,买域名一定要先国外的,好转出,手续简单,我觉得也是,国内的域名喜欢收回就收回,没商量的,这样的例子我就不举了,但看了一下,name.com的由$5.99涨到$8.99了,1and1.com的也涨了,但首年只要$3.99,gd的也涨这个价了,基本上都是每年$8.99,但一奇怪现在就是,为什么国内的反而降低,而且降得很离谱,目前知道的有¥39元的,按现在折率$5.6。

到底要不要在国内买呢?矛盾!

雅虎通中文出问题了,登录不上去拉

今天未起订一朋友就打电话过来问雅虎通为什么豋不上了,我还未起床,都不打算理他,嘿嘿,有点懒床!但电话催不停,还是张开眼从被窝里爬出来给他看一下,我晕,登上去一会就被弹出来,换我自己的号又能登上去,我郁闷了,就暂时让他上我的,不一会也弹出了,实在没办法,只好打电话到雅虎,未说明来意他已知道,证实雅虎通中版不可用,最新版本8.3.0.2,建设如果急着要用的话使用英文版,问到中文版几时恢复时,对方语言难肯定,说要一段时间~现在只能用着英文版,希望早点恢复拉~

wordpress艰辛记!

刚入门wordpress ,好不容易安装好,插件,永久连接,备份,域名绑定,一切就绪了,装备写点东西的时候,我的国外主机不知道其它同船的在搞了什么,被伟大的祖国强项精深的技术把IP墙在外了,国内访问不了,只能用VPN上去管理,但我面向的也是希望国内朋友能交流访问,也就是说,付之东流了,没办法,国人秘密项目技术我不得不承认厉害了,只能换主机,又得导出数据,恢复数据库,一接触就来了那么多让我搞的,真不容易呀,可算历尽艰辛,换胎成功,开始写点西测试一下也好!纪念也好,发泄也罢,总算能写东西了!