使用Beans框架更快地进行WordPress主题开发

If you can’t wait to build your own custom WordPress theme, using a well coded, solid theme framework is a great way to start. Frameworks provide WordPress themes with common functionality and components for you to then create your own unique designs. This speeds up development time enormously.

如果您迫不及待想要构建自己的自定义WordPress主题，则使用良好编码的可靠主题框架是一个不错的起点。 框架为WordPress主题提供了常见的功能和组件，可让您创建自己的独特设计。 这极大地加快了开发时间。

In this post I’m going to experiment with one of the newer kids on the WordPress frameworks block, Beans, created by Thierry Muller. James George has also previously covered this topic on SitePoint in his article Introducing Beans.

在本文中，我将在Thierry Muller创建的WordPress框架块Beans上试验一个较新的孩子。 James George先前在他的文章Introducing Beans中也曾在SitePoint上介绍过此主题。

有关Beans主题框架的更多信息 (More about the Beans Theme Framework)

Beans is an Open Source, free WordPress theme framework boasting a lot of awesome features, which make it a great fit for both budding and experienced developers. Here are the main features below:

Beans是一个开放源代码 ， 免费的 WordPress主题框架，具有许多很棒的功能，非常适合初学者和经验丰富的开发人员。 以下是主要功能：

• Beans is mobile-first, fully responsive, and smart enough to create and serve images at the resolution most appropriate to the device in use.

  Beans是移动优先 ，完全响应和智能的，足以以最适合所使用设备的分辨率创建和提供图像。

• Lean code, caching, selective loading of assets, and minification techniques make Beans an amazingly light-weight and fast loading theme. This is great when it comes to Google page ranking and your website visitors’ happiness.

  精益代码，缓存，资产的选择性加载以及最小化技术使Beans成为轻量级且快速加载的主题。 当涉及到Google页面排名和您网站访问者的幸福时，这非常好。

• The UIkit front end framework lends the theme its clean and modern appearance. However, if you’re wondering whether developing with Beans will tie you to UIkit, fear not. Beans is highly flexible and lets you load assets as you need them.

  UIkit前端框架使主题具有简洁现代的外观。 但是，如果您想知道使用Beans开发是否会将您绑定到UIkit，请不要担心。 Beans高度灵活 ，可让您根据需要加载资产 。

It’s time to get your copy of Beans and take it for a test drive.

是时候获取Beans副本并进行测试了。

安装Bean (Installing Beans)

You can grab the latest version of Beans from the Bean’s website. Extract the archived .zip files, next copy the tm-beans folder into the themes directory of your WordPress install.

您可以从Bean的网站上获取Beans的最新版本。 提取存档的.zip文件，然后将tm-beans文件夹复制到WordPress安装的themes目录中。

Finally, activate Beans from the Themes panel and take a peek. Here’s what Beans looks like out of the box.

最后，从“主题”面板激活Beans并进行窥视。 这就是Beans的外观。

Viewed on a smaller screen, the theme comes with a nice built in off-canvas sidebar.

在较小的屏幕上查看，该主题带有一个不错的内置画布外边栏 。

You can add widgets to this area from the Appearance > Widgets panel of your WordPress install.

您可以从WordPress安装的“外观”>“小部件”面板中将小部件添加到此区域。

Without even touching a line of code, from the Customizer panel you can quickly add a logo and a site icon, change the background color or add a background image, add a header image, and choose from the following six page layout options:

甚至无需触摸一行代码，就可以从“ 定制器”面板中快速添加徽标和站点图标，更改背景颜色或添加背景图像，添加标题图像，然后从以下六个页面布局选项中进行选择 ：

• Full width – no sidebar.
  全宽–无侧边栏。
• Two columns – main content to the left, sidebar to the right.
  两列–主要内容在左侧，边栏在右侧。
• Two columns – main content to the right, sidebar to the left.
  两列–主要内容在右侧，边栏在左侧。
• Three columns – main column to the left, two sidebars to the right.
  三栏-主栏在左侧，两个侧栏在右侧。
• Three columns – main column to the right, two sidebars to the left.
  三栏-主栏在右侧，两个侧栏在左侧。
• Three columns – main column in the middle, one sidebar to the left and one to the right.
  三栏-中间是主栏，左侧是侧边栏，右侧是一侧。

On the other hand, if you’re like me and can’t resist the urge to take control of every nook and cranny of your theme, diving into the code is your next step.

另一方面，如果您像我一样，无法忍受控制主题的每个角落的冲动，那么下一步就是深入研究代码。

将子主题与Bean一起使用 (Using a Child Theme with Beans)

The best way to use Beans is as parent theme. Adding modifications to a child theme preserves them when you install an updated version of Beans.

使用Bean的最佳方法是作为父主题 。 在安装更新版本的Bean时，对子主题添加修改会保留它们。

Download a copy of the Beans Starter Child Theme and extract the archived .zip files.

下载Beans Starter Child主题的副本，然后解压缩存档的.zip文件。

Here’s what you find inside the Beans child folder:

这是在Beans子文件夹中找到的内容：

To get started, follow the steps below.

要开始使用，请按照以下步骤操作。

1.重命名儿童主题 (1. Rename the Child Theme)

Most likely your theme won’t be called Beans Child. It’s a good idea to rename the child theme’s folder with your theme’s name.

您的主题很可能不会被称为Beans Child 。 用主题名称重命名子主题的文件夹是个好主意。

2.在样式表中自定义WordPress标头注释 (2. Customize WordPress Header Comments in the Stylesheet)

Open style.css in a code editor. To make the child theme your own, add your theme’s details to the Theme Name, Description, Author, and Author URI fields. Save and close the document.

在代码编辑器中打开style.css 。 要使子主题成为您自己的子主题，请将主题的详细信息添加到“主题名称”，“描述”，“作者”和“作者URI”字段中。 保存并关闭文档。

3.自定义functions.php (3. Customize functions.php)

Open functions.php in your code editor. The first line of code inside this document makes available the Beans framework to the child theme:

在代码编辑器中打开functions.php 。 本文档中的第一行代码使Beans框架可用于子主题：

require_once( get_template_directory() . '/lib/init.php' );

It’s important you don’t delete this line of code.

重要的是您不要删除这一行代码。

Next, you’ll find the code necessary to enqueue the UIKit framework Less files:

接下来，您将找到排队UIKit框架Less文件所需的代码：

add_action( 
  'beans_uikit_enqueue_scripts',
  'beans_child_enqueue_uikit_assets' 
);

function beans_child_enqueue_uikit_assets() {

  beans_compiler_add_fragment( 
    'uikit', 
    get_stylesheet_directory_uri() . '/style.less',
    'less' 
  );

}

The code above allows you to quickly overwrite UIKit Less variables to your heart’s content from the child theme. If you don’t want to work with Less, simply delete this code.

上面的代码使您可以快速将UIKit Less变量覆盖子主题中的内容。 如果您不想使用Less，只需删除此代码。

Finally, the snippet below enqueues the child theme’s style.css file:

最后，下面的代码片段将子主题的style.css文件放入队列：

add_action( 
  'wp_enqueue_scripts',
  'beans_child_enqueue_assets' 
);

function beans_child_enqueue_assets() {
  wp_enqueue_style( 
    'child-style',
    get_stylesheet_directory_uri() . '/style.css' 
  );
}

If you plan on using Less rather than plain old CSS, go ahead and delete the code above.

如果您打算使用Less而不是普通CSS，请继续并删除上面的代码。

Save your work and close the file.

保存您的工作并关闭文件。

4.激活主题并调整Beans设置 (4. Activate the Theme and Adjust the Beans Settings)

Now, copy your child theme directory into the themes folder of your WordPress installation and activate it from the Appearance > Themes panel.

现在，将您的子主题目录复制到WordPress安装的themes文件夹中，然后从“外观”>“主题”面板中将其激活。

Just one last thing: access Appearance > Beans Settings and make sure the Enable development mode option is checked.

最后一件事：访问外观> Beans设置，并确保选中了“ 启用开发模式”选项。

Doing so enables Beans to compile your Less code on the fly.

这样做使Beans可以即时编译您的Less代码 。

You’re all set, now get coding your Beans-powered child theme!

一切就绪，现在就可以编写由Beans驱动的儿童主题了！

用更少的时间修改外观 (Modifying the Look and Feel with Less)

Customizing the look and feel of your child theme is easily done from style.less. Open it in your editor and start overriding some of the UIKit Less variables to suit your design. You’ll find the UIKit Less code inside lib/assets/less/uikit-overwrite in the Beans parent theme.

通过style.less可以轻松地自定义孩子主题的style.less 。 在编辑器中将其打开，然后开始覆盖一些UIKit Less变量以适合您的设计。 您会在Beans父主题的lib/assets/less/uikit-overwrite中找到UIKit Less代码。

For instance, to change the heading color, overwrite the original variable’s value as follows:

例如，要更改标题颜色，请按以下步骤覆盖原始变量的值：

@base-heading-color : #baa8da;

Now, save and refresh your page. Does the site look the same? The color of your theme’s headings should look something like this:

现在，保存并刷新页面。 网站看起来一样吗？ 主题标题的颜色应如下所示：

Beans automatically compiles Less into CSS without any effort on your part.

Bean无需您的任何努力即可自动将Less编译为CSS。

自定义模板文件 (Customizing the Template Files)

If you open any of the Beans template files, you’ll soon notice that all they contain is one line of code. For instance, here’s what you find in index.php:

如果打开任何Beans模板文件，您很快就会注意到它们包含的只是一行代码。 例如，这是在index.php找到的内容：

<?php
  beans_load_document();

In fact, you customize Beans template files via action hooks in functions.php. This sounds intimidating at first, but once you get familiar with the theme’s APIs, you’ll be glad that modifying a short line of markup doesn’t require overriding an entire template file.

实际上，您是通过functions.php 动作挂钩自定义Beans模板文件的。 起初听起来有些吓人，但是一旦您熟悉了主题的API，您将很高兴地修改一小段标记不需要覆盖整个模板文件。

Here are a few examples to get you started.

以下是一些入门指南。

删除CSS类 (Removing CSS Classes)

Let’s say you’d like to bump up the size of the tagline.

假设您想增加标语的大小。

Here’s what you need to write in functions.php:

这是您需要在functions.php编写的内容：

beans_remove_attribute( 
  'beans_site_title_tag',
  'class', 
  'uk-text-small' 
);

Save and refresh. Now the tagline should look bigger.

保存并刷新。 现在，标语应该看起来更大。

What just happened?

刚才发生了什么？

The size of the tagline is constrained by the UIKit class .uk-text-small. Removing this class, achieves the desired goal. To do so, you use the beans_remove_attribute() function.

标语的大小受UIKit类.uk-text-small约束。 删除此类，可以达到预期的目标。 为此，您可以使用beans_remove_attribute()函数。

This function has three parameters:

该函数具有三个参数：

• $id. You can easily locate the value for this parameter by inspecting the element you’re targeting in the source document. When in development mode, Beans injects a data-markup-id attribute into each HTML element. You use the value of this attribute to get hold of the element in your code and manipulate it using the APIs. For the tagline the value of the data-markup-id is beans_site_title_tag, which you added as the first argument in the function above.

  $id 。 通过检查源文档中要定位的元素，可以轻松找到此参数的值。 在开发模式下，Beans将data-markup-id属性注入每个HTML元素。 您可以使用此属性的值来获取代码中的元素，并使用API​​对其进行操作。 对于标语， data-markup-id是beans_site_title_tag ，您将其添加为上述函数中的第一个参数。

  

• $attribute. This is the name of the HTML attribute you intend to manipulate. In this case, you want to remove the element’s class attribute.

  $attribute 。 这是您要操作HTML属性的名称。 在这种情况下，您要删除元素的class属性。

• $value. This is the value of the attribute you’d like to remove. For this example, it’s the .uk-text-small class.

  $value 。 这是您要删除的属性的值。 对于此示例，它是.uk-text-small类。

Check out the other HTML-related functions for ways to add and replace CSS classes and more with just one line of code.

查看其他与HTML相关的功能 ，以了解仅用一行代码即可添加和替换CSS类以及更多类的方法。

添加标记 (Adding Markup)

Here’s how you can quickly add a snippet of HTML markup using action hooks.

这是您可以使用动作钩子快速添加HTML标记代码段的方法。

UIKit comes bundled with great looking icons from Font Awesome. Try adding a clock icon before each post date meta information. Here’s the code to put in your functions.php file.

UIKit捆绑了Font Awesome的精美图标。 尝试在每个发布日期元信息之前添加时钟图标。 这是放置在functions.php文件中的代码。

beans_add_action( 
  'beans_post_meta_item_date_prepend_markup',
  'beans_child_add_post_meta_date_icon' 
);

            function beans_child_add_post_meta_date_icon() {
        ?><i class="uk-icon-clock-o uk-margin-small-right uk-text-muted"></i><?php
            }

The sample code above uses beans_post_meta_item_date_prepend_markup. The first part — beans_post_meta_item_date — is the value of the Beans data-markup-id (you can find this out using a browser developer tool to inspect the source code). The second part — prepend_markup — is the action your markup-injecting function hooks up to do its job.

上面的示例代码使用beans_post_meta_item_date_prepend_markup 。 第一部分beans_post_meta_item_date是Beans data-markup-id (您可以使用浏览器开发人员工具来检查源代码，以找到它)。 第二部分prepend_markup是您的标记注入函数为完成其工​​作而执行的操作。

To learn more about all the action hooks that let you manipulate HTML markup, head over to the Markup and attributes documentation page. Here, you’ll find that each piece of markup with a Beans data-markup-id has the following action hooks attached to it:

要了解有关可用于操作HTML标记的所有动作挂钩的更多信息，请转到“ 标记和属性”文档页面。 在这里，您会发现每个带有Beans data-markup-id都附加了以下操作挂钩：

• {$markup_id}_before_markup, fires before the opening markup;

  {$markup_id}_before_markup ，在打开标记之前触发；

• {$markup_id}_prepend_markup, fires after the opening markup (not available for selfclosed markup);

  {$markup_id}_prepend_markup ，在打开标记后触发(不适用于自闭标记)；

• {$markup_id}_append_markup, fires before the closing markup (not available for selfclosed markup);

  {$markup_id}_append_markup ，在结束标记之前触发(不适用于自闭标记)；

• {$markup_id}_afer_markup, fires after the closing markup.

  {$markup_id}_afer_markup ，在结束标记后触发。

Finally, your beans_child_add_post_meta_date_icon() function prints the markup needed to display the icon.

最后， beans_child_add_post_meta_date_icon()函数将打印显示图标所需的标记。

If you’re a super WordPress dev working on a theme for distribution, you can also take advantage of Beans Actions and HTML API. Doing so will make your theme more extensible in a way that is consistent with the Beans framework.

如果您是从事分配主题的超级WordPress开发人员，则还可以利用Beans Actions和HTML API。 这样做将以与Beans框架一致的方式使您的主题更具可扩展性。

For instance, you can add a clock icon before the post date meta information, like you did in the example above, using this code:

例如，您可以使用以下代码在发布日期元信息之前添加一个时钟图标，就像在上面的示例中一样：

beans_add_smart_action( 
  'beans_post_meta_item_date_prepend_markup',
  'beans_child_super_dev_meta_date_icon' 
);

function beans_child_super_dev_meta_date_icon() {
  echo beans_open_markup( 
    'beans_child_date_icon',
    'i', 
    'class=uk-icon-clock-o uk-margin-small-right uk-text-muted' 
    );
  echo beans_close_markup( 'beans_child_date_icon', 'i' );
}

beans_add_smart_action() needs the following parameters:

beans_add_smart_action()需要以下参数：

• $hook. This is the name of the action to which the callback function is hooked.

  $hook 。 这是挂接到回调函数的操作的名称。

• $callback. This is the name of the callback function you wish to execute.

  $callback 。 这是您希望执行的回调函数的名称。

The custom beans_child_super_dev_meta_date_icon() function uses beans_open_markup() and beans_close_markup() to spew out the UIKit clock icon where you want it.

定制的beans_child_super_dev_meta_date_icon()函数使用beans_open_markup()和beans_close_markup()在需要的位置弹出UIKit时钟图标。

演示主题：构建主页网格布局 (Demo Theme: Building the Home Page Grid Layout)

The downloadable demo theme for this article illustrates one way in which you can totally change the default appearance of the blog index page in Beans.

本文的可下载演示主题说明了一种可以完全更改Beans中博客索引页面的默认外观的方法。

The final result should look something like this.

最终结果应如下所示。

The heavy lifting is all done by Beans and the UIKit CSS classes. You just change the default layout option for the blog index page and add the right UIKit CSS classes to the markup.

繁重的工作全部由Beans和UIKit CSS类完成。 您只需更改博客索引页面的默认布局选项，然后将正确的UIKit CSS类添加到标记中。

Because this layout only applies to the blog index page, you can take your pick between:

由于此布局仅适用于博客索引页面，因此可以在以下选项之间进行选择：

• Adding your code for the layout to functions.php. Just wrap the snippet inside a conditional statement, i.e., if( is_home() ) //Your code here; or

  将用于布局的代码添加到functions.php 。 只需将代码段包装在条件语句中即可，即if( is_home() ) //Your code here ； 要么

• Adding a home.php page template to the child theme.

  将home.php页面模板添加到子主题。

My demo theme has quite a few lines of code specific to the blog index page, therefore I’ve opted for the second option. In fact, in this specific case, adding a page template is preferable to having to write the same conditional statement several times.

我的演示主题有很多特定于博客索引页面的代码行，因此，我选择了第二个选项。 实际上，在这种特定情况下，添加页面模板比必须多次编写相同的条件语句要好。

You’re free to go with whatever option best suits your design. However, if you choose to create a template file for your child theme, don’t forget to add the following line of code at the bottom of the document:

您可以自由选择最适合您设计的选项。 但是，如果您选择为子主题创建模板文件，请不要忘记在文档底部添加以下代码行：

// Load Beans document.
beans_load_document();

将默认页面布局更改为全宽 (Change the Default Page Layout to be Full Width)

The default site-wide layout for the theme is a two-column layout. Therefore, the first step is to turn the default layout for the blog index page into a full width layout.

主题的默认站点范围布局是两列布局。 因此，第一步是将博客索引页面的默认布局转换为全角布局。

Make page fullwidth as default layout in home page
    add_filter( 'beans_layout', 'beans_child_default_home_layout' );
                
                function beans_child_default_home_layout() {
                    return 'c';
                }

The code above uses the `beans_layout` filter hook. The hooked function simply returns the ID for the full width layout, which is c.

上面的代码使用了beans_layout过滤器挂钩。 钩子函数仅返回全宽布局的ID，即c 。

You can get the ID of all the layout options available in your theme on the Beans layout code snippets page.

您可以在Beans 布局代码段页面上获得主题中所有可用布局选项的ID。

建立网格 (Build the Grid)

One way you can achieve a tiled layout is by adding this code.

获得平铺布局的一种方法是添加此代码。

//Adjust the UKIt grid for the index posts page
beans_add_attribute( 
  'beans_content',
  'class', 
  'uk-grid uk-container-center' 
);

beans_add_attribute( 
  'beans_post',
  'class', 
  'uk-width-large-1-3 uk-width-medium-1-2 uk-width-small-1-1' 
);

The snippet above performs the following two tasks:

上面的代码段执行以下两项任务：

• It targets the markup with the data-markup-id value of beans_content. It then turns this element into a grid container by adding the .uk-grid class to it;

  它以beans_content的data-markup-id值为目标标记。 然后，通过向其添加.uk-grid类，将该元素转换为网格容器。

• Finally, it targets all the elements with the data-markup-id value of beans_post. It turns these elements into responsive grid items by adding the following classes: .uk-width-large-1-3 .uk-width-medium-1-2 .uk-width-small-1-1. Translating UIKit grid classes into plain English, this means: display a three-column layout on large screens, a two-column layout on medium screeens, and just a one-column layout on small screens.

  最后，它将所有元素的beans_post的data-markup-id值作为beans_post 。 通过添加以下类，它将这些元素转换为响应网格项： .uk-width-large-1-3 .uk-width-medium-1-2 .uk-width-small-1-1 。 将UIKit网格类翻译成普通英语，这意味着：在大屏幕上显示三列布局，在中型屏幕上显示两列布局，在小屏幕上仅显示一列布局。

That’s it, congrats! Most of the remaining code is just a bit of CSS to make it look nice.

就是这样，恭喜！ 剩下的大部分代码只是一些CSS，以使其看起来不错。

结论 (Conclusion)

You should now have a good sense of the Beans Framework capabilities and features. Where to next?

您现在应该对Beans Framework的功能和特性有了很好的了解。 接下来要去哪里？

You can:

您可以：

• Dive into the Beans documentation and code reference;

  深入研究Beans 文档和代码参考 ；

• Get your hands dirty on the ever growing library of code snippets;

  掌握不断增长的代码片段库；

• Reverse engineer some of the free Beans Child Themes. Start with the downloadable demo theme for this article, then head over to ThemeButler to grab some more.

  对一些免费的Beans儿童主题进行逆向工程。 从本文的可下载演示主题开始，然后前往ThemeButler进行更多了解。

Beans is a relatively new WordPress theme framework, so if you do happen to come across any bugs, or have any specific feature requests, leave your message on GitHub. If you’d like to join the growing community around the theme, follow Beans on Twitter.

Beans是一个相对较新的WordPress主题框架，因此，如果您碰巧遇到任何错误或有任何特定功能要求，请在GitHub上留言。 如果您想加入这个主题的成长社区，请在Twitter上关注Beans 。

Why not give Beans a try and let me know what you think? I look forward to your themes and your feedback!

为什么不尝试尝试让我知道您的想法呢？ 我期待着您的主题和反馈！

翻译自: https://www.sitepoint.com/faster-wordpress-theme-development-beans-framework/