wordpress入门主题_WordPress主题开发：下划线（_s）入门

wordpress入门主题

This article is for developers who build custom WordPress themes. There are times when buying a premium theme or modifying it with a child theme are fine, but in many situations, there isn’t an existing theme that fits a client’s content needs precisely or that conveys their visual identity correctly.

本文适用于构建自定义WordPress主题的开发人员。有时候，购买高级主题或用子主题进行修改都是可以的，但在许多情况下，没有一种主题可以准确地满足客户的内容需求或正确传达其视觉形象。

There are a number of useful blank themes or starter themes available for custom WordPress theme development. Some of the more common ones include Bones, Roots, Joints, HTML5 Blank, and HTML5 Reset. These themes have various levels of built-in styling. Some rely on Bootstrap; others use Foundation. Some include a CSS reset; others simply include normalize.css.

有很多有用的空白主题或入门主题可用于自定义WordPress主题开发。一些更常见的选项包括“ 骨骼” ，“ 根” ，“ 关节” ，“ HTML5空白 ”和“ HTML5重置” 。这些主题具有各种级别的内置样式。有些依赖Bootstrap ; 其他人使用Foundation 。有些包括CSS重置 ; 其他仅包含normalize.css 。

My personal favorite is _s (also called Underscores). It’s a blank theme maintained by Automattic, the company who runs WordPress.com, Jetpack, Akismet, and Gravatar. This ensures that it stays fresh and up-to-date with current WordPress code standards. In fact, at least 30 updates were made just last month.

我个人最喜欢的是_s (也称为Underscores )。这是一个空白主题，由运行WordPress.com，Jetpack，Akismet和Gravatar的公司Automattic维护。这样可以确保它保持最新和最新的WordPress代码标准。实际上，上个月至少进行了30次更新。

Not only is _s up-to-date with WordPress standards, it also stays on top of HTML5 standards. Using semantic tags like <header>, <footer>, <nav>, <article>, and <section>, it presents your content as accurately as possible for search engines. Note: if you’re concerned about layout in IE8 and down, include html5shiv in your theme.

_s不仅与WordPress标准保持同步，而且还保持在HTML5标准之上。使用<header> ， <footer> ， <nav> ， <article>和<section>类的语义标记，它可以为搜索引擎尽可能准确地显示您的内容。 注意：如果您担心IE8及更低版本的布局，请在主题中包含html5shiv 。

Another thing I love about _s is what it doesn’t have. It doesn’t have a grid system, options framework, or JavaScript library. In other words, it doesn’t have bloat that I’ll have to trim later. The only styles it has (besides a reset and navigation) are the ones I choose to add. I understand that plenty of people rely on CSS frameworks to speed up development, but I’d rather invest the necessary time in development and speed up the site!

我喜欢_s的另一件事是它没有。它没有网格系统，选项框架或JavaScript库。换句话说，它没有膨胀，我以后将不得不修剪。它唯一的样式(除了重置和导航之外)是我选择添加的样式。我知道很多人都依赖CSS框架来加快开发速度，但是我宁愿在开发和加速网站上花费必要的时间！

下载并安装_s (Downloading and Installing _s)

You can download _s at underscores.me. The page first offers you a single field: choose the name for your theme. I recommend clicking the “Advanced Options” link and adding a theme slug, author name and website, and description. These values will be added automatically to the theme comments at the top of style.css.

您可以在underscores.me下载_s。该页面首先为您提供一个字段：选择主题的名称。建议您单击“高级选项”链接，然后添加主题标签，作者姓名和网站以及说明。这些值将自动添加到style.css顶部的主题注释中。

You’ll be given a .zip file containing your theme files. Upload it to your site using Dashboard -> Appearance -> Themes -> Add New -> Upload Theme, then activate it like normal. Its screenshot is just a checkered pattern. (I asked about uploading your own screenshot.png in the Advanced Options when you generate the theme, but the answer was no.)

您将获得一个包含主题文件的.zip文件。使用仪表板->外观->主题->添加新->上传主题将其上传到您的网站，然后像平常一样**它。它的屏幕截图只是一个方格图案。 (我问过在生成主题时是否要在“高级选项”中上传自己的screenshot.png，但答案是否定的。)

基本样式 (Basic Styling)

Once you activate _s, the first thing you’ll notice is that it’s the most boring theme you’ve ever seen.

**_s后，您首先会注意到它是您见过的最无聊的主题。

Everything is your basic 16px sans-serif. There are no margins; there’s not much padding; it pretty much just dark gray and blue. And that’s a good thing! This is meant to be simply a base for you to build from, not a client-ready template.

一切都是您的基本16px sans-serif。没有边际；没有太多的填充；它几乎只是深灰色和蓝色。那是一件好事！这只是作为您构建的基础，而不是客户端就绪的模板。

CSS结构 (CSS Structure)

The style.css file in _s is well-organized and formatted. It breaks down styles into 12 sections:

_s中的style.css文件井井有条，格式合理。它将样式分为12个部分：

Reset
重启
Typography
版式
Elements
元素
Forms
形式
Navigation (Links & Menus)
导航(链接和菜单)
Accessibility
辅助功能
Alignments
对齐方式
Clearings
清算
Widgets
小部件
Content (Posts and pages, Asides, & Comments)
内容(帖子和页面，辅助功能和评论)
Infinite scroll (Optional)
无限滚动(可选)
Media (Captions & Galleries)
媒体(字幕和画廊)

This makes it easy to start adding your own styles to an already-organized file right away. It also makes it pretty simple to break this file down into several partials if you’d like to use Sass or another CSS pre-processor to maintain your CSS for your custom theme (that’s what I’d do). Or if you prefer, there are some Sass–ready forks of _s available on Github.

这样可以轻松地立即开始将自己的样式添加到已组织的文件中。如果您想使用Sass或其他CSS预处理器来维护自定义主题CSS，这也使将文件分成几个部分非常简单( 这就是我要做的 )。或者，如果您愿意，可以在Github上使用一些 Sass – _s的现成叉子。

模板文件结构 (Template File Structure)

_s carefully follows the WordPress template file naming convention. Your basic template files are index.php, archive.php, page.php, and single.php. These each use the get_template_part() function to call the appropriate partial files (like content-page.php or content-single.php). You’ll also find standard WordPress files like header.php, footer.php, and sidebar.php in _s.

_s严格遵循WordPress模板文件的命名约定。基本模板文件是index.php，archive.php，page.php和single.php。它们每个都使用get_template_part()函数来调用适当的部分文件(例如content-page.php或content-single.php)。您还会在_s中找到标准的WordPress文件，例如header.php，footer.php和sidebar.php。

This clean organization system sets a maintainable pattern for developers to follow. If you were to add a custom post type called Staff for a company, you’d create archive-staff.php to display all the Staff and single-staff.php for an individual members. Those pages would call content-staff.php for content. If you need to call different content for archive vs. single, you could use the is_post_type_archive() conditional test inside content-staff.php to serve different versions of the content for different views.

这种干净的组织系统为开发人员设置了可维护的模式。如果要为公司添加名为Staff的自定义帖子类型，则可以创建archive-staff.php以显示单个成员的所有Staff和single-staff.php。这些页面将调用content-staff.php获取内容。如果需要为归档文件或单个文件调用不同的内容，则可以在content-staff.php中使用is_post_type_archive()条件测试为不同的视图提供不同版本的内容。

结论 (Conclusion)

I highly recommend trying _s the next time you need to develop a custom theme from “scratch.” It’s licensed under the GPL, so you’re free to do what you like, including developing commercial themes based on _s. The theme is cleanly coded, meets modern standards, and doesn’t include bloated frameworks or styles.

我强烈建议下次您需要从“从头开始”开发自定义主题时尝试_s。它是根据GPL许可的，因此您可以*地做自己喜欢的事情，包括根据_s开发商业主题。主题编码简洁，符合现代标准，不包含include肿的框架或样式。

If you’ve used _s for an awesome theme or have a different blank theme that you love, please let us know in the comments!

如果您使用_s作为超赞主题，或者您喜欢其他不同的空白主题，请在评论中告诉我们！

翻译自: https://www.sitepoint.com/wordpress-theme-development-getting-started-with-underscores/