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

- Николаенко Максим · Опубликовано 3 декабря, 2015 · Обновлено 27 августа, 2020

Содержание скрыть

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

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

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

Для примера разработки шорткода и закрепления пройденного материала на 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_register_style('link-effect', $tmpDir.'/creative-link-effects/css/component.css');
wp_enqueue_style('link-effect');

1 2	wp_register_style('link-effect', $tmpDir.'/creative-link-effects/css/component.css'); wp_enqueue_style('link-effect');

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

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

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

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

[link_effect effect="1" links="https://wp-admin.com.ua, https://wp-admin.com.ua" anchors="Уроки WordPress1, Уроки WordPress2" target="blank"]

1	[link_effect effect="1" links="https://wp-admin.com.ua, https://wp-admin.com.ua" anchors="Уроки WordPress1, Уроки WordPress2" target="blank"]

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

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

function creative_link_effect_func( $atts ) {
    $effect = $atts['effect'];
    if($effect==''){ return 'Выберите эффект, от 1 до 21'; }
    $links = $atts['links'];
    $target = $atts['target'];
    $subtitle = $atts['subtitle'];

    if($target=='' or !isset($target)){ $target == '_self'; }
    if($links==''){ return 'Вы должны указать минимум 1 ссылку которую будите использовать'; }
    $anchor = $atts['anchors'];
    if($anchor==''){ return 'Вы должны указать минимум 1 содержимое ссылки'; }

    $links = explode(',',$links);
    $anchor = explode(',',$anchor);
    $subtitle = explode(',',$subtitle);
    if(count($links)!= count($anchor)){ return 'Количество анкоров и ссылок несовпадает'; }

function creative_link_effect_func( $atts ) {

$effect = $atts['effect'];

if($effect==''){ return 'Выберите эффект, от 1 до 21'; }

$links = $atts['links'];

$target = $atts['target'];

$subtitle = $atts['subtitle'];

if($target=='' or !isset($target)){ $target == '_self'; }

if($links==''){ return 'Вы должны указать минимум 1 ссылку которую будите использовать'; }

$anchor = $atts['anchors'];

if($anchor==''){ return 'Вы должны указать минимум 1 содержимое ссылки'; }

$links = explode(',',$links);

$anchor = explode(',',$anchor);

$subtitle = explode(',',$subtitle);

if(count($links)!= count($anchor)){ return 'Количество анкоров и ссылок несовпадает'; }

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

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

   if($effect>0 && $effect<22 ) {
        switch ($effect) {
            case 1:
                $res = '<nav class="cl-effect-1" id="cl-effect-1">';
                if(is_array($links)){
                    foreach($links as $k => $v){
                        $res .= '<a href="'.$links[$k].'" target="'.$target.'">'.$anchor[$k].'</a>';
                    }
                }
                $res .= '</nav>';
                return $res;
                break;
            case 2:
                $res = '<nav class="cl-effect-2" id="cl-effect-2">';
                if(is_array($links)){
                    foreach($links as $k => $v){
                        $res .= '<a href="'.$links[$k].'" target="'.$target.'"><span data-hover="'.$anchor[$k].'">'.$anchor[$k].'</span></a>';
                    }
                }
                $res .= '</nav>';
                return $res;
                break;

---------

if($effect>0 && $effect<22 ) {

switch ($effect) {

case 1:

$res = '<nav class="cl-effect-1" id="cl-effect-1">';

if(is_array($links)){

foreach($links as $k => $v){

$res .= '<a href="'.$links[$k].'" target="'.$target.'">'.$anchor[$k].'</a>';

}

$res .= '</nav>';

return $res;

break;

case 2:

$res = '<nav class="cl-effect-2" id="cl-effect-2">';

if(is_array($links)){

foreach($links as $k => $v){

$res .= '<a href="'.$links[$k].'" target="'.$target.'"><span data-hover="'.$anchor[$k].'">'.$anchor[$k].'</span></a>';

}

$res .= '</nav>';

return $res;

break;

---------

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

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

case 1:
                $res = '<nav class="cl-effect-1" id="cl-effect-1">';
                if(is_array($links)){
                    foreach($links as $k => $v){
                        $res .= '<a href="'.$links[$k].'" target="'.$target.'">'.$anchor[$k].'</a>';
                    }
                }
                $res .= '</nav>';
                return $res;
                break;

case 1:

$res = '<nav class="cl-effect-1" id="cl-effect-1">';

if(is_array($links)){

foreach($links as $k => $v){

$res .= '<a href="'.$links[$k].'" target="'.$target.'">'.$anchor[$k].'</a>';

}

$res .= '</nav>';

return $res;

break;

В переменную $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.