Добавляем короткий код для адаптивной модульной сетки в WordPress

29 Мая 2022г. в 04:33

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

sourse


Шаг 1: Строим сетку CSS
Прежде, чем начать создадим папку css и в ней файл grid.css. Затем размещаем в нем код CSS:

01
/* ---------------------------------------------------------------------- */
02
/* Пользовательская сетка
03
/* ---------------------------------------------------------------------- */
04

05
.container {
06
margin:0 auto;
07
width:940px;
08
position:relative;
09
}
10

11
.container .one-half,
12
.container .one-third,
13
.container .one-fourth,
14
.container .two-thirds,
15
.container .three-fourths {
16
float:left;
17
margin-right:20px;
18
}
19

20
.container .one-half.last,
21
.container .one-third.last,
22
.container .one-fourth.last,
23
.container .two-thirds.last,
24
.container .three-fourths.last {
25
margin-right:0;
26
}
27

28
.container .one-half { width:460px; }
29
.container .one-third { width:300px; }
30
.container .one-fourth { width:220px; }
31
.container .two-thirds { width:620px; }
32
.container .three-fourths { width:700px; }
33

34

35
/* ------------------------------------------- */
36
/* Адаптивная сетка
37
/* 1. Планшет
38
/* 2. Мобильный телефон - портрет
39
/* 3. Мобильный телефон - ландшафт
40
/* ------------------------------------------- */
41

42
@media only screen and (min-width: 768px) and (max-width: 959px) {
43
.container { width:748px; }
44
.container .one-half { width:364px; }
45
.container .one-third { width:236px; }
46
.container .one-fourth { width:172px; }
47
.container .two-thirds { width:492px; }
48
.container .three-fourths { width:508px; }
49
}
50

51
@media only screen and (max-width: 767px) {
52
.container { width:300px; }
53
.container .one-half,
54
.container .one-third,
55
.container .one-fourth,
56
.container .two-thirds,
57
.container .three-fourths { width:300px; margin-right:0; }
58
}
59

60
@media only screen and (min-width: 480px) and (max-width: 767px) {
61
.container { width:420px; }
62
.container .one-half,
63
.container .one-third,
64
.container .one-fourth,
65
.container .two-thirds,
66
.container .three-fourths { width:420px; margin-right:0; }
67
}


Шаг 2: Регистрируем наш CSS код в WordPress
Прежде, чем погрузиться в создание коротких кодов нужно зарегистрировать наш созданный файл CSS. Будем использовать wp_register_style и wp_enqueue_style. Код для регистрации нужно размещать в файле functions.php или в том, который встраивается в систему через functions.php. Все действия выполняются с помощью функции add_action.

wp_register_style
wp_enqueue_style
add_action
01
if ( !function_exists('register_css') ) {
02

03
function register_css() {
04

05
wp_register_style('custom-grid', get_template_directory_uri() . '/css/grid.css');
06
wp_enqueue_style('custom-grid');
07

08
}
09

10
add_action('wp_enqueue_scripts', 'register_css');
11
}
Шаг 3: Начинаем создавать короткие коды
Создаем новый файл shortcodes.php для отделения наших функций от остального кода. Также потребуется ссылка на наш файл из functions.php.

1
// включаем короткие коды
2
include 'shortcodes.php';


Шаг 4: Короткий код. Способ 1
Shortcode API отличная библиотека. Она предоставляет бесконечные возможности.

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

Теперь создаем короткий код. Начнем с основы - колонки в одну вторую. Создаем функцию с названием короткого кода. Она будет получать два аргумента $atts и $content. Нужно вернуть элемент div с классом, обозначающим одну вторую ширины, и переданным содержанием. А затем нужно разрешить исопльзование короткого кода в теме WordPress. Данная задача решается с помощью функции add_shortcode. Данная функция принимает два параметра: имя доступа к короткому коду и функцию. Мы применяем ‘one_half‘ для имени доступа, поэтому в теме в тексте записей можно будет использовать [one_half].

1
function one_half( $atts, $content = null ) {
2

3
return '<div class="one-half">' . do_shortcode( $content ) . '</div>';
4

5
}
6

7
add_shortcode('one_half', 'one_half');
Теперь определим код для последней колонки. Просто создадим еще один короткий код, но вместо [one_half] будем использовать [one_half_last] с изменением имени класса <div class="one-half"> на <div class="one-half last">.

1
function one_half_last( $atts, $content = null ) {
2

3
return '<div class="one-half last">' . do_shortcode( $content ) . '</div>';
4

5
}
6

7
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"].

01
function one_half( $atts, $content = null ) {
02

03
extract( shortcode_atts( array(
04
'last' => ''
05
), $atts ) );
06

07
if ( $last == 'yes') {
08
$position = 'last';
09
}
10
else {
11
$position = '';
12
}
13

14
return '<div class="one-half ' . $position . '">' . do_shortcode( $content ) . '</div>';
15

16
}
17

18
add_shortcode('one_half', 'one_half');