BH.php в Wordpress

@zxqfox "Показать, как можно использовать" лучше прямо сюда писать, или как то отдельно оформить?

9 years ago

tadatuta

@kompolom Можно в этом треде собрать максимум информации, а мы потом ее причешем и опубликуем на bem.info

9 years ago

BH.php в Wordpress

Сразу скажу, что изначально сайт был сделан без БЭМ. В настоящий момент, я переношу Wordpress шаблоны на БЭМ. Получается, что часть кода написана на html, а часть генерируется BH.

структкра темы:

mytheme/
 |-- bh-php/ -- Клон репозитория bh.php
 |-- bem/    -- Клон рерозитория project-stub
 |-- index.php
 |-- functions.php
 |-- style.css
 ...

Директория bem содержит библиотеки (bem-core, bem-components), и следующие уровни переопределения:

common.blocks - общие блоки для проекта
admin.blocks - Блоки админки
desktop.blocks - Блоки публичной части сайта.
desktop.bundles - Собраные бандлы фронтенда
admin.bundles - Собраные бандлы админки

Каждый бандл, в моем случае, представляет тип страницы. Например, есть бандлы index и single. Тут, в общем, все стандартно для методологии:

single/
|-- _single.css
|-- _single.js
|-- single.bh.php
...

Интеграция в wordpress

Файл functions.php

require_once 'bh-php/index.php'; //Подключаем BH.php
...
/* статику можно вынести на отдельный сервер */
define('USE_STATIC_SERVER', get_option('static-use')); 
define('STATIC_SERVER', get_option('static-server'));

Выбираем уровень переопределения.

Тут все зависит от потребностей проекта, условие можно написать любое.

define('PLATFORM', is_admin()?'admin':'desktop');

Задаем url для бандлов. Так как статика может лежать на другом сервере, добавим условие.

define('BUNDLES_URL',USE_STATIC_SERVER? 
  STATIC_SERVER."/bem/".PLATFORM.".bundles/" : 
  get_bloginfo('template_url')."/bem/".PLATFORM.".bundles/");

Задаем путь до бандлов на сервере. Отличается от url тем, что предназначен для php include.

define('BUNDLES_PATH', TEMPLATEPATH."/bem/".PLATFORM.".bundles/");

Выбираем бандл.

if(is_admin()){ //Если мы в админке
  $bundle = 'admin'; // Подключится бандл admin по умолчанию

  // Далее, можно выбрать другой бандл, если необходимо.
  if(strpos( $_SERVER[ 'REQUEST_URI' ], 'page=manage-bulletins')){
    $bundle = 'manage-bulletins';
  }

  init_bundle($bundle); // Вызываем функцию которая подключит наш bh шаблон
  add_action('admin_enqueue_scripts','register_bundle_static'); // Также подключим статику
}else{
  // Если это фронтенд часть, то на данный момнет не ясно на какой мы странице. Отложим выбор
  add_action('posts_selection','setup_bundle');
}

/**
* Выбор бандла для фронтенда сайта
*/
function setup_bundle(){
  $bundle = 'index'; //Бандл по умолчанию

  //Можно добавить любые условия
  if(is_single()){
    $bundle = 'single';
  } 

  init_bundle($bundle); // подключим bh шаблон
}

Подключаем bh шаблон и статику:

/**
 * Подключает BH.php шаблон
 * @param  string $bundle название бандла
 */
function init_bundle($bundle){
  include(BUNDLES_PATH.$bundle.DIRECTORY_SEPARATOR.$bundle.".bh.php"); 
  $GLOBALS['BH'] = $bh; //Создаем глобальную переменную BH - Готовый к использованию шаблонизатор с загружеными шаблонами.
  $GLOBALS['BUNDLE'] = $bundle; // Просто хранит название бандла. Используется позднее при добавлении статики.
}

Напомню, что проект в переходном состоянии, layout страницы пока еще на html. Подключение js и css реализовано стандартными средствами Wordpress. За это отвечает следующая функция:

add_action('wp_enqueue_scripts','register_bundle_static');
function register_bundle_static(){
  global $BUNDLE;
  wp_register_script($BUNDLE."-js", BUNDLES_URL.$BUNDLE.'/_'.$BUNDLE.'.js');
  wp_register_style($BUNDLE."-css", BUNDLES_URL.$BUNDLE.'/_'.$BUNDLE.'.css');
  wp_enqueue_script($BUNDLE.'-js',TRUE);
  wp_enqueue_style($BUNDLE.'-css');
}

Пользуемся

Теперь, когда шаблоны загружены а скрипты и стили подключены на страницу, можно пользоваться шаблонизатором. Разметку блока можно сделать, как в шаблоне Wordpress (написать bemjson-like структуру) так и в bh.php шаблоне. Например, loop.php не задает структуру поста, а отправляет ее шаблонизатору:

<?php global $BH; // получи наш BH.php

if (have_posts()):
  while (have_posts()):the_post();  

$preview = null;
$previewUrl = null;

if(has_post_thumbnail()){
    $image_id = get_post_thumbnail_id();
    $previewUrl = wp_get_attachment_image_src($image_id,'full')[0];
    $preview = wp_get_attachment_image_src($image_id)[0];
}

//Применение шаблонов и вывод блока. 

echo $BH->apply([
  [
    'block'=>'post',
    'id'=>get_the_ID(),
    'name'=>get_the_title(),
    'description'=>get_the_content(),
    'preview'=> $preview,
    'previewUrl'=>$previewUrl,
  ]
]);

//

 endwhile;
if(function_exists('wp_pagenavi')){wp_pagenavi();}
endif;

Что самое приятное, наличие шаблонизатора на заставляет его использовать на каждый чих, что позволяет писать новый код используя BH, и не торопясь переписывать старый.

9 years ago

tadatuta

@kompolom Спасибо большое за рассказ! Будет очень круто, если в open source появится готовая тема для WP с bem-components ;)

9 years ago

Идея интересная. Попробуем

9 years ago

@kompolom Рассказ прям за душу берет. Молодость вспоминается ;-) У меня сейчас подход такой же, только вместо вордпресса внутренний велосипед. Нет, правда, глобальных переменных, но в остальном все то же ;-) И мы все думаем как лучше формировать bemjson перед apply.

Спасибо за рассказ :+1:

9 years ago

Для wp, глобальные переменные - норма, мне кажется. ))

9 years ago

https://github.com/bem/bem-core/issues/732 — решили, что нужно отдельные репозитории делать с шаблонами для bh.php и там рулить сборкой.

По факту, нужно скопировать всю сборку, взять оба PR, вырезать оттуда bh, bemhtml, оставить только bh.php, и настроить всякие тревисы.

/cc @andrewblond Подскажи, как это лучше сделать, чтобы не париться с синхронизацией сборок?

9 years ago

blond

Подскажи, как это лучше сделать, чтобы не париться с синхронизацией сборок?

Сложный вопрос. Мы сейчас между bem-core и bem-components руками синхронизируем.

9 years ago

@andrewblond Заодно и между ними синхронизируем ;-)

9 years ago

А как у него с производительностью? Или лучше всё ручками писать при создании шаблонов?

9 years ago

@belozyorcev Можно стянуть PR с bem-components и запустить tmpl-specs с выводом времени работы mocha. Тупо сравнить с js реализациями ;) Разница там, насколько я помню, не очень большая.

9 years ago

@zxqfox задача стоит в использовании на Yii в сравнении со стандартным шаблонизатором.

9 years ago

@belozyorcev Бенчмарки были бы весьма кстати, оптимизировать код готов, там есть куда, но сравнивать не с чем.

9 years ago

tavriaforever

Тут вот на хабре пользователь lepism добавил свою статью http://habrahabr.ru/post/249629/ про то, как он учил php и писал свой велосипед для работы с БЭМ, может кому интересно будет

9 years ago

voischev

@tavriaforever ох… напомнило мне это наш велосипед на PHP. Все бы не плохо, но когда контроллеры начали напоминать BEMJSON стало понятно что мы не туда движемся :) Такому конечно есть место быть

9 years ago

@tavriaforever смущают следующее название элементов https://github.com/lepism/BemPHP/tree/master/BemPHP/blocks/b-logger/b-logger__button/b-logger__button__arrow_up

9 years ago

@belozyorcev А вы что используете в Yii? Twig?

9 years ago

@zxqfox нет. Пока только нативный шаблонизатор. Была мысль подобрать что-то другое (и время от времени появляется), но пока так.

9 years ago

@belozyorcev Тогда вам не нужны бенчмарки — PHP код в любом случае будет быстрее, чем любые шаблонизаторы.

9 years ago

@zxqfox это да. Сам сейчас с блоками пока работаю хелпером, для генерации классов. Остальное ручками. Классы генерирую BEM::cls('block', array('mod1', 'mod2', 'mod3')) на выходе получаю "blok block_mod1 block_mod2 block_mod3"

9 years ago

@belozyorcev Массивы можно проще:

BEM::cls('block', ['mod1', 'mod2', 'mod3', 'valuedMod' => 'value'])

Еще можно не class, а namespace и делать так:

<?php
use function \bem\cls;

// ...
cls('block', [/* ... */]);

Но это с 5.6+

9 years ago

@zxqfox это PHP 5.2 нужно сказать

9 years ago

@belozyorcev bh-php 5.4+ требует ;-)

9 years ago

@zxqfox это да. Нужно будет начальство на 5.4 наставить, т.к. пора бы уже

9 years ago

@belozyorcev Да уж года 3 как ;-) http://php.net/ChangeLog-5.php#5.2.17

9 years ago

frimen

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

9 years ago

@frimen Давайте по порядку, что вы делаете, и что не получается.

9 years ago