Как добавить короткий кодов для пользователя WordPress с помощью Shortcake

/

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

Что такое Shortcake?

WordPress предлагает более простой способ добавления исполняемого кода в сообщения и страницы с помощью шорткодов. Многие темы и плагины WordPress позволяют пользователям добавлять дополнительные функции с помощью шорткодов. Однако иногда эти короткие коды могут усложняться, когда пользователю нужно ввести параметры для настройки.

Например, в типичной теме WordPress, если есть шорткод для ввода кнопки, пользователю, вероятно, потребуется добавить как минимум от двух до пяти параметров. Как это:

[URL темы = "http://example.com" title = "Загрузить сейчас" color = "purple" target = "newwindow"]

Shortcake - это плагин WordPress и предлагаемая будущая функция WordPress. Он направлен на решение этой проблемы, предоставляя пользовательский интерфейс для ввода этих значений. Это упростит использование шорткодов.

Плагин Shortcake Bakery

Начало работы

Это руководство предназначено для пользователей, которые плохо знакомы с разработкой WordPress. Пользователи начального уровня, которые любят настраивать свои темы WordPress, также найдут это руководство полезным.

Сказав это, давайте начнем.

Первое, что вам нужно сделать, это установить и активировать плагин Shortcake (Shortcode UI).

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

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

<?php
add_shortcode( 'cta-button', 'cta_button_shortcode' );
function cta_button_shortcode( $atts ) {
    extract( shortcode_atts(array(
        'title' => 'Title',
        'url' => ''
        ),
        $atts         
    ));
    return '<span class="cta-button"><a href="' . $url . '">' . $title . '</a></span>';     
}  

Вам также потребуется добавить немного CSS для стилизации кнопки. Вы можете использовать этот CSS в таблице стилей вашей темы.

.cta-button {
padding: 10px;  
font-size: 18px;
border: 1px solid #FFF;
border-radius: 7px;  
color: #FFF;
background-color: #50A7EC;  
}    

Вот как пользователь будет использовать шорткод в своих сообщениях и страницах:

[cta-button title = "Загрузить сейчас" url = "http://example.com"]

Теперь, когда у нас есть шорткод, который принимает параметры, давайте создадим для него пользовательский интерфейс.

Регистрация короткого кода с помощью Shortcake

Shortcake API позволяет зарегистрировать пользовательский интерфейс вашего шорткода. Вам нужно будет описать, какие атрибуты принимает ваш шорткод, типы полей ввода и какие типы сообщений будут отображать пользовательский интерфейс шорткода.

Вот пример фрагмента кода, который мы будем использовать для регистрации пользовательского интерфейса нашего шорткода. Мы постарались объяснить каждый шаг встроенными комментариями. Вы можете вставить это в файл функций вашей темы или в плагин для конкретного сайта.

<?php
shortcode_ui_register_for_shortcode(
    /** Your shortcode handle */
    'cta-button',
    /** Your Shortcode label and icon */
    array(
        /** Label for your shortcode user interface. This part is required. */
        'label' => 'Add Button',
        /** Icon or an image attachment for shortcode. Optional. src or dashicons-$icon. */
        'listItemImage' => 'dashicons-lightbulb',
        /** Shortcode Attributes */
        'attrs' => array(
            /**
            * Each attribute that accepts user input will have its own array defined like this
            * Our shortcode accepts two parameters or attributes, title and URL
            * Lets first define the UI for title field.
            */
            array(
                /** This label will appear in user interface */
                'label' => 'Title',
                /** This is the actual attr used in the code used for shortcode */
                'attr' => 'title',
                /** Define input type. Supported types are text, checkbox, textarea, radio, select, email, url, number, and date. */
                'type' => 'text',
                /** Add a helpful description for users*/
                'description'  => 'Please enter the button text',
            ),
            /** Now we will define UI for the URL field */ 
            array(
                'label' => 'URL',
                'attr'  => 'url',
                'type'  => 'text',
                'description'  => 'Full URL',  
            ),  
        ),  
    /** You can select which post types will show shortcode UI */
    'post_type' => array( 'post', 'page' )
));

Вот и все, теперь вы можете увидеть пользовательский интерфейс шорткода в действии, отредактировав сообщение. Просто нажмите кнопку «Добавить медиа» над редактором сообщений. Это вызовет загрузчик мультимедиа, где вы заметите новый элемент «Вставить элемент публикации» в левом столбце. Нажав на нее, вы увидите кнопку для вставки кода.

Вставка вашего шорткода в сообщение или страницу

Нажав на миниатюру, содержащую значок лампочки и ярлык шорткода, вы увидите интерфейс шорткода.

Пользовательский интерфейс для простого шорткода

Добавление шорткода с несколькими вводами

В первом примере мы использовали очень простой шорткод. Теперь давайте сделаем его немного сложнее и намного полезнее. Давайте добавим шорткод, который позволяет пользователям выбирать цвет кнопки.

Сначала мы добавим шорткод. Это почти такой же шорткод, за исключением того, что теперь он исключает ввод цвета пользователем.

<?php
add_shortcode( 'mybutton', 'my_button_shortcode' );
function my_button_shortcode( $atts ) {
    extract( shortcode_atts(
        array(
             'color' => 'blue',
             'title' => 'Title',
             'url' => ''                 
        ),
        $atts         
    )); 
    return '<span class="mybutton ' . $color . '-button"><a href="' . $url . '">' . $title . '</a></span>';  
}    

Поскольку наш шорткод будет показывать кнопки разными цветами, нам также нужно будет обновить наш CSS. Вы можете использовать этот CSS в таблице стилей вашей темы.

.mybutton {
padding: 10px;
font-size: 18px;
border: 1px solid #FFF;
border-radius: 7px;      
color: #FFF;  
}
.blue-button  {
background-color: #50A7EC;  
}
.orange-button {
background-color:#FF7B00;  
}
.green-button {
background-color:#29B577;  
}  

Вот как будут выглядеть кнопки:

Кнопки призыва к действию, созданные с помощью шорткода

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

<?php
shortcode_ui_register_for_shortcode(
    /** Your shortcode handle */
    'mybutton',
    /** Your Shortcode label and icon */
    array(
        /** Label for your shortcode user interface. This part is required. */
        'label' => 'Add a colorful button',
        /** Icon or an image attachment for shortcode. Optional. src or dashicons-$icon. */
        'listItemImage' => 'dashicons-flag',
        /** Shortcode Attributes */
        'attrs' => array(
            /**
             * Each attribute that accepts user input will have its own array defined like this
             * Our shortcode accepts two parameters or attributes, title and URL
             * Lets first define the UI for title field.
            */
            array(
                /** This label will appear in user interface */
                'label'  => 'Title',
                /** This is the actual attr used in the code used for shortcode */
                'attr' => 'title',
                /** Define input type. Supported types are text, checkbox, textarea, radio, select, email, url, number, and date. */
                'type' => 'text',
                /** Add a helpful description for users */
                'description'  => 'Please enter the button text',  
            ),
            /** Now we will define UI for the URL field */
            array(
                'label' => 'URL',
                'attr' => 'url',
                'type' => 'text',
                'description' => 'Full URL',  
            ),
            /** Finally we will define the UI for Color Selection */
            array(
                'label' => 'Color',
                'attr' => 'color',
                /** We will use select field instead of text */
                'type'  => 'select',
                'options' => array(
                    'blue' => 'Blue',
                    'orange' => 'Orange',
                    'green' => 'Green',      
                ),  
            ),    
        ),
        /** You can select which post types will show shortcode UI */
        'post_type' => array( 'post', 'page' ),   
    )  
);  

Вот и все, теперь вы можете отредактировать сообщение или страницу и нажать кнопку «Добавить медиа». Вы заметите свой недавно добавленный шорткод в разделе «Вставить элементы сообщения».

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

При нажатии на только что созданный шорткод откроется интерфейс шорткода, в котором вы можете просто ввести значения.

Пользовательский интерфейс шорткода с полем выбора

Вы можете загрузить код, использованный в этом руководстве, в качестве плагина.

WPB-шорткейк-учебник

Мы включили CSS, поэтому вы можете использовать его для изучения или использовать для добавления собственных кнопок призыва к действию в WordPress с помощью более простого пользовательского интерфейса. Не стесняйтесь изменять исходный код и играть с ним.

Мы надеемся, что эта статья помогла вам узнать, как добавить пользовательский интерфейс для шорткодов в WordPress с помощью Shortcake. Вы также можете ознакомиться с этими 7 основными советами по использованию шорткодов в WordPress.

Нужна помощь с WordPress? Свяжитесь сейчас
[email protected]

Это переведенная версия оригинальной статьи от wpbeginner, весь контент, изображения и авторство принадлежит автору

Как настроить журналы ошибок WordPress в WP-Config

Вы хотите настроить журналы ошибок WordPress в файле wp-config? Файл wp-config в WordPress не только управляет настройками вашего сайта WordPress, но и является очень

Как использовать FOMO на своем сайте WordPress для увеличения конверсии

Возможно, вы слышали о FOMO и уведомлениях о социальных доказательствах, читая о последних маркетинговых тенденциях. FOMO, сокращение от страха пропустить,

Как добавить форум в WordPress с помощью bbPress

Доски объявлений и форумы - старые добрые надежные инструменты для создания онлайн-сообществ. Хотя существует множество программного обеспечения

Как исправить ошибку при установлении соединения с базой данных в WordPress

Вы видите на своем веб-сайте WordPress сообщение «Ошибка при установлении соединения с базой данных»? Это фатальная ошибка, которая делает ваш сайт