Сегодня мы возьмем базовую пользовательскую сетку, созданную с помощью CSS, и интегрируем ее в WordPress с помощью шорткодов. Я предполагаю, что все вы, читатели, обладаете базовым пониманием CSS, поэтому я не буду рассказывать об этом здесь, я также предполагаю, что у вас уже есть настройка темы WordPress, и мы просто добавим кусочки. Достаточно сказано, давайте получим застрял в!
Шаг 1: Наша CSS Сетка
Прежде чем мы начнем, мы продолжим и создадим папку css, а затем файл внутри с именем grid.css . Из-за большого количества мобильных устройств и планшетов в наши дни мы продолжим и добавим отзывчивую часть для нашей сетки. Я пошел дальше и прокомментировал это, чтобы сделать его менее запутанным для тех, кто еще не знаком с этим.
|
1
|
/* ———————————————————————- */ /* Custom Grid /* ———————————————————————- */ .container { margin:0 auto;
|
Шаг 2: Регистрация нашего CSS в WordPress
Прежде чем мы начнем создавать шорткоды, нам нужно зарегистрировать CSS-файл, который мы только что создали. Мы сделаем это с помощью wp_register_style и wp_enqueue_style . Обязательно поместите это в файл functions.php или в другой файл, который связан с файлом functions.php . Я также пошел вперед и обернул это в функцию, но это не обязательно. После того, как мы позвонили и зарегистрировали наш CSS-файл, нам нужно подключить его с помощью функции add_action .
|
01
02
03
04
05
06
07
08
09
10
11
|
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 .
|
1
2
|
// Include shortcodes
include ‘shortcodes.php’;
|
Шаг 4: API Shortcode
Shortcode API великолепен, он позволяет пользователям создавать бесконечные вещи с его помощью. Вы можете передавать атрибуты и значения через него. Если вы хотите узнать больше об API шорткода, посетите страницу API шорткода в WordPress Codex . Чтобы увидеть, что шорткоды могут сделать, мы покажем два пути для этого.
Шаг 5: Шорткод Маршрут 1
Поскольку это сетка, у нее будут столбцы (очевидно), но когда она дойдет до последнего столбца, нам нужно определить, что это последний столбец из-за того, как была настроена пользовательская сетка. Например, если у нас есть основная область в две трети и боковая панель в одну треть. Боковую панель нужно определить как последнюю в строке, поэтому мы добавим к ней класс last .
Теперь мы начнем создавать наш шорткод, начнем с основного шорткода из половины столбцов. Мы начнем с создания функции с именем шорткода. Затем мы передадим два аргумента $atts и $content . Работа с шорткодами очень проста: если вы создаете такой шорткод, все что нам нужно, это вернуть что-то. Все, что мы вернем, это div с классом половина вместе с содержимым внутри него. Последнее, что нужно сделать, это включить шорткод для использования в ваших темах WordPress. Это делается с помощью функции add_shortcode . Эта функция принимает два параметра: имя, используемое для доступа к шорткоду, и имя функции шорткода. Мы использовали « one_half » в качестве имени для доступа к шорткоду, поэтому мы можем использовать его в редакторе, набрав [one_half] .
|
1
2
3
4
5
6
7
|
function one_half( $atts, $content = null ) {
return ‘<div class=»one-half»>’ .
}
add_shortcode(‘one_half’, ‘one_half’);
|
Теперь, если мы оглянемся назад, мы говорили об определении последнего столбца. Для этого маршрута мы просто [one_half] другой шорткод, но вместо [one_half] мы будем использовать [one_half_last] при изменении имени класса с <div class="one-half"> на <div class="one-half last"> .
|
1
2
3
4
5
6
7
|
function one_half_last( $atts, $content = null ) {
return ‘<div class=»one-half last»>’ .
}
add_shortcode(‘one_half_last’, ‘one_half_last’);
|
Шаг 6: Шорткод Маршрут 2
Хорошо, если вы предпочитаете не создавать два шорткода для каждого столбца — один для обычного и один для последнего столбца, есть альтернатива. Вместо создания двух мы могли бы передать атрибут через наш шорткод, например [one_half last="yes"] . Если атрибут не передан, он не будет использоваться как « last » столбец.
Большинство из них будут выглядеть похожими, за исключением некоторых новых вещей. Сначала нам нужно извлечь shortcode_atts (атрибуты). Далее, поскольку мы определили « last » как атрибут, нам нужно использовать оператор if чтобы проверить, является ли это последний столбец. Мы сделаем это, проверив, if $last равно yes, $position равно последнему. Если нет, $position равно нулю. Затем мы можем вернуть то же самое, но добавив переменную $position для опции последнего столбца. Теперь мы можем получить доступ к этому шорткоду с помощью [one_half] но с добавлением атрибута ‘ last ‘ и значением yes — [one_half last="yes"] .
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
|
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 . ‘»>’ .
}
add_shortcode(‘one_half’, ‘one_half’);
|
Вывод
Ну, ребята, это был мой первый урок здесь, на Wptuts +, я надеюсь, вы узнали что-то сегодня Не стесняйтесь использовать сетку CSS или шорткоды в своих проектах! До следующего раза, дайте мне знать ваши мысли в комментариях!