Адаптивные 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()
	// ...

Mixins в Less

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

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

Less Mixin

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

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

Настройка модуля Похожие записи из Jetpack

Jetpack. Похожие записи

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

Continue reading

Хитрый CSS-селектор

Дорабатываю стили внутри темы для модуля Related Posts из Jetpack и в силу того, что на исходный код влиять местами нельзя, приходится писать вот такие CSS-селекторы.

.jp-relatedposts-post-aoverlay:hover + .jp-relatedposts-post-title + .jp-relatedposts-post-excerpt

Умение верстать и знание некоторых тонкостей помогает практически всегда обходиться без использования JS. А в оставшемся 1 % случаев лучше отказаться от идеи, чем писать JS-код, который будет выставлять стили.