Latest Posts

Shortcodes

Встроенные шорткоды

Переопределение shortcodes

Отключение шорткодов

Создание нового шорткода

Directory structure

Config File

Builder icon

Options file

Default view file

Static file

Class file

Cookbook

Создание шорткода с опциями

Создание расширенного шорткода с пользовательским классом

Enqueue shortcode динамический CSS-код в page head

Slider

Directory Structure

Создание простого типа слайдер

Create advanced slider type

Frontend render

Mega Menu

Overview

HTML/CSS

Markup Example

Change Item/Icon Markup

Overwrite the Walker

Item Custom Options

Sidebars

Configuration

Helpers

Filters

Portfolio

Configuration

Helpers

Hooks

Views

Backup & Demo Content

Demo Content Install

Hooks

Forms

Customize Views

Create Form Builder Item Type

Breadcrumbs

Helpers

View

Filters

SEO

Option placeholders

Tags

Actions

Helpers

Events

Hooks

Views

Events Tags

Social

Filters

Twitter

Facebook

Builder

Изменение сетки

Builder

Feedback

Helpers

Views

Hooks

Stars Feedbac

Learning

Config

Views

Helpers

Filters

FW_Extension_Learning class

Translation

WordPress Shortcodes

Понимание цели этого расширения

Структура shortcode Unyson

Shortcodes в главном редакторе  post editor

Shortcodes

Расширение шорткодов позволяет легко создавать шорткоды WordPress и их необязательную интеграцию с page builder фреймворка.

Встроенные шорткоды

Unyson поставляется с набором встроенных шорткодов, таких как аккордеон, кнопка, карта, отзывы и другие. Все shortcodes расположены в {some-extension}/shortcodes/, но подавляющее большинство из них находятся в расширении шорткодов (framework/extensions/shortcodes/shortcodes). Они могут быть изменены перезаписью или отключением

Переопределение shortcodes

Некоторые файлы шорткода могут быть перезаписаны (это означает, что файлы могут быть заменены). Это позволяет настраивать шорткод. Файлы, которые могут быть перезаписаны, — это config file, options file, static file и view file.

Есть три места, в которых файлы шорткодов находятся до поиска: дочерняя тема (если активна), родительская тема и фреймворк.

• Если шорткод встроен (объявлен в фреймворке), файлы сначала будут просматриваться в дочерней теме (если она активна), затем в родительской теме, и в итоге фреймворк будет искать в объявленном шорткоде пути
• Если шорткод объявлен в родительской теме, файлы сначала будут искать в дочерней теме (если она активна), а затем в родительской теме (где она была объявлена)
• Если шорткод объявлен в дочерней теме, файлы будут искать только по его объявленному пути

Для лучшего понимания давайте посмотрим на пример: представьте, что есть shortcode demo, расположенное в расширении шорткодов (framework/extensions/shortcodes/shortcodes/demo). Когда framework загружает свои файлы (options.php для этого примера), он будет следовать этим простым шагам:

1. Если дочерняя тема активна, она будет первая   {your-child-theme}/framework-customizations/extensions/shortcodes/shortcodes/demo/options.php
2. Если он не нашел файл в дочерней теме, он будет искать в {your-parent-theme}/framework-customizations/extensions/shortcodes/shortcodes/demo/options.php
3. Если он не нашел файл в родительской теме, он выполнит поиск по объявленному пути шорткода framework/extensions/shortcodes/shortcodes/demo/options.php

Отключение шорткодов

Disabling shortcodes

shortcode можно отключить через фильтр fw_ext_shortcodes_disable_shortcodes. Хорошее место, чтобы поместить код для отключения, можно найти в {your-theme}/framework-customizations/extensions/shortcodes/hooks.php. Он должен выглядеть примерно так:

<?php if (!defined(‘FW’)) die(‘Forbidden’);

function _filter_theme_disable_default_shortcodes($to_disable) {

   $to_disable[] = ‘accordion’;

   $to_disable[] = ‘button’;

   return $to_disable;

}

add_filter(‘fw_ext_shortcodes_disable_shortcodes’, ‘_filter_theme_disable_default_shortcodes’);

Создание нового шорткода

Creating a new shortcode

Если перезапись встроенного шорткода вам не подходит, вы можете создать новый шорткод. Для этого вам сначала нужно решить, где его разместить:

• Если вы разрабатываете расширение unyson, и вы хотите предложить некоторые функциональные возможности из расширения через shortcode, вы должны создать его framework-customizations/extensions/{your-extension}/shortcodes/{your-shortcode}. Одним из таких примеров из встроенных расширений является расширение слайдера и его шорткод.
• Если shortcode, который вы хотите создать, не является расширением, но более универсальным (например, button, tabs), чем вы должны поместить его в shortcodes расширения (framework-customizations/extensions/shortcodes/shortcodes/{your-shortcodes}).

Directory structure

{shortcode-name}

├───class-fw-shortcode-{shortcode-name}.php # optional

├───config.php # optional

├───options.php # optional

├───static.php # optional

├───static # optional

│   ├───css # you can put your css files here

│   ├───img

│   │   └───page_builder.png # used as the page builder icon

│   └───js # you can put your js files here

└───views

   └───view.php

ВНИМАНИЕ

Имя каталога папки шорткода станет его тегом, дефисы будут заменены символами подчеркивания. Это означает, что, если вы укажете shortcode demo-shortcode, он будет преобразован в [demo_shortcode].

Config File

Конфигурация шорткода представляет собой файл с именем config.php, расположенный внутри корневого каталога шорткода. Он содержит массив, который должен храниться в переменной $cfg и обычно используется для обеспечения конфигурации для visual page builder.

$cfg = array(

   ‘page_builder’ => array(

       ‘title’         => __(‘Demo Shortcode’, ‘{domain}’),

       ‘description’   => __(‘Demo shortcode description’, ‘{domain}’),

       ‘tab’           => __(‘Demo Elements’, ‘{domain}’),

       ‘popup_size’    => ‘small’, // can be large, medium or small

       /*

       // Icon examples

       // Note: By default is loaded {your-shortcode}/static/img/page_builder.png

       ‘icon’ => ‘http://…/image-16×16.png’, // background color should be #8c8c8c

       ‘icon’ => ‘dashicons dashicons-admin-site’,

       ‘icon’ => ‘unycon unycon-crown’,

       ‘icon’ => ‘fa fa-btc’,

       */

       /*

       // Title Template examples

       //

       // Syntax:

       // * {{- variable }} — Output with html escape

       // * {{= variable }} — Output raw (without html escape)

       // * {{ if (execute.any(javascript, code)) { console.log(‘Hi’); } }}

       //

       // Available variables:

       // * title — shortcode title (from config)

       // * o — an object with all shortcode options values

       ‘title_template’ => ‘{{- title }} Lorem {{- o.option_id }} ipsum {{= o[«option-id»] }}’,

       ‘title_template’ => ‘{{- title }}: {{- o.label }}{{ if (o.target == «_blank») { }} <span class=»dashicons dashicons-external»></span>{{ } }}’,

       */

   ) );

Чтобы shortcode появился в компоновщике страниц, в массиве config содержится специальный ключ page_builder, который содержит массив со следующими данными:

• title — Заголовок, который появится в поле shortcode.

• description — Текст, который будет отображаться во всплывающей подсказке при наведении курсора на shortcode box.
• tab — builder tab  в которой появится shortcode box.
• popup_size — Размер всплывающего окна, в котором будут отображаться shortcode options. Допустимые значения large | medium | small. Этот параметр является необязательным, а значение по умолчанию — small.

Builder icon

Чтобы установить icon для поля shortcode, поместите изображение с именем page_builder.png в каталог {your-shortcode}/static/img/. Размер изображения должен быть 16×16 px.

Options file

Каталог шорткодов может содержать файл с именем options.php с правильно сформированными options:

$options = array(

   ‘demo_text’   => array(

       ‘label’   => __(‘Demo text label’, ‘{domain}’),

       ‘desc’    => __(‘Demo text description’, ‘{domain}’),

       ‘help’    => __(‘Demo text help’, ‘{domain}’),

       ‘type’    => ‘text’

   ),

   ‘demo_select’ => array(

       ‘label’   => __(‘Demo select label’, ‘{domain}’),

       ‘desc’    => __(‘Demo select description’, ‘{domain}’),

       ‘type’    => ‘select’,

       ‘choices’ => array(

           ‘c1’  => __(‘Choice 1’, ‘{domain}’),

           ‘c2’  => __(‘Choice 2’, ‘{domain}’),

           ‘c3’  => __(‘Choice 3’, ‘{domain}’)

       ),

       ‘value’   => ‘c2’

   ) );

Если это так, то при перетаскивании в canvas area builder будет отображаться icon, указывающий, что шорткод можно редактировать:

Когда вы нажимаете icon редактирования или сам шорткод, открывается модальное окно, содержащее объявленные options:

Сохраненные значения options будут переданы в файл view.

Default view file

По умолчанию, когда WordPress хочет отобразить шорткод, встроенный в фреймворк, это будет html из файла вида по умолчанию, расположенного в {your-shortcode}/views/view.php. В файл представления передаются 3 переменные: $atts, $content и $tag.

Static file

shortcode может содержать файл static.php, который включается при отображении shortcode. Он предназначен для помещения в очередь статических файлов. Ниже приведен пример базового файла static.php:

<?php

if (!defined(‘FW’)) {

   die(‘Forbidden’);

}

// find the uri to the shortcode folder

$uri = fw_get_template_customizations_directory_uri(‘/extensions/shortcodes/shortcodes/my-shortcode’);

wp_enqueue_style(

   ‘fw-shortcode-my-shortcode’,

   $uri . ‘/static/css/styles.css’

);

wp_enqueue_script(

   ‘fw-shortcode-my-shortcode’,

   $uri . ‘/static/js/scripts.js’,

   array(‘jquery’)

);

Если вы хотите включить пользовательские styles и scripts для существующего шорткода, перезапишите файл static.php, создав

framework-customizations/extensions/shortcodes/shortcodes/demo-shortcode/static.php.

ВНИМАНИЕ

Все вышесказанное действует только в случае, если метод _render от class файл не был перезаписан.

Class file

При создании папки shortcode со всеми требуемыми файлами фреймворк создает экземпляр FW_Shortcode для обеспечения правильной функциональности по умолчанию, некоторые из которых могут быть перезаписаны по умолчанию путем создания класса в каталоге shortcode, который расширяет FW_Shortcode.

ЗАМЕТКА

Файл класса должен соблюдать следующее соглашение об именах: class-fw-shortcode- {your-shortcode-folder-name} .php.

Класс внутри файла класса должен соблюдать следующее соглашение об именах: FW_Shortcode_ {Your_Shortcode_Folder_Name}.

Замените дефис подчеркиванием в имени класса.

ЗАМЕТКА

framework заменяют дефис подчеркиванием при регистрации shortcode, поэтому your-shortcode будет преобразован в [your_shortcode].

Поэтому, чтобы создать класс для shortcode [demo_shortcode], нам нужно создать файл demo-shortcode/class-fw-shortcode-demo-shortcode.php и в файле создать класс, который расширяет FW_Shortcode:

class FW_Shortcode_Demo_Shortcode extends FW_Shortcode

{

   // …

}

Новый класс наследует некоторые полезные методы, такие как:

• get_tag() — Возвращает tag shortcode.
• get_declared_path($rel_path = ») — Возвращает путь туда, где была объявлена папка шорткода.
• get_declared_URI($rel_path = ») — Возвращает uri туда, где была объявлена папка shortcode.
• locate_path($rel_path = ») — Ищет путь rel, заданный в качестве аргумента сначала в дочерней теме, затем в родительской теме и последний в framework. Возвращает найденный путь или false, если не найден.
• locate_URI($rel_path = ») — Делает то же самое, что locate_path с uris.
• get_config($key = null) — Возвращает полный перезаписанный конфигурационный массив шорткода или только отдельный ключ, заданный в качестве аргумента.
• get_options() — Возвращает массив переписанных опций шорткода, если таковой имеется.

Методы, которые наиболее подвержены переписыванию:

• _init() — Вызывается, когда создается экземпляр FW_Shortcode для шорткода. Полезно для загрузки других php-файлов (пользовательских типов опций, библиотек и т. Д.).
• _render($atts, $content, $tag) — Возвращает html, который будет отображаться, когда шорткод будет выполнен WordPress. Полезно для изменения поведения по умолчанию с помощью настраиваемого.

Cookbook

Creating a simple shortcode

Этот пример будет проходить через создание shortcode [hr] (горизонтальная линея) в несколько простых шагов:

1. Создайте папку hr в framework-customizations/extensions/shortcodes/shortcodes/.
2. Создайте файл конфигурации внутри этой папки:

<?php if (!defined(‘FW’)) die(‘Forbidden’);

$cfg = array(

   ‘page_builder’ => array(

       ‘title’       => __(‘Horizontal Ruler’, ‘{domain}’),

       ‘description’ => __(‘Creates a \’hr\’ html tag’, ‘{domain}’),

       ‘tab’         => __(‘Demo Elements’, ‘{domain}’),

   ) );

ЗАМЕТКА

На этом этапе шорткод должен появиться на Demo Elements tab layout builder, как показано ниже:

Создайте папку views и файл view внутри него:

<?php if (!defined(‘FW’)) die(‘Forbidden’); ?>

<hr>

shorcode [hr] завершен! Структура каталога shorcode показана ниже:

framework-customizations/

└─extensions/

 └─shortcodes/

   └─shortcodes/

     └─hr/

       ├─config.php

       └─views/

         └─view.php

Создание шорткода с опциями

Creating a shortcode with options

В этом примере будет создан шорткод [my-button].

1. Создайте папку my-button в framework-customizations/extensions/shortcodes/shortcodes/
2. Создайте файл конфигурации внутри этой папки:

$cfg = array(

   ‘page_builder’ => array(

       ‘title’         => __(‘My Button’, ‘{domain}’),

       ‘description’   => __(‘Creates a my-button with choosable label, size and style’, ‘{domain}’),

       ‘tab’           => __(‘Demo Elements’, ‘{domain}’),

   ) );

ЗАМЕТКА

На этом этапе шорткод должен появиться на Demo Elements tab layout builder как показано ниже:

Создайте файл options с options для label, size и style:

<?php if (!defined(‘FW’)) die(‘Forbidden’);

$options = array(

   ‘label’ => array(

       ‘label’   => __(‘Label’, ‘{domain}’),

       ‘desc’    => __(‘The button label’, ‘{domain}’),

       ‘type’    => ‘text’,

       ‘value’   => __(‘Click me!’, ‘{domain}’)

   ),

   ‘size’ => array(

       ‘label’   => __(‘Size’, ‘{domain}’),

       ‘desc’    => __(‘The button size’, ‘{domain}’),

       ‘type’    => ‘select’,

       ‘choices’ => array(

           ‘big’    => __(‘Big’, ‘{domain}’),

           ‘medium’ => __(‘Medium’, ‘{domain}’),

           ‘small’  => __(‘Small’, ‘{domain}’)

       ),

       ‘value’   => ‘medium’

   ),

   ‘style’ => array(

       ‘label’   => __(‘Style’, ‘{domain}’),

       ‘desc’    => __(‘The button style’, ‘{domain}’),

       ‘type’    => ‘select’,

       ‘choices’ => array(

           ‘primary’   => __(‘Primary’, ‘{domain}’),

           ‘secondary’ => __(‘Secondary’, ‘{domain}’)

       ) ) );

Теперь при нажатии на шорткод внутри области холста  layout builder появится всплывающее окно, содержащее options:

Создайте папку views и файл view внутри нее. Используйте переменную $arts, доступную внутри view, она содержит все значения options, которые пользователь выбрал во всплывающем окне:

<?php if (!defined(‘FW’)) die(‘Forbidden’); ?>

<button class=»button button-<?php echo $atts[‘size’]; ?> button-<?php echo $atts[‘style’]; ?>»>

   <?php echo $atts[‘label’]; ?>

</button>

shorcode [button] завершен! Структура каталога короткого кода показана ниже:

framework-customizations/

└─theme/

 └─shortcodes/

   └─button/

     ├─config.php

     ├─options.php

     └─views/

       └─view.php

Создание расширенного шорткода с пользовательским классом

Этот пример будет создан путем создания шорткода [my_table_builder], он будет использовать собственный custom option type:

1. Создайте папку my-table-builder в framework-customizations/extensions/shortcodes/shortcodes/.
2. Создайте файл конфигурации внутри этой папки:

<?php if (!defined(‘FW’)) die(‘Forbidden’);

$cfg = array(

   ‘page_builder’ => array(

       ‘title’       => __(‘Table Builder’, ‘{domain}’),

       ‘description’ => __(‘Creates custom tables’, ‘{domain}’),

       ‘tab’         => __(‘Demo Elements’, ‘{domain}’),

       ‘popup_size’  => ‘large’

   ) );

Для создания шорткода требуется специальный тип option, так как те, которые существуют в структуре, не соответствуют нашим потребностям.

Создайте папку includes в my-table-builder в ней создайте option type

Создайте пользовательский класс для шорткода и переопределите метод _init (), чтобы загрузить файл пользовательского option type.

<?php if (!defined(‘FW’)) die(‘Forbidden’);

class FW_Shortcode_Table_Builder extends FW_Shortcode

{

   /**

    * @internal

    */

   public function _init()

   {

       if (is_admin()) {

           $this->load_option_type();

       }  }

   private function load_option_type()

   {

       require $this->locate_path(‘/includes/fw-option-type-table-builder/class-fw-option-type-table-builder.php’);

   }

   // …

}

Создайте файл options с помощью custom option type:

<?php if (!defined(‘FW’)) die(‘Forbidden’);

$options = array(

   ‘table’ => array(

       ‘type’  => ‘table-builder’,

       ‘label’ => false,

       ‘desc’  => false,

   ) );

Создайте файл view и используйте значение custom option type.

shorcode [table_builder] завершен! Структура каталога короткого кода показана ниже:

framework-customizations/

└─theme/

 └─shortcodes/

   └─table-builder/

     ├─class-fw-shortcode-table-builder.php

     ├─config.php

     ├─options.php

     ├─views/

     │ └─view.php

     └─includes/

       └─fw-option-type-table-builder/

         ├─class-fw-option-type-table-builder.php

         ├─static/

         └─views/

Enqueue shortcode динамический CSS-код в page head

Когда у шорткода есть опции, которые влияют на его css, вы можете заполнить атрибут style = «…» в view.php:

file:: {theme}/framework-customizations/extensions/shortcodes/shortcodes/{name}/views/view.php

<p style=»color: <?php echo esc_attr($atts[‘color’]) ?>;» >Hello, World!</p>

Лучшим решением было бы присвоить шорткоду уникальный id и поставить в очередь head css для этого id.

Добавьте hidden option, который будет генерировать уникальный id.

// file: {theme}/framework-customizations/extensions/shortcodes/shortcodes/{name}/options.php

$options = array(

   ‘id’    => array( ‘type’ => ‘unique’ ),

   ‘color’ => array( ‘type’ => ‘color-picker’ ),

   …

);

Вывести id в view

// file: {theme}/framework-customizations/extensions/shortcodes/shortcodes/{name}/views/view.php

<p id=»shortcode-<?php echo esc_attr($atts[‘id’]); ?>» >Hello, World!</p>

Enqueue the main style

// file: {theme}/framework-customizations/extensions/shortcodes/shortcodes/{name}/static.php

wp_enqueue_style(

   ‘theme-shortcode-{name}’,

   fw_ext(‘shortcodes’)->locate_URI(‘/shortcodes/{name}/static/css/styles.css’)

);

Enqueue the dynamic style

// file: {theme}/framework-customizations/extensions/shortcodes/shortcodes/{name}/static.php

…

if (!function_exists(‘_action_theme_shortcode_{name}_enqueue_dynamic_css’)):

/**

* @internal

* @param array $data

*/

function _action_theme_shortcode_{name}_enqueue_dynamic_css($data) {

   $shortcode = ‘{name}’;

   $atts = shortcode_parse_atts( $data[‘atts_string’] );

   $atts = fw_ext_shortcodes_decode_attr($atts, $shortcode, $data[‘post’]->ID);

   wp_add_inline_style(

       ‘theme-shortcode-‘. $shortcode,

       ‘#shortcode-‘. $atts[‘id’] .’ { ‘.

           ‘color: ‘. $atts[‘color’] .’;’.

       ‘ } ‘

   ); }

add_action(

   ‘fw_ext_shortcodes_enqueue_static:{name}’,

   ‘_action_theme_shortcode_{name}_enqueue_dynamic_css’

);

endif;

Slider

Добавляет модуль sliders на ваш сайт, откуда вы сможете создавать различные встроенные sliders jQuery для вашей домашней страницы и остальных страниц.

Directory Structure

Каталог расширений слайдера имеет следующую структуру:

slider/

├-…

└-extensions/

 ├─{slider-type}/

 ├─…

 └-{slider-type}/

   ├─class-fw-extension-{slider-type}.php # optional

   ├─config.php

   ├─options/ # optional

   │ ├─options.php

   │ └─…

   ├─static/ # optional

   │ ├─css/

   │ │ ├─auto-enqueued-style.css

   │ │ └─…

   │ ├─img/

   │ │ ├─preview.jpg

   │ │ ├─thumb.jpg

   │ │ └─…

   │ └─js/

   │   ├─auto-enqueued-script.js

   │   └─…

   └─views/

     ├─{slider-type}.php

     └─…

Создание простого типа слайдер

Чтобы создать простой тип slider, создайте дочернее расширение. В нашем случае slider является demo-slider, поэтому дочерний каталог расширений будет

framework-customizations/extensions/media/extensions/slider/extensions/demo-slider.

ВАЖНО

Убедитесь, что у вас есть framework-customizations/extensions/media/extensions/slider/extensions/demo-slider/manifest.php со следующим содержимым:

<?php $manifest[‘standalone’] = true;

Configuration

Конфигурационный файл config.php содержит следующие параметры:

/**

* Укажите доступные population methods.

*

* Существует 4 встроенных population methods

*  ‘posts’      Заполнение posts

*  ‘categories’ Заполнение categories

*  ‘tags’       Заполнениеh tags

*  ‘custom’     Заполнение custom content provided by the user

*/

$cfg[‘population_methods’] = array(‘posts’, ‘categories’, ‘tags’, ‘custom’);

/**

* Specify what media types the slider supports.

*

* There are 2 media types available:

*  ‘image’ Supports images

*  ‘video’ Supports videos

*/

$cfg[‘multimedia_types’] = array(‘image’);

Static files

Scripts, styles и изображения хранятся в каталоге static/.

• static/images/ — Каталог для изображений. В этом каталоге есть 2 специальных изображения, которые вы должны создать:
  • thumb.jpg — small image  с frontend preview этого slider type. Отображается на административной стороне в вариантах Slider Type.
  • preview.jpg — Более крупное изображение с frontend preview slider type. Он отображается, когда пользователь наводит thumb.jpg в WordPress admin.
• static/css/ — Каталог для стилей. Они будут автоматически enqueued во frontend.
• static/js/ — Каталог для скриптов. Они будут автоматически enqueued во frontend.

ЗАМЕТКА

Styles и scripts enqueued в алфавитном порядке. Вы не можете устанавливать зависимости для них. Итак, если вы хотите, например. c.js, который должен быть помещен в очередь перед b.js, вы должны переименовать его или префикс его каким-то числом или буквой a-c.js.

demo-slider для работы:

1. Download this script in framework-customizations/extensions/media/extensions/slider/extensions/demo-slider/static/js/unslider-min.js.
2. Download this style in framework-customizations/extensions/media/extensions/slider/extensions/demo-slider/static/css/unslider.css.

Options

При желании, если ваш slider имеет дополнительные options, вы можете создать 2 типа файлов опций в каталоге options/:

• options.php — Дополнительные options, отображаемые после options по умолчанию на странице добавления и редактирования слайдера.
• {population-method}.php — Дополнительные options для конкретного population method, показанные после options по умолчанию на странице редактирования слайдера.

Template

View файл, содержащий шаблон slider для frontend, расположен в views/{slider-type}.php. Вот пример нашего demo-slider:

<?php if (!defined(‘FW’)) die(‘Forbidden’);

/**

* @var array $data

*/

$unique_id = ‘demo-slider-‘. fw_unique_increment();

?>

<?php if (isset($data[‘slides’])): ?>

   <script type=»text/javascript»>

       jQuery(function($){ $(‘#<?php echo $unique_id ?>’).unslider(); });

   </script>

   <div id=»<?php echo $unique_id ?>»>

       <ul>

           <?php foreach ($data[‘slides’] as $slide): ?>

               <li>

                   <?php if ($slide[‘multimedia_type’] === ‘video’) : ?>

                       <?php echo fw_oembed_get($slide[‘src’], $dimensions); ?>

                   <?php else: ?>

                       <img src=»<?php echo fw_resize($slide[‘src’], $dimensions[‘width’], $dimensions[‘height’]); ?>»

                           alt=»<?php echo esc_attr($slide[‘title’]) ?>»

                           width=»<?php echo esc_attr($dimensions[‘width’]); ?>»

                           height=»<?php echo $dimensions[‘height’]; ?>» />

                   <?php endif; ?>

               </li>

           <?php endforeach; ?>

       </ul>

   </div>

<?php endif; ?>

Переменная $data, доступная в view, имеет следующую структуру:

$data = array(

   ‘slides’ => array(

       array(

           ‘title’ => ‘Slide Title’,

           ‘multimedia_type’ => ‘video|image’,

           ‘src’   => ‘Slide src’,

           ‘extra’ => array(

               /**

                * This array can be empty, it depends on population method

                * or if user set extra options for population method

                */

               ‘extra-slide-key’ => ‘Extra slide value’,

               …

           )

       ),

       …

   ),

   ‘settings’ => array(

       ‘title’             => ‘Slider Title’,

       ‘slider_type’       => ‘{slider-type}’,

       ‘population_method’ => ‘posts|categories|tags|custom’,

       ‘post_id’           => 10, // ID of the slider (slider is a custom post)

       ‘extra’ => array(

           /**

            * This array can be empty.

            * Or will have something in it

            * if user set custom options for slider in options/options.php

            */

           ‘extra-slider-key’ => ‘Extra slider values’,

           …

       )

   )

);

Create advanced slider type

Если вы хотите создать усовершенствованный слайдер с вашей собственной дополнительной логикой, вы должны создать файл класса с именем class-fw-extension-{slider-type}.php внутри каталога типа slider.

В этом случае slider является demo-slider, поэтому файл класса будет находиться в framework-customizations/extensions/media/extensions/slider/extensions/bx-slider/class-fw-extension-demo-slider.php и будет Содержат:

<?php if (!defined(‘FW’)) die(‘Forbidden’);

class FW_Extension_Demo_Slider extends FW_Slider {

   /** @internal */

   public function _init() {}

}

Затем вы можете взглянуть на методы FW_Slider, чтобы узнать, что они делают, и решить, какой из них вы перезапишете.

Frontend render

Существует два способа отображения slider во frontend:

1. Builder shortcode  — основное расширение слайдера автоматически создает shortcode [slider], который доступен в builder на Media Elements tab.
2. Render from code — расширение slider имеет открытый метод, который можно использовать для визуализации slider в frontend.

fw()->extensions->get(‘slider’)->render_slider($slider_post_id, array(

   ‘width’  => 300,

   ‘height’ => 200

));

Mega Menu

Расширение Mega Menu дает конечному пользователю возможность создавать расширенные навигационные меню.

ВАЖНО

Эти расширения не отображаются по умолчанию на странице Unyson Extensions. Чтобы оно появилось в этом списке, вам необходимо:

• Добавить имя расширения в манифест темы

$manifest[‘supported_extensions’] = array(

   ‘megamenu’ => array(),

);

• Или установите константу WP_DEBUG равным true

Обзор

Когда он включен, он добавляет в меню:

1. Возможность установки icon для любого пункта меню
2. Возможность группировать несколько элементов меню в столбцы, размещенные в строках

HTML / CSS

Расширение добавляет следующие классы css:

• .menu-item-has-icon
• .menu-item-has-mega-menu
• .sub-menu-has-icons
• .mega-menu
• .mega-menu-row
• .mega-menu-col

Разметка будет следующей:

li.menu-item-has-mega-menu

   div.mega-menu

       ul.mega-menu-row

           li.mega-menu-col

           li.mega-menu-col

           li.mega-menu-col

       ul.mega-menu-row

           li.mega-menu-col

           li.mega-menu-col

           li.mega-menu-col

ЗАМЕТКА

Все остальные стандартные классы WordPress и HTML остаются неизменными.

Пример разметки

<ul>

   <li class=»menu-item-has-mega-menu menu-item-has-icon»>

       <a class=»fa fa-exclamation» href=»#»>Mega Menu 1</a>

       <div class=»mega-menu»>

           <ul class=»sub-menu mega-menu-row»>

               <li class=»mega-menu-col»>

                   <a href=»#»>Just Links</a>

                   <ul class=»sub-menu»>

                       <li>

                           <a href=»#»>Menu Item 1</a>

                       </li>

                       …

                   </ul>

               </li>

               <li class=»mega-menu-col»>

                   <a href=»#»>Links with Icons</a>

                   <ul class=»sub-menu sub-menu-has-icons»>

                       <li class=»menu-item-has-icon»>

                           <a class=»fa fa-inbox» href=»#»>Menu Item 1</a>

                           <p>Praesent quis enim euismod, fringilla quam vitae, consectetur quam.</p>

                       </li>

                       <li class=»menu-item-has-icon»>

                           <a class=»fa fa-wrench» href=»#»>Menu Item 2</a>

                       </li>

                       …

                   </ul>

               </li>

           </ul>

       </div>

   </li>

   <li class=»menu-item-has-icon»>

       <a class=»fa fa-info-circle» href=»#»>Home</a>

       <ul class=»sub-menu sub-menu-has-icons»>

           <li class=»menu-item-has-icon»>

               <a class=»fa fa-info-circle» href=»#»>Page 2</a>

           </li>

           <li class=»menu-item-has-icon»>

               <a class=»fa fa-info-circle» href=»#»>Page 3</a>

               <ul class=»sub-menu sub-menu-has-icons»>

                   <li class=»menu-item-has-icon»>

                       <a class=»fa fa-key» href=»#»>Page 4</a>

                   </li>

                   <li class=»menu-item-has-icon»>

                       <a class=»fa fa-briefcase» href=»#»>Page 5</a>

                   </li>

                   <li class=»menu-item-has-icon»>

                       <a class=»fa fa-gavel» href=»#»>Page 6</a>

                       <ul class=»sub-menu sub-menu-has-icons»>

                           <li class=»menu-item-has-icon»>

                               <a class=»fa fa-globe» href=»#»>Page 7</a>

                           </li>

                           <li>

                               <a href=»#»>Page 8</a>

                           </li>

                       </ul>

                   </li>

               </ul>

           </li>

       </ul>

   </li>

</ul>

Изменение Item / Icon разметки

По умолчанию icon добавляется в

<a href=»…» class=»fa fa-…»>Menu item</a>

Если вы хотите изменить его на

<a href=»…»><i class=»fa fa-…»></i> Menu item</a>

перезаписать этот view в вашей теме

<?php if (!defined(‘FW’)) die(‘Forbidden’);

// file: {theme}/framework-customizations/extensions/megamenu/views/item-link.php

/**

* @var WP_Post $item

* @var string $title

* @var array $attributes

* @var object $args

* @var int $depth

*/

{

   $icon_html = »;

   if (

       fw()->extensions->get(‘megamenu’)->show_icon()

       &&

       ($icon = fw_ext_mega_menu_get_meta($item, ‘icon’))

   ) {

       $icon_html = ‘<i class=»‘. $icon .'»></i> ‘;

   } }

// Make a menu WordPress way

echo $args->before;

echo fw_html_tag(‘a’, $attributes, $args->link_before . $icon_html . $title . $args->link_after);

echo $args->after;

Перезаписать Walker

Создание класса walker

// file:: {theme}/framework-customizations/extensions/megamenu/includes/class-fw-ext-mega-menu-custom-walker.php

class FW_Ext_Mega_Menu_Custom_Walker extends FW_Ext_Mega_Menu_Walker

{

    function start_lvl( &$output, $depth = 0, $args = array(), $class = ‘sub-menu’ ) {

        fw_print(‘Hello’);

        return parent::start_lvl($output, $depth, $args, $class);

    }

    // other customizations …

}

Перезаписать default walker с помощью фильтра

// file: {theme}/framework-customizations/extensions/megamenu/hooks.php

// replace default walker

{

   remove_filter(‘wp_nav_menu_args’, ‘_filter_fw_ext_mega_menu_wp_nav_menu_args’);

   /** @internal */

   function _filter_theme_ext_mega_menu_wp_nav_menu_args($args) {

       $args[‘walker’] = new FW_Ext_Mega_Menu_Custom_Walker();

       return $args;

   }

   add_filter(‘wp_nav_menu_args’, ‘_filter_theme_ext_mega_menu_wp_nav_menu_args’);

}

Item Custom Options

1. Перезапишите эти options в своей теме.
2. Получите сохраненное значение db (оно имеет ту же структуру, что и значение options типа multi-picker)
3. Измените размеры всплывающих окон, перезаписав эти ключи конфигурации.

Sidebars

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

Configuration

<?php if (!defined(‘FW’)) die(‘Forbidden’);

// file: framework-customizations/extensions/sidebars/config.php

$cfg = array(

   ‘sidebar_positions’ => array(

       ‘position-id’ => array(

           /**

            * Image from: framework-customizations/extensions/sidebars/images/

            * (required)

            */

           ‘icon_url’ => ‘picture.png’,

           /**

            * Number of sidebars on page.

            * The maximum number is 4.

            * (optional)

            * (default 0)

            */

           ‘sidebars_number’ => 0

       ),

       // other positions …

   ),

   /**

    * Массив, который будет передан register_sidebar ($ args)

     * Должно быть без ‘id’ и ‘name’.

     * Будет использоваться для всех динамических боковых панелей.

    */

   ‘dynamic_sidebar_args’ => array(

       ‘before_widget’ => ‘<div id=»%1$s» class=»widget %2$s»>’,

       ‘after_widget’  => ‘</div>’,

       ‘before_title’  => ‘<h3>’,

       ‘after_title’   => ‘</h3>’,

   ),

   /**

    * Render sidebar metabox в post types..

* По умолчанию установлено значение false.

* Если вы хотите отображать боковую панель в post types., установите для нее значение true.

    */

    ‘show_in_post_types’ => false

);

Helpers

• fw_ext_sidebars_show($color) — Отображение боковой панели во внешнем интерфейсе. Параметр $color является цветом боковой панели, выбранной из админ-панели WordPress, и может быть: blue, yellow, green или red.
• fw_ext_sidebars_get_current_position() — Может быть вызван во внешнем интерфейсе, чтобы узнать имя текущей позиции. Он возвращает position-id из $cfg[‘sidebar_positions’] или null.
• fw_ext_sidebars_get_current_preset() — Может быть вызван во внешнем интерфейсе, чтобы узнать настройки боковой панели для текущего шаблона страницы.

// file: sidebar-content.php

<?php if (!defined(‘FW’)) die(‘Forbidden’);

$current_position = fw_ext_sidebars_current_position_get();

if ($current_position !== ‘position-id’) {

   echo fw_ext_sidebars_show(‘green’);

}

if ($current_position === ‘position-id-2’) {

   echo fw_ext_sidebars_show(‘blue’);

}

if ($current_position === ‘position-id-3’) {

   echo fw_ext_sidebars_show(‘yellow’);

}

Filters

• fw_ext_sidebars_post_types — Используйте этот фильтр для изменения / удаления post types которые используются в расширении.

/** @internal */
function _filter_remove_post_type_from_sidebars($post_types_list) {
   unset($post_types_list[‘post_type_name’]);

   return $post_types_list;
}
add_filter(‘fw_ext_sidebars_get_post_types’, ‘_filter_remove_post_type_from_sidebars’ );

• fw_ext_sidebars_taxonomies — Использовать этот фильтр для изменения / удаления таксономий, используемых в расширении.

/** @internal */
function _filter_remove_taxonomy_from_sidebars($taxonomy_list) {
   unset($taxonomy_list[‘taxonomy_name’]);
   return $taxonomy_list;
}
add_filter(‘fw_ext_sidebars_get_taxonomies’, ‘_filter_remove_taxonomy_from_sidebars’);

• fw_ext_sidebars_conditional_tags — Используйте этот фильтр для изменения / удаления / добавления условных тегов, которые используются в расширении.

/** @internal */
function _filter_fw_ext_sidebars_add_conditional_tag($conditional_tags) {
   $conditional_tags[‘is_archive_page_slug’] = array(
       ‘order_option’ => 2, // (optional: default is 1) position in the ‘Others’ lists in backend
       ‘check_priority’ => ‘last’, // (optional: default is last, can be changed to ‘first’) use it to change priority checking conditional tag
       ‘name’ => __(‘Portfolio archive’, ‘{domain}’), // conditional tag title
       ‘conditional_tag’ => array(
           ‘callback’ => ‘is_post_type_archive’, // existing callback
           ‘params’ => array(‘fw-portfolio’) //parameters for callback
       ) );

   return $conditional_tags;
}
add_filter(‘fw_ext_sidebars_conditional_tags’, ‘_filter_fw_ext_sidebars_add_conditional_tag’ );

Portfolio

Расширение Портфолио позволяет вам создать раздел Портфолио на своем сайте.

Configuration

В файле config.php вы можете установить размеры портфолио Gallery и Featured Image.

$cfg[‘image_sizes’] = array(

   ‘featured-image’ => array(

       ‘width’  => 227,

       ‘height’ => 142,

       ‘crop’   => true

   ),

   ‘gallery-image’  => array(

       ‘width’  => 474,

       ‘height’ => 241,

       ‘crop’   => true

   ) );

Также определите, будет ли портфолио custom post поддерживать галерею или нет.

$cfg[‘has-gallery’] = true;

Helpers

• fw_ext_portfolio_get_gallery_images( $post_id ) —  использовать эту функцию, чтобы вернуть все изображения галереи проекта.

<?php if ( have_posts() ) : ?>

   <?php while ( have_posts() ) : ?>

       <?php $gallery = fw_ext_portfolio_get_gallery_images(); ?>

       <ul class=»gallery»>

           <?php foreach( $gallery as $image ) : ?>

               <li>

                   <a href=»<?php echo get_permalink($image[‘attachment_id’])?>»>

                       <img src=»<?php echo $image[‘url’] ?>» alt=»»/>

                   </a>

               </li>

           <?php endforeach ?>

       </ul>

   <?php endwhile ?>

<?php endif ?>

ЗАМЕТКА

Если вы находитесь в The Loop, глобальная $post будет использоваться для $post_id

Hooks

• fw_ext_portfolio_post_slug — portfolio custom post slug
• /**
  * @internal
  */
  function _filter_custom_portfolio_post_slug($slug) {
     return ‘work’;
  }
  add_filter(‘fw_ext_portfolio_post_slug’, ‘_filter_custom_portfolio_post_slug’);
• fw_ext_portfolio_taxonomy_slug — portfolio taxonomy slug
• /**
  * @internal
  */
  function _filter_custom_portfolio_tax_slug($slug) {
     return ‘works’;
  }
  add_filter(‘fw_ext_portfolio_taxonomy_slug’, ‘_filter_custom_portfolio_tax_slug’);
• fw_ext_projects_post_type_name — portfolio custom post labels (plural and singular)
• /**
  * @internal
  */
  function _filter_portfolio_labels($labels) {
     $labels = array(
         ‘singular’ => __(‘Custom Project’, ‘{domain}’),
         ‘plural’   => __(‘Custom Projects’, ‘{domain}’),
     );
  
     return $labels;
  }
  add_filter(‘fw_ext_projects_post_type_name’, ‘_filter_portfolio_labels’);
• fw_ext_portfolio_category_name — portfolio taxonomy labels (plural and singular)
• /**
  * @internal
  */
  function portfolio_tax_labels_names( $labels ) {
     $labels = array(
         ‘singular’ => __( ‘Custom Category’, ‘{domain}’ ),
         ‘plural’   => __( ‘Custom Categories’, ‘{domain}’ ),
     );
  
     return $labels;
  }
  add_filter( ‘fw_ext_portfolio_category_name’, ‘portfolio_tax_labels_names’ );

Views

Views

Шаблоны находятся в каталоге views /. Вот список шаблонов, которые вы можете настроить:

• single.php — Шаблон портфолио для одного post. По умолчанию используется single.php из корневого каталога темы, вы можете перезаписать его, создав framework-customizations/extensions/portfolio/views/single.php.
• taxonomy.php — Portfolio category template. По умолчанию используется taxonomy.php из корневого каталога темы, вы можете перезаписать его, создавframework-customizations/extensions/portfolio/views/taxonomy.php.
• content.php — Default portfolio single page template content. It is loaded if the framework-customizations/extensions/portfolio/views/single.php doesn’t exist and is used single.php from the theme root directory. The content of this view is rendered using worpdress the_content filter, when the course single page is loaded.

Backup & Demo Content

Это расширение позволяет создавать автоматическое расписание резервного копирования, импортировать демо-контент или даже создавать архив демо-контента для целей миграции.

Demo Content Install

Установка demo контента может быть очень полезной для ваших клиентов. После установки темы им не потребуется настраивать и создавать контент с нуля, но вместо этого они могут установить demo контент, который вы создали. Их сайт будет выглядеть точно так же, как ваша демонстрационная страница темы, и они могут просто начать изменять и адаптировать существующий контент.

Create Demos

Чтобы создать архив демо-контента, просто создайте резервную копию содержимого.

СОВЕТ

Перед созданием Content Backup для Demo Install используйте плагин для remove post revisions.

Следующий шаг — предоставить пользователям возможность просмотреть и выбрать demo контент для установки. Эта страница создается администратором WordPress в меню Tools > Demo Content Install если в теме есть хотя бы один demo контент. Архивы demo контента могут быть помещены в тему или могут быть загружены с удаленного сервера.

Demos bundled in theme

1. Create Content Backup
2. Extract the zip в {theme}/demo-content/{demo-name}/
3. Create {theme}/demo-content/{demo-name}/manifest.php Со следующим содержанием:

<?php if (!defined(‘FW’)) die(‘Forbidden’);

/**

* @var string $uri Demo directory url

*/

$manifest = array();

$manifest[‘title’] = __(‘Awesome Demo’, ‘{domain}’);

$manifest[‘screenshot’] = $uri . ‘/screenshot.png’;

$manifest[‘preview_link’] = ‘https://your-site.com/demo/awesome’;

1. Перейдите в меню Tools > Demo Content Install в администраторе WordPress. demo(s) должны быть перечислены на этой странице.

Demos on remote server

1. Create Content Backup
2. Загрузите zip на свой сервер (в любом каталоге, который вы хотите, например, your-site.com/demo/)
3. Загрузите этот скрипт загрузки, скажем, в тот же каталог your-site.com/demo/
4. В том же каталоге со script загрузки создайте файл config.php и добавьте свои демонстрации в следующем формате:

//   ‘demo-id’ => ‘/path/to/demo.zip’,

‘awesome-demo’ => dirname(__FILE__) .’/awesome-demo.zip’,

1. Зарегистрируйте demo(s) в вашей теме. Добавить в {theme}/inc/hooks.php

/**

* @param FW_Ext_Backups_Demo[] $demos

* @return FW_Ext_Backups_Demo[]

*/

function _filter_theme_fw_ext_backups_demos($demos) {

   $demos_array = array(

       ‘your-demo-id’ => array(

           ‘title’ => __(‘Demo Title’, ‘{domain}’),

           ‘screenshot’ => ‘https://your-site.com/…/screnshot.png’,

           ‘preview_link’ => ‘https://your-site.com/demo/your-demo-id’,

       ),

       // …

   );

   $download_url = ‘https://your-site.com/path/to/download-script/’;

   foreach ($demos_array as $id => $data) {

       $demo = new FW_Ext_Backups_Demo($id, ‘piecemeal’, array(

           ‘url’ => $download_url,

           ‘file_id’ => $id,

       ));

       $demo->set_title($data[‘title’]);

       $demo->set_screenshot($data[‘screenshot’]);

       $demo->set_preview_link($data[‘preview_link’]);

       $demos[ $demo->get_id() ] = $demo;

       unset($demo);

   }

   return $demos;

}

add_filter(‘fw:ext:backups-demo:demos’, ‘_filter_theme_fw_ext_backups_demos’);

1. Перейдите в меню Tools > Demo Content Install в администраторе WordPress. demo(s) должны быть перечислены на этой странице.

Hooks

• Фильтр для исключения wp options  при экспорте базы данных

function _filter_theme_fw_ext_backups_db_export_exclude_option($exclude, $option_name, $is_full_backup) {

   if (!$is_full_backup) {

       if ($option_name === ‘your-private-option’) {

           return true;

       } }

   return $exclude;

}

add_filter(

   ‘fw_ext_backups_db_export_exclude_option’,

   ‘_filter_theme_fw_ext_backups_db_export_exclude_option’,

   10, 3

);

• Фильтр для исключения options wp при восстановлении базы данных

ЗАМЕТКА

Текущие options (если они есть) будут уничтожены. Чтобы сохранить текущие options, используйте следующий фильтр.

function _filter_theme_fw_ext_backups_db_restore_exclude_option($exclude, $option_name, $is_full) {

   if (!$is_full) {

       if ($option_name === ‘your-special-option’) {

           return true;

       } }

   return $exclude;

}

add_filter(

   ‘fw_ext_backups_db_restore_exclude_option’,

   ‘_filter_theme_fw_ext_backups_db_restore_exclude_option’,

   10, 3

);

Фильтр для сохранения текущих значений options wp при восстановлении базы данных

function _filter_fw_ext_backups_db_restore_keep_options($options, $is_full) {

   if (!$is_full) {

       $options[ ‘your-special-option’ ] = true;

   }

   return $options;

}

add_filter(

   ‘fw_ext_backups_db_restore_keep_options’,

   ‘_filter_fw_ext_backups_db_restore_keep_options’,

   10, 2

);

Фильтр для регистрации пользовательского каталога, который содержит demos темы (например, плагин в комплекте с темой)

function _filter_theme_fw_ext_backups_demo_dirs($dirs) {

   $dirs[‘/path/to/dir-with-theme-demos’]

   = ‘http://…/uri/to/dir-with-theme-demos’;

   return $dirs;

}

add_filter(‘fw_ext_backups_demo_dirs’, ‘_filter_theme_fw_ext_backups_demo_dirs’);

Forms

Это расширение добавляет возможность создания форм (например, контактную форму). Используйте конструктор форм перетаскивания для создания любой формы, в которой вы захотите или в которой будете нуждаться.

Customize Views

 

• Form Fields Frontend form fields views можно настроить в framework-customizations/extensions/forms/form-builder/items/{item-type}/views/view.php Все типы элементов встроенного конструктора форм можно найти в framework/extensions/forms/includes/option-types/form-builder/items/ Например, Для перезаписи представления для текста типа элемента (который находится в framework/extensions/forms/includes/option-types/form-builder/items/text) создайте framework-customizations/extensions/forms/form-builder/items/text/views/view.php

• Form Fields Container view для контейнера, который обертывает поля формы, можно настроить в framework-customizations/extensions/forms/form-builder/views/items.php.

 

Contact Form Views

• Form Content — Внутреннее содержимое <form> можно настроить в framework-customizations/extensions/forms/extensions/contact-forms/views/form.php.
• Email Content — Содержимое электронного письма, которое отправляется после того, как пользователь отправил контактную форму, можно настроить в framework-customizations/extensions/forms/extensions/contact-forms/views/email.php.

Create Form Builder Item Type

Во-первых, убедитесь, что вы понимаете, как работает базаовый  builder.

Расширение Forms имеет встроенный тип параметра form-builder (который можно найти в каталоге framework-customizations / extensions / forms / form-builder /), который используется вложенном расширении контактных форм. Чтобы создать тип элемента для form-builder, вам нужно посмотреть в его методе item_type_is_valid (), чтобы увидеть, какой класс вы должны расширить, чтобы быть принятым builder.

class FW_Option_Type_Form_Builder

{

   …

 

   /**

    * @param FW_Option_Type_Builder_Item $item_type_instance

    * @return bool

    */

   protected function item_type_is_valid($item_type_instance)

   {

       return is_subclass_of($item_type_instance, ‘FW_Option_Type_Form_Builder_Item’);

   } }

Поэтому вам нужно расширить класс FW_Option_Type_Form_Builder_Item и зарегистрировать его как тип элемента builder.

Ниже объясняется, как создать простой ввод радио Yes/No

Создайте каталог framework-customizations/extensions/forms/includes/builder-items/yes-no

Создайте framework-customizations/extensions/forms/includes/builder-items/yes-no/class-fw-option-type-form-builder-item-yes-no.php со следующим содержимым:

http://manual.unyson.io/en/latest/extension/forms/index.html#create-form-builder-item-type

Breadcrumbs

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

Helpers

• fw_ext_get_breadcrumbs($separator = ‘>’) — Используйте эту функцию, чтобы вернуть хлебные крошки HTML.

<h3>My page</h3>
<?php echo fw_ext_get_breadcrumbs( ‘>’ ) ?>
<!— Home >> Books >> PHP For Beginners —>

ЗАМЕТКА

Эта функция должна использоваться только в области front-end после WordPress wp action.

• fw_ext_breadcrumbs($separator = ‘>’) — Используйте эту функцию для обработки breadcrumbs в шаблоне.

<h3>My page</h3>
<?php fw_ext_breadcrumbs( ‘>’ ) ?>
<!— Home >> Books >> PHP For Beginners —>

ЗАМЕТКА

Эта функция должна использоваться только в области front-end после WordPress wp action

View

• breadcrumbs.php — шаблон, в котором вы можете определить, как будут отображаться панировочные breadcrumbs на странице. Вы можете перезаписать собственное представление по умолчанию, создав файл breadcrumbs.php в каталоге представлений расширения в дочерней теме.

Filters

• fw_ext_breadcrumbs_build — В некоторых случаях вы хотите изменить элементы панировочных breadcrumbs, которые будут отображаться, или определенный элемент. Этот фильтр позволяет вам изменить массив элементов панировки перед его визуализацией.

/**

* @internal

*/

function _filter_my_custom_breadcrumbs_items( $items ) {

   // do some changes …

   return $items;

}

add_filter( ‘fw_ext_breadcrumbs_build’, ‘_filter_my_custom_breadcrumbs_items’ );

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

/**

* @internal

*/

function _filter_my_custom_breadcrumbs_search_word( $word ) {

   return strtoupper( $word );

}

add_filter( ‘fw_ext_breadcrumbs_search_query’, ‘_filter_my_custom_breadcrumbs_search_word’ );

ЗАМЕТКА

Этот фильтр не влияет на поисковый запрос

• Date format filters
  • fw_ext_breadcrumbs_date_day_format — date format for day archives (d F Y)
  • fw_ext_breadcrumbs_date_month_format — date format for day archives (F Y)
  • fw_ext_breadcrumbs_date_year_format — date format for day archives (Y)

Эти 3 фильтра используются для изменения формата даты в архивах даты

/**

* @internal

*/

function _filter_my_custom_breadcrumbs_archive_date_format( $date_format ) {

   return ‘d, F Y’;

}

add_filter( ‘fw_ext_breadcrumbs_date_day_format’, ‘_filter_my_custom_breadcrumbs_archive_date_format’ );

SEO

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

Option placeholders

Чтобы совместно использовать все дополнительные расширения, расширение SEO создает специальные разделы options в:

• Post Options — Раздел (box или tab) с именем SEO. Если options post имеют General box с идентификатором general, секция seo будет отображаться в качестве дополнительной вкладки для этого box, в других случаях она создает новое box.
• Term Options — Специальный раздел в Term Options.

Options Filters

Все фильтры имеют одинаковую функциональность, единственное отличие заключается в том, что они добавляют параметры.

• fw_ext_seo_settings_options — Используйте, чтобы добавить свою собственную вкладку в разделе Settings Options SEO tab.
• fw_ext_seo_general_settings — Используйте, чтобы добавить свой собственный блок в настройках  Settings Options SEO > General tab
• fw_ext_seo_general_setting_options — Использовать, чтобы добавить свои собственные варианты в Settings Options SEO > General > General Settings box.
• fw_ext_seo_post_type_options — add options в post options SEO box.
• fw_ext_seo_taxonomy_options — add options в term options SEO section.

Все фильтры имеют одинаковый массив параметров $options.

/**

* @internal

*/

function _filter_set_my_framework_titles_metas_tab( $options ) {

   $options[‘my_id_tab’] = array(

       ‘title’   => __( ‘My Options’, ‘{domain}’ ),

       ‘type’    => ‘tab’,

       ‘options’ => array(

           ‘my_id_title’ => array(

               ‘label’ => __( ‘Title’, ‘{domain}’ ),

               ‘desc’  => __( ‘Set title’, ‘{domain}’ ),

               ‘type’  => ‘text’,

               ‘value’ => »

           ),

           ‘my_id_description’ => array(

               ‘label’ => __( ‘Description’, ‘{domain}’ ),

               ‘desc’  => __( ‘Set description’, ‘{domain}’ ),

               ‘type’  => ‘textarea’,

               ‘value’ => »

           ),

       )

   );

   return $options;

}

add_filter( ‘fw_ext_seo_settings_options’, ‘_filter_set_my_framework_titles_metas_tab’ );

Tags

Расширение SEO имеет список встроенных тегов SEO, но в некоторых случаях вы захотите добавить свой собственный. Чтобы добавить новый тег SEO, вы должны использовать фильтр fw_ext_seo_init_tags. Это формат для тега SEO:

‘tag_name’ => array(

   ‘desc’  => __( ‘My new tag’, ‘{domain}’ ),

   ‘value’ => »,

)

Параметр tag_name должен быть уникальным. Этот тег будет доступен как %%tag_name %%.

Add new tag

/**

* @internal

*/

function _filter_add_my_seo_tag($tags) {

   $tags[‘mytag’] = array(

       ‘desc’  => __( ‘My new tag’, ‘{domain}’ ),

       ‘value’ => »,

   );

   return $tags;

}

add_filter( ‘fw_ext_seo_init_tags’, ‘_filter_add_my_seo_tag’ );

Теги seo создаются при инициализации расширения, в некоторых случаях вы не можете узнать значение тега в текущем состоянии, например %% title %% tag. Поэтому в фильтре fw_ext_seo_init_tags вы можете добавить тег без значения и определить значение после определения текущего местоположения страницы с помощью фильтра fw_ext_seo_update_tags.

Update tag value

/**

* @internal

*/

function _filter_update_my_seo_tag( $tags ) {

   if ( isset($tags[‘mytag’]) && is_front_page() ) {

       $tags[‘mytag’][‘value’] = __(‘Home’, ‘{domain}’);

   }

   return $tags;

}

add_filter( ‘fw_ext_seo_update_tags’, ‘_filter_update_my_seo_tag’ );

Actions

fw_ext_seo_init_location — инициализируется действием WordPress wp и определяет текущее местоположение страницы, используемое для обновления тегов SEO. Посылает в качестве первого параметра $ location массив с информацией о текущем местоположении страницы.

Helpers

fw_ext_seo_parse_meta_tags($text) — Анализирует строку и заменяет все теги SEO своими значениями.

Events

Это расширение добавляет в вашу тему полноценный модуль Events. Он поставляется со встроенными страницами, которые содержат календарь, в который могут добавляться события.

Hooks

• fw_theme_ext_events_after_content — Добавление некоторого html после content

/** @internal */

function _action_theme_fw_ext_events_render_html($post) {

   if (!empty($post) and $post === fw()->extensions->get( ‘events’ )->get_post_type_name() ) {

       echo ‘<div>’. __(‘Hello world’, ‘{domain}’) .'</div>’;

   }

}

add_action(‘fw_theme_ext_events_after_content’, ‘_action_theme_fw_ext_events_render_html’);

• fw_ext_events_post_slug — event custom post slug

/** @internal */

function _filter_theme_fw_ext_events_custom_events_post_slug($slug) {

   return ‘event’;

}

add_filter(‘fw_ext_events_post_slug’, ‘_filter_theme_fw_ext_events_custom_events_post_slug’);

• fw_ext_events_taxonomy_slug — event taxonomy slug

/** @internal */

function _filter_theme_fw_ext_events_custom_events_taxonomy_slug($slug) {

   return ‘events’;

}

add_filter(‘fw_ext_events_taxonomy_slug’, ‘_filter_theme_fw_ext_events_custom_events_taxonomy_slug’);

 

• fw_ext_events_post_type_name — пользовательские post labels  (множественное и единственное)

 

/** @internal */

function _filter_theme_fw_ext_events_event_labels($labels) {

   $labels = array(

       ‘singular’ => __(‘Custom Event’, ‘{domain}’),

       ‘plural’   => __(‘Custom Events’, ‘{domain}’),

   );

   return $labels;

}

add_filter(‘fw_ext_events_post_type_name’, ‘_filter_theme_fw_ext_events_event_labels’);

• fw_ext_events_category_name — event taxonomy labels (plural and singular)

/** @internal */

function _filter_theme_fw_ext_events_event_tax_labels_names($labels) {

   $labels = array(

       ‘singular’ => __( ‘Custom Category’, ‘{domain}’ ),

       ‘plural’   => __( ‘Custom Categories’, ‘{domain}’ ),

   );

   return $labels;

}

add_filter( ‘fw_ext_events_category_name’, ‘_filter_theme_fw_ext_events_event_tax_labels_names’ );

• fw_ext_events_post_options — custom options for event

/** @internal */

function _filter_theme_fw_ext_events_custom_options($options) {

   return array_merge($options, array(

       ‘events_tab_1’ => array(

           ‘title’   => __(‘Test title’, ‘{domain}’),

           ‘type’    => ‘tab’,

           ‘options’ => array(

               ‘demo_text_id’ => array(

                   ‘type’  => ‘text’,

                   ‘label’ => __(‘Demo Text label’, ‘{domain}’),

                   ‘desc’  => __(‘Demo text description’, ‘{domain}’),

               )

           )

      )

   ));

}

add_filter(‘fw_ext_events_post_options’, ‘_filter_theme_fw_ext_events_custom_options’);

Views

views

Шаблоны находятся в каталоге views/. Вот список шаблонов, которые вы можете настроить:

• single.php — Шаблон одиночной публикации событий. По умолчанию используется single.php из корневого каталога темы, вы можете перезаписать его, создав framework-customizations/extensions/events/views/single.php.
• taxonomy.php — Шаблон категории событий. По умолчанию используется taxonomy.php из корневого каталога темы, вы можете перезаписать его, создав framework-customizations/extensions/events/views/taxonomy.php.
• content.php — События по умолчанию для отдельных страниц. Он загружается, если framework-customizations/extensions/events/views/single.php Не существует и используется single.php из корневого каталога темы. Содержимое этого представления визуализируется с использованием фильтра worpdress the_content когда загружается одностраничная страница события.

Events Tags

Способ обработки тегов поиска событий.

Внешний вид визуализации

Существует несколько способов отображения события во frontend:

Расширение events-tags  автоматически подключается к шорткодам [calendar] и [map], которые доступны в построителе страниц Drag & Drop на вкладке Content Elements.

Также он может быть отображен из кода — шорткод [map] имеет открытый метод render_custom, который вы можете использовать для визуализации карты в frontend.

$shortcode_map = fw()->extensions->get(‘shortcodes’)->get_shortcode(‘map’);

if (!empty($shortcode_map)) {

   echo $shortcode_map->render_custom(

       array(

           array(

               ‘title’ => __(‘Some Title’, ‘{domain}’),

               ‘url’ => ‘https://example.com’,

               ‘description’ => __(‘Some description’, ‘{domain}’),

               ‘thumb’ => array(‘attachment_id’ => get_post_thumbnail_id( $post->ID ) ),

               ‘location’ => array(

                   ‘coordinates’ => array(

                       ‘lat’ => ‘-34’,

                       ‘lng’ => ‘150’

                   ) ) ) ) ); }

Social

Это расширение объединяет в одном месте все параметры, необходимые для работы с социальными сетями.

Filters

Чтобы иметь возможность вставить настройки на этой странице, были созданы следующие фильтры:

• fw_ext_social_tabs — Предлагает возможность добавления вкладок.
• fw_ext_social_boxes_from_general_tab — Позволяет добавлять ящики с опциями на общей вкладке.
• fw_ext_social_main_box_from_general_tab — Позволяет добавлять options на general tab.

Twitter

Группируйте настройки для работы с социальной сетью Twitter и включает библиотеку для доступа к API для этой социальной сети.

Filters

• fw_ext_social_twitter_boxes_options — Предоставляет возможность добавлять boxes и options на вкладке Twitter.
• fw_ext_social_twitter_general_box_options — Позволяет добавлять options в главном box вкладки Twitter.

Helpers

• fw_ext_social_twitter_get_connection — Возвращает экземпляр of TwitterOAuth (see: https://github.com/abraham/twitteroauth), На основе вставленных ключей (требуется заполнить следующие поля: потребительский ключ, потребительский секрет, токен доступа и секрет секретного доступа).

Facebook

Это параметры группировки дополнительных расширений для социальной сети Facebook и возможность работать с API-интерфейсом Facebook Graph.

Filters

• fw_ext_social_facebook_boxes_options — Предоставляет возможность добавлять boxes и options на вкладке facebook.
• fw_ext_social_facebook_general_box_options — Позволяет добавлять options в главном box вкладки facebook.

Helpers

• fw_ext_social_facebook_graph_api_explorer — Позволяет получить доступ к API Графика Facebook.

Builder

Это расширение предоставляет функциональность базового builder, которую вы можете расширить для создания новых builders.

Feedback

Расширение добавляет пользователям возможность оставлять отзывы о post (продукт, статья и т. Д.). Эта система может быть активирована для некоторых типов post и заменяет систему комментариев по умолчанию.

Learning

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

Config

Views

Helpers

Filters

FW_Extension_Learning class

Translation

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

Helpers

• fw_ext_translation_get_frontend_active_language() — Frontend active language.
• fw_ext_translation_get_backend_active_language() — Backend active language.

Filters

fw_ext_translation_change_render_language_switcher — Измените view переключателя языков.

add_action( ‘fw_ext_translation_change_render_language_switcher’, function ( $html, $frontend_urls ) {

   $html = »;

   foreach ( $frontend_urls as $lang_code => $url ) {

       $html .= ‘<a href=»‘ . esc_attr($url) . ‘»>’ . $lang_code . ‘</a>’;

   }

   return $html;

}, 10, 2 );

WordPress Shortcodes

Это расширение дает возможность вставлять и отображать корректные shortcodes Unyson внутри редактора WordPress.

Понимание цели этого расширения

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

Структура shortcode Unyson

Сначала вы должны знать, что shortcode Unyson состоит из трех частей, которые заставляют его выглядеть так, как он:

1. HTML. Обычно он находится в view.php
2. Все статическое. Находится в static.php
3. Динамический CSS. Enqueueud с wp_add_inline_style в ‘fw_ext_shortcodes_enqueue_static: {name}’

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

1. Shortcode в Post Editor
2. Shortocde в wp-editor option type любой Page Builder Shortcode
3. Shortocde в wp-editor  который вставляется где-либо еще (например, Настройки темы или любые OptionsModal)

случае использования в сравнении с тем, что вы получаете	HTML	static.php	dynamic css
1 Post Editor	yes	yes	yes
2 Page Builder Shortcode	yes	yes	no
3 Any wp-editor	yes	no	no

Shortcodes в главном редакторе  post editor

По умолчанию вы получите кнопку в главном post editor со всеми включенными шорткодами, кроме section и column. На самом деле это самый простой вариант использования, и вам нечего делать, чтобы заставить их работать. Здесь все должно быть из коробки.Фактически, вы можете настроить, какие shortcodes отображаются, используя этот фрагмент кода:

<?php if (!defined(‘FW’)) die(‘Forbidden’);

add_filter(‘fw:ext:wp-shortcodes:default-shortcodes’, _set_default_shortcodes);

function _set_default_shortcodes($previous_shortcodes) {

   return array( ‘button’, ‘notification’ );

}