wordpress模板_通过HTML模板创建自己的WordPress主题

wordpress模板

WordPress has become the most widely used blogging platform in the world, estimated to be used on a quarter of a billion websites online today. WordPress works as a blog, but also as a straightforward content management system, ready to use with search-engine-friendly URLs and fully valid HTML and CSS.With so many sites using WordPress and only about 1,200 themes listed on WordPress.org, there are inevitably lots of sites looking exactly the same. You and your clients need to stand out, or end up being branded as “just another WordPress blog.”In this article, I’ll show you how to take an existing HTML and CSS site template and convert it into a theme for WordPress. Of course, WordPress theming is much too vast a topic to cover entirely in a single article, so I’ll provide you with some resources at the end to further your learning. It’s hoped, though, that this article will serve as a good introduction and give you a solid foundation to start learning aboutcreating your own WordPress themes.I’m assuming you already know HTML and CSS, and already have a site design that you want to adapt to WordPress. Being familiar with PHP is unnecessary, as I’ll be explaining every function you need as we use it.

WordPress已成为世界上使用最广泛的博客平台，据估计，如今已在十亿个在线网站中使用了四分之一。 WordPress既可以作为博客，也可以作为简单的内容管理系统，可以与搜索引擎友好的URL以及完全有效HTML和CSS结合使用。不可避免地有很多站点看起来完全一样。 您和您的客户需要脱颖而出，或者最终被冠以“仅仅是另一个WordPress博客”的商标。在本文中，我将向您展示如何采用现有HTML和CSS网站模板并将其转换为WordPress的主题。 当然，WordPress主题太大了，无法在一篇文章中完全涵盖，因此，在最后我将为您提供一些资源以进一步学习。 但是希望本文能作为一个很好的介绍，并为您提供一个坚实的基础，让您开始学习创建自己的WordPress主题。我假设您已经了解HTML和CSS，并且已经拥有想要的网站设计适应WordPress。 不需要熟悉PHP，因为在使用过程中我将解释您需要的每个功能。

WordPress主题基础 (WordPress Theme Basics)

WordPress themes live in a folder inside the /wp-content/themes/ directory in your WordPress installation. Each theme’s folder includes a few essential components:

WordPress主题位于WordPress安装目录中/wp-content/themes/目录内的文件夹中。 每个主题的文件夹均包含一些基本组件：

• A main CSS file. This is just a regular CSS file, except for a few extra details at the top, which I’ll be explaining shortly. You can, of course, have more CSS files if you need to (a print style sheet, for example).
  一个主要CSS文件。 这只是一个普通CSS文件，除了顶部的一些其他细节外，我将在稍后进行解释。 当然，如果需要，您可以拥有更多CSS文件(例如，打印样式表)。

• index.php, the main index file that WordPress loads when you’re using the theme.

  index.php ，WordPress在使用主题时加载的主要索引文件。

The contents of the index.php page can also be split up into several other files, which would then be included in index.php. Normally, these are:

也可以将index.php页面的内容分为几个其他文件，然后将其包含在index.php 。 通常，这些是：

• header.php: contains the first part of the template, usually starting from the doctype and extending to just after the page’s header (including the site and page title, and navigation elements).

  header.php ：包含模板的第一部分，通常从doctype开始，一直扩展到页面标题之后(包括网站和页面标题以及导航元素)。

• sidebar.php: similar to the header.php file, it includes elements that appear in the sidebar. You can enable this to work with widgets in WordPress, or, if you prefer, you can enter the content directly into the theme files.

  sidebar.php ：类似于header.php文件，它包含出现在侧栏中的元素。 您可以启用它以与WordPress中的小部件一起使用，或者，如果愿意，可以将内容直接输入主题文件中。

• footer.php: normally called last in the page, and usually placed from the end of the page content through to the bottom of the web page.

  footer.php ：通常称为页面的最后一个，通常放置在页面内容的末尾到网页的底部。

• comments.php: defines the structure of the comments section for each post. If you leave this out of your theme, the comments.php file from the default theme will be used.

  comments.php ：为每个帖子定义评论部分的结构。 如果您将其保留在主题之外，则将使用默认主题中的comments.php文件。

There can be other PHP files, but these are optional. You can add files that provide a specific layout for certain pages, such as category pages, single posts, or posts with a given tag. It’s also common to have templates for site errors like 404s.Once you have your HTML template that you’re ready to convert—whether you’ve written it from scratch, had it designed, or bought it from a template marketplace—you can convert it into a WordPress theme in very little time.

可以有其他PHP文件，但是这些是可选的。 您可以添加为某些页面提供特定布局的文件，例如类别页面，单个帖子或带有给定标签的帖子。 具有针对站点错误的模板(例如404s)也是很常见的。一旦您准备好要转换HTML模板(无论是从头编写，设计还是从模板市场购买的)，就可以进行转换在很短的时间内将其转换成WordPress主题。

开始你的主题 (Starting Your Theme)

Ideally, before you begin, you need an installation of WordPress up and running, which is available free from WordPress.org. When you’re creating the theme, it’s easiest to work on the files locally or on a local VM, although you could also work on a web server over FTP.First, you need a folder for the theme. This needs to be created inside /wp-content/themes/ in your WordPress installation directory. It’s as simple as creating a new directory with a name related to your theme. Inside this, you’ll start off with your style sheet, which also includes some information about the theme that will be used in the administration panel later.Create a CSS file named style.css, and add the following at the top of the file:

理想情况下，在开始之前，您需要启动并运行WordPress的安装，该安装可从WordPress.org免费获得。 创建主题时，尽管也可以通过FTP在Web服务器上工作，但最简单的方法是在本地或本地VM上处理文件。首先，需要一个用于主题的文件夹。 这需要在WordPress安装目录的/wp-content/themes/中创建。 就像创建一个与主题相关的名称的新目录一样简单。 在其中，您将从样式表开始，其中还包含有关主题的一些信息，这些主题将在以后的管理面板中使用。创建一个名为style.cssCSS文件，并将以下内容添加到该文件的顶部：

/*Theme Name: [A unique theme name here]Theme URI: [The theme website]Description: [A description]Author: [Your name]Author URI: [Your website].[Any other comments].*/

This is a comment block (enclosed by /* and */), but WordPress reads this information and presents it on the theme selection screen in the administration interface.You need to insert content for each of these items. They’re mostly aimed at themes that will be distributed, so if you only plan to use the theme on your own site, most of the values are of little consequence. Make sure the theme’s name differs from any other themes you have installed, or it will cause problems!There’s also the option of adding a version number with the Version: label.At this point, if you’re converting an existing HTML/CSS site, it should be easy enough to copy and paste all of your style information into this file from your original template’s CSS.

这是一个注释框(用/*和*/包围)，但是WordPress会读取此信息，并将其显示在管理界面的主题选择屏幕上。您需要为每个项目插入内容。 它们主要针对将要分发的主题，因此，如果您仅打算在自己的网站上使用该主题，则大多数值几乎没有意义。 确保主题名称与已安装的其他主题不同，否则可能会引起问题！还可以选择添加带有Version:标签的版本号。如果要转换现有HTML / CSS网站， ，从原始模板CSS复制并粘贴所有样式信息到该文件中应该足够容易。

index.php (index.php)

Next up, it’s the index.php file. The easiestway to begin is by copying and pasting all of the content from the mainHTML file in your site template into this new file.We’ll start by replacing some of the hard-coded information in the file with dynamic content that will be generated on the fly by WordPress.WordPress has a built-in function called bloginfo for accessing all types of information about the installation and the theme. We’ll use this to fetch the style sheet URL and the location of the RSS feed. bloginfo is extremely simple to use:

接下来是index.php文件。 首先，最简单的方法是将网站模板中的mainHTML文件中的所有内容复制并粘贴到此新文件中。首先，将文件中的一些硬编码信息替换为动态内容，该动态内容将在WordPress的飞行工具。WordPress具有一个称为bloginfo的内置功能，用于访问有关安装和主题的所有类型的信息。 我们将使用它来获取样式表URL和RSS feed的位置。 bloginfo使用起来非常简单：

<?php bloginfo('stylesheet_url'); ?>

In this example, I’ve included the style sheet URL; however, it works for a whole range of parameters including the charset, blog description, and template directory. For a full list, see the WordPressCodex.Looking at your template, you now want to replace the link element pointing to your style sheet with a line like this:

在此示例中，我包括了样式表URL。 但是，它适用于整个参数范围，包括charset ，博客描述和模板目录。 有关完整列表，请参见WordPressCodex 。在您的模板上，现在您想要用以下行替换指向样式表的link元素：

Example 1.  (excerpt)

示例1。(节选)

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css"  />

Everything between <?php and?> will be replaced by the return value of the function, which in this case will be the URL pointing to your style sheet. This is perfect, because your website will now contain a line like:

<?php和?>之间的所有内容都将由该函数的返回值代替，在这种情况下，该返回值将是指向样式表的URL。 这是完美的，因为您的网站现在将包含以下行：

<link rel="stylesheet" href="http://example/blog/wp-content/themes/style.css" type="text/css" />

important: Wax On, Wax Off 重要：上蜡，下蜡

The key to building WordPress themes is to take the process we’ve just gone through and repeat it for every bit of content on your site: take your existing HTML and find the parts of it that should be included dynamically. Then find the WordPress function that will return the value you want and insert it, either between the HTML tags or inside an attribute, as we did for the style sheet URL.

建立WordPress主题的关键是采用我们刚刚经历的过程，并针对您网站上的每一个内容重复该过程：采用现有HTML并找到应动态包含的部分。 然后找到WordPress函数，该函数将返回所需的值并将其插入HTML标记之间或属性内，就像我们对样式表URL所做的那样。

资产 (Assets)

Of course, your CSS file most likely references a number of images, so it’s necessary at this point to move those over to your theme directory. While there are no set rules for how you name image and other asset directories within a theme folder, it’s worth adding a new folder called assets here, which will include things like images and JavaScript files. If you prefer, you can have separateimages and js folders, but for the sake of this article, I’ll assume you’re sticking with a single assets folder. Move all your images to the new folder.You need to change any references to the old image locations that existed before the template was converted to a WordPress theme to the new locations. Find and replace works in virtually every text editor out there, and is the easiest way to achieve this. Look for references to the old path (for example, images/ up to just before the filename, including the trailing slash), and replace them with the following:

当然，您CSS文件很可能引用了许多图像，因此此时有必要将这些图像移至主题目录。 尽管没有设置如何在主题文件夹中命名图像和其他资产目录的规则，但是值得在此处添加一个称为assets的新文件夹，其中将包含图像和JavaScript文件。 如果愿意，可以有单独的images和js文件夹，但是出于本文的原因，我假设您只使用一个assets文件夹。 将所有图像移动到新文件夹。您需要更改对模板转换为WordPress主题之前已存在的旧图像位置的所有引用。 查找和替换几乎可以在每个文本编辑器中进行，并且是实现此目的的最简单方法。 查找对旧路径的引用(例如， images/直到文件名之前，包括尾部的斜杠)，并将其替换为以下内容：

<?php bloginfo('template_directory') ?>/assets/

This will change all references to the path to the new folder your theme lives in. The assets directory is where the images are now housed.If the location of the images relative to the CSS file have changed, a quick find and replace from the old folder name to the new one should make short work of this.Now, you should have a copy of your HTML, CSS, and images all set up and working in WordPress. To check, save it and try setting WordPress to use your theme, and see what happens. You should receive a duplicate of the original HTML template, only now it’s being generated by WordPress. There should be no WordPress content in there just yet, though.

这将改变的路径到新文件夹你的主题生活的所有参考该assets目录是图像现在housed.If相对CSS文件中的图像的位置发生了变化，快速查找和从旧的替换将文件夹名称更改为新名称应该可以简化此工作。现在，您应该已经在HTML中设置了HTML，CSS和图像的副本，并且可以在WordPress中正常工作。 要进行检查，保存并尝试将WordPress设置为使用您的主题，然后看看会发生什么。 您应该会收到原始HTML模板的副本，只是现在它是由WordPress生成的。 不过，目前还应该没有WordPress内容。

页眉，页脚和侧边栏 (The Header, the Footer, and the Sidebar)

The next task will be to split the content into the header, footer, sidebar if you have one, and the rest of the page. Bearing in mind that the header, footer, and sidebar code remains unchanged on all pages (as a general rule), start by working from the top of the

下一个任务是将内容拆分为页眉，页脚，侧边栏(如果有的话)以及页面的其余部分。 请记住，页眉，页脚和侧边栏代码在所有页面上均保持不变(作为一般规则)，首先从页面顶部开始

index.php

until you reach the beginning of your sidebar or your main page content (depending on which one is first in the source), and select everything from the beginning to this point. This will usually include your page title, logo, and navigation menu.Cut and paste this into a new file, and save it in the same location as your

直到您到达侧边栏或首页内容的开头(取决于源内容中的第一个)，然后选择从开始到此为止的所有内容。 通常会包含您的页面标题，徽标和导航菜单。将其剪切并粘贴到新文件中，然后将其保存在与您的文件相同的位置

index.php

file with the name

文件名称

header.php

. The filename is important, as WordPress will go looking for this file when you ask it to insert the header in your pages. Speaking of which, let’s tell WordPress to do this. In the place of the code you cut out of

。 文件名很重要，因为当您要求它在页面中插入标头时，WordPress会继续寻找该文件。 说到其中，让我们告诉WordPress做到这一点。 替换掉的代码

index.php

, put the following line:

，将以下行：

<?php get_header(); ?>

code tells WordPress to include the content from your

代码告诉WordPress包含您的内容

header.php

file at that location in the page.Next, we’ll do the same for the page’s footer: cut all the footer material from

文件在页面上的该位置。接下来，我们将对页面的页脚执行相同的操作：从

index.php

and paste it into a new file called

并将其粘贴到名为

footer.php

, replacing it with:

，将其替换为：

<?php get_footer(); ?>

Finally, do the same action with your sidebar, saving it as

最后，对侧边栏执行相同的操作，将其保存为

sidebar.php

and replacing it with

并替换为

<?php get_sidebar(); ?>

.It’s worth checking again to see that your page is still working at this point. We haven’t made any changes, just split it up into separate files, but it’s good to verify that everything is still working.

。值得再次检查以确保您的页面目前仍在工作。 我们尚未进行任何更改，只是将其拆分为单独的文件，但是最好确认所有内容仍在工作。

模板标签 (Template Tags)

At this point, your site is just showing static HTML contained in your template, rather than fetching live data from WordPress. It’s time to change that.In WordPress, you use template tags to tell WordPress what content to fetch and insert into a page. There’s a definitive list of them on the WordPress Codex, but if you’ve been following this far, you’ve already met a few of them!

此时，您的网站仅显示模板中包含的静态HTML，而不是从WordPress获取实时数据。 是时候改变这一点了。在WordPress中，您可以使用模板标签来告诉WordPress要获取并插入页面的内容。 在WordPress Codex上有明确的列表 ，但是如果您一直在关注这些内容，那么您已经遇到了其中的一些！

get_header

,

，

get_sidebar

,

，

get_footer

, and

和

bloginfo

are all template tags.These tags can be added to any PHP file within the theme, so a good place to start is at the top of your site, with the

都是模板标记。这些标记可以添加到主题内的任何PHP文件中，因此一个好的开始是在网站顶部，

header.php

file.Let’s start at the very beginning of the file. The

让我们从文件的开头开始。 的

Doctype

can remain as is. The opening html tag can include a lang attribute, and WordPress provides this with the

可以保持原样。 开头的html标签可以包含lang属性，而WordPress为此提供了

language_attributes

template tag. So, we can replace the html tag with:

模板标记。 因此，我们可以将html标记替换为：

<html xmlns="https://www.w3.org/1999/xhtml" <?php language_attributes(); ?>

This will generate an attribute along the lines of:

这将生成以下属性：

<html xmlns="https://www.w3.org/1999/xhtml" lang="en-US">

If you’ve included any scripts, it’s worth moving them to the

如果您已包含任何脚本，则值得将它们移至

assets

folder, and changing any references to them as you did for the images. If you used a global find/replace to modify the image paths, it’s possible that the script paths were modified as well, though you’ll still need to move the JavaScript files themselves.For blogs, it’s a good idea to include links to your RSS feed and pingback URL in your head, as these will be automatically recognized by many browsers. Both of these links can be added using the

文件夹，然后像对图像一样更改对它们的引用。 如果您使用全局查找/替换来修改图像路径，则尽管您仍然需要自行移动JavaScript文件，但脚本路径也有可能被修改了。对于博客而言，包括指向您的链接的好主意您的RSS提要和pingback URL 头，因为许多浏览器会自动识别这些内容。 这两个链接都可以使用

bloginfo

by including these lines:

通过包括以下行：

<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" /><link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

With that done, you now need to include the

完成之后，您现在需要包括

wp_head

tag. This tag will pull in any JavaScript files or style sheets required by the WordPress plugins you’re using. This is vital, as those plugins may fail to function as intended. All you needis the line:

标签。 此标记将提取您正在使用的WordPress插件所需的所有JavaScript文件或样式表。 这是至关重要的，因为这些插件可能无法按预期运行。 您所需要做的就是：

<?php wp_head(); ?>

The final element in the HTML head is the page title. Most WordPress themes use some variation of the following:

HTML头中的最后一个元素是页面标题。 大多数WordPress主题使用以下内容的一些变体：

<title><?php bloginfo('name'); ?> <?php wp_title('-'); ?></title>

This will include the name of the blog, which can be defined in the WordPress settings, followed by the page title. For example, if the page is a single article, it will show the article’s title. The

这将包括可以在WordPress设置中定义的博客名称，后跟页面标题。 例如，如果页面是单个文章，它将显示文章的标题。 的

'-'

in brackets is the separator, which will be placed before the

放在方括号中的是分隔符，它将放置在

wp_title

content if (and only if) there’s a title to display. This means that the title of my blog’s home page will be “My Blog,” whereas the title of an article on my blog will be “My Blog: Article Title.” WordPress is smart, and will only include the separator if it’s needed.Still in the

内容，当(且仅当)有标题显示时。 这意味着我的博客主页的标题为“我的博客”，而我博客上的文章标题为“我的博客：文章标题”。 WordPress很聪明，并且仅在需要时才包含分隔符。

header.php

file, we’ll now move onto the body tag. This part will vary more depending on the structure of your template, but work through it andlook for any content that should be pulled in from WordPress. For example, if the website title appears in the code as

文件，我们现在将移至body标签。 这部分内容将根据模板的结构而有所不同，但请仔细研究并查找应从WordPress提取的任何内容。 例如，如果网站标题在代码中显示为

<h1>My Blog</h1>

, it should be replaced with

，应将其替换为

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

.The template tags you’re most likely to need at this point are:

此时，您最可能需要的模板标签是：

• get_option('home');
  

  : the URL of the blog’s home page

  ：博客首页的URL

• bloginfo('rss2_url');
  

  : the URL of the blog’s RSS feed

  ：博客的RSS供稿的URL

• bloginfo('description');
  

  : the description of the blog, as defined in the WordPress settings

  ：博客的描述，如WordPress设置中所定义

As with the other template tags we’ve seen, these need to be put inside

就像我们看到的其他模板标签一样，这些标签必须放在里面

<?php ?>

tags; they can sit anywhere inside the PHP file, even inside your HTML tags.Moving your site’s navigation into WordPress can be a bit trickier. There are template tags that can provide you with lists of categories or lists of pages, which you can then use to create parts of your navigation. The template tags are

标签; 它们可以放在PHP文件中的任何位置，甚至可以放在HTML标记中。将网站导航到WordPress可能会有些棘手。 有一些模板标记可以为您提供类别列表或页面列表，然后您可以使用它们来创建导航的一部分。 模板标签是

<?php wp_list_categories(); ?>

and

和

<?php wp_list_pages(); ?>

, and will provide you with lists of hyperlinks that you can style as you would a static navigation list. However, sometimes you need your pages to appear in a specific order, or you need to exclude certain pages. Much of this is possible by passing certain parameters to

，并为您提供超链接列表，您可以像静态导航列表一样设置样式。 但是，有时您需要页面以特定顺序显示，或者您需要排除某些页面。 通过将某些参数传递给

wp_list_pages

. To learn more about how to manipulate this tag, read up about it on the Codex.Moving on, if you’ve included a sidebar you’ll want to include some other elements, like links to categories and pages, or a tag cloud. Even if your layout has no sidebar, there may be other areas of the theme where it would be sensible to add these tags.

。 要了解有关如何操作此标签的更多信息， 在Codex上阅读有关内容。继续，如果您已包含边栏，则需要包含其他一些元素，例如指向类别和页面的链接或标签云。 即使您的布局没有侧边栏，也可能在主题的其他区域添加这些标签是明智的。

小部件 (Widgets)

If you plan on releasing your theme to the wider community, it’s important that you widgetize the sidebar. Widgets are chunks of content that can be added to predefined areas in a theme via the WordPress administration panel. For example, you could have a widget area at the top of your sidebar, where the blog owner could easily add a list of pages or an arbitrary block of HTML. Widgets are beyond the scope of this tutorial, but you can read more about them on the WordPress Codex.Other tags you may like to add to your sidebar include (again wrapped in

如果你打算发布你的主题更广泛的社区，这一点很重要，你widgetize侧边栏。 窗口小部件是可以通过WordPress管理面板添加到主题中预定义区域的大量内容。 例如，您可能在侧边栏顶部有一个小部件区域，博客所有者可以在其中轻松添加页面列表或任意HTML块。 窗口小部件不在本教程的讨论范围之内，但是您可以在WordPress Codex上阅读有关它们的更多信息。您可能想要添加到侧边栏中的其他标签包括(再次包装在

<?php ?>

tags):

标签)：

• wp_list_authors();
  

  : lists all the blog’s authors as li elements. If they have authored posts, their name will be a link to a page showing all their posts.

  ：列出所有博客的作者为 li元素。 如果他们撰写了帖子，则其名称将是指向显示所有帖子的页面的链接。

• wp_list_bookmarks();
  

  : outputs the links that have been added in the Links section of the administration panel, and is also wrapped in li tags.

  ：输出已添加到 链接 管理面板部分，并且也包裹在 li标签。

• wp_tag_cloud();
  

  : displays a cloud of all the tags that have been added to your posts.

  ：显示所有已添加到您帖子中的标签的云图。

Your footer section should be easy to handle now that you have a feel for template tags. If you need to output content we haven’t covered here, be sure to look for an appropriate template tag in the Codex. Remember to close any tags that are open in your

既然您对模板标签有所了解，那么页脚部分就应该易于处理。 如果您需要输出内容(此处未介绍)，请确保在食典中寻找合适的模板标签。 记住关闭所有在您的标签中打开的标签

header.php

file, such as body or any wrapper divs.As you’ve worked through this, you probably tried viewing the page at various points to test it. Whether or not that’s the case, when you view the page now, it should include all the content being pulled from WordPress, except the main body of the page.

文件，例如body或任何wrapper div。完成此操作后，您可能曾尝试在各个位置查看该页面以进行测试。 无论是哪种情况，当您现在查看页面时，它都应包括从WordPress中提取的所有内容，但页面的主体除外。

主要博客内容 (The Main Blog Content)

Now that we’ve defined the content for the header, footer, and sidebar, it’s time to turn to our page’s core content. We’ll now go back to our

现在，我们已经定义了页眉，页脚和侧边栏的内容，现在该转向页面的核心内容了。 现在我们回到我们的

index.php

file and implement the WordPress Loop. The Loop is the mechanism WordPress uses to cycle through the posts that are to be displayed on a given page, and output the content for each of them.It begins like this:

文件并实施WordPress循环。 循环是WordPress用于循环浏览要显示在给定页面上的帖子并输出每个帖子内容的机制，其开始过程如下：

<?php if (have_posts()) : ?><?php while (have_posts()) : the_post(); ?>

These two lines check to see if any posts have been provided. Depending on which page you’re viewing, different posts will be available. For example, on the main blog page, a certain number of the most recent posts will be shown. If you’re viewing a specific post, then only that post will be provided to the Loop. For category, tag, or author pages all posts belonging to that tag, category, or author will be shown.With those two lines in place, we’re now inside the loop. We now need to instruct WordPress to execute a few lines of code individually for each post in the set. For example:

这两行检查是否提供了任何帖子。 根据您正在查看的页面，将提供不同的帖子。 例如，在博客主页面上，将显示一定数量的最新帖子。 如果您正在查看特定的帖子，则只会将该帖子提供给循环。 对于A类，标签，或作者的网页属于该标签，类别或作者的所有讯息将到位shown.With这两条线，我们现在是在循环中 。 现在，我们需要指示WordPress对集合中的每个帖子分别执行几行代码。 例如：

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

This example section begins with an h2 tag containing the post title, which is linked to that post’s page. Beneath this, the post time and author are listed, wrapped in the small tags. There are a number of new template tags here, and many others you can use to customize your template to display the HTML you want for each. Here are some of the more common ones:

本示例部分以包含帖子标题的h2标签开头，该标签链接到该帖子的页面。 在此之下，列出了发帖时间和作者，并包裹在小标签中。 这里有许多新的模板标签，您可以使用许多其他标签来自定义模板，以显示每个模板所需HTML。 以下是一些较常见的：

• the_permalink()
  

  : the URL of the permanent hyperlink to the post.

  ：到帖子的永久超链接的URL。

• the_title()
  

  : the post’s title.

  ：帖子标题。

• the_time('F jS, Y')
  

  : displays the post’s date in “January 1st, 2010” format. To format the date differently, replace

  ：以“ 2010年1月1日”格式显示帖子的日期。 要更改日期格式，请替换

  'F jS, Y'
  

  with another PHP date format string.

  和另外一个 PHP日期格式字符串。

• the_author()
  

  : displays the name of and links to the archive for the user who wrote the post.

  ：显示撰写帖子的用户的名称和指向档案的链接。

• the_content()
  

  : inserts the post content. There’s no need to place this inside

  ：插入帖子内容。 没必要把它放在里面

  <p></p>
  

  tags, as this will be done automatically.

  标签，因为这将自动完成。

• the_category()
  

  : displays the name of and links to the archive of the post’s category.

  ：显示帖子类别的名称和链接。

The easiest way to make your post display match your existing template is to cut and paste your template’s sample content code inside the WordPress loop. Then insert the appropriate template tag into each part of the post’s HTML. Once you’ve included everything you want, it’s time to end the loop with

使帖子显示与现有模板匹配的最简单方法是在WordPress循环内剪切和粘贴模板的示例内容代码。 然后将适当的模板标记插入到帖子HTML的每个部分中。 包含所需的所有内容后，就该结束循环了

<?php endwhile; ?>

. This runs once all the posts have been processed. Ideally, it should be followed by some navigation controls:

。 一旦所有帖子都处理完毕，此命令便会运行。 理想情况下，应该跟随一些导航控件：

<div class="navigation">  <div class="alignleft"><?php previous_posts_link('&laquo; Previous Entries') ?></div>  <div class="alignright"><?php next_posts_link('Next Entries &raquo;') ?></div></div>

Each page displays a certain number of posts, as defined in the WordPress settings. These controls will allow your visitors to navigate back to older posts with Next and Previous links. The parameter passed to

每个页面都会显示一定数量的帖子，如WordPress设置中所定义。 这些控件将允许您的访问者使用“下一个”和“上一个”链接导航回旧帖子。 参数传递给

previous_posts_link

and

和

next_posts_link

(the string in parentheses) the text to be used for the link.At this point, note that the

(括号中的字符串)用于链接的文本。此时，请注意

while

structure has been closed, but the

结构已关闭，但

if(have_posts())

is still open. I need to elaborate on this a little. It’s possible that a page will have no posts to display (for example, your home page before you’ve added any posts, or an archive page for a month in which no posts were published.) In those cases,

仍然开放。 我需要详细说明一下。 页面可能没有任何帖子可以显示(例如，添加任何帖子之前的主页，或者一个月没有发布任何帖子的存档页面。)在这种情况下，

if(have_posts())

will evaluate to

将评估为

false

, so none of the template code you’ve just written will be run.For those cases, you’ll want to provide some fallback content. So,we first need to define the

，因此不会运行您刚才编写的模板代码。在这种情况下，您需要提供一些备用内容。 因此，我们首先需要定义

else

condition, and thenclose the

条件，然后关闭

if

statement with PHP’s

PHP的声明

endif

keyword:

关键词：

<?php else: ?><p>Sorry, there are no posts to display.</p><?php endif; ?>

For this example, we’ve simply added a paragraph telling the that there were no posts found for the page. You could also add a box or links to other parts of your site, to help visitors find their back to the content they’re looking for.

在此示例中，我们仅添加了一个段落，告诉您该页面没有找到帖子。 您还可以添加一个框或指向您网站其他部分的链接，以帮助访问者找到他们想要的内容。

其他页面 (Other Pages)

In our simple example,

在我们的简单示例中，

index.php

is being as the template for every page on the site. But if you want to modify aspect of the template only on a specific page (or group of WordPress lets you do that easily. All you need to do is

作为网站上每个页面的模板。 但是，如果您只想在特定页面上修改模板的外观(或使用WordPress组，您可以轻松地做到这一点。您要做的就是

index.php

with more specific template files. example, you can create a

与更具体的模板文件。 例如，您可以创建一个

single.php

file, and template will be used for single post pages instead of

文件，并且模板将用于单个帖子页面，而不是

index.php

file. Similarly, there

文件。 同样，那里

category.php

(for category

(对于类别

search.php

(for search results),

(用于搜索结果)，

home.php

(for the home page), and a number of othertemplate files you can create to customize each separate area of yoursite.

(用于主页)，以及您可以创建的许多其他模板文件来自定义网站的每个单独区域。

下一步是什么？ (What’s Next?)

If you’ve followed along with this entire tutorial, you have:

如果您已阅读了整个教程，那么您将：

• imported the content from your HTML template into your WordPress theme files
  将内容从HTML模板导入到WordPress主题文件中
• changed the references to images, JavaScript files, and similar within your code
  在代码中更改了对图像，JavaScript文件等的引用
• copied all the CSS files, JavaScript files, and images into your new WordPress theme’s directory
  将所有CSS文件，JavaScript文件和图像复制到新的WordPress主题目录中
• included a few bits of code to tell WordPress where the different pieces of content go
  包括一些代码来告诉WordPress不同内容在哪里
• added some menus and links that WordPress puts together automatically
  添加了WordPress自动整理的一些菜单和链接
• begun familiarizing yourself with the WordPress loop and the ideas behind WordPress theming
  开始熟悉WordPress循环和WordPress主题背后的想法

There’s a lot more to creating a WordPress theme than what I’ve beenable to cover here, of course. I hope I’ve whet your appetite to learnmore.

当然，创建WordPress主题的功能远远超出我在此介绍的内容。 希望我能激发您的兴趣，以了解更多信息。

If you enjoyed reading this post, you’ll love Learnable; the place to learn fresh skills and techniques from the masters. Members get instant access to all of SitePoint’s ebooks and interactive online courses, like The Beginner’s Guide to Web Design with WordPress.

如果您喜欢阅读这篇文章，您会喜欢Learnable的 ； 向大师学习新鲜技能的地方。 会员可以立即访问所有SitePoint的电子书和交互式在线课程，例如WordPress网页设计入门指南 。

Comments on this article are closed. Have a question about WordPress? Why not ask it on our forums?

本文的评论已关闭。 对WordPress有疑问吗？ 为什么不在我们的论坛上提问呢？

翻译自: https://www.sitepoint.com/create-your-own-wordpress-theme-from-an-html-template/

wordpress模板