В данном уроке мы сделаем пользовательскую модульную сетку на CSS и интегрируем ее в WordPress с помощью коротких кодов. Так как количество мобильных устройств растет с каждым днем, то модульная сетка будет автоматически адаптироваться под разные размеры экрана.
Шаг 1: Строим сетку CSS
Прежде, чем начать создадим папку css и в ней файл grid.css. Затем размещаем в нем код CSS:
/* ---------------------------------------------------------------------- */
/* Пользовательская сетка
/* ---------------------------------------------------------------------- */
.container {
margin:0 auto;
width:940px;
position:relative;
}
.container .one-half,
.container .one-third,
.container .one-fourth,
.container .two-thirds,
.container .three-fourths {
float:left;
margin-right:20px;
}
.container .one-half.last,
.container .one-third.last,
.container .one-fourth.last,
.container .two-thirds.last,
.container .three-fourths.last {
margin-right:0;
}
.container .one-half { width:460px; }
.container .one-third { width:300px; }
.container .one-fourth { width:220px; }
.container .two-thirds { width:620px; }
.container .three-fourths { width:700px; }
/* ------------------------------------------- */
/* Адаптивная сетка
/* 1. Планшет
/* 2. Мобильный телефон - портрет
/* 3. Мобильный телефон - ландшафт
/* ------------------------------------------- */
@media only screen and (min-width: 768px) and (max-width: 959px) {
.container { width:748px; }
.container .one-half { width:364px; }
.container .one-third { width:236px; }
.container .one-fourth { width:172px; }
.container .two-thirds { width:492px; }
.container .three-fourths { width:508px; }
}
@media only screen and (max-width: 767px) {
.container { width:300px; }
.container .one-half,
.container .one-third,
.container .one-fourth,
.container .two-thirds,
.container .three-fourths { width:300px; margin-right:0; }
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
.container { width:420px; }
.container .one-half,
.container .one-third,
.container .one-fourth,
.container .two-thirds,
.container .three-fourths { width:420px; margin-right:0; }
}
Шаг 2: Регистрируем наш CSS код в WordPress
Прежде, чем погрузиться в создание коротких кодов нужно зарегистрировать наш созданный файл CSS. Будем использовать wp_register_style и wp_enqueue_style. Код для регистрации нужно размещать в файле functions.php или в том, который встраивается в систему через functions.php. Все действия выполняются с помощью функции add_action.
wp_register_style
wp_enqueue_style
add_action
if ( !function_exists('register_css') ) {
function register_css() {
wp_register_style('custom-grid', get_template_directory_uri() . '/css/grid.css');
wp_enqueue_style('custom-grid');
}
add_action('wp_enqueue_scripts', 'register_css');
}
Шаг 3: Начинаем создавать короткие коды
Создаем новый файл shortcodes.php для отделения наших функций от остального кода. Также потребуется ссылка на наш файл из functions.php.
// включаем короткие коды
include 'shortcodes.php';
Шаг 4: Короткий код. Способ 1
Shortcode API отличная библиотека. Она предоставляет бесконечные возможности.
Так как мы делаем сетку, то в ней будут колонки. Но последняя колонка должна иметь специальное обозначение. Например, если основная область занимает две третьих, а боковая панель справа - одну треть, то боковая панель будет последней колонкой и должна иметь класс last.
Теперь создаем короткий код. Начнем с основы - колонки в одну вторую. Создаем функцию с названием короткого кода. Она будет получать два аргумента $atts и $content. Нужно вернуть элемент div с классом, обозначающим одну вторую ширины, и переданным содержанием. А затем нужно разрешить исопльзование короткого кода в теме WordPress. Данная задача решается с помощью функции add_shortcode. Данная функция принимает два параметра: имя доступа к короткому коду и функцию. Мы применяем ‘one_half‘ для имени доступа, поэтому в теме в тексте записей можно будет использовать [one_half].
function one_half( $atts, $content = null ) {
return '<div class="one-half">' . do_shortcode( $content ) . '</div>';
}
add_shortcode('one_half', 'one_half');
Теперь определим код для последней колонки. Просто создадим еще один короткий код, но вместо [one_half] будем использовать [one_half_last] с изменением имени класса <div class="one-half"> на <div class="one-half last">.
function one_half_last( $atts, $content = null ) {
return '<div class="one-half last">' . do_shortcode( $content ) . '</div>';
}
add_shortcode('one_half_last', 'one_half_last');
Шаг 7: Короткий код. Способ 2
Если вам не нравится создавать короткие коды отдельно для каждой колонки – один для обычной, а второй для последней, то можно предавать атрибут в функцию, например, [one_half last="yes"].
Основная часть функции будет выглядеть также. Нужно сначала извлечь shortcode_atts. Затем произвести проверку на атрибут ‘last‘ с помощью выражения if. В зависимости от результатов проверки изменяется значение переменной $position, которое добавляется к классу элемента. Теперь для короткого кода [one_half] можно использовать атрибут ‘last‘ для добавления специального класса – [one_half last="yes"].
function one_half( $atts, $content = null ) {
extract( shortcode_atts( array(
'last' => ''
), $atts ) );
if ( $last == 'yes') {
$position = 'last';
}
else {
$position = '';
}
return '<div class="one-half ' . $position . '">' . do_shortcode( $content ) . '</div>';
}
add_shortcode('one_half', 'one_half');