Как создать пользовательский аддон для SP Page Builder
В современном постоянно меняющемся цифровом мире спрос на интуитивные и настраиваемые инструменты управления контентом растёт. Для энтузиастов Joomla, SP Page Builder стал лучшим выбором, позволяя легко создавать страницы. Для тех, кто уже использует SP Page Builder и думал о создании собственного дополнения - этот гид для вас.
Погружение в дополнения SP Page Builder
Вопреки распространенным заблуждениям, для создания вашего дополнения не обязательно быть опытным разработчиком или создателем SP Page Builder. Если у вас есть базовое понимание программирования и вы можете создавать функции для выполнения конкретных задач, то вы всего в нескольких шагах от создания собственного дополнения для SP Page Builder 5 Pro.
Более того, такие дополнения могут стать источником прибыли, если вы решите их продавать.
Начало создания дополнения
Хотя в конце этого руководства мы предоставляем полный исходный код, чтобы действительно понять все тонкости процесса, мы расскажем вам о каждом шаге создания дополнения с нуля.
Для целей этого руководства наше гипотетическое дополнение будет называться «Пример дополнения».
Шаг 1: Создание плагина
Прежде чем начать процесс создания, необходимо понять основную роль плагина. Наше пользовательское дополнение будет установлено с помощью этого плагина. Вот как начать:
- Создание папки: начните с создания новой папки, в которой будут необходимые файлы.
- Добавление файлов: наполните эту папку нужными файлами.
- Упаковка плагина: преобразуйте эту папку в формат zip. Эта архивированная версия будет узнаваться и устанавливаться как плагин.
Содержимое папки плагина:
- Ключевой файл установки PHP.
- Вспомогательный XML файл для плагина.
- Отдельная папка для хранения дополнения(й).
Для обеспечения бесперебойной интеграции важно следовать рекомендуемым правилам именования. С учетом этого наша папка будет называться plg_sppagebuilder_demo, где "demo" обозначает имя плагина.
Шаг 2: Создание файлов для плагина
Создание PHP файла:
Начните этот шаг, запустив ваш предпочитаемый текстовый или кодовый редактор. Затем:
- Создайте новый файл. Здесь важно соответствие имени. Например, если имя плагина "Demo", ваш файл должен называться
demo.php. - Добавьте в этот файл следующий код.
<?php
/**
* @package SP Page Builder
* @author JoomShaper http://www.joomshaper.com
* @copyright Copyright (c) 2010 - 2019 JoomShaper
* @license http://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 or later
*/
//no direct accees
defined('_JEXEC') or die('Restricted Aceess');
class PlgSppagebuilderDemo extends JPlugin {
protected $autoloadLanguage = true;
}
Важно адаптировать имя класса PlgSppagebuilderDemo в соответствии с вашими предпочтениями. Здесь "Demo" соответствует имени нашего плагина, которое вы можете заменить на свое.
Создание XML файла:
Следуя той же процедуре:
- Создайте новый XML файл в вашем редакторе кода. Исходя из нашего предыдущего примера, его следует назвать
demo.xml. - Вставьте в этот 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 Nov 2019</creationDate>
<authorEmail>support(at)joomshaper.com</authorEmail>
<authorUrl>https://www.joomshaper.com</authorUrl>
<copyright>Copyright (C) 2010 - 2019 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>так, чтобы он отражал имя вашего дополнения. - Очень важно скорректировать тег
<filename>в соответствии с выбранным вами именем файла PHP плагина. - В теге
<folder>введите имя папки "addons" (это станет понятнее на следующем шаге).
Профессиональный совет: Всегда используйте строчные буквы и заменяйте пробелы символом подчеркивания для наилучшей совместимости.
Шаг 3: Создание папки для дополнения
После того как мы подготовили необходимые файлы PHP и XML, приступим к созданию нашего хранилища дополнений. Эта папка, подходяще названная "addons", может содержать множество единиц дополнений. Если вы планируете создать набор дополнений, каждое из них должно находиться в своей отдельной папке внутри главной папки "addons". Например, наш выбор - "Sample Addon", он будет иметь свое личное пространство с именем "sample_addon".
Рисунок: Схематичное представление вашего пользовательского дополнения.
Заглянув в нашу папку с дополнением, мы найдем:
- Файл
admin.php: Это ядро нашего дополнения, обеспечивающее его функциональность. - Файл
site.php: Он отображает наше дополнение визуально. - Папка "assets": Специализированное пространство для хранения всех визуальных и функциональных элементов, необходимых для работы дополнения.
С тем, как основные шаги выполнены, мы теперь готовы приступить к созданию основных функциональных возможностей для нашего дополнения.
Шаг 4: Создание функциональных возможностей для вашего дополнения
С тем как основа готова, пора углубиться и начать процесс кодирования дополнительных функциональных возможностей (функций), которые требуются нашему дополнению. Это пошаговое руководство детально проведет вас через создание полей и функций, которые находятся в основе утилиты вашего дополнения.
Настройка файла Admin
Начните с создания нового файла PHP; назовем его admin.php. Этот файл будет служить центром для включения кодирования, специфичного для функций, что формирует ваше дополнение.
<?php
/**
* @package SP Page Builder
* @author JoomShaper http://www.joomshaper.com
* @copyright Copyright (c) 2010 - 2019 JoomShaper
* @license http://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 or later
*/
//no direct accees
defined('_JEXEC') or die('Restricted Aceess');
SpAddonsConfig::addonConfig(
array(
'type'=>'content',
'addon_name'=>'sample_addon',
'title'=> 'Sample Addon',
'desc'=> 'Sample addon for SP Page Builder (Now you can edit or modify this)',
'icon'=>JURI::root() . 'plugins/sppagebuilder/demo/addons/sample_addon/assets/images/icon.png',
'category'=>'MyAddons',
'attr'=>array(
'general' => array(
'admin_label'=>array(
'type'=>'text',
'title'=>JText::_('COM_SPPAGEBUILDER_ADDON_ADMIN_LABEL'),
'desc'=>JText::_('COM_SPPAGEBUILDER_ADDON_ADMIN_LABEL_DESC'),
'std'=> ''
),
// Title
'title'=>array(
'type'=>'textarea',
'title'=>JText::_('COM_SPPAGEBUILDER_ADDON_TITLE'),
'desc'=>JText::_('COM_SPPAGEBUILDER_ADDON_TITLE_DESC'),
'std'=> 'This is sample title'
),
'addon_icon'=>array(
'type'=>'icon',
'title'=>'Icon',
'depends'=>array(array('title', '!=', '')),
),
'addon_link'=>array(
'type'=>'media',
'format'=>'attachment',
'title'=>'Link',
'placeholder'=>'http://',
'std'=>'',
'hide_preview'=>true,
),
'addon_font_family'=>array(
'type'=>'fonts',
'title'=>'Font Family',
'depends'=>array(array('title', '!=', '')),
'selector'=> array(
'type'=>'font',
'font'=>'{{ VALUE }}',
'css'=>'.sppb-addon-title { font-family: {{ VALUE }}; }'
)
),
'addon_fontsize'=>array(
'type'=>'slider',
'title'=>'Font Size',
'std'=>'',
'max'=>400,
'responsive'=>true
),
'addon_lineheight'=>array(
'type'=>'slider',
'title'=>'Line Height',
'std'=>'',
'max'=>400,
'responsive'=>true
),
'addon_font_style'=>array(
'type'=>'fontstyle',
'title'=>'Font Style',
'depends'=>array(array('title', '!=', '')),
),
'addon_margin'=>array(
'type'=>'margin',
'title'=>'Margin',
'std' => '0px 0px 30px 0px',
'responsive'=>true
),
'addon_padding'=>array(
'type'=>'padding',
'title'=>'Padding',
'std' => '0px 0px 0px 0px',
'responsive'=>true
),
// Content
'content'=>array(
'type'=>'editor',
'title'=>JText::_('COM_SPPAGEBUILDER_GLOBAL_CONTENT'),
'std'=>'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer adipiscing erat eget risus sollicitudin pellentesque et non erat. Maecenas nibh dolor, malesuada et bibendum a, sagittis accumsan ipsum. Pellentesque ultrices ultrices sapien, nec tincidunt nunc posuere ut. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam scelerisque tristique dolor vitae tincidunt. Aenean quis massa uada mi elementum elementum. Nec sapien convallis vulputate rhoncus vel dui.'
),
'class'=>array(
'type'=>'text',
'title'=>JText::_('COM_SPPAGEBUILDER_ADDON_CLASS'),
'desc'=>JText::_('COM_SPPAGEBUILDER_ADDON_CLASS_DESC'),
'std'=>''
),
),
),
)
);
Разберемся с компонентами этого файла:
'addon_name': Это представляет собой уникальный идентификатор вашего дополнения. Убедитесь, что он точно соответствует имени папки дополнения.'title': Дружественное имя для отображения вашего дополнения.'desc': Предоставляет краткое описание, часто представленное пользователям в виде всплывающей подсказки.'icon': URL-адрес, указывающий на выбранную вами иконку для дополнения.'category': Позволяет проводить категоризацию, особенно полезную, если вы планируете создать серию дополнений.- Массив
'general'является основным разделом. Здесь вы будете скриптовать поля или, более технично, функции, которые управляют вашим дополнением.
Результат, генерируемый файлом admin.php, можно увидеть ниже:
Визуализация присутствия вашего дополнения
Суть этого шага - визуально оживить ваше дополнение. Чтобы достичь этого, давайте создадим ещё один файл с названием site.php и вставим в него следующий код:
<?php
/**
* @package SP Page Builder
* @author JoomShaper http://www.joomshaper.com
* @copyright Copyright (c) 2010 - 2019 JoomShaper
* @license http://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 or later
*/
//no direct accees
defined('_JEXEC') or die('Restricted Aceess');
class SppagebuilderAddonSample_addon extends SppagebuilderAddons {
public function render() {
$class = (isset($this->addon->settings->class) && $this->addon->settings->class) ? ' ' . $this->addon->settings->class : '';
$title = (isset($this->addon->settings->title) && $this->addon->settings->title) ? $this->addon->settings->title : '';
$addon_link = (isset($this->addon->settings->addon_link) && $this->addon->settings->addon_link) ? $this->addon->settings->addon_link : '';
$addon_icon = (isset($this->addon->settings->addon_icon) && $this->addon->settings->addon_icon) ? $this->addon->settings->addon_icon : '';
$content = (isset($this->addon->settings->content) && $this->addon->settings->content) ? $this->addon->settings->content : '';
$output = '';
$output .= '<div>';
if($title) {
$output .= '<h1>';
$output .= (!empty($addon_link)) ? '<a href="' . $addon_link . '">' : '';
$output .= (!empty($addon_icon)) ? '<i></i> ' : '';
$output .= (!empty($title)) ? $title : '';
$output .= (!empty($addon_link)) ? '</a>' : '';
$output .= '</h1>';
}
if($content) {
$output .= '<div>';
$output .= $content;
$output .= '</div>';
}
$output .= '</div>';
return $output;
}
public function css() {
$addon_id = '#sppb-addon-' . $this->addon->id;
$style = '';
$style_sm = '';
$style_xs = '';
$style .= (isset($this->addon->settings->addon_margin) && $this->addon->settings->addon_margin) ? SppagebuilderHelperSite::getPaddingMargin($this->addon->settings->addon_margin, 'margin') : '';
$style_sm .= (isset($this->addon->settings->addon_margin_sm) && $this->addon->settings->addon_margin_sm) ? SppagebuilderHelperSite::getPaddingMargin($this->addon->settings->addon_margin_sm, 'margin') : '';
$style_xs .= (isset($this->addon->settings->addon_margin_xs) && $this->addon->settings->addon_margin_xs) ? SppagebuilderHelperSite::getPaddingMargin($this->addon->settings->addon_margin_xs, 'margin') : '';
$style .= (isset($this->addon->settings->addon_padding) && $this->addon->settings->addon_padding) ? SppagebuilderHelperSite::getPaddingMargin($this->addon->settings->addon_padding, 'padding') : '';
$style_sm .= (isset($this->addon->settings->addon_padding_sm) && $this->addon->settings->addon_padding_sm) ? SppagebuilderHelperSite::getPaddingMargin($this->addon->settings->addon_padding_sm, 'padding') : '';
$style_xs .= (isset($this->addon->settings->addon_padding_xs) && $this->addon->settings->addon_padding_xs) ? SppagebuilderHelperSite::getPaddingMargin($this->addon->settings->addon_padding_xs, 'padding') : '';
$style .= (isset($this->addon->settings->addon_fontsize) && $this->addon->settings->addon_fontsize) ? 'font-size: ' . $this->addon->settings->addon_fontsize . 'px; ' : '';
$style_sm .= (isset($this->addon->settings->addon_fontsize_sm) && $this->addon->settings->addon_fontsize_sm) ? 'font-size: ' . $this->addon->settings->addon_fontsize_sm . 'px; ' : '';
$style_xs .= (isset($this->addon->settings->addon_fontsize_xs) && $this->addon->settings->addon_fontsize_xs) ? 'font-size: ' . $this->addon->settings->addon_fontsize_xs . 'px; ' : '';
$style .= (isset($this->addon->settings->addon_lineheight) && $this->addon->settings->addon_lineheight) ? 'line-height: ' . $this->addon->settings->addon_lineheight . 'px; ' : '';
$style_sm .= (isset($this->addon->settings->addon_lineheight_sm) && $this->addon->settings->addon_lineheight_sm) ? 'line-height: ' . $this->addon->settings->addon_lineheight_sm . 'px; ' : '';
$style_xs .= (isset($this->addon->settings->addon_lineheight_xs) && $this->addon->settings->addon_lineheight_xs) ? 'line-height: ' . $this->addon->settings->addon_lineheight_xs . 'px; ' : '';
// Font Style
if(isset($addon->settings->addon_font_style->underline) && $addon->settings->addon_font_style->underline) {
$style .= 'text-decoration: underline;';
}
if(isset($addon->settings->addon_font_style->italic) && $addon->settings->addon_font_style->italic) {
$style .= 'font-style: italic;';
}
if(isset($addon->settings->addon_font_style->uppercase) && $addon->settings->addon_font_style->uppercase) {
$style .= 'text-transform: uppercase;';
}
if(isset($addon->settings->addon_font_style->weight) && $addon->settings->addon_font_style->weight) {
$style .= 'font-weight: ' . $addon->settings->addon_font_style->weight . ';';
}
$css = '';
if ($style) {
$css .= $addon_id . ' .sppb-addon-title {' . $style . '}';
}
if ($style_sm) {
$css .= '@media (min-width: 768px) and (max-width: 991px) {';
$css .= $addon_id . ' .sppb-addon-title {' . $style_sm . '}';
$css .= '}';
}
if ($style_xs) {
$css .= '@media (max-width: 767px) {';
$css .= $addon_id . ' .sppb-addon-title {' . $style_xs . '}';
$css .= '}';
}
return $css;
}
public static function getTemplate() {
$output = '
<#
var margin = window.getMarginPadding(data.addon_margin, "margin");
var padding = window.getMarginPadding(data.addon_padding, "padding");
#>
<style type="text/css">
#sppb-addon-{{ data.id }} .sppb-addon-title{
<# if(_.isObject(data.addon_fontsize)){ #>
font-size: {{ data.addon_fontsize.md }}px;
<# } #>
<# if(_.isObject(data.addon_lineheight)){ #>
line-height: {{ data.addon_lineheight.md }}px;
<# } #>
<# if(_.isObject(data.addon_font_style) && data.addon_font_style.underline) { #>
text-decoration: underline;
<# } #>
<# if(_.isObject(data.addon_font_style) && data.addon_font_style.italic) { #>
font-style: italic;
<# } #>
<# if(_.isObject(data.addon_font_style) && data.addon_font_style.uppercase) { #>
text-transform: uppercase;
<# } #>
<# if(_.isObject(data.addon_font_style) && data.addon_font_style.weight) { #>
font-weight: {{ data.addon_font_style.weight }};
<# } #>
<# if(_.isObject(margin)){ #>
{{{ padding.md }}}
{{{ margin.md }}}
<# } #>
}
@media (min-width: 768px) and (max-width: 991px) {
#sppb-addon-{{ data.id }} .sppb-addon-title{
<# if(_.isObject(margin)){ #>
{{{ padding.sm }}}
{{{ margin.sm }}}
<# } #>
}
}
@media (max-width: 767px) {
#sppb-addon-{{ data.id }} .sppb-addon-title{
<# if(_.isObject(margin)){ #>
{{{ padding.xs }}}
{{{ margin.xs }}}
<# } #>
}
}
</style>
<div>
<h1>
<# if(!_.isEmpty(data.addon_link)){ #>
<a href="/{{ data.addon_link }}">
<# } #>
<# if(!_.isEmpty(data.addon_icon)){ #>
<i></i>
<# } #>
{{{ data.title }}}
<# if(!_.isEmpty(data.addon_link)){ #>
</a>
<# } #>
</h1>
<# if(!_.isEmpty(data.content)){ #>
<div id="addon-sample-{{data.id}}" data-id={{data.id}} data-fieldName="content">{{{ data.content }}}</div>
<# } #>
</div>
';
return $output;
}
}
Важные моменты, которые следует помнить:
- Измените имя класса с «SppagebuilderAddonSample_addon» на более персонализированное, например, «SampleBuilderAddonYour_addon».
- Следуйте определенной системе наименования при маркировке div, например, «sppb-addon-sample-addon», чтобы сохранять последовательность и ясность.
Отображаемый результат, созданный из файла site.php, можно увидеть здесь:
Рассмотрим подробнее код файла site.php:
- Функция
render(): Это главное действие. Оно отображает окончательную версию вашего дополнения. - Функция
css(): Она отвечает за стиль и визуальное представление вашего дополнения. - Функция
getTemplate(): Незаменима для тех, кто хочет предоставить возможность редактирования на стороне клиента. Если редактирование в реальном времени вам не нужно, вы можете без труда заменить функциюgetTemplate()следующим кодом:
public static function getTemplate() {
return false;
}
Организация ваших ресурсов
Теперь рассмотрим директорию assets, которая является ключевой, особенно если вы включаете визуальные элементы, такие как иконки. Вот что нужно сделать:
- Создайте специальную папку с именем "images" внутри директории assets.
- Поместите туда выбранную вами иконку. Следуя стандартам, убедитесь, что размеры вашей иконки составляют 76x76 пикселей и она называется
icon.png. - Если вы когда-нибудь захотите обновить иконку, просто замените существующее изображение.
Для быстрой навигации структура директорий следующая: sample_addon > assets > images > icon.
Следуя этому подробному руководству, вы не просто пишете код; вы создаете всеобъемлющий и интуитивно понятный опыт для пользователей вашего дополнения. Будь вы опытным разработчиком или новичком, понимание и реализация этих шагов будут играть ключевую роль в вашем пути в веб-разработке.
Шаг 5: Упаковка вашего дополнения для развертывания
После тщательного выполнения предыдущих этапов создания вашего дополнения следующим логичным шагом будет его упаковка в распространяемый формат. Это позволит без проблем установить его на вашем сайте или на любой другой платформе, работающей на Joomla.
Сборка вашего дополнения в архив ZIP
Закончив кодирование, вашей первоочередной задачей является объединение всей вашей работы в один сжатый файл. Это облегчает не только распространение, но и установку вашего дополнения.
Вот как это можно сделать:
- Сжмите каталог
plg_sppagebuilder_demo. Большинство операционных систем и инструментов управления файлами предлагают опции "Сжать" или "Архивировать" при правом клике на папки. - Убедитесь, что результат сжатия имеет формат файла
.zip. Этот формат универсально распознается и упрощает процесс установки для конечных пользователей.
Визуальное представление сжатого файла дополнения можно увидеть ниже:
Развертывание и активация вашего дополнения на Joomla
Имея у себя сжатое дополнение, пришло время оживить его, интегрировав с вашим сайтом Joomla.
- Перейдите к административной панели Joomla.
- Выберите
Расширенияв верхнем меню, затемУправлениеи после этогоУстановка. - Нажмите на
Загрузить файл пакетаи выберите ваш файл дополнения.zipдля загрузки.
Снимок интерфейса загрузки в Joomla можно увидеть здесь:
После загрузки важно удостовериться, что ваше дополнение активно и работает должным образом:
- На панели Joomla выберите
Расширения, затемПлагины. - Найдите недавно установленный плагин в списке.
- Кликните по нему, чтобы активировать или "опубликовать" его, убедившись, что он работает для посетителей вашего сайта.
Если вы решите разработать ряд дополнений, помните: процесс остается неизменным. Это обеспечивает разработчикам простой и интуитивно понятный опыт, независимо от количества или сложности создаваемых дополнений.
Использование существующего исходного кода
Понимая, что разработка настраиваемых дополнений может показаться устрашающей для некоторых, существует обходной путь. Вместо того чтобы начинать с нуля, вы можете загрузить предоставленный исходный код:
После загрузки все, что вам нужно, - это внести изменения в соответствии с рекомендациями, упомянутыми в предыдущих разделах. Это ускоряет цикл разработки, обеспечивая быстрое развертывание для срочных требований.
На любом этапе, если вы столкнетесь со сложностями в разработке дополнений или будете искать разъяснения по любому шагу, не стесняйтесь. Наше сообщество процветает на сотрудничестве и обмене знаниями. Оставьте свои вопросы в комментариях ниже, и наша команда или коллеги-разработчики незамедлительно помогут вам в ваших начинаниях. Помните, что в мире веб-разработки вы никогда не одни!
Соседние материалы | ||||
|
Как заставить SP Page Builder говорить на вашем языке | Как создать XML Sitemap для Joomla сайта |
|
|
