精品博客 |
| Posted: 28 Jun 2009 08:40 AM PDT 原文：Creating a WordPress Theme HTML Structure 原文作者：Ian Stewart 译文作者：Young 现在我们开始学习 WordPress 主题开发系列之 HTML 结构代码。 任何 HTML 结构的目标编写网页代码的时候您应该遵循两个目标：精简和有意义，也就是使用尽可能少并且有意义的 HTML 标签。 同时编写 WordPress 主题（或者其他任何内容管理系统模板）要避免标签太少，也要避免 Divitis （DIV 标签) 太多。 如果看过一个网站或者主题的源代码，您可能认识 DIV 标签。那些网站或者主题可以看作是一个装满 HTML 代码的容器。我们需要适量的 DIV 标签，这些标签可以被重复利用于多个博客主题——我们想编写一些可重复利用的代码。 ＷordPress 主题 HTML 结构下面的 HTML 代码将会用于我们制作的主题： <head> </head> <body> <div id="wrapper" class="hfeed"> <div id="header"> <div id="masthead"> <div id="branding"> </div><!-- #branding --> <div id="access"> </div><!-- #access --> </div><!-- #masthead --> </div><!-- #header --> <div id="main"> <div id="container"> <div id="content"> </div><!-- #content --> </div><!-- #container --> <div id="primary" class="widget-area"> </div><!-- #primary .widget-area --> <div id="secondary" class="widget-area"> </div><!-- #secondary --> </div><!-- #main --> <div id="footer"> <div id="colophon"> <div id="site-info"> </div><!-- #site-info --> </div><!-- #colophon --> </div><!-- #footer --> </div><!-- #wrapper --> </body> </html> 把上面的主题复制粘贴到您的文本编辑器然后保存，代码后面还会用到，但让我们先来学习其他一些东西。 WordPress 主题 HTML 快速浏览首先是 wrapper 代码类的 class 属性 hfeed。hfeed 属于 Microformat hatom 形式。简单来讲，hfeed 属性会告诉搜索引擎爬虫之类的东西读取我们网站上发表的聚合内容（例如博客文章）。后面您会看到很多类似的 class 标签。 看一下 header 和 footer 的 DIV 结构，您可能会发现我在调用外部函数，这可能会有 divitis 之嫌（开玩笑的——精博注）。我会尝试在 DIV 标签里面增加些内容，以后会用到。另外，为了实现某些输出，我们也需要这种标签结构。 在上面那段 HTML 代码里面，您会看到有两个 widget-area 代码，并且都是在 DIV 标签里面。这是很关键的。这不仅让我们侧边栏的主要内容可以被搜索引擎读取，并且通过借助 CSS 技术，还可以把主题分为一栏，两栏或者三栏。 这个 HTML 结构很好，以后还会用到，再加上 CSS 就可以创建出美仑美奂的 WordPress 主题。 如何创建 WordPress 主题这篇文章是如何创建 WordPress 主题教程系列的其中一部分，该系列将会教您如何从零开始创建强大的 WordPress 主题。建议您从头开始阅读这个系列并自己动手编写一些漂亮的代码。 ------------------------------------- © 逛逛精品博客，看看博客精品。| 转载请遵循"署名-非商业性使用"的创作共用协议。 |
| Posted: 26 Jun 2009 09:30 PM PDT 原文：WordPress Theme Template & Directory Structure 原文作者：Ian Stewart 译文作者：Young 虽然最小巧的 WordPress 主题只需要 index.php 模板和 style.css 文件——如果是一个小孩子主题，只要一个 style.css 文件就可以了，但是绝大多数的 WordPress 主题需要更多的东西。 我们新的最小巧的主题将会包括 6 个文件。在 WordPress 的 wp-content/themes 目录下新建一个文件夹，例如"your-theme"，不过您可以任意命名。然后在"your-theme"文件夹里面创建以下文件（放心，空白文件就可以了）：
现在，让我们在文本编辑器上打开最后一个文件 style.css。我们首先要做的是在顶部添加以下被称为 CSS "注释"（在 /* 和 */ 之间）的代码。我们需要这些代码来让 WordPress 识别您的主题，如果没有这些代码，您的主题就不会出现在主题面板。
注意事项： 这些代码中其实只有主题名称是必须的，其他都是可选的。但是如果想发布主题或者为别人定做一个主题，您将会想添加更多或者全部其他代码。我只是希望您能随意更改这些代码。 完成之后，您可以激活该主题并用于测试网站。我们已经做了一个最空白的主题！事情应该开始变得有趣了。 在 HTML 结构上创建主题在我们开始使用上面创建的 HTML 结构之前，先讲点关于 WordPress 和 模板的知识。 WordPress 其实只需要一个模板文件，即 index.php。在某些情况下，我们可以也将会添加一些其他的模板文件（例如单独日志、分类页面等）来弥补 index.php 的不足，但刚开始的时候，我们只需要 index.php 就够了。 现在，index.php 和其他相关的模板文件就构成我们在浏览器上看到的网页，这些网页是包含 HTML 和 PHP 的。 让我们把网页看成是有开头有中间有结尾的小说，当 index.php 文件（以及后来的 single.php、category.php 等文件）写好了之后，我们将会把精力集中于中间。但是我们要先想好开头和结尾，因为中间部分可能要经常改，但是开头和结尾部分只要写一次。 Header.php 和 Footer.php打开之前创建好的 header.php 文件，把下面的代码复制粘贴上去并保存： <html> <head> </head> <body> <div id="wrapper" class="hfeed"> <div id="header"> <div id="masthead"> ? <div id="branding"> </div><!-- #branding --> ? <div id="access"> </div><!-- #access --> ? </div><!-- #masthead --> </div><!-- #header --> ? <div id="main"> 接着，把下面的代码复制粘贴到 footer.php 文件： </div><!-- #main --> ? <div id="footer"> <div id="colophon"> ? <div id="site-info"> </div><!-- #site-info --> ? </div><!-- #colophon --> </div><!-- #footer --> </div><!-- #wrapper --> </body> </html> Index.php我打赌您能猜到我们现在要做什么了。把下面的代码复制粘贴到 index.php 文件： <div id="container"> ? <div id="content"> </div><!-- #content --> ? </div><!-- #container --> ? <div id="primary" class="widget-area"> </div><!-- #primary .widget-area --> ? <div id="secondary" class="widget-area"> </div><!-- #secondary --> 还欠两小步我们就创建了一个完美的通过验证的 WordPress 主题了，现在我们需要把页眉和页脚添加到主题上。 在 index.php 文件的最顶部，添加以下模板标签： <?php get_header(); ?> 我想代码本身就很明显表明这个标签有什么用，它是添加页眉的。既然说到这里，我们就来看一下这个模板标签，如果您对 PHP 陌生，我想您注意几件事。首先，PHP 函数调用——get_header()——以 <?php 开始，以 ?> 结尾。第二，当函数调用只有一行的时候，结尾用分号——一个不起眼但很重要的符号。 好吧，您能够猜到我们将要在 index.php 的最底部调用什么函数吗？ <?php get_footer(); ?> 现在我们已经完成了 WordPress 寻找的主要文件 index.php。它具有网页的所有中间元素，以及开头和结尾。 刷新您的测试网页，在 Firefox 浏览器上点击 "查看-页面源代码"，您就会看到自己的代码！ 您正在制作自己的第一个主题。 如何创建 WordPress 主题这篇文章是如何创建 WordPress 主题教程系列的其中一部分，该系列将会教您如何从零开始创建强大的 WordPress 主题。建议您从头开始阅读这个系列并自己动手编写一些漂亮的代码。 ------------------------------------- © 逛逛精品博客，看看博客精品。| 转载请遵循"署名-非商业性使用"的创作共用协议。 |
| Posted: 26 Jun 2009 07:01 AM PDT 原文：WordPress Theme Development Tools 原文作者：Ian Stewart 译文作者：Young 在创建 WordPress 主题之前，我们需要一些开发工具。此文将介绍最好的开发工具，以便建立跨平台的 WordPress 主题测试环境，让您有一种职业主题开发者的自豪感。 本地测试服务器：XAMP 或者 MAMP开发自定义 WordPress 主题最好的地方是在家里，并且不用网络。因此，您需要家用电脑打造成一个"本地服务器"—— 近似网络服务器（有 Apache、MySQL 和 PHP 等程序)，即您可以在家用电脑上安装 WordPress。 单独安装这些服务器程序在技术上可能有点挑战性，但幸运的是，有些免费的软件可以一次性安装这些程序。 如果您的电脑装的是 Windows 系统，您可以尝试 XAMP 软件； 如果您的电脑装的是 Mac 系统，您可以尝试下载 MAMP 软件——我也是用这个，效果很好。 WordPress当然，您需要下载最新版本的 WordPress 并正确安装在您本地测试的服务器上。 如果您使用的是 XAMP，可以参考这个 WordPress 安装说明；如果您用的是 MAMP，则可以参考这个教程。 （关于如何在 Windows 系统下安装本地 WordPress，精博有一个中文版的教程，有兴趣可以看看。——译者注） 模拟内容WordPress 安装好之后需要一些模拟（或样板）内容。在 WordPress 后台点击 Tools (工具），然后点击 Import (导入），接着点击 WordPress 并上传一些 WXR 文件(后缀名为 XML——精博注。）就可以了。您可以导入以下这些内容：
以上四个测试数据都有各自的优势和不足。我喜欢把它们全部导入到 WordPress 里面，这样就不会漏掉什么了。当您认为主题做好了之后，通过日志导航浏览每篇文章，检查年月分类（Archives) 以及内容分类 (Category)。齐全的模拟内容将方便您查看主题哪里不对劲。 (以上的模拟内容都是英文的，您如果有中文的希望不吝分享。——精博注） 文本编辑器创建 WordPress 主题不需要任何特殊的制图软件，只需要一个纯文本编辑器就足够了，当然，有些编辑器比较好一点。 如果您使用的是 Windows 系统，可以尝试 Notepad++ 编辑器，它是免费的开源软件，Lifehacker 曾大力推荐过。 如果您使用的是 Mac 系统，我推荐您使用 Smultron，它也是一个免费的开源软件，并且方便结合流行的 FTP 软件 Cyberduck 直接在 FTP 上修改 WordPress 主题。 Firefox 浏览器当然，您可以用任一浏览器来开发 WordPress 主题，但是我推荐您使用 Firefox 浏览器，特别是安装了以下两个附加组件之后，用 Firefox 浏览器开发 WordPress 主题就简单多了： 1、Web Developer 工具条方便您检查和调试网页代码 —— 从禁止所有的 CSS 格式到验证本地的 HTML 代码（即显示在浏览器屏幕上的东西）。 2、Firebug 附加组件是不可或缺的。通过 Firebug，您只要把鼠标移到浏览页面上的任意位置，就会在屏幕的底部窗口看到对应的源代码以及 CSS 代码。 （目前最新版的 Firebug 只适合用于 Firefox 3.5b4 和 3.5 这两个尚未正式发布的版本。——精博注） HTML 和 CSS诚然，了解一点 HTML 和 CSS 会对您创建 WordPress 主题有帮助。我建议您阅读 HTML Dog 网站的 HTML 初学者教程 和 CSS 初学者教程。当然，您也可以不阅读，但是阅读对您无害，并且会让您了解一些基本的概念。 （我准备翻译这两个教程，为了避免撞车，您如果已经翻译了或者知道哪里有译文，欢迎不吝告知。——精博注） PHP那么 PHP 呢？难道创建 ＷordPress 主题不需要懂得一点 PHP 知识吗？当然需要，不过在这个 WordPress 主题系列的教程里，我会教您足够的 PHP 知识。如果想了解多一点（我总是建议您这样做），您可以阅读 PHP 初学者 101 个技巧。当然，您也可以不读。您只需要知道一些基本的概念就可以了。 （我准备翻译那 101 个技巧，为了避免撞车，您如果已经翻译了或者知道哪里有译文，欢迎不吝告知。——精博注） 如何创建 WordPress 主题这篇文章是如何创建 WordPress 主题教程系列的其中一部分，该系列将会教您如何从零开始创建强大的 WordPress 主题。建议您从头开始阅读这个系列并自己动手编写一些漂亮的代码。 ------------------------------------- © 逛逛精品博客，看看博客精品。| 转载请遵循"署名-非商业性使用"的创作共用协议。 |
| Posted: 26 Jun 2009 12:14 AM PDT 最近心血来潮，想亲自动手做一个 WordPress 主题，幸好 Ian 同学也在他的博客上教人如何创建 WordPress 主题，于是我就跟着学了。 对于老外的作品，我觉得最好的学习方法是一边翻译一边学习，所以就准备翻译完 Ian 的 WordPress 主题创建系列，一共大概 12 篇文章。您如果有兴趣，欢迎一起学习；如果翻译得不好，欢迎批评指正。下面是第一篇文章： 原文：How To Create a WordPress Theme 原文作者：Ian Stewart 译文作者：Young 在接下来的十二天里，这个 WordPress 主题教程将会教您如何从零开始创建一个强大而新颖的 WordPress 主题。在教程里面，我会介绍每一个步骤（好的或者不好的）会产生什么结果以及我为什么要这样做而不那样做。 重要的是，我将会把一切关于 WordPress 主题开发的技术告诉您，完成这个系列估计需要 12 天（周末除外）。 最后您创建的 WordPress 主题将会有以下几点值得炫耀：
对任一 WordPress 主题来讲，我想这几点都会给人留下深刻印象。 在这个教程结束后，您将几乎可以通过您掌握的代码做任何的事情。您甚至可以把完成的主题作为您的 WordPress 博客主题。我已经用来做了一个 Shape 主题，您可以下载来看看那些代码。 开始教程之前两个重要注意事项： 首先，根据我创建 WordPress 主题的经验，您开始的时候或者想通过复制粘贴的方法快点学会，如果是，尽管去做。不过要注意：如果您想真正地学会创建 WordPress 主题，需要自己动手输入代码。 最后，祝您好运！明天我们将建立 WordPress 的测试环境。 如何创建 WordPress 主题这篇文章是 WordPress 主题系列的一部分，WordPress 主题系列将会教您如何从零开始创建强大的 WordPress 主题。建议您从头开始阅读这个系列并自己动手输入一些漂亮的代码。以下是教程内容目录：
译者注：优秀博客 WPDesigner 在 2007 年的时候就曾经写过一个 WordPress 主题教程系列，这个系列后来被我爱水煮鱼翻译成了中文。不过 Ian 说，已经两年过去了，事情也有些变化了，那么究竟是什么变化呢？请继续关注如何创建 WordPress 主题系列。 ------------------------------------- © 逛逛精品博客，看看博客精品。| 转载请遵循"署名-非商业性使用"的创作共用协议。 |
| You are subscribed to email updates from 精品博客 To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
Inbox too full?  | |
| Google Inc., 20 West Kinzie, Chicago IL USA 60610 | |
没有评论:
发表评论