Главная Часть 1. Создание блога Глава 8. Техническая часть Урок 176. Добавляем собственный шорткод в WordPress

Урок 176. Добавляем собственный шорткод в WordPress

шорткоды в wordpress

Привет!

Столько уроков уже написал, а про шорткоды, даже не упомянул ни разу. Около месяца назад сразу трое читателей интересовались, сложно ли самому добавить шорткод в wordpress? Я обещал написать эту статью. Добавить очень легко! Сегодня мы с вами в этом убедимся!

Что такое шорткод и зачем он нужен?

Шорткод - это слово, заключенное в квадратные скобки, на месте которого при открытии страницы появляется какой-то код.

Понимаю, что звучит сложно, сейчас объясню на примере. Вероятно Вы не раз видели конструкцию типа:

Это и есть шорткод.

После того, как мы создадим шорткод, и опять же вставим [example], то на его месте появится какой-то код, который мы сами зададим. Обычно это используется для стилизации текста. Например, чтобы сделать текст жирным, размером 30 пикселей и голубого цвета, нам необходимо добавить html строку, которая придаст класс для данного текста. (Ну или сразу в стилях прописать).

Согласитесь, строка вышла длинная, и не очень удобно будет ее повторять раз за разом, когда нам понадобится выделить еще какие-то строки. Для этого и придумали шорткод. Сейчас мы узнаем, как придать тексту тот же самый стиль, только уже без этой html строки, а простой записью:

Как создать шорткод в WordPress?

Открываем файл functions.php, как Вы помните, в нем содержатся все функции, работающие на сайте. Ставим курсор в самый конец файла, но перед "?>". Иначе код не будет работать. Если этого тега (<?) нет, тогда просто в самый конец файла поставьте курсор.

Теперь нам надо написать функцию, которая будет выполняться при обращении к шорткоду. То есть, когда мы напишем [example], сразу же выполнится функция. И сейчас нам нужно определить, что эта функция вернет. В нашем случае html строку, которую я приводил выше.

Как видно из написанного, при выполнении функции, она вернет html строку с нужными стилями, и между тегами <p> будет располагаться тот текст, который мы добавим между шорткодами.

Теперь нам нужно зарегистрировать наш шорткод в системе WordPress.

Как зарегистрировать шорткод в WordPress?

Для этого существует простая функция: add_shortcode. Принимает она следующие параметры: add_shortcode('название_шорткода', 'название_функции');

Добавим в наш файл функций следующий код:

Теперь можно проверить работу. Давайте откроем записи, или страницы в админке, создадим новую, и напишем вот такой текст:

Вот так я добавил текст в новую запись:

шорткод wordpress

И вот как это выглядит при просмотре записи:

шорткод в wordpress

Как видите, все отлично работает!

Атрибуты в шорткодах WordPress

Мы можем также добавлять любые атрибуты нашему шорткоду. Ну например, мы хотим, чтобы строка стилизовалась именно так, как стилизуется, но вот в каких-то случаях размер шрифта нам нужен будет 20 пикселей, в других случаях 25 пикселей. Как быть?

Для этого нам на помощь приходят атрибуты. Мы можем прописать что-то вроде:

Тогда размер шрифта будет 24 пикселя. Давайте допишем такую возможность нашей функции.

В шорткод я буду добавлять параметр size, в котором будет содержаться число, которое и будет равно размеру шрифта. По умолчанию, как видно из кода, размер шрифта будет равен 30 пикселям. То есть, если мы не укажем атрибута size, тогда размер будет 30. Указывать его не обязательно.

Давайте же выведем тот же самый текст, только указав вот такую запись:

Как видно, теперь наш текст стал размером 15 пикселей. Размер можно указывать абсолютно любой, хоть больше, хоть меньше. Напомню, если его не указать, будет стандартно 30 пикселей.

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

На этом у меня все, до встречи в следующих уроках!

Полезные статьи Вам на почту!

Нас более 700 человек!

Комментарии

Случайно нашел блог, дизайн шикарный и код здорово подсвечивается, и шрифты... Даже писать комментарий приятно, потому что шрифт классный. Дизайнер и верстальщик выполнили свою работу на 5+)

13.06.2016
0

Благодарю Вас за оценку) Рад, что Вам все нравится)

17.06.2016
Дима
0

Спасибо за статью очень помогла, а то в интернете одна и та же статья в перепечатанном виде. Сразу разобрался. И да автору + за красивый сайт.

18.08.2016
0

Благодарю 🙂

18.08.2016
0

Добрый день.Подскажите, как выводить произвольные записи с аттрибутами?

12.09.2016
0

Добрый вечер! Прошу прощения за долгий ответ. В двух словах не объяснишь, а подходящей статьи пока нет. Поэтому постараюсь в ближайшее время написать и опубликовать.

02.10.2016
Ян
0

Ок. Будем ждать.

03.10.2016

Оставить комментарий

Поделиться