Представляем Beans: оптимизированный WordPress Framework

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

Как работает дизайн вашего сайта

Beans упрощает настройку страниц. Вам не нужно добавлять скрипты на страницы и раздувать ваш сайт. Вы можете добавлять компоненты на страницы, используя комбинацию функций и систему структуры UIkit для построения макета.

На изображении выше вы можете увидеть типичный дизайн сайта, с которого вы начинаете. Это стиль по умолчанию, который вы ожидаете увидеть практически с любой стартовой темой. Однако настройки применяются через файл 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' ); } 

Вы можете увидеть, как это выглядит на скриншоте ниже:

Вы можете видеть на скриншоте, что на данный момент это выглядит не так красиво, но вы можете изменить структуру макета из файла functions.php . Вы также можете убрать и изменить порядок элементов. Мне не нравится порядок содержимого внутри поста. В настоящее время сначала идет заголовок, затем мета, а затем изображение. Я хочу, чтобы изображение было первым, потому что читатели обычно больше реагируют на зрительные стимулы. Все, что мне нужно сделать, чтобы изменить это, добавить следующий код в мой файл functions.php .

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

Как вы можете видеть на скриншоте, этот небольшой кусочек кода сразу переместил изображение поста выше всего. Я также чувствую, что в макете сетки нет места для всей расширенной информации, поэтому я собираюсь удалить метаинформацию и категории. Вы делаете это, помещая следующий код в functions.php :

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

Настройка дизайна

Добавить элементы дизайна на ваш сайт очень просто. Если вы хотите, чтобы что-то отображалось только на определенной странице, вы создадите свою собственную функцию. Я добавил изображение обложки на домашнюю страницу детской темы. Я создал следующую функцию:

 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 } 

Код выше выглядит устрашающе, пока вы не сломаете его. Во-первых, вы добавляете действие, как в любом другом файле functions.php . Затем вы указываете, что после разметки заголовка вы хотите создать функцию, которая добавляет изображение обложки на домашнюю страницу.

Затем вы рассказываете Бинам, что это за функция. Вы укажете, что это относится только к домашней странице. Это в основном проверяет, является ли текущая страница домашней страницей, и если да, то хотите ли вы добавить адаптивное изображение обложки.

Элементы div с применяемыми к ним классами uk относятся к интеграции UIkit, которую вы можете найти в разделе документации или на веб-сайте UIkit.

Как только вы обновите страницу, на скриншоте ниже вы увидите, что изображение обложки было размещено на главной странице сразу после разметки заголовка. Это помещает это перед содержанием публикации и боковой панелью. Вы создадите функцию, подобную приведенной выше, для каждого раздела любой пользовательской страницы, которую вы создаете.

Чрезмерные настройки

Одна вещь, которую вы хотите сделать, это принять к сведению создание большого количества настроек для каждой страницы. Если вы понимаете, что добавляете много настроек, таких как пользовательский макет, добавленные функции и т. Д., Вам лучше будет создать шаблон страницы. Вы создаете шаблон страницы, как обычно, используя именованный тег шаблона, но вам также необходимо добавить специальный код 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(); 

Обратите внимание на интеграцию разметки UIkit. Именно так вы строите структуру своего сайта. Делать это так, как я показываю выше, нормально для ограниченного числа случаев, но если вы загружаете большие объемы контента, такие как массив постов, вы захотите использовать хуки, которые Бин предоставляет в своей документации.

Хуки Beans позволяют вам связываться со структурой WordPress, где бы вы ни указывали. Например, пример кода:

 do_action ( 'beans_after_posts_loop' ) 

инициирует вашу команду после списков сообщений, которые отображаются. То, что вы могли бы здесь разместить, было бы нумерацией страниц. Если вы хотите добавить панировочные сухари, вы можете использовать:

 do_action ( 'beans_before_posts_loop' ) 

Вывод

Вам может потребоваться короткое время, чтобы ознакомиться с платформой Beans, но как только вы это сделаете, вы сможете создать сайт с индивидуальными настройками за долю времени, которую вы обычно делаете. Вы можете разрабатывать собственные макеты для каждой страницы, сохраняя при этом легкость всего сайта.

По сравнению с платформой Genesis вы можете делать с Beans все, что вы можете делать с Genesis, но у вас гораздо больше возможностей для структуры, дизайна и настройки без необходимости разбираться с существующим кодом или другими плагинами.

Заинтересованы? Отправляйся сюда, чтобы начать работу с Бобами сегодня.