Для прикладу розробки шорткоду та закріплення пройденого матеріалу на WordPress ми візьмемо колекцію ефектів для посилань Ефекти творчих посилань та розробимо під неї власний шорткод у майбутню преміум тему.

Робота колекції стилів зводиться до того, щоб підключити стилі та розставити класи, там де це потрібно. Ось приклад налаштованої структури для одного ефекту:

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

Вбудовуємо стилі в WordPress та додаємо шорткод

Для початку скачайте готовий файл стилів колекції з мого сайт.

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

Зайдіть до архіву і перенесіть папку Creative-link-effects в корінь нашої теми.

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

Щоб код можна було скопіювати у свій файл, я виклав додатковий фрагмент.

wp_register_style('посилання-ефект', $tmpDir". /creative-link-effects/css/component.css');
wp_enqueue_style('посилання-ефект');

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

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

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

Розглянемо сам шорткод та фрагмент коду:

[link_effect ефект="1" посилання="https://wp-admin.com.ua, https://wp-admin.com.ua" анкери="Підручники WordPress1, Підручники WordPress2" ціль="Порожній"]

У шорткоді ви можете вказати який ефект вас цікавить ефект=”1″ та вказати посилання та тексти для посилань (анкори) через кому. Звертаю увагу на те, що кількість посилань та їх анкорів має бути однаковою. Також можна вказати атрибут target=”порожній” якщо вам необхідно, щоб посилання відкривалося в новому вікні.

Розглянемо код самого шорткоду:

функція creative_link_effect_func( $ATTS ) {
    $ефект = $atts['ефект'];
    if($ефект==''){ return 'Выберите эффект, від 1 до 21'; }
    $посилання = $atts['посилання'];
    $ціль = $atts['ціль'];
    $субтитри = $atts['підзаголовок'];

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

    $зв'язки = вибух(',',$links);
    $якір = вибух(',',$якір);
    $субтитри = вибух(',',$Субтитрів);
    if(рахувати($links)!= кількість($якір)){ повернення "Кількість анкорів і посилань не збігається"; }

На початку ми визначаємо всі атрибути як змінні та формуємо з деяких масивів. У цій частині також робимо різні перевірки для виключення ситуацій, коли користувач не ввів обов'язкові параметри або вказав неправильну їх кількість. Виняткові ситуації виводитимуть замість посилань повідомлення про помилку. Якщо ви вже займалися розробкою на php, то вам не важко прочитати цей код.

Вибір ефекту шорткоду та формування шаблону виводу

   if($ефект>0 && $ефект<22 ) {
        комутатор ($ефект) {
            справа 1:
                $res = '<клас nav="Cl-ефект-1" id="Cl-ефект-1">';
                if(is_array($links)){
                    foreach($посилання як $k => $v){
                        $res .= '<a href="'.$links[$k].'" ціль="".$target".">'.$anchor[$k].'</a>';
                    }
                }
                $res .= '</нав>';
                повернути $рез;
                перерву;
            справа 2:
                $res = '<клас nav="Cl-ефект-2" id="Cl-ефект-2">';
                if(is_array($links)){
                    foreach($посилання як $k => $v){
                        $res .= '<a href="'.$links[$k].'" ціль="".$target"."><span data-hover="'.$anchor[$k].'">'.$anchor[$k].'</проліт></a>';
                    }
                }
                $res .= '</нав>';
                повернути $рез;
                перерву;

---------

Далі ми перевіряємо, чи правильно вказано номер ефекту, який повинен бути від 1 до 21 « if($ефект>0 && $ефект<22 ) { «. Після перевірки за допомогою умовної конструкціїперемикач корпусу” ми змушуємо програму перевірити змінну $ефект та вибрати потрібний блок коду. Конструкція знаходить потрібний блок коду за вказаним ефектом та виконує його.

У блоці виконуваного коду:

справа 1:
                $res = '<клас nav="Cl-ефект-1" id="Cl-ефект-1">';
                if(is_array($links)){
                    foreach($посилання як $k => $v){
                        $res .= '<a href="'.$links[$k].'" ціль="".$target".">'.$anchor[$k].'</a>';
                    }
                }
                $res .= '</нав>';
                повернути $рез;
                перерву;

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

Ось як вдалося вивести різні шорткоди у мене на тестовому майданчику:

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

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