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開發(fā)網(wǎng)站和主題，那么您將了解需要進行多少工作。 從頭開始工作使您感到自己想重新發(fā)明輪子，因此許多開發(fā)人員使用框架來加快流程。 找到正確的框架意味著更容易的開發(fā)過程。

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的用于開發(fā)WordPress網(wǎng)站的新框架，并說明該框架如何對創(chuàng)建WordPress網(wǎng)站無憂。

豆類介紹 (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是一個入門主題/框架，它使您可以選擇并選擇構建網(wǎng)站所需的功能，并修剪掉不需要的部分。 它輕巧，快速，同時為您提供了很大的靈活性。

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使內(nèi)容響應和圖像自適應，自動創(chuàng)建圖像的多個版本，并為所查看的設備提供正確的圖像。 內(nèi)容也響應設備，進行重組和重組以最適合設備的顯示。

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).

在與最接近的競爭對手Genesis( 我在SitePoint上已經(jīng)介紹過 )進行比較之前，讓我們仔細看一下該框架的幾個方面。

搜索引擎優(yōu)化 (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具有描述性和語義性，因此使其針對搜索引擎進行了優(yōu)化。 您不必擔心您的內(nèi)容是否滿足搜索引擎索引的要求，它直接內(nèi)置在框架中。 Beans輕巧且針對移動設備進行了優(yōu)化-這兩個功能對于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團隊還提供了一個基本的子主題，以幫助您入門。

網(wǎng)站設計 (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管理員的“自定義”部分中設置網(wǎng)站的布局。 您還可以按頁面控制布局。 您可以選擇一個左側或右側邊欄，兩個左側或右側邊欄，兩側一個側邊欄或根本沒有側邊欄。

組織 (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使輕松保持代碼的外觀整潔有序。 如果您發(fā)現(xiàn)自己為特定頁面編寫了太多代碼，則可以將所有代碼都放入該頁面的頁面模板中。 這樣就使您不必再對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強調(diào)創(chuàng)建子主題的原因之一是，以便Beans更新其核心主題時，您的網(wǎng)站不會損壞。 您可能必須在子主題中更新一行代碼，但這仍然比以損壞的站點結尾更好。

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

現(xiàn)在讓我們看一下Beans與最接近的競爭對手Genesis的比較。

豆VS。 創(chuàng)世記 (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的站點進行比較。

出現(xiàn) (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.

創(chuàng)世記主題都有相似的外觀。 這在很大程度上取決于開發(fā)人員，但是許多Genesis網(wǎng)站在外觀和結構上看起來都很相似。 Beans提供了創(chuàng)建任何您可以想象的靈活性。 通過UIkit集成，您可以訪問各種組件，以為自己或客戶創(chuàng)建一個現(xiàn)代的自定義網(wǎng)站。 可以自定義UIkit本身，以使其具有所需外觀，從而使其易于使用并易于創(chuàng)建自定義外觀。

頁面重量 (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構建了更多輕量級的站點，因為您只需要調(diào)用所需的站點即可。 您不會使用不需要的腳本和組件，也不會為這些項目加載腳本。

靈活性 (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.

您還可以更加靈活地控制網(wǎng)站HTML。 您只加載所需的標記。 您可以使用UIkit HTML屬性來設置頁面樣式和布局。 構建Beans WordPress網(wǎng)站的最大區(qū)別是，在HTML標記的每一行前后都有鉤子。 您可以輕松添加內(nèi)容，使您能夠根據(jù)需要移動元素。

速度 (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總體上更快。 為什么有兩個原因。 第一個原因是所有資產(chǎn)都合并到一個文件中。 而且，每頁僅加載所需的內(nèi)容。 這意味著您不會在不必要的頁面上加載標記。 所有這些都由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更快的另一個原因是，您可以構建相當復雜的站點，而不必依賴于實現(xiàn)大量消耗資源的插件來添加功能。 結合Beans僅加載頁面所需內(nèi)容而沒有任何額外內(nèi)容的事實，它使它成為任何WordPress開發(fā)人員的精簡且快速的解決方案。

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中內(nèi)置的開源前端框架，旨在幫助您構建漂亮的網(wǎng)站而不會without腫。 您僅按頁面加載所需的內(nèi)容，這意味著您不會加載未使用的腳本和組件。 這使您的網(wǎng)站更具吸引力，并且閃電般快速。

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的集成使您可以創(chuàng)建所需的任何類型的布局。 您所需要做的就是將正確CSS類應用于元素(例如div)，它將控制頁面的結構。 它易于構建，因為它類似于許多開發(fā)人員已經(jīng)知道的框架，例如Bootstrap。 您可以動態(tài)加載組件，但只能在需要時加載它們。

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實現(xiàn)的另一個杰出功能是Fields API。 目前，WordPress沒有字段API。 如果您曾經(jīng)嘗試在后端構建，組織或更改內(nèi)容，那么完成此工作可能是一件很麻煩的事情。 Fields API提供了可在WordPress后端中使用的一系列字段。 如果您要構建一個完全自定義的WordPress網(wǎng)站，則可能需要添加后端選項和字段以獲取網(wǎng)站特定信息。

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:

您可以創(chuàng)建選項字段，發(fā)布元字段和定制程序字段。 這些都是WordPress用戶在使用優(yōu)質(zhì)主題時會尋找的流行功能。 您可以實現(xiàn)的不同字段類型是：

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.

文字–在此處輸入一個單詞。 文本區(qū)域–您將在此處放置一段文本。 選擇–選擇一個可用選項。 復選框–啟用功能的復選框。 廣播–基于文本或圖像的廣播列表。 圖像–啟用單個圖像或圖像庫。 滑塊–滑塊帽子使您可以選擇范圍內(nèi)的特定值。 組–一組字段。

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.

要實現(xiàn)字段，您將對所有4個字段類型都使用admin_init 。 您可以設置字段ID和標簽。 您可以使用beans_get_post_meta或其他緊密相關的鉤子在前端顯示這些值。 這樣，您便可以在主題內(nèi)顯示所需的任何信息，但您可以根據(jù)自己的喜好進行顯示。

定制器 (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用戶期望看到定制程序的作用。 當您在后端中操作值時，定制器將顯示站點的實時前端視圖。 定制程序?qū)嶋H上只是在查看實時站點時顯示的一堆主題選項。 這使您不必保存后端，然后回來修改您的選擇。 通過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的文檔也很豐富，每個組件都有示例，向您展示了如何實現(xiàn)每個功能。 您從一個好的起點開始，然后從那里開始，天空就是您可以建造的東西的極限。

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

現(xiàn)在，我們研究了Beans與Genesis的比較，讓我們仔細研究了使用框架的情況。

入門 (Getting Started)

Getting started with Beans couldn’t be easier. First, visit the Beans website 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網(wǎng)站并下載并安裝Beans框架。 然后，您將要轉(zhuǎn)到其網(wǎng)站的“ 子主題 ”部分并下載子主題。 確保已安裝基本框架后，請返回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 –這是在主題本身內(nèi)集成的一組組件。 您擁有大量的自定義選項，這提供了很大的靈活性。

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截屏視頻概述了創(chuàng)建子主題的基本過程 。

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 –這使您可以輕松地修改頁面布局。 您可以按照需要為主題創(chuàng)建真正的自定義結構的方式來修改標記。

現(xiàn)在開始真正入門 (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，則需要啟用開發(fā)模式。 這里還有其他選項，例如刷新圖像和緩存腳本的功能，但是我們暫時不討論它們。

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' ); }

網(wǎng)站設計工作原理 (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使頁面自定義變得容易。 您不必在頁面上添加腳本，也不必在網(wǎng)站上腫。 您可以使用功能組合和UIkit結構系統(tǒng)將組件添加到頁面，以構建布局。

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文件應用自定義，這使您可以做一些非常有趣的事情。 如果添加以下代碼，則布局將更改，網(wǎng)站將進入網(wǎng)格模式。

// 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:

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

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文件中更改布局的結構方式。 您還可以帶走元素并重新排序。 我不喜歡帖子中內(nèi)容的順序。 當前，標題是第一位，其次是meta，然后是圖像。 我希望圖像是第一位的，因為讀者通常會對視覺刺激做出更多React。 我要做的就是更改以下代碼，將以下代碼添加到我的functions.php文件中。

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

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:

從屏幕截圖中可以看到，這小段代碼立即將帖子圖像移到了所有內(nèi)容之上。 我還覺得網(wǎng)格布局沒有足夠的空間容納所有擴展信息，因此我將刪除元信息和類別。 您可以通過將以下代碼放置在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:

向您的站點添加設計元素很簡單。 如果您只想在特定頁面上顯示某些內(nèi)容，則可以創(chuàng)建自己的函數(shù)。 我在兒童主題的主頁上添加了封面圖像。 我創(chuàng)建了以下函數(shù)：

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文件一樣。 然后，您指定在標題標記之后要創(chuàng)建一個將封面圖像添加到首頁的函數(shù)。

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該函數(shù)是什么。 您將指定它僅適用于主頁。 基本上，這將檢查當前頁面是否為主頁，如果是，則要添加響應封面圖像。

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網(wǎng)站上找到它們。

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.

刷新頁面后，您可以從下面的屏幕截圖中看到，封面圖像已放置在首頁上，緊跟標題標記之后。 它將放置在帖子內(nèi)容和側邊欄之前。 您將為所創(chuàng)建的任何自定義頁面的每個部分創(chuàng)建一個類似于上面的功能。

過多的定制 (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.

您要做的一件事是注意在每頁上創(chuàng)建很多自定義項。 如果您意識到要添加很多自定義項，例如自定義布局，添加的功能等，那么最好創(chuàng)建頁面模板。 您可以使用命名模板標簽像通常那樣創(chuàng)建頁面模板，但是您還需要添加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();

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標記的集成。 這就是構建網(wǎng)站結構的方式。 在有限的基礎上，按照上面顯示的方式進行操作是可以的，但是如果要提取大量內(nèi)容(例如，一系列帖子)，則需要使用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框架，就可以在通常的時間里創(chuàng)建一個高度自定義的網(wǎng)站。 您可以為每個頁面開發(fā)自定義布局，同時保持整個網(wǎng)站的輕巧。

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進行操作，但是您在結構，設計和自定義方面有更多選擇，而不必瀏覽現(xiàn)有代碼或需要其他插件。

Interested? Head here to get started with Beans today.

有興趣嗎 立即前往這里開始使用Beans。

翻譯自: https://www.sitepoint.com/introducing-beans-streamlined-wordpress-framework/

ssm框架bean

總結

以上是生活随笔為你收集整理的ssm框架bean_Bean简介：简化的WordPress框架的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。