ssm框架bean_Bean简介：简化的WordPress框架

水深无声 2022-12-03 09:50 178阅读 0赞

ssm框架bean

*This article was sponsored by [Beans][]. Thank you for supporting the sponsors who make SitePoint possible.*

*本文由[Beans][]赞助。* *感谢您支持使SitePoint成为可能的赞助商。*

If you develop websites and themes using WordPress, then you understand how much work it takes. Working from scratch makes you feel like you’re trying to reinvent the wheel, so many developers use frameworks to speed up the process. Finding the right framework means a much easier development process.

如果您使用WordPress开发网站和主题，那么您将了解需要进行多少工作。 从头开始工作使您感到自己想重新发明轮子，因此许多开发人员使用框架来加快流程。 找到正确的框架意味着更容易的开发过程。

This article will outline a new framework for developing WordPress sites, called Beans, and show how it’s useful for creating WordPress sites without hassle.

本文将概述一个称为Beans的用于开发WordPress网站的新框架，并说明该框架如何对创建WordPress网站无忧。

## 豆类介绍 **(**Introducing Beans**)** ##

Beans is a starter theme/framework which allows you to pick and choose the features you’ll need to build your website, and trim away the parts you can do without. It’s lightweight and fast, while giving you a lot of flexibility.

Beans是一个入门主题/框架，它使您可以选择并选择构建网站所需的功能，并修剪掉不需要的部分。 它轻巧，快速，同时为您提供了很大的灵活性。

Beans makes content responsive and images adaptive, creating multiple versions of images automatically and serving up the right image for the device it’s being viewed on. The content responds to the device as well, restructuring and reorganizing to best fit the device’s display.

Beans使内容响应和图像自适应，自动创建图像的多个版本，并为所查看的设备提供正确的图像。 内容也响应设备，进行重组和重组以最适合设备的显示。

Let’s take a closer look at a few aspects of the framework, before comparing it with its closest competitor, Genesis (which [I’ve covered myself on SitePoint][I_ve covered myself on SitePoint]).

在与最接近的竞争对手Genesis( [我在SitePoint上已经介绍过][I_ve covered myself on SitePoint] )进行比较之前，让我们仔细看一下该框架的几个方面。

### 搜索引擎优化 **(**SEO**)** ###

Beans is built to be SEO-friendly. Other themes and frameworks out there aren’t semantic, and they aren’t built with SEO in mind. Beans is built to be descriptive and semantic, making it optimized for search engines. You don’t have to worry about whether your content meets the requirements for search engine indexing, it’s built right into the framework. Beans is lightweight and optimized for mobile — two features that are vital for SEO success.

Beans被构建为对SEO友好的。 那里的其他主题和框架不是语义的，它们不是在考虑SEO的情况下构建的。 Beans具有描述性和语义性，因此使其针对搜索引擎进行了优化。 您不必担心您的内容是否满足搜索引擎索引的要求，它直接内置在框架中。 Beans轻巧且针对移动设备进行了优化-这两个功能对于SEO成功至关重要。

### 儿童主题 **(**Child Themes**)** ###

Beans uses and recommends using child themes to build custom sites. This means that when Beans is updated, your site doesn’t break. The Beans team also provides a basic child theme to help you to get started.

Beans使用并建议使用子主题来构建定制站点。 这意味着在更新Beans时，您的站点不会中断。 Beans团队还提供了一个基本的子主题，以帮助您入门。

### 网站设计 **(**Site Design**)** ###

With Beans you can control the structure of each page globally or individually. You can set the layout of the site in the customize section of the WordPress admin. You can also control the layout on a per-page basis. You have the choice of one left or right sidebar, two left or right sidebars, one sidebar on both sides, or no sidebar at all.

使用Bean，您可以全局或单独控制每个页面的结构。 您可以在WordPress管理员的“自定义”部分中设置网站的布局。 您还可以按页面控制布局。 您可以选择一个左侧或右侧边栏，两个左侧或右侧边栏，两侧一个侧边栏或根本没有侧边栏。

### 组织 **(**Organization**)** ###

Beans makes it easy to keep your code looking clean and organized. If you find yourself writing too much code for a specific page, you can take all of it and place it into a page template for that page. This keeps you from having to sort through a jumbled mess of code in your `functions.php` file. You can place specific code on highly customized pages.

Bean使轻松保持代码的外观整洁有序。 如果您发现自己为特定页面编写了太多代码，则可以将所有代码都放入该页面的页面模板中。 这样就使您不必再对`functions.php`文件中混乱的代码进行分类。 您可以在高度自定义的页面上放置特定的代码。

Even the CSS is easy to update and maintain. You can use Less, or you can use CSS. Everything is kept in the style.css file located in your child theme. This keeps you from having to dig through the main CSS file to find the line you’re looking for. You simply add the CSS to override how something looks or how it is structured.

甚至CSS也很容易更新和维护。 您可以使用Less，也可以使用CSS。 一切都保存在子主题中的style.css文件中。 这使您不必浏览主要CSS文件来查找所需的行。 您只需添加CSS即可覆盖外观或结构。

### 面向未来 **(**Future-Proof**)** ###

One of the reasons for Beans’ emphasis on creating child themes is so that when Beans updates their core theme, your site won’t become broken. You may have to update a line of code in your child theme, but it’s still better than ending up with a broken site.

Beans强调创建子主题的原因之一是，以便Beans更新其核心主题时，您的网站不会损坏。 您可能必须在子主题中更新一行代码，但这仍然比以损坏的站点结尾更好。

Now let’s take a look at how Beans compares to Genesis, its closest competitor.

现在让我们看一下Beans与最接近的竞争对手Genesis的比较。

## 豆VS。 创世记 **(**Beans Vs. Genesis**)** ##

The first obvious question when considering Beans is, how does its approach compare with Genesis? I installed Beans and set up a site to compare how it runs against a Genesis-based site.

考虑Beans时，第一个显而易见的问题是，它的方法与Genesis相比如何？ 我安装了Beans并建立了一个站点，以将其与基于Genesis的站点进行比较。

### 出现 **(**Appearance**)** ###

Genesis themes all tend to have a similar look. This depends a lot on the developer, but a lot of Genesis sites look similar in appearance and structure. Beans offers the flexibility to create whatever you can imagine. With UIkit integration, you get access to all sorts of components to create a modern, custom website for yourself or clients. UIkit itself can be customized to look how you want, making it easy to work with and easy to create a custom look.

创世记主题都有相似的外观。 这在很大程度上取决于开发人员，但是许多Genesis网站在外观和结构上看起来都很相似。 Beans提供了创建任何您可以想象的灵活性。 通过UIkit集成，您可以访问各种组件，以为自己或客户创建一个现代的自定义网站。 可以自定义UIkit本身，以使其具有所需外观，从而使其易于使用并易于创建自定义外观。

### 页面重量 **(**Page Weight**)** ###

Beans also builds more lightweight sites than Genesis, as you only call into your site what you need. You don’t use scripts and components you don’t need, and you aren’t loading scripts for those items.

Beans还比Genesis构建了更多轻量级的站点，因为您只需要调用所需的站点即可。 您不会使用不需要的脚本和组件，也不会为这些项目加载脚本。

### 灵活性 **(**Flexibility**)** ###

In Beans, you can remove and show elements on a per-page basis, which makes it quick and easy to customize. This is as simple as one line of code in your `functions.php` file.

在Beans中，您可以按页面删除和显示元素，这使得自定义变得快速而容易。 这就像在`functions.php`文件中的一行代码一样简单。

You also have much more flexibility and control over a site’s HTML. You only load the markup you need. You can use UIkit HTML attributes to style and layout pages. The big difference with building Beans WordPress sites is that you have hooks before and after each bit of HTML markup. You can add content easily, enabling you to shift elements around as needed.

您还可以更加灵活地控制网站HTML。 您只加载所需的标记。 您可以使用UIkit HTML属性来设置页面样式和布局。 构建Beans WordPress网站的最大区别是，在HTML标记的每一行前后都有钩子。 您可以轻松添加内容，使您能够根据需要移动元素。

### 速度 **(**Speed**)** ###

Beans is faster overall. There are a couple of reasons why. The first reason is that all assets are combined into one file. Also, on a per-page basis, you only load what you need. That means you aren’t loading markup on pages that isn’t necessary. All of this is controlled with Beans.

Bean总体上更快。 为什么有两个原因。 第一个原因是所有资产都合并到一个文件中。 而且，每页仅加载所需的内容。 这意味着您不会在不必要的页面上加载标记。 所有这些都由Beans控制。

The other reason Beans is faster is because you can build fairly complicated sites without being dependent on implementing a lot of resource-devouring plugins to add functionality. When combined with the fact that Beans only loads what the page needs and nothing extra, it makes it a lean and lightning-fast solution for any WordPress developer.

Beans更快的另一个原因是，您可以构建相当复杂的站点，而不必依赖于实现大量消耗资源的插件来添加功能。 结合Beans仅加载页面所需内容而没有任何额外内容的事实，它使它成为任何WordPress开发人员的精简且快速的解决方案。

### UIkit集成 **(**UIkit Integration**)** ###

UIkit is an open source front-end framework built into Beans, designed to help you build gorgeous sites without bloat. You load only what is needed on a per-page basis, meaning you aren’t loading scripts and components you aren’t using. This makes your site attractive and lightning fast.

UIkit是Beans中内置的开源前端框架，旨在帮助您构建漂亮的网站而不会without肿。 您仅按页面加载所需的内容，这意味着您不会加载未使用的脚本和组件。 这使您的网站更具吸引力，并且闪电般快速。

I made this its own section, because it is a big one for me. The integration of UIkit enables you to create any type of layout you want. All you need is the right CSS class to apply to an element, such as a div, and it will control the structure of the page. It makes it easy to build with, because it is similar to frameworks that a lot of developers already know, such as Bootstrap. You can load components on the fly, but only when you need them.

我将其设为自己的部分，因为这对我来说是一个很大的部分。 UIkit的集成使您可以创建所需的任何类型的布局。 您所需要做的就是将正确CSS类应用于元素(例如div)，它将控制页面的结构。 它易于构建，因为它类似于许多开发人员已经知道的框架，例如Bootstrap。 您可以动态加载组件，但只能在需要时加载它们。

UIkit integration allows you to add classes for things like alignment, without having to write special CSS for it each time. For example, on the About page, I wanted to center the title. Instead of writing a block of CSS for a special title class, I was able to add a utility class to get this done. I used:

UIkit集成使您可以为诸如对齐之类的事情添加类，而不必每次都为其编写特殊CSS。 例如，在“关于”页面上，我想将标题居中。 无需为特殊的标题类编写CSS块，而是能够添加实用程序类来完成此操作。 我用了：

<h1 class="uk-text-center">About</h1>

Classes like these can be added on top of other Beans classes, making it easy to get the layout you want without having to write block after block of code.

可以将此类类添加到其他Beans类的顶部，从而轻松获得所需的布局，而不必在代码块之间编写代码。

### 字段API **(**Fields API**)** ###

Another standout feature Beans has implemented is the Fields API. Right now, WordPress doesn’t have a fields API. If you’ve ever tried to build, organize or change the content in the backend, it can be a real chore to accomplish this. The Fields API offers a range of fields that can be used in the WordPress backend. If you’re building a completely custom WordPress site, you will likely want to add back-end options and fields for website specific information.

Beans实现的另一个杰出功能是Fields API。 目前，WordPress没有字段API。 如果您曾经尝试在后端构建，组织或更改内容，那么完成此工作可能是一件很麻烦的事情。 Fields API提供了可在WordPress后端中使用的一系列字段。 如果您要构建一个完全自定义的WordPress网站，则可能需要添加后端选项和字段以获取网站特定信息。

You can create options fields, post meta fields and customizer fields. These are all popular features that WordPress users look for when using a quality theme. The different field types you can implement are:

您可以创建选项字段，发布元字段和定制程序字段。 这些都是WordPress用户在使用优质主题时会寻找的流行功能。 您可以实现的不同字段类型是：

Text – Place a single word here. Text Area – You would place a paragraph of text here. Select – Select an available option. Checkbox – A checkbox that would enable a feature. Radio – A text or image based radio list. Image – Enable a single image or a gallery of images. Slider – A slider hat allows you to choose a specific value in a range. Group – A group of fields.

文字–在此处输入一个单词。 文本区域–您将在此处放置一段文本。 选择–选择一个可用选项。 复选框–启用功能的复选框。 广播–基于文本或图像的广播列表。 图像–启用单个图像或图像库。 滑块–滑块帽子使您可以选择范围内的特定值。 组–一组字段。

To implement Fields, you will use the `admin_init` for all 4 field types. You can set the field id and label. You can display those values on the front end using `beans_get_post_meta`, or the other closely related hooks. This gives you the ability to display any information you want, however you like, within your theme.

要实现字段，您将对所有4个字段类型都使用`admin_init` 。 您可以设置字段ID和标签。 您可以使用`beans_get_post_meta`或其他紧密相关的钩子在前端显示这些值。 这样，您便可以在主题内显示所需的任何信息，但您可以根据自己的喜好进行显示。

### 定制器 **(**The Customizer**)** ###

More and more WordPress users are expecting to see the Customizer come into play when selecting options. The Customizer displays a live front end view of the site while you manipulate values in the back-end. The Customizer is really just a stacked set of theme options displayed while you view the live site. This keeps you from having to save the back-end and come back and revise your choices. The Fields API allows you to completely control the customizer from the front end.

选择选项时，越来越多的WordPress用户期望看到定制程序的作用。 当您在后端中操作值时，定制器将显示站点的实时前端视图。 定制程序实际上只是在查看实时站点时显示的一堆主题选项。 这使您不必保存后端，然后回来修改您的选择。 通过Fields API，您可以从前端完全控制定制器。

### 免费和开源 **(**Free and Open Source**)** ###

Beans is 100% free and open source. There are other frameworks out there that are lacking in features, but you still end up paying for those. On top of the documentation, they provide helpful code snippets and code references to help you along the way.

Beans是100％免费和开源的。 还有其他缺少功能的框架，但是您仍然要为此付出代价。 在文档的顶部，它们提供了有用的代码段和代码参考，以帮助您一路走来。

### 文献资料 **(**Documentation**)** ###

Beans is also well-documented, with examples for each component, showing you how to implement each feature. You begin with a good starting point, and from there, the sky is the limit to what you can build.

Beans的文档也很丰富，每个组件都有示例，向您展示了如何实现每个功能。 您从一个好的起点开始，然后从那里开始，天空就是您可以建造的东西的极限。

Now we’ve taken a look at how Beans compares to Genesis, let’s take a closer look at working with the framework.

现在，我们研究了Beans与Genesis的比较，让我们仔细研究了使用框架的情况。

## 入门 **(**Getting Started**)** ##

Getting started with Beans couldn’t be easier. First, [visit the Beans website][Beans] and download and install the Beans framework. Then, you’ll want to go to the “[Child Theme][]” section of their website and download the child theme. Go back to the WordPress dashboard and install the child theme after making sure the base framework is installed. You must download the base theme and install it before installing the child theme.

Beans入门从未如此简单。 首先， [访问Beans网站][Beans]并下载并安装Beans框架。 然后，您将要转到其网站的“ [子主题][Child Theme] ”部分并下载子主题。 确保已安装基本框架后，请返回WordPress仪表板并安装子主题。 在安装子主题之前，必须下载并安装基本主题。

### 开始构建之前 **(**Before You Start Building**)** ###

You’ll want to dig into the documentation to familiarize yourself with how the framework works. There are a couple of things you will want to review and refer to as you work.

您需要深入研究文档以熟悉框架的工作原理。 工作时，您需要回顾并参考以下几件事。

**UIkit API** – This is the set of components integrated within the theme itself. You have a vast amount of customization options, which offers a lot of flexibility.

**UIkit API** –这是在主题本身内集成的**一组组**件。 您拥有大量的自定义选项，这提供了很大的灵活性。

**Understand How Child Themes and File Structures Work** – You’ll need to have a basic working knowledge of how themes and child themes work, including what each file is and it’s purpose. This will help you to understand how to modify your theme. [This SitePoint screencast outlines the basic process of creating a child theme][].

**了解子主题和文件结构的工作方式** –您需要具有主题和子主题的工作原理的基本工作知识，包括每个文件的用途和目的。 这将帮助您了解如何修改主题。 [这个SitePoint截屏视频概述了创建子主题的基本过程][This SitePoint screencast outlines the basic process of creating a child theme] 。

**Beans HTML API** – This allows you to easily modify page layouts. You can modify the markup just how you need to create a truly custom structure for your theme.

**Beans HTML API** –这使您可以轻松地修改页面布局。 您可以按照需要为主题创建真正的自定义结构的方式来修改标记。

### 现在开始*真正*入门 **(**Now to *Really* Get Started**)** ###

Navigate to `Admin > Appearance > Settings` to set the options for the Beans framework. While you’re building your site, you’ll want to enable development mode if you are using Less. There are other options here, such as the ability to flush images and cached scripts, but we will leave those alone for now.

导航到`Admin > Appearance > Settings`以设置Beans框架的选项。 在构建站点时，如果使用Less，则需要启用开发模式。 这里还有其他选项，例如刷新图像和缓存脚本的功能，但是我们暂时不讨论它们。

You can either use Less to overwrite UIKit variables or edit the CSS directly. Whichever method you choose, you’ll want to enable or disable the alternative method in the `functions.php` file of your child theme. All new functions will be added here.

您可以使用Less覆盖UIKit变量，也可以直接编辑CSS。 无论选择哪种方法，都需要在子主题的`functions.php`文件中启用或禁用替代方法。 所有新功能将在此处添加。

In my example, I am going to use CSS, so I’ll remove the following block of code from the `functions.php` file:

在我的示例中，我将使用CSS，因此我将从`functions.php`文件中删除以下代码块：

/*
    * Remove this action and callback function if you do not wish to use Less to style your site or overwrite UIkit variables.
    * If you are using Less, make sure to enable development mode via the Admin->Appearance->Settings option. Less will then be processed on the fly.
    */
    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' );
    }

### 网站设计工作原理 **(**How Designing Your Site Works**)** ###

Beans makes things easy when it comes to page customization. You don’t have to add scripts to pages and bloat your site. You can add components to pages using a mix of functions and the UIkit structure system to build the layout.

Bean使页面自定义变得容易。 您不必在页面上添加脚本，也不必在网站上肿。 您可以使用功能组合和UIkit结构系统将组件添加到页面，以构建布局。

![Design Layout][]

In the image above, you can see the typical site design you start out with. This is the default look you would expect with just about any starter theme. However, customizations are applied via the `functions.php` file, which allows you to do some pretty interesting things. If I add the following code, the layout changes, with the site going into grid mode.

在上图中，您可以看到一开始的典型站点设计。 这是几乎任何入门主题都希望得到的默认外观。 但是，可通过`functions.php`文件应用自定义，这使您可以做一些非常有趣的事情。 如果添加以下代码，则布局将更改，网站将进入网格模式。

// Enqueue the UIkit dynamic grid component.
    add_action( 'beans_uikit_enqueue_scripts', 'beans_child_enqueue_grid_uikit_assets' );
    
    function beans_child_enqueue_grid_uikit_assets() {
    
    	// Stop here if we are on a singular view.
    	if ( is_singular() )
    		return;
    
        beans_uikit_enqueue_components( array( 'grid' ), 'add-ons' );
    
    }
    
    
    // Display posts in a responsive dynamic grid.
    add_action( 'wp', 'beans_child_posts_grid' );
    
    function beans_child_posts_grid() {
    
    	// Stop here if we are on a singular view.
    	if ( is_singular() )
    		return;
    
    	// Add grid.
    	beans_wrap_inner_markup( 'beans_content', 'beans_child_posts_grid', 'div', array(
    		'data-uk-grid' => '{gutter: 20}'
    	) );
    	beans_wrap_markup( 'beans_post', 'beans_child_post_grid_column', 'div', array(
    		'class' => 'uk-width-large-1-3 uk-width-medium-1-2'
    	) );
    
    	// Move the posts pagination after the new grid markup.
    	beans_modify_action_hook( 'beans_posts_pagination', 'beans_child_posts_grid_after_markup' );
    
    }

You can see what it looks like in the screenshot below:

您可以在下面的屏幕截图中看到它的外观：

![Responsive dynamic grid][]

You can see from the screenshot that it doesn’t look so pretty at the moment, but you can change the way the layout is structured from within the `functions.php` file. You can also take away and reorder elements. I don’t like the order of content inside the post. Currently the title is first, followed by the meta, and then the image. I want the image to be the first thing, because readers generally respond more to visual stimuli. All I have to do in order to change this is add the following code to my `functions.php` file.

您可以从屏幕截图中看到，目前看起来还不那么漂亮，但是您可以从`functions.php`文件中更改布局的结构方式。 您还可以带走元素并重新排序。 我不喜欢帖子中内容的顺序。 当前，标题是第一位，其次是meta，然后是图像。 我希望图像是第一位的，因为读者通常会对视觉刺激做出更多React。 我要做的就是更改以下代码，将以下代码添加到我的`functions.php`文件中。

// Move the post image above the post title.
    beans_modify_action_hook( 'beans_post_image', 'beans_post_title_before_markup' );

![Move post image above post title][]

As you can see from the screenshot, this little bit of code immediately moved the post image above everything. I also feel like the grid layout doesn’t have room for all of the extended information, so I am going to remove the meta information and categories. You do this by placing the following code in `functions.php`:

从屏幕截图中可以看到，这小段代码立即将帖子图像移到了所有内容之上。 我还觉得网格布局没有足够的空间容纳所有扩展信息，因此我将删除元信息和类别。 您可以通过将以下代码放置在`functions.php` ：

// Remove the post meta categories.
    beans_remove_action( 'beans_post_meta_categories' );
    // Remove the post meta.
    beans_remove_action( 'beans_post_meta' );

### 定制设计 **(**Customizing the Design**)** ###

Adding design elements to your site is simple. If you want something to only show on a specific page, you’ll create your own function. I added a cover image to the child theme’s home page. I created the following function:

向您的站点添加设计元素很简单。 如果您只想在特定页面上显示某些内容，则可以创建自己的函数。 我在儿童主题的主页上添加了封面图像。 我创建了以下函数：

add_action( 'beans_header_after_markup', 'beans_child_home_add_cover' );
    function beans_child_home_add_cover() {
    	// Only apply to home page.
    	if ( !is_home() )
    	   return;
    	?>
    	<div class="uk-cover-background uk-position-relative">
    		<img src="http://designpile.net/wp-content/uploads/2015/10/mountains-863474_1920-e1445350970446.jpg" width="" height="" alt="welcome mountains">
    	</div>
    	<?php
    }

The code above looks daunting until you break it down. First, you’re adding an action, just like you would on any other `functions.php` file. Then, you’re specifying that after the header markup, you want to create a function that adds a cover image to the home page.

上面的代码令人生畏，直到您将其分解。 首先，您要添加一个动作，就像对任何其他`functions.php`文件一样。 然后，您指定在标题标记之后要创建一个将封面图像添加到首页的函数。

Next, you’re telling Beans what that function is. You’ll specify that it only applies to the home page. This basically checks to see if the current page is the home page, and if it is, that you want to add a responsive cover image.

接下来，您要告诉Beans该函数是什么。 您将指定它仅适用于主页。 基本上，这将检查当前页面是否为主页，如果是，则要添加响应封面图像。

The *divs* with ‘uk’ classes applied to them are specific to the UIkit integration, which you can find in the documentation section or on the UIkit website.

应用了“ uk”类的*div*特定于UIkit集成，您可以在文档部分或UIkit网站上找到它们。

Once you refresh the page, you can see from the screenshot below that the cover image has been placed on the home page, just after the header markup. This places it before the post content and the sidebar. You’ll create a function like the one above for each section of any custom page you create.

刷新页面后，您可以从下面的屏幕截图中看到，封面图像已放置在首页上，紧跟标题标记之后。 它将放置在帖子内容和侧边栏之前。 您将为所创建的任何自定义页面的每个部分创建一个类似于上面的功能。

![Homepage cover image][]

### 过多的定制 **(**Excessive Customizations**)** ###

One thing you’ll want to do is take note of creating a lot of customizations per page. If you realize that you are adding a lot of customizations, such as a custom layout, added features, etc., you’ll be better off creating a page template. You create a page template like you normally would, using a named template tag, but you’ll also need to add the Beans specific code. The example code below shows adding two columns of text on the about page.

您要做的一件事是注意在每页上创建很多自定义项。 如果您意识到要添加很多自定义项，例如自定义布局，添加的功能等，那么最好创建页面模板。 您可以使用命名模板标签像通常那样创建页面模板，但是您还需要添加Beans特定的代码。 下面的示例代码显示在About页面上添加两列文本。

<?php
    /* Template Name: About */ ?>
    <?php
    add_action( 'beans_header_after_markup', 'beans_child_view_add_title' );
    function beans_child_view_add_title() {
       ?>
       <div class="uk-container uk-container-center">
            <h1 class="uk-text-center">About</h1>
       </div>
       <?php
    }
    add_action( 'beans_content_prepend_markup', 'beans_child_view_add_layout' );
    function beans_child_view_add_layout() {
        ?><div class="uk-container uk-block">
    	<div class="uk-width-medium-1-2">
           <h2>Our History</h2><p>No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. But who has any right to find fault with a man who chooses to enjoy a pleasure.</p>
        </div>
    	<div class="uk-width-medium-1-2">
           <h2>Our Mission</h2><p>To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?</p>
        </div>
    </div><?php
    }
     
    // When using page template, it is very important to load the document after the customizations.
    beans_load_document();

![Excessive customizations][]

Notice the integration of UIkit markup. This is how you build the structure of your site. Doing it the way I show above is okay for a limited basis, but if you are pulling in large amounts of content, such as an array of posts, you’ll want to use the hooks that Beans provides in its documentation.

注意UIkit标记的集成。 这就是构建网站结构的方式。 在有限的基础上，按照上面显示的方式进行操作是可以的，但是如果要提取大量内容(例如，一系列帖子)，则需要使用Beans在其文档中提供的挂钩。

Beans’ hooks allow you to tie into the WordPress structure wherever you specify. For example, the sample code:

Beans的钩子使您可以在指定的任何位置绑定WordPress结构。 例如，示例代码：

do_action ( 'beans_after_posts_loop' )

initiates your command after the lists of posts that are displayed. Something you might place here would be pagination. If you wanted to add breadcrumbs, you might use:

在显示的帖子列表之后启动命令。 您可能会在这里放置分页。 如果要添加面包屑，则可以使用：

do_action ( 'beans_before_posts_loop' )

## 结论 **(**Conclusion**)** ##

It may take you a short time to familiarize yourself with the Beans framework, but once you do, you’ll be able to create a highly customized website in a fraction of the time you normally would. You can develop custom layouts for every page, while keeping the entire site lightweight.

您可能需要很短的时间来熟悉Beans框架，但是一旦您熟悉了Beans框架，就可以在通常的时间里创建一个高度自定义的网站。 您可以为每个页面开发自定义布局，同时保持整个网站的轻巧。

When compared with the Genesis framework, you can do anything with Beans that you can do with Genesis, but you have a lot more options for structure, design, and customization without having to sift through existing code or the need of other plugins.

与Genesis框架相比，您可以使用Bean进行任何操作，而可以使用Genesis进行操作，但是您在结构，设计和自定义方面有更多选择，而不必浏览现有代码或需要其他插件。

Interested? [Head here][Beans] to get started with Beans today.

有兴趣吗 [立即][Beans]前往[这里][Beans]开始使用Beans。

> 翻译自: [https://www.sitepoint.com/introducing-beans-streamlined-wordpress-framework/][https_www.sitepoint.com_introducing-beans-streamlined-wordpress-framework]

ssm框架bean

[Beans]: http://www.getbeans.io/
[I_ve covered myself on SitePoint]: https://www.sitepoint.com/an-introduction-to-the-genesis-framework/
[Child Theme]: http://www.getbeans.io/documentation/starter-child-theme/
[This SitePoint screencast outlines the basic process of creating a child theme]: https://www.sitepoint.com/watch-create-your-first-wordpress-child-theme-quick-fast/
[Design Layout]: /images/20221123/3cad2b51bd9c450b95145f0467b79200.png
[Responsive dynamic grid]: /images/20221123/3d212a229af44fc0a48a4b8a6b28b4d4.png
[Move post image above post title]: /images/20221123/ff9fe32ed4ad4f39900d4f65effc5150.png
[Homepage cover image]: /images/20221123/9ec8686c1ac6405aa78a7c86bac6f9fc.png
[Excessive customizations]: /images/20221123/ad7eb9a386b24db5b8442f3253bc9315.png
[https_www.sitepoint.com_introducing-beans-streamlined-wordpress-framework]: https://www.sitepoint.com/introducing-beans-streamlined-wordpress-framework/