Как создать собственный пользовательский аддон в SP Page Builder
Знаете ли вы, что огромная вселенная SP Page Builder предоставляет возможность создать свой собственный пользовательский аддон? Несмотря на то, что платформа предлагает впечатляющую библиотеку готовых аддонов, нацеленных на функциональность и удобство использования, мастерство создания вашего собственного аддона открывает дверь к безграничным возможностям для вашего сайта на Joomla.
Если мысль о создании собственного аддона кажется вам устрашающей, особенно если программирование и разработка не ваша специализация, не бойтесь! Вы узнаете, что даже имея основные знания программирования, вы можете воплотить свою идею аддона в жизнь.
Подготовка к работе: что вам нужно знать
Прежде чем начать, стоит учесть несколько лучших практик:
- С целью безопасности и гибкости начните с настройки локальной среды веб-разработки. Такой подход позволяет экспериментировать без страха случайно нарушить работу вашего рабочего сайта.
- Если SP Page Builder для вас новинка, рассмотрите возможность ознакомления с нашим исчерпывающим руководством по загрузке и установке SP Page Builder Pro. Теперь, когда предварительное замечание учтено, пора начать это обогащающее путешествие.
Шаг 1: Создание пользовательского плагина
Подождите секундочку! Мы говорим о создании пользовательского плагина, хотя нашей основной целью является разработка пользовательского аддона. Почему? Просто потому что плагин служит средством, позволяя вам добавлять один или даже несколько аддонов. Создание плагина для ваших пользовательских аддонов гарантирует их независимость от основного компонента SP Page Builder. Следовательно, даже если вы решите обновить SP Page Builder позже, ваши индивидуальные аддоны останутся нетронутыми и независимыми.
Чтобы начать процесс, создайте каталог с именем plg_sppagebuilder_demo. Здесь суффикс 'demo' представляет имя плагина. При желании вы можете изменить 'demo' на любое другое имя, соответствующее вашему проекту.
В каталоге plg_sppagebuilder_demo вы должны создать следующее:
- PHP файл с именем:
demo.php - XML файл с именем:
demo.xml - Специализированный каталог с именем:
addons
Шаг 2: Добавление функциональности в файл demo.php пользовательского плагина
Начните с файла PHP, выбрав редактор текста/кода по вашему вкусу. Несмотря на то, что рынок предлагает множество вариантов, для этого урока наш выбор - Sublime Text. Известный своей легкостью и наличием бесплатной версии, он является надежным помощником для многих разработчиков.
Перейдя в недавно созданную папку с помощью редактора, создайте файл с именем demo.php. Обратите внимание, что имя 'Demo' символизирует наш плагин, поэтому файл назван demo.php. Однако, если вы выбрали уникальное имя, измените имя файла на yourPluginName.php.
Теперь пора оживить этот файл следующим кодом:
<?php
/**
* @package SP Page Builder
* @author JoomShaper http://www.joomshaper.com
* @copyright Copyright (c) 2010 - 2022 JoomShaper
* @license http://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 or later
*/
//no direct accees
defined('_JEXEC') or die('Restricted Access);
use Joomla\CMS\Plugin\CMSPlugin;
class PlgSppagebuilderDemo extends CMSPlugin {
protected $autoloadLanguage = true;
}
Подсказка от профессионала: убедитесь, что 'Demo' в имени класса PlgSppagebuilderDemo соответствует имени вашего плагина для последовательности и ясности.
Шаг 3: Создание файла demo.xml в пользовательском плагине
Следующий шаг посвящен XML файлу нашего плагина. Создайте новый файл, назовите его demo.xml и вставьте следующий кодовый фрагмент:
<?xml version="1.0" encoding="utf-8"?>
<extension version="3.8" type="plugin" group="sppagebuilder" method="upgrade">
<name>Demo Addon Plugin - SP Page Builder</name>
<author>JoomShaper</author>
<creationDate>22 Sep 2022</creationDate>
<authorEmail>support[@]joomshaper.com</authorEmail>
<authorUrl>https://www.joomshaper.com</authorUrl>
<copyright>Copyright (C) 2010 - 2022 JoomShaper. All rights reserved.</copyright>
<license>GNU/GPL V2 or Later</license>
<description>Demo addon plugin for SP Page Builder</description>
<version>1.0</version>
<files>
<filename plugin="demo">demo.php</filename>
<folder>addons</folder>
</files>
</extension>
Несколько строк требуют вашего внимания:
- В теге
<name>введите имя, символизирующее ваш плагин. - В теге
<description>замените “demo” на выбранное вами имя плагина. - Для тега
<filename>адаптируйте имя файлаdemo.phpк PHP файлу, посвященному вашему плагину. - Наконец, для тега
<folder>укрепите имя папки как "addons". Следующие шаги погрузят вас глубже в это.
Шаг 4: Создание каталога "addons"
Углубляясь в процесс, следующая задача - это создание каталога в нашем пользовательском плагине. Этот каталог имеет жизненно важное значение, так как он станет домом для всех наших индивидуальных аддонов. Назовите этот каталог 'addons'.
Углубляясь еще глубже, в каталоге 'addons' создайте подкаталог и назовите его rich_text. Для целей этого руководства 'Rich Text' был выбран как архетип для нашего пользовательского аддона.
Следующие шаги включают наполнение каталога rich_text:
- Добавьте файл PHP и назовите его
admin.php - Добавьте еще один файл PHP с именем
site.php - Наконец, создайте каталог с названием 'assets'. Он будет служить местом хранения для всех основных ресурсов, связанных с аддоном.
Для полного представления взгляните на тщательно разработанную структуру файлов:
Заслуживает внимания: Гибкость этой структуры позволяет включать несколько аддонов в один плагин. Таким образом, если вы планируете запустить другой пользовательский аддон в будущем, процесс будет упрощен. Просто создайте каталог в папке 'addons' и дайте ему имя вашего нового аддона.
Шаг 5: Создание пользовательского аддона - возможности Rich Text
Погрузимся в то, как мы можем использовать кодирование для нашего пользовательского аддона Rich Text. Прежде чем вам окунуться в реальный код, важно прояснить цель вашего аддона Rich Text.
Основная функция веб-элемента Rich Text заключается в том, чтобы позволить пользователям создавать длинное, связное содержание без усилий. Вместо того чтобы вставлять компоненты, такие как Заголовок, Параграф, Кнопка и Изображение по отдельности, Rich Text предлагает более интегрированный подход, позволяя вам включать эти элементы все сразу.
В этой демонстрации наш акцент будет сосредоточен на создании простого, но эффективного Rich Text. Он будет состоять из заголовка, описательного параграфа и кнопки действия, как показано:
Создайте иконку для аддона
Начните с добавления специализированной иконки для вашего аддона. Внутри папки 'assets' создайте новый каталог и назовите его 'images'. Затем разместите ваш выбранный файл icon.png внутри этого каталога. Для этого руководства мы установили размеры иконки 76x76 px. Если вы захотите изменить дизайн значка позже, просто замените существующее изображение на ваше предпочтительное.
Создайте файл admin.php
Далее, в каталоге rich_text, создайте новый файл PHP с названием admin.php и вставьте последующий кодовый фрагмент.
<?php
/**
* @package SP Page Builder
* @author JoomShaper http://www.joomshaper.com
* @copyright Copyright (c) 2010 - 2022 JoomShaper
* @license http://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 or later
*/
// No direct access
defined('_JEXEC') or die('Restricted access');
use Joomla\CMS\Language\Text;
/**
* Inline editor settings rules:
* 1. The inline array must have an attribute named `buttons`
* 2. The buttons array contains all the editor buttons. The key of the array must be unique.
* 3. Every button contains some attributes like-
* a. action (string) (required) [The action will perform after clicking the button]
* b. type (string) (required) [The type of the button. valid values are `placeholder`, `icon-text`]
* c. placeholder (string) (optional) [If the button is dynamic and this cannot be expressed as icon/text.]
* d. icon (string) (optional) [A valid icon name available in the pagebuilder]
* e. text (string) (optional) [A text value to show as the button text]
* f. icon_position (string) (optional) [`left` or `right` position of the icon to the text. Default `left`]
* g. tooltip (string) (optional) [Tooltip text to show on the button hover.]
* h. fieldset (array) (conditional) [An conditional array (which is required if action is dropdown) for representing the fieldset fields.
* This is valid only if the action is `dropdown`.
* The direct children of the fieldset array would be the tabs.
* Inside the tabs name you should define the fields descriptions.
* If there is only one fieldset child then that means no tabs]
* i. options (array) (conditional) [This is a conditional field. This is required if the action is dropdown
* but you need to show some options not fields.]
* j. default (mixed) (conditional) [This is required if there is the options key. This indicates the default value of the button from the options array.]
*/
SpAddonsConfig::addonConfig(
[
'type' => 'content',
'addon_name' => 'rich_text',
'title' => 'Rich Text',
'desc' => 'Rich Text Custom addon',
'category' => 'Custom',
'icon' => '',
'inline' => [
'buttons' => [
'rich_text_general_settings' => [
'action' => 'dropdown',
'icon' => 'addon::rich_text',
'tooltip' => 'Rich Text',
'fieldset' => [
'tab_groups' => [
'title' => [
'fields' => [
[
'title' => [
'type' => 'text',
'title' => Text::_('COM_SPPAGEBUILDER_ADDON_TITLE'),
'desc' => Text::_('COM_SPPAGEBUILDER_ADDON_TITLE_DESC'),
'std' => 'This is a advanced heading',
],
'heading_selector' => [
'type' => 'headings',
'title' => Text::_('COM_SPPAGEBUILDER_ADDON_HEADINGS'),
'std' => 'h3',
],
],
],
],
'content' => [
'fields' => [
[
'content' => [
'type' => 'editor',
'title' => Text::_('COM_SPPAGEBUILDER_ADDON_TITLE'),
'desc' => Text::_('COM_SPPAGEBUILDER_ADDON_TITLE_DESC'),
'std' => "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.",
],
],
],
],
'button' => [
'fields' => [
[
'button' => [
'type' => 'text',
'title' => Text::_('COM_SPPAGEBUILDER_GLOBAL_BUTTON_TEXT'),
'desc' => Text::_('COM_SPPAGEBUILDER_GLOBAL_BUTTON_TEXT_DESC'),
'std' => 'Button',
],
'type' => [
'type' => 'select',
'title' => Text::_('COM_SPPAGEBUILDER_GLOBAL_BUTTON_STYLE'),
'desc' => Text::_('COM_SPPAGEBUILDER_GLOBAL_BUTTON_STYLE_DESC'),
'values' => [
'default' => Text::_('COM_SPPAGEBUILDER_GLOBAL_DEFAULT'),
'primary' => Text::_('COM_SPPAGEBUILDER_GLOBAL_PRIMARY'),
'secondary' => Text::_('COM_SPPAGEBUILDER_GLOBAL_SECONDARY'),
'success' => Text::_('COM_SPPAGEBUILDER_GLOBAL_SUCCESS'),
'info' => Text::_('COM_SPPAGEBUILDER_GLOBAL_INFO'),
'warning' => Text::_('COM_SPPAGEBUILDER_GLOBAL_WARNING'),
'danger' => Text::_('COM_SPPAGEBUILDER_GLOBAL_DANGER'),
'dark' => Text::_('COM_SPPAGEBUILDER_GLOBAL_DARK'),
'link' => Text::_('COM_SPPAGEBUILDER_GLOBAL_LINK'),
],
'std' => 'default',
],
'url' => [
'type' => 'link',
'title' => Text::_('COM_SPPAGEBUILDER_GLOBAL_BUTTON_URL'),
'mediaType' => 'attachment',
],
],
],
],
],
],
],
'rich_text_alignment_separator' => [
'action' => 'separator',
],
'rich_text_alignment_options' => [
'action' => 'dropdown',
'type' => 'placeholder',
'style' => 'inline',
'showCaret' => true,
'tooltip' => Text::_('COM_SPPAGEBUILDER_GLOBAL_ALIGNMENT'),
'placeholder' => [
'type' => 'list',
'options' => [
'left' => ['icon' => 'textAlignLeft'],
'center' => ['icon' => 'textAlignCenter'],
'right' => ['icon' => 'textAlignRight'],
],
'display_field' => 'alignment',
],
'default' => [
'xl' => 'center',
],
'fieldset' => [
'basic' => [
'alignment' => [
'type' => 'alignment',
'inline' => true,
'responsive' => true,
'available_options' => ['left', 'center', 'right'],
'std' => [
'xl' => 'center',
],
],
],
],
],
],
],
'attr' => [],
],
);
Чтобы осветить код, каждый SP Page Builder Addon обладает специализированным инлайн-редактором, настроенным под его индивидуальные функции. Этот конкретный блок кода имеет первостепенное значение, так как он определяет поля инлайн-редактора нашего пользовательского аддона.
Он начинается с ключевой информацией об аддоне, такой как его тип, имя, видимое название, краткое описание и многое другое. Например:
typeуказывает на характер аддона.addon_nameсовпадает с именем папки, где располагается аддон.titleобозначает имя, которое будет видно пользователям.descдает подсказку о аддоне при наведении.categoryгруппирует наш аддон в категории 'Custom' для лучшей организации.iconспециально оставлен пустым, так как он автоматически использует изображение иконки, сохраненное в наших ресурсах.
Чтобы рассказать подробнее, под указателем 'inline' мы определяем поля для инлайн-редактора нашего аддона. Эти поля, такие как Заголовок, Содержание и Кнопка, аккуратно организованы на вкладке rich_text_general_settings. Затем определяются параметры выравнивания для аддона.
Создание файла site.php
После настройки наших полей пришло время записать код, который сделает наш аддон визуально привлекательным. Создайте файл с именем site.php в каталоге rich_text и вставьте следующий кодовый фрагмент:
<?php
/**
* @package SP Page Builder
* @author JoomShaper http://www.joomshaper.com
* @copyright Copyright (c) 2010 - 2022 JoomShaper
* @license http://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 or later
*/
//no direct access
defined('_JEXEC') or die('Restricted access');
class SppagebuilderAddonRich_text extends SppagebuilderAddons
{
/**
* The addon frontend render method.
* The returned HTML string will render to the frontend page.
*
* @return string The HTML string.
* @since 1.0.0
*/
public function render()
{
$settings = $this->addon->settings;
$class = (isset($settings->class) && $settings->class) ? ' ' . $settings->class : '';
$title = (isset($settings->title) && $settings->title) ? $settings->title : '';
$heading_selector = (isset($settings->heading_selector) && $settings->heading_selector) ? $settings->heading_selector : 'h2';
$content = (isset($settings->content) && $settings->content) ? $settings->content : '';
$button = (isset($settings->button) && $settings->button) ? $settings->button : '';
$button_type = (isset($settings->type) && $settings->type) ? $settings->type : '';
$output = '';
// Link Parse
list($link, $target) = AddonHelper::parseLink($settings, 'url');
$output .= '<div>';
// Title
$output .= '<' . $heading_selector . '>';
$output .= nl2br($title);
$output .= '</' . $heading_selector . '>';
// Content
$output .= '<p>' . $content . '</p>';
// Button
$output .= !empty($link) ? '<a ' . $target . ' href="' . $link . '">' : '';
$output .= '<button>' . $button . '</button>';
$output .= !empty($link) ? '</a>' : '';
$output .= '</div>';
return $output;
}
/**
* Generate the CSS string for the frontend page.
*
* @return string The CSS string for the page.
* @since 1.0.0
*/
public function css()
{
$addon_id = '#sppb-addon-' . $this->addon->id;
$cssHelper = new CSSHelper($addon_id);
$css = '';
$settings = $this->addon->settings;
$settings->alignment = CSSHelper::parseAlignment($settings, 'alignment');
$alignment = $cssHelper->generateStyle('.sppb-addon.sppb-addon-rich_text', $settings, ['alignment' => 'text-align'], false);
$css .= $alignment;
return $css;
}
/**
* Generate the lodash template string for the frontend editor.
*
* @return string The lodash template string.
* @since 1.0.0
*/
public static function getTemplate()
{
$lodash = new Lodash('#sppb-addon-{{ data.id }}');
// Inline Styles
$output = '<style type="text/css">';
$output .= $lodash->alignment('text-align', '.sppb-addon-rich_text', 'data.alignment');
$output .= '</style>';
$output .= '
<#
let btnUrl = "";
let target = "";
let rel = "";
if (!_.isEmpty(data.url) && _.isObject(data.url)){
const {url, page, menu, type, new_tab, nofollow} = data?.url;
if(type === "url") btnUrl = url;
if(type === "menu") btnUrl = menu;
if(type === "page") btnUrl = page ? `index.php?option=com_sppagebuilder&view=page&id=${page}` : "";
target = new_tab ? "_blank": "";
rel = nofollow ? "noopener noreferrer": "";
}
#>
';
$output .= '<div>';
// Title
$output .= '<{{ data.heading_selector }}>';
$output .= '<span data-id={{data.id}} data-fieldName="title" contenteditable="true">{{{ data.title }}}</span>';
$output .= '</{{ data.heading_selector }}>';
// Content
$output .= '<p>';
$output .= '<span data-id={{data.id}} data-fieldName="content" contenteditable="true">{{{ data.content }}}</span>';
$output .= '</p>';
// Button
$output .= '<a href=\'{{ btnUrl }}\' target=\'{{ target }}\' rel=\'{{ rel }}\'>';
$output .= '<button id="btn-{{ data.id }}">';
$output .= '<span data-id={{data.id}} data-fieldName="button" contenteditable="true" data-placeholder="Add text...">{{{ data.button }}}</span>';
$output .= '</button>';
$output .= '</a>';
$output .= '</div>';
return $output;
}
}
Этот раздел кода имеет ключевое значение. Он объявляет класс, который по сути является расширением абстрактного класса SppagebuilderAddons. В свою очередь, этот класс содержит функции, такие как:
- render(): Отображает конечный визуальный результат.
- css(): Определяет визуальное оформление.
- getTemplate(): Предоставляет возможности редактирования на стороне клиента.
Шаг 6: Упаковка всего в установочный архив
Вы почти у финишной черты! Защитите все свои усилия, затраченные на кодирование, архивировав весь проект каталога под именем plg_sppagebuilder_demo. Чтобы сделать это, щелкните правой кнопкой мыши на каталоге и выберите 'сжать', и вуаля, ваш zip-файл готов!
Шаг 7: Интеграция и активация плагина
Тщательно созданный плагин теперь можно интегрировать на ваш сайт так же, как и любой стандартный плагин Joomla. Следуйте этим шагам:
- Перейдите к
Joomla Backend > System > Install > Extension > Upload Package File. - После успешной установки активируйте (или опубликуйте) плагин через
Joomla Backend > System > Manage > Extensions. Найдите ваш плагин с помощью функции поиска и активируйте его.
Итоговые результаты
Поздравляем с этим значительным достижением! Вы создали пользовательский аддон, адаптированный под ваши нужды. Чтобы использовать аддон, переключитесь в режим редактирования SP Page Builder. Здесь, в категории 'Пользовательские', ваше творение вас ждет.
Заключение
Мы надеемся, что это подробное руководство помогло вам без труда создать Аддон для SP Page Builder. Хотя путь может показаться сложным сначала, помните, что практика делает мастера. Ознакомьтесь с кодом, экспериментируйте, и скоро вы станете профессионалом в создании любого пользовательского аддона в соответствии с вашим видением. Чтобы ускорить свои будущие начинания, вы можете скачать исходный код этого пользовательского аддона.
Если у вас есть сомнения или вам нужно дополнительное руководство, не стесняйтесь делиться своими мыслями в разделе комментариев. Желаем вам успехов в вашем веб-разработке!
Соседние материалы | ||||
|
Освоение настройки отзывчивых колонок в SP Page Builder | Раскройте возможности веб-дизайна с помощью функций взаимодействия и анимации SP Page Builder |
|
|
