WP сделать адаптивной стандартную галерею

Суть проста: wordpress знает, кто такой bootstrap, но по старинке ширину фото высчитывает в %, соответственно, на узком экране они наползают друг на друга.

Идём в файл wp-includes/media.php

Там есть генерация стиля каждой конкретной галереи в зависимости от числа столбиков. Мой способ работает до 5-6 столбиков. Например, мне надо, чтобы галерея из 4 столбиков на планшете превращалась в 2 столбиковую, а на узкой мобилке в одно.

Ищем строки в файле, где формируется стиль для gallery-item, который является блоком для картинки.

#{$selector} .gallery-item {
float: {$float};
margin-top: 10px;
text-align: center;
width: {$itemwidth}%;
}

width высчитывается в зависимости от столибиков. Стираем, а лучше комментим:  /* width: {$itemwidth}%; */

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

$output .= «<{$itemtag} class=’gallery-item’>»;

И добавляем бутстраповские фишки:

$output .= «<{$itemtag} class=’gallery-item col-xs-12 col-sm-6 col-md-4 col-lg-3′>»;

Всё. Тут каждый может по своему баловаться.

Бутстрап подключается подгрузкой стилей и скрипта (но тут скрипты не нужны). Поэтому, если разрабатываете или модифицируете тему WP, в которой он вам нужен, подключайте кошерно — через function.php

function add_theme_scripts() {
wp_enqueue_style(‘bootstrap-css’, get_template_directory_uri() . ‘/css/bootstrap.css’, array(), », ‘all’);
wp_enqueue_script(‘bootstrap-js’, get_template_directory_uri() . ‘/js/bootstrap.min.js’);
}
add_action( ‘wp_enqueue_scripts’, ‘add_theme_scripts’ );

Leave a Reply

Вы можете войти через: 

Ваш e-mail не будет опубликован. Обязательные поля помечены *