Адаптивные iframe в WordPress

Наверняка многие замечали, что на сайтах с адаптивной версткой при изменении ширины браузера картинки меняют свою высоту пропорционально ширине, а Ютуб-плеер нет.

Continue reading

Развитие плагина wp-forms

Плагин WP Forms получил развитие в моем форке. Я добавил несколько новых типов элементов — теперь можно вставить какой-нибудь кусок ХТМЛ-кода прямо в любое место формочки. Правда реализация, частично костыльная, т. к. некоторые атрибуты надо выключать и получилось что-то вроде:

$attributes = $element->get_all_attributes();
// Because this is just a tag (div, span) we don't need this attrs in tag.
unset($attributes['name'], $attributes['tag_name'], $attributes['type'], $attributes['value']);

Добро пожаловать в реальную разработку, где времени что-то переписывать или создавать еще миллион дополнительных классов нет, а нечто нужно заставить работать.

Добавилась поддержка AJAX-запросов. Теперь можно проверять формочку и обновлять ее состояние через Java$cript. На входе принимается обычный $.ajax(), а на выходе приходит объект, описывающий формочку и «пройдясь» по нему можно синхронизировать атрибуты и содержимое всех элементов внутри формы (удалить или добавить классы, расставить дополнительные атрибуты, вывести сообщения об ошибках, показать или скрыть некоторые блоки и т. п.).

Поскольку фантазию при верстке не ограничить и некоторые ХТМЛ-элементы нужно помещать в какую-то обертку пришлось добавить еще один тип элементов — Wrapper, который позволяет хранить в себе дочерние инпуты и кнопочки. Теперь верстальщики использующие Bootstrap и прочее будут довольны (ну, и я тоже).

->add_element(
	WP_Form_Element::create( 'wrapper' )
	->set_name('input_group_contacts')
	->add_class( 'input-group' )
	->set_attribute( 'tag_name', 'span' )
	->set_view( new WP_Form_View_Wrapper() )
	->add_decorator(
		'WP_Form_Decorator_Errors',
		array(
			'position' =>  1,
			'attributes' => array(
				'class' => 'list-unstyled help-block'
			)
		)
	)
	// Добавляем дочерний элемент
	->add_element()
	// ...

Формочки в WordPress

Любимый WordPress перестает быть таковым, как только ты сталкиваешься с задачами, связанными с постройкой форм. В WordPress для работы с ними нет ничего, вообще. Ну, разве что AJAX-экшены можно добавлять и на том спасибо. А пока ищу библиотеку (компонент) с помощью которого можно будет строить формочки. Нашлось всего два:

  1. imavex.com/pfbc3.x-php5
  2. github.com/symfony/Form

Почувствуйте разницу — всяких JS-свистелок для анимашек и дерганий чего угодно на страницах сотни и, вероятно, даже тысячи, а библиотек для обработки форм всего две. Ожидаемая статистика. Так что вместо ругания PHP-программистов, поругайте лучше JS-программистов, лень у которых развита, наверное, больше, чем у всех остальных — привет переменным, названными одной буквой 🙂

Пока даже не знаю можно ли это будет привинтить к WordPress, но компонент от Симфонии — нечто.

P. S. Подумываю о посте с заголовком «Монополия говнокода». Агрессивное название 🙂

Mixins в Less

Писать просто CSS уже давно неправильно и себя не любить. Я всегда работал с Less, который очень даже хороший, а Sass как-то обхожу стороной. Да и в принципе возможностей первого хватает за глаза, а все остальные “преимущества” иллюзорны. Погоня за идеальным кодом и каким-то супер-мега объектными и архитектурными языками программирования и прочими свистелками напоминает художников, которые могут рисовать картину годами. Я думаю, это плохо, потому что везде, где встречаются какие-то ультра течения — плохо. Всем нелюбителям PHP и Less предлагаю навести порядок на своем столе, в своей комнате, у своего подъезда… — это будет полезнее, чем написать очередной “красивый” код. Less — решает задачи и это клево.

А вообще пост был про mixins в Less, которые могут быть не такими уж и очевидными с первого взгляда. Например, прекрасная вещь из Bootstrap, которая делает сетку.

Less Mixin

С первого взгляда я прямо так и не сообразил, что к чему, но за минут 10 разобрался 🙂 Пишу свои mixin-ы для создания сетки на основе Flexbox, которого почему-то до сих пор нету в Bootstrap.

Один большой минус float-сетки — это невозможность без грязных хаков сделать все блоки одинаковой высоты с совершенно разным содержимым. Они начинают непредсказуемо скакать по странице (если у вас более 1 строчки float-блоков).