Практика по разработке полноценного шорткода — урок 31

Для примера разработки шорткода и закрепления пройденного материала на WordPress мы возьмем коллекцию эффектов для ссылок Creative Link Effects и разработаем под нее собственный шорткод в будущую премиум тему.

Работа коллекции стилей сводиться к тому, чтобы подключить стили и расставить классы, там где это необходимо. Вот пример настроенной структуры для одного эффекта:

add class creative link effect

Вообще набор предлагает 21 стиль оформления ссылок на сайте. Демонстрацию работы разных стилей ссылок можно посмотреть тут.

Встраиваем стили в WordPress и добавляем шорткод

Для начала скачайте готовый файл стилей коллекции из моего сайта.

В моем архиве уже немного подготовленные стили для нашего шаблона.

Зайдите в скачанный архив и перенесите папку creative-link-effects в корень нашей темы.

link effect wordpress upload folder

Далее нам необходимо файл стилей подключить к нашей теме, для этого зайдем в файл /wp-content/themes/my_theme_tmp/functions/custom-header-script.php и добавим код подключения.

add class  link wordpress

Чтобы код можно было скопировать в свой файл я выложил дополнительный фрагмент.

После подключения файла стилей нам необходимо создать новый шорткод в созданный на предыдущих уроках файл:

wp-content/themes/my_theme_tmp/functions/shortcode/shortcode.php

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

zip wordpress theme archive

Рассмотрим сам шорткод и фрагмент кода:

В шорткоде вы можете указать какой эффект вас интересует effect=»1″ и указать ссылки и тексты для ссылок (анкоры) через запятую. Обращаю внимание на то, что количество ссылок и их анкоров должно быть одинаковым. Также можно указать атрибут target=»blank» если вам необходимо чтобы ссылка открывалась в новом окне.

Рассмотрим код самого шорткода:

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

Выбор эффекта шорткода и формирование шаблона вывода

Далее мы проверяем правильно ли указан номер эффекта, который должен быть от 1 до 21 « if($effect>0 && $effect<22 ) { «. После проверки при помощи условной конструкции «switch case» мы заставляем программу проверить переменную $effect и выбрать нужный блок кода. Конструкция находит нужный блок кода по указанному эффекту и выполняет его.

В блоке выполняемого кода:

В переменную $res мы помещаем участок кода <nav class=»cl-effect-1″ id=»cl-effect-1″> -> делаем проверку является ли переменная $links массовом -> при помощи цикла foreach перебираем все элементы массива и пристыковываем (конкатенацией .=) их в переменную $res -> закрываем тег </nav> -> возвращаем переменную при помощи return $res, все содержимое переменной будет выведено на странице сайта. Тоже самое можно сделать и для других эффектов, обратите внимание структура шаблона разных эффектов отличается, поэтому будьте внимательны.

Вот как получилось вывести разные шорткоды у меня на тестовой площадке:

create shortcodes wordpress lesson 31

Если у вас не получилось, то я бы советовал вам просто скопировать мой код из файла shortcode.php и отследить построчно что там происходит. Также вы можите почитать предыдущий урок «Создание шорткодов – урок 30«. Удачной разработки правильных шаблонов сайтов, по всем правилам API WordPress.

Код всего разработанного шаблона на данном этапе обучения

zip wordpress theme archive

Купить хостинг WordPress


Читайте также:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *