«
»
CodePenJavaScriptjQueryWEBWordPressWordPress - jQuery

jQuery – Как сделать одинаковую высоту всех блоков по самому высокому из них

Согласитесь когда высота блоков одинаковых по сути элементов на веб странице идет в разнобой – это не есть хорошо. В начале разработки я “кошмарился” с данными блоками при помощи @mediaquery в CSS стилях и убивал огромное количество времени что бы все это дело привести к более мение качественному виду. Но появился отличный плагин jQuery который приобразует высоту всех указанных элементов в зависимости от самого высокого из них.

Пример работы на CodePen

!@<iframe height=”265″ style=”width: 100%;” scrolling=”no” title=”TechBlogSD – Делаем одинаковую высоту всех блоков по самому высокому из них” src=”https://codepen.io/dydaevskiy/embed/pqzPbL?height=265&theme-id=light&default-tab=html,result” frameborder=”no” allowtransparency=”true” allowfullscreen=”true”>
See the Pen <a href=’https://codepen.io/dydaevskiy/pen/pqzPbL’>TechBlogSD – Делаем одинаковую высоту всех блоков по самому высокому из них</a> by sergey
(<a href=’https://codepen.io/dydaevskiy’>@dydaevskiy</a>) on <a href=’https://codepen.io’>CodePen</a>.
</iframe>!@

WordPress подключение

В начале Вам нужно загрузить архив ниже:

Загрузить для WordPress

<a href="https://techblog.sdstudio.top/wp-content/uploads/2018/12/matchheight.zip">matchHeight</a>

Подключение скрипта jquery.matchHeight-min.js

Далее распаковываем его и располагаем в корне темы сайта. За тем идем в function.php и в нужном месте (у каждого оно свое, смотрите на код аналогичный представленному мной ниже).

wp_enqueue_script( 'matchHeight', '/matchHeight/jquery.matchHeight-min.js' , array( 'jquery' ), null, true);

Добавление элементов для работы jquery.matchHeight-min.js

И так мы подключили скрипт для автоматической высоты элементов страницы по самому высокому из них. Теперь давайте укажем к каким именно блокам мы должны его применить. Для этого откройте недавно скопированный файл (из моего архива) и добавьте в его конец классы своих блоков.

// ---------------------------------------------------- jQuery(document).ready(function ($) { $(function() { /*Здесь указываем классы тех блоков высоту которых хотим обработать*/ $('.SDStudio-ID_MaxHeight, .SDStudio-ID_MaxHeight2').matchHeight(); }); }); // ----------------------------------------------------

Полезные ссылки

Страница плагина https://github.com/liabru/jquery-match-height

Связанные записи
ElementorWordPressПлагиныПолезные сайты

Elementor - 10 потрясающих мест для поиска бесплатных или премиальных шаблонов

Chrome DevToolsGoogleGoogle ChromeWEB

Запускайте фрагменты JavaScript на любой странице с помощью Chrome DevTools

MailChimpWordPressПлагины

5 лучших плагинов WordPress для Mailchimp (большинство из них бесплатны)

WoocommerceWordPressПлагины

Дропшиппинг: Как импортировать продукты AliExpress в WooCommerce при помощи плагина DropshipMe