Практика з розробки повноцінного шорткоду – урок 31

за Ніколаєнко Максим · Опубліковано Грудень 3, 2015 · Оновлено Серпень 27, 2020

Зміст приховати

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

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

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

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

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

add class creative link effect

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

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

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

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

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

папка для завантаження ефекту посилання wordpress

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

додати посилання на клас 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"]

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

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

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

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

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;

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

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

створення коротких кодів wordpress урок 31

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