Привет!
Столько уроков уже написал, а про шорткоды, даже не упомянул ни разу. Около месяца назад сразу трое читателей интересовались, сложно ли самому добавить шорткод в wordpress? Я обещал написать эту статью. Добавить очень легко! Сегодня мы с вами в этом убедимся!
Что такое шорткод и зачем он нужен?
Шорткод - это слово, заключенное в квадратные скобки, на месте которого при открытии страницы появляется какой-то код.
Понимаю, что звучит сложно, сейчас объясню на примере. Вероятно Вы не раз видели конструкцию типа:
Это и есть шорткод.
После того, как мы создадим шорткод, и опять же вставим [example], то на его месте появится какой-то код, который мы сами зададим. Обычно это используется для стилизации текста. Например, чтобы сделать текст жирным, размером 30 пикселей и голубого цвета, нам необходимо добавить html строку, которая придаст класс для данного текста. (Ну или сразу в стилях прописать).
<p style="color:#07c;font-size:30px;text-weight:bold">Здесь текст</p>
Согласитесь, строка вышла длинная, и не очень удобно будет ее повторять раз за разом, когда нам понадобится выделить еще какие-то строки. Для этого и придумали шорткод. Сейчас мы узнаем, как придать тексту тот же самый стиль, только уже без этой html строки, а простой записью:
[example]Здесь текст[/example]
Как создать шорткод в WordPress?
Открываем файл functions.php, как Вы помните, в нем содержатся все функции, работающие на сайте. Ставим курсор в самый конец файла, но перед "?>". Иначе код не будет работать. Если этого тега (<?) нет, тогда просто в самый конец файла поставьте курсор.
Теперь нам надо написать функцию, которая будет выполняться при обращении к шорткоду. То есть, когда мы напишем [example], сразу же выполнится функция. И сейчас нам нужно определить, что эта функция вернет. В нашем случае html строку, которую я приводил выше.
function my_example_shortcode($atts, $content='') {
return '<p style="color:#07c;font-size:30px;text-weight:bold">' . do_shortcode($content) . '</p>';
}
Как видно из написанного, при выполнении функции, она вернет html строку с нужными стилями, и между тегами <p> будет располагаться тот текст, который мы добавим между шорткодами.
Теперь нам нужно зарегистрировать наш шорткод в системе WordPress.
Как зарегистрировать шорткод в WordPress?
Для этого существует простая функция: add_shortcode. Принимает она следующие параметры: add_shortcode('название_шорткода', 'название_функции');
Добавим в наш файл функций следующий код:
add_shortcode('example', 'my_example_shortcode');
Теперь можно проверить работу. Давайте откроем записи, или страницы в админке, создадим новую, и напишем вот такой текст:
[example]Это мой стилизованный текст!!![/example]
Вот так я добавил текст в новую запись:
И вот как это выглядит при просмотре записи:
Как видите, все отлично работает!
Атрибуты в шорткодах WordPress
Мы можем также добавлять любые атрибуты нашему шорткоду. Ну например, мы хотим, чтобы строка стилизовалась именно так, как стилизуется, но вот в каких-то случаях размер шрифта нам нужен будет 20 пикселей, в других случаях 25 пикселей. Как быть?
Для этого нам на помощь приходят атрибуты. Мы можем прописать что-то вроде:
[example size="24"]Это мой стилизованный текст!!![/example]
Тогда размер шрифта будет 24 пикселя. Давайте допишем такую возможность нашей функции.
function my_example_shortcode($atts, $content='') {
extract(shortcode_atts(array(
"size" => '30'
), $atts));
return '<p style="color:#07c;font-size:'.$size.'px;text-weight:bold">' . do_shortcode($content) . '</p>';
}
add_shortcode('example', 'my_example_shortcode');
В шорткод я буду добавлять параметр size, в котором будет содержаться число, которое и будет равно размеру шрифта. По умолчанию, как видно из кода, размер шрифта будет равен 30 пикселям. То есть, если мы не укажем атрибута size, тогда размер будет 30. Указывать его не обязательно.
Давайте же выведем тот же самый текст, только указав вот такую запись:
[example size='15']Это мой стилизованный текст!!![/example]
Как видно, теперь наш текст стал размером 15 пикселей. Размер можно указывать абсолютно любой, хоть больше, хоть меньше. Напомню, если его не указать, будет стандартно 30 пикселей.
Вроде обо всем рассказал. Теперь Вы знаете как можно создать и зарегистрировать шорткод в WordPress. Конечно, на этом вся работа с шорткодами не заканчивается, многое еще можно сделать, но базу мы с вами разобрали.
На этом у меня все, до встречи в следующих уроках!