#23. Unyson: Helpers, Filters & Actions

Rostyslav - 5 февраля, 2018 - Comments off

Helpers

Введение

PHP Helpers

Общее

Options

Database

JavaScript Helpers

CSS Helpers

Filters & Actions

Actions

Filters

Helpers

Помощники(Helpers) — это классы и функции с полезной функциональностью. Вот встроенные помощники, которые вы можете использовать:ё

PHP Helpers
JavaScript Helpers
CSS Helpers

PHP Helpers

Общее

Общие помощники PHP:

fw_print($value) — Стилизованная версия print_r().
fw_html_tag($tag, array $attr, $end = null) — Генерировать html tag.

echo fw_html_tag(‘script’, array(‘src’ => ‘/demo.js’), true);

// <script src=»/demo.js»></script>

fw_attr_to_html(array $attr_array) — Генерировать атрибуты html из массива.

echo ‘<div ‘. fw_attr_to_html(array(‘id’ => ‘foo’, ‘class’ => ‘bar’)) .’></div>’;

// <div id=»foo» class=»bar» ></div>

fw_akg($keys, &$array_or_object, $default_value = null, $keys_delimiter = ‘/’) — get array multikey value.

MultiKey — это строка, состоящая из нескольких ключей массива, разделенных символом-разделителем, который представляет структуру массива. Например

‘a/b/c’

представляет

array(

‘a’ => array(

‘b’ => array(

‘c’ => null

) ) )

$demo = array(

‘a’ => array(

‘b’ => ‘hello’

) );

echo fw_akg(‘a/b’, $demo);

// ‘hello’

fw_aks($keys, $value, &$array_or_object, $keys_delimiter = ‘/’) — set a multikey value in array.

$demo = array(

‘a’ => array()

);

fw_aks(‘a/b’, ‘hello’, $demo);

print_r($demo);

array(

‘a’ => array(

‘b’ => ‘hello’

) )

fw_aku($keys, &$array_or_object, $keys_delimiter = ‘/’) — unset a multikey from array.

$demo = array(

‘a’ => array(

‘b’ => array()

) );

fw_aku(‘a/b’, $demo);

print_r($demo);

array(

‘a’ => array()

)

fw_rand_md5() — generate a random md5.
fw_unique_increment() — Случайное число увеличивается каждый раз при вызове функции.
fw_stripslashes_deep_keys($value) — разделить Слэш (рекурсивный) из значений и ключей (если значение является массивом), если magic_quotes_gpc = On.
fw_addslashes_deep_keys($value) — Добавьте слэши (рекурсивный) в значения и ключи (если значение является массивом), если magic_quotes_gpc = On.
fw_current_screen_match($rules) — Проверить текущий глобальный $current_screen; (Доступно на стороне администратора) соответствует заданным правилам. Используется для определения, на какой странице администрирования вы находитесь. Таким образом, вы можете, например, поставить в очередь скрипт только на целевой странице, а не на всех страницах администратора.

/**

* @internal

function _action_enqueue_demo_admin_scripts() {

// To find out what is the current screen of the current page, uncomment next line

//global $current_screen; fw_print($current_screen);

$only = array(

‘only’ => array(

array( ‘id’ => ‘dashboard’ )

) );

if (fw_current_screen_match($only)) {

// enqueue this script only on dashboard page

wp_enqueue_script(

‘demo-dashboard’,

get_template_directory_uri() .’/js/demo-only.js’

); }

$exclude = array(

‘exclude’ => array(

array( ‘id’ => ‘dashboard’ ),

array( ‘post_type’ => ‘post’ )

) );

if (fw_current_screen_match($exclude)) {

// enqueue this script on all admin pages

// except dashboard page and all pages from posts menu (add, edit, categories, tags)

wp_enqueue_script(

‘demo-dashboard’,

get_template_directory_uri() .’/js/demo-excluded.js’

); } }

add_action(‘admin_enqueue_scripts’, ‘_action_enqueue_demo_admin_scripts’);

Примечание

Вы можете комбинировать only и exclude только в одном массиве правил.

fw_locate_theme_path_uri($rel_path) — Поиск по относительному пути, в child потом в parent theme directory, и возвращает URI.

echo fw_locate_theme_path_uri(‘/styles.css’);

// http://your-site.com/wp-content/themes/child-theme/style.css

fw_locate_theme_path($rel_path) — Поиск по относительному пути, в child потом в parent theme directory, и возвращает полный путь.

echo fw_locate_theme_path(‘/styles.css’);

// /var/www/wordpress/public_html/wp-content/themes/child-theme/style.css

fw_render_view($file_path, $view_variables = array()) — Безопасный рендеринг и просмотр html. В представлении будут доступны только переданные переменные, а не текущие контекстные переменные.

$private = ‘Top Secret’;

echo fw_render_view(

get_stylesheet_directory() .’/demo-view.php’,

array(‘message’ => ‘Hello’)

);

/* demo-view.php

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

echo $message;

echo $private;

// Hello

// Notice: Undefined variable: private

fw_get_variables_from_file($file_path, array $variables) — Извлекает определенные переменные из файла.

$variables = fw_get_variables_from_file(

get_stylesheet_directory() .’/demo-variables.php’,

array(

‘message’ => ‘Hi’,

‘foo’ => ‘bar’

) );

/* demo-variables.php

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

$message = ‘Hello’;

print_r($variables);

array(

‘message’ => ‘Hello’,

‘foo’ => ‘bar’

)

fw_include_file_isolated($file_path) — Включать файлы изолированно и не предоставлять доступ к текущим контекстным переменным.

$private = ‘Top Secret’;

fw_include_file_isolated(get_stylesheet_directory() .’/demo-isolated.php’);

/* demo-isolated.php

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

echo $private;

// Notice: Undefined variable: private

fw_html_attr_name_to_array_multi_key($attr_name) — Преобразовать атрибут html name в multikey.

echo fw_html_attr_name_to_array_multi_key(‘a[b][c]’);

// ‘a/b/c’

fw_current_url() — Генерировать URL текущей страницы из данных $_SERVER.
fw_is_valid_domain_name($domain_name) — Проверьте, действительно ли доменное имя.
fw_htmlspecialchars($string) — Кодировка utf-8 Версия для PHP функции htmlspecialchars(). Просто сокращение, чтобы не писать более двух параметров для функции htmlspecialchars() по умолчанию каждый раз.
fw_human_time($seconds) — Преобразуйте секунды в удобное для чтения время.

echo fw_human_time(12345);

// ‘3 hours’

fw_human_bytes($bytes) — Преобразовать байты в человеческий читаемый размер.

echo fw_human_bytes(12345);

// ‘2.06 KB’

fw_strlen($string) — UTF-8 version of php’s strlen().

echo strlen(‘Привет!’), PHP_EOL;

echo fw_strlen(‘Привет!’), PHP_EOL;

// 13

// 7

fw_fix_path($path) — Убедитесь, что путь находится в стиле unix, с разделителями / каталога.
fw_get_stylesheet_customizations_directory() — полный путь child-theme/framework-customizations directory.
fw_get_stylesheet_customizations_directory_uri() — URI child-theme/framework-customizations directory.
fw_get_template_customizations_directory() — полный путь parent-theme/framework-customizations directory.
fw_get_template_customizations_directory_uri() — URI parent-theme/framework-customizations directory.
fw_get_framework_directory() — полный путь к parent-theme/framework directory.
fw_get_framework_directory_uri() — URI parent-theme/framework directory

Options

Функции для работы с опциями:

fw_extract_only_options(array $options) — Извлекать только обычные options из любого массива опций.

$options = array(

array(

‘type’ => ‘box’,

‘options’ => array(

‘demo-1’ => array(

‘type’ => ‘text’

) ) ),

array(

‘type’ => ‘box’,

‘options’ => array(

array(

‘type’ => ‘tab’,

‘options’ => array(

‘demo-2’ => array(

‘type’ => ‘textarea’

) ) ) ) ) );

print_r( fw_extract_only_options($options) );

array(

‘demo-1’ => array(

‘type’ => ‘text’

‘demo-2’ => array(

‘type’ => ‘textarea’

) )

fw_get_options_values_from_input(array $options, $input_array = null) — извлечения значений опций из входного массива. Если входной массив не указан, будут использоваться значения из $ _POST.

$options = array(

‘demo-1’ => array( ‘type’ => ‘text’, ‘value’ => ‘default value 1’ ),

‘demo-2’ => array( ‘type’ => ‘text’, ‘value’ => ‘default value 2’ ),

);

$input_values = array(

‘demo-1’ => ‘input value 1’,

‘demo-3’ => ‘input value 3’,

);

$values = fw_get_options_values_from_input($options, $input_values);

print_r($values);

array(

‘demo-1’ => ‘input value 1’,

‘demo-2’ => ‘default value 2’,

)

fw_prepare_option_value($value) — По умолчанию WordPress предлагает фильтры для других плагинов для изменения options базы данных и публикации мета. Для бывших трансляций плагины используют эти фильтры для перевода вещей. Если вы сохраняете значения options в произвольном месте (например, по умолчанию framework, путем сохранения options в сериализованном массиве в options базы данных и после мета), фильтр WordPress не знает, как работать с ними.

ПОДСКАЗКА

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

Database

fw_get_db_settings_option($option_id, $default_value = null) — Получить значение из базы данных option на странице настроек темы. options настроек расположены в framework-customizations/theme/options/settings.php.
fw_set_db_settings_option($option_id, $value) — Установите значение в базе данных для option на странице настроек темы.
fw_get_db_customizer_option($option_id, $default_value = null) — Получить значение из базы данных option на странице customizer. Customizer options расположены в framework-customizations/theme/options/customizer.php.
fw_set_db_customizer_option($option_id, $value) — Установите значение в базе данных для option на странице customizer.
fw_get_db_post_option($post_id, $option_id, $default_value = null) — Получить значение опции post из базы данных. Post options в framework-customizations/theme/options/posts/{post-type}.php.
fw_set_db_post_option($post_id, $option_id, $value) — Установить значение опции post в базе данных.
fw_get_db_term_option($term_id, $taxonomy, $option_id, $default_value = null) — Получить значение term option из базы данных. Term options находятся в framework-customizations/theme/options/taxonomies/{taxonomy}.php.
fw_set_db_term_option($term_id, $taxonomy, $option_id, $value) — Установите значение term option в базе данных.
fw_get_db_ext_settings_option($extension_name, $option_id, $default_value = null) — Получить значение settings option расширения из базы данных.
fw_set_db_ext_settings_option($extension_name, $option_id, $value) — Обновить значение settings option расширения в базе данных.
fw_get_db_extension_data($extension_name, $key, $default_value = null) — Получить значение из базы данных некоторых частных данных, хранящихся в расширении.
fw_set_db_extension_data($extension_name, $key, $value) — Extensions использует эту функцию для хранения личных значений в базе данных.
FW_Cache
FW_Form
- Customize errors
- Ajax submit
FW_Settings_Form
FW_Flash_Messages

FW_Cache

Используйте кеш для хранения часто используемых данных. Кэш — это просто большой массив и имеет одну полезную функцию: он автоматически сбросит ключи массива, если память php будет близка к полной. Поэтому безопасно хранить в нем столько данных, сколько вы хотите (конечно, максимально допустимый php, по умолчанию ~ 100Mb).

function get_foo_bar() {

$cache_key = ‘foo/bar’;

try {

/**

* вызовет исключение, если ключ не найден

return FW_Cache::get($cache_key);

} catch (FW_Cache_Not_Found_Exception $e) {

$data = _generate_foo_bar_data();

FW_Cache::set($cache_key, $data);

return $data;

} }

ВНИМАНИЕ

Не делайте этого:

…

} catch (FW_Cache_Not_Found_Exception $e) {

FW_Cache::set($cache_key, _generate_foo_bar_data());

return FW_Cache::get($cache_key);

}

Потому что FW_Cache :: set (…) может завершиться неудачей или данные, которые были установлены, могут быть удалены после автоматического освобождения памяти.

FW_Form

Удобный способ создания форм. Вы можете создать экземпляр класса формы и дать ему три обратные вызовы(callbacks), которые управляют процессом визуализации, проверки и сохранения.

$my_form = new FW_Form(‘<unique-id>’, array(

‘render’ => ‘_my_form_render’,

‘validate’ => ‘_my_form_validate’,

‘save’ => ‘_my_form_save’,

) );

function _my_form_render() {

$input_value = FW_Request::POST(‘demo’);

echo ‘<input type=»text» name=»demo» maxlength=»10″ value=»‘. esc_attr($input_value) .'»>’;

}

function _my_form_validate($errors) {

$input_value = FW_Request::POST(‘demo’);

if (fw_strlen($input_value) > 10) {

$errors[‘demo’] = __(‘Value cannot be more that 10 characters long’, ‘{domain}’);

}

return $errors;

}

function _my_form_save() {

$input_value = FW_Request::POST(‘demo’);

// do something with value

}

echo $my_form->render();

// this will output:

// <form … ><input type=»text» name=»demo» maxlength=»10″ value=»»></form>

Customize errors

По умолчанию ошибки отображаются прямо перед тегом <form>. Вы можете отобразить ошибки по-своему и отменить отображение по умолчанию. Перед появлением ошибок выполняется действие, чтобы вы могли его использовать:

/**

* @param FW_Form $form

* @internal

function _action_theme_fw_form_errors_display($form) {

/**

* Once the errors was accessed/requested

* the form will cancel/abort the default errors display

$errors = $form->get_errors();

echo ‘<ul class=»your-custom-errors-class»>’;

foreach ($errors as $input_name => $error_message) {

echo fw_html_tag(

‘li’,

array(‘data-input-name’ => $input_name),

$error_message

); }

echo ‘</ul>’;

}

add_action(‘fw_form_display_errors_frontend’, ‘_action_theme_fw_form_errors_display’);

Ajax submit

Вы можете использовать этот скрипт, чтобы сделать FW_Form ajax submittable.

Приоритет сценария во внешнем интерфейсе:

// file: {theme}/inc/static.php

// https://github.com/ThemeFuse/Theme-Includes

if (!is_admin()) {

wp_enqueue_script(

‘fw-form-helpers’,

fw_get_framework_directory_uri(‘/static/js/fw-form-helpers.js’)

);

wp_localize_script(‘fw-form-helpers’, ‘fwAjaxUrl’, admin_url( ‘admin-ajax.php’, ‘relative’ ));

}

Запустите script инициализации:

jQuery(function(){

fwForm.initAjaxSubmit({

//selector: ‘form[some-custom-attribute].or-some-class’

//Откройте код скрипта и проверьте переменную `opts`

//Чтобы увидеть все параметры, которые вы можете перезаписать / настроить.

});

FW_Settings_Form

Самый простой способ создания форм настроек администратора.

Расширение класса FW_Settings_Form. Создать {theme} /class-fw-settings-form-test.php:

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

class FW_Settings_Form_Test extends FW_Settings_Form {

public function get_values() {

return get_option(‘test_fw_settings_form’, array());

}

public function set_values($values) {

update_option(‘test_fw_settings_form’, $values, false);

}

public function get_options() {

return array(

‘tab1’ => array(

‘type’ => ‘tab’,

‘title’ => ‘Tab #1’,

‘options’ => array(

‘opt1’ => array(

‘type’ => ‘text’,

‘label’ => ‘Option #1’

‘opt2’ => array(

‘type’ => ‘textarea’,

‘label’ => ‘Option #2’

), ), ),

‘tab2’ => array(

‘type’ => ‘tab’,

‘title’ => ‘Tab #2’,

‘options’ => array(

‘tab2_1’ => array(

‘type’ => ‘tab’,

‘title’ => ‘Sub Tab #1’,

‘options’ => array(

‘opt2_1’ => array(

‘type’ => ‘text’,

‘label’ => ‘Sub Option #1’

), ), ),

‘tab2_2’ => array(

‘type’ => ‘tab’,

‘title’ => ‘Sub Tab #2’,

‘options’ => array(

‘opt2_2’ => array(

‘type’ => ‘textarea’,

‘label’ => ‘Sub Option #2’

), ), ), ), ), ); }

protected function _init() {

add_action(‘admin_menu’, array($this, ‘_action_admin_menu’));

add_action(‘admin_enqueue_scripts’, array($this, ‘_action_admin_enqueue_scripts’));

$this->set_is_side_tabs(true);

$this->set_is_ajax_submit(true);

}

/**

* @internal

public function _action_admin_menu() {

add_menu_page(

‘Test FW Settings Form’,

‘manage_options’,

/** used in @see _action_admin_enqueue_scripts() */

‘test-fw-settings-form’,

array($this, ‘render’)

); }

/**

* @internal

public function _action_admin_enqueue_scripts() {

$current_screen = get_current_screen(); // fw_print($current_screen);

// enqueue only on settings page

if (‘toplevel_page_’. ‘test-fw-settings-form’ === $current_screen->base) {

$this->enqueue_static();

} } }

Включите и инициализируйте свой класс. Добавить в {theme} /functions.php:

add_action(‘fw_init’, ‘_action_theme_test_fw_settings_form’);

function _action_theme_test_fw_settings_form() {

if (class_exists(‘FW_Settings_Form’)) {

require_once dirname(__FILE__) . ‘/class-fw-settings-form-test.php’;

new FW_Settings_Form_Test(‘test’);

} }

FW_Flash_Messages

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

Добавление флэш-сообщения

FW_Flash_Messages::add(

‘unique-id’,

__(‘Test message’, ‘{domain}’),

‘success’ // available types: info, warning, error, success

);

Displaying flash messages

В админке сообщения отображаются как уведомления администратора(admin notices).

Во frontend сообщения печатаются в footer, затем javascript пытается найти на странице контейнер содержимого и перемещать сообщения в нем. Такое предположение о позиции иногда не выполняется, когда страница имеет некоторую специальную структуру html, и сообщения могут не отображаться или отображаться в неуместном месте. Вы можете выбрать место в шаблоне и отобразить сообщения вручную:

<?php if (defined(‘FW’)) { FW_Flash_Messages::_print_frontend(); } ?>

JavaScript Helpers

Полезные функции и классы javascript. Основным помощником является fw, объект, содержащий константы, методы и классы. Чтобы использовать эти помощники, добавьте fw в зависимости от сценария:

wp_register_script(…, …, array(‘fw’));

Общее

Общие помощники javaScript:

fw.FW_URI — URI в framework directory.
fw.SITE_URI — URI в site root directory.
fw.intval(value) — Альтернатива php intval (). Возвращает 0 при ошибке, а не NaN, как parseInt ().
fw.md5(string) — Вычислить хэш строки md5.
fw.loading — Показать загрузку страницы.

СОВЕТ

Полезен при выполнении запросов AJAX и хочет сообщить об этом вашим пользователям.

fw.loading.show();

setTimeout(function(){

fw.loading.hide();

}, 3000);

Методы show() и hide () можно вызывать несколько раз. Если show () вызывается 10 раз, тогда hide () следует вызывать 10 раз для загрузки, чтобы исчезнуть. Это делается для случаев, когда этот помощник используется несколькими асинхронными скриптами, загрузка не должна исчезать, пока все скрипты не завершат работу.

- fw.capitalizeFirstLetter(text) — Заглавная первая буква строки.

fw.ops(properties, value, obj, delimiter) — аналогично fw_aks (…) из PHP Helpers, но для объектов javascript.

var obj = {foo: {}};

fw.ops(‘foo/bar’, ‘demo’, obj);

console.log(obj); // {foo: {bar: ‘demo’}}

fw.opg(properties, obj, defaultValue, delimiter) — аналогично fw_akg (…) из PHP Helpers, но для объектов javascript.

var obj = {foo: {bar: ‘hello’}};

console.log( fw.opg(‘foo/bar’, obj) ); // ‘hello’

fw.randomMD5() — generate random md5.

Options Modal

Modal с options. Отображать html, созданный из заданного массива опций. После того, как пользователь заполняет форму и нажимает «Сохранить», значения доступны как объект javascript.

var modal = new fw.OptionsModal({

title: ‘Custom Title’,

options: [

{‘test_1’: {

‘type’: ‘text’,

‘label’: ‘Test1’

}},

{‘test_2’: {

‘type’: ‘textarea’,

‘label’: ‘Test2’

} } ],

values: {

‘test_1’: ‘Default 1’,

‘test_2’: ‘Default 2’

size: ‘small’ // ‘medium’, ‘large’

});

// listen for values change

modal.on(‘change:values’, function(modal, values) {

console.log(values);

});

// replace values

modal.set(‘values’, {

‘test_1’: ‘Custom 1’,

‘test_2’: ‘Custom 2’

});

modal.open();

Убедитесь, что вы поставили в очередь scripts и стили для опций, которые вы используете в модальном. Обычно это делается до отображения страницы.

fw()->backend->enqueue_options_static($modal_options);

Confirmation

Механизм подтверждения общего назначения, который работает с jQuery.Deferred.

var confirm = fw.soleConfirm.create({

severity: ‘info’, // warning | info

message: ‘Some message to display’, // or null, if you don’t want any

backdrop: null // null | false | true

});

confirm.result; // Instance of jQuery.Deferred factory

confirm.result.then(function (confirm_instance) {

// confirm_instance is same as confirm

// Handle success branch

});

confirm.result.fail(function (confirm_instance) {

// Handle fail branch

});

confirm.show();

Queueing confirms

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

var confirm1 = fw.soleConfirm.create();

var confirm2 = fw.soleConfirm.create();

confirm1.show();

confirm2.show();

confirm1.hide(); // В этот момент на экран будет выведено значение confirm2, результаты буферизуются

Одно и то же подтверждение несколько раз

Из-за того, как работает jQuery.Deferred, один экземпляр подтверждения будет решать его обещание ровно один раз. Если вам действительно нужно использовать один и тот же подтверждение еще раз — просто сбросьте его.

var confirm = fw.soleConfirm.create();

confirm.result.then(function () {

// handle success

// will be triggered just once

});

confirm.show();

// …

// after the user takes his choice

// …

confirm.show(); // will throw an error!

confirm.reset();

// you’ll have to attach your listeners once again, the old one

// will already not be around

confirm.result.then(function () {

// one more handler

});

confirm.show(); // will work just fine

Events

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

// script-1.js

fwEvents.on(‘script-2:message’, function(data){

console.log(‘script-1 received a message from script-2: ‘+ data.message);

});

// script-2.js

fwEvents.trigger(‘script-2:message’, {message: ‘Hello World!’});

CSS Helpers

Полезные css-классы для админ-панели. Чтобы использовать эти помощники, добавьте fw в зависимости от вашего стиля:

wp_register_style(…, …, array(‘fw’));

Общее

Alignment classes

Легко выровнять текст по компонентам с классами выравнивания текста.

<p class=»fw-text-left»>Left aligned text.</p>

<p class=»fw-text-center»>Center aligned text.</p>

<p class=»fw-text-right»>Right aligned text.</p>

<p class=»fw-text-justify»>Justified text.</p>

Transformation classes

Преобразуйте текст в компонентах с классами заглавных букв.

<p class=»fw-text-lowercase»>Lowercased text.</p>

<p class=»fw-text-uppercase»>Uppercased text.</p>

<p class=»fw-text-capitalize»>Capitalized text.</p>

Responsive images

Изображения можно сделать responsive-friendly с помощью класса .fw-img-responsive. Это относится к max-width: 100%; И height: auto; К изображению, чтобы он хорошо масштабировался для родительского элемента.

Delete icon

Используйте общий значок удаления для ссылок, которые что-то удаляют.

Quick floats

Поместите элемент слева или справа с помощью класса. !important включен во избежание проблем с конкретностью. Классы также могут использоваться как mixins.

Center content blocks

Установите элемент для display: block и center по краю. Доступен как mixin и class.

Clearfix

Легко очищать float, добавляя .fw-clearfix к родительскому элементу. Использует micro-clearfix как популяризировал Nicolas Gallagher. Может также использоваться как mixin.

Showing and hiding content

Принудительно shown или hidden элемент. Эти классы !important Важно избегать конфликтов специфичности, так же как и quick floats. Они доступны только для переключения уровня блока. Их также можно использовать в качестве смесителей. Кроме того, .fw-invisible может использоваться для переключения только видимости элемента, то есть его отображение не изменяется, и элемент может все еще влиять на поток документа.

Image replacement

Используйте класс .fw-text-hide или mixin, чтобы заменить текстовое содержимое элемента фоном.

<h1 class=»fw-text-hide»>Custom heading</h1>

Grid system

Помощники Css включают гибкую гибкую систему сетки, которая соответствующим образом масштабируется до 12 столбцов по мере увеличения размера устройства или видового экрана. Грид-системы используются для создания макетов с помощью ряда строк и столбцов, в которых размещается ваш контент. Вот как работает grid-система:

Используйте строки(rows) для создания горизонтальных групп столбцов(columns).
Содержимое должно размещаться в столбцах(columns), и только столбцы могут быть непосредственными потомками строк(rows).
Предопределенные классы сетки, такие как .fw-row и .fw-col-xs-4, доступны для быстрого создания макетов сетки.
Столбцы сетки создаются путем указания количества двенадцати доступных столбцов, которые вы хотите охватить. Например, три равных столбца будут использовать три .fw-col-xs-4.
Если в одной строке помещено более 12 столбцов, каждая группа дополнительных столбцов, как одна единица, будет обернута в новую строку.
Классы сетки применяются к устройствам с шириной экрана, большей или равной размерам breakpoint, и переопределяют классы сетки, ориентированные на меньшие устройства. Поэтому применение любого класса .fw-col-md- к элементу не только повлияет на его стиль на средних устройствах, но и на больших устройствах, если класс .fw-col-lg-class отсутствует.

Эта сетевая система была внедрена Bootstrap с некоторыми изменениями:

Добавлен префикс .fw для классов
Размеры экранов измененных мультимедийных запросов
Строки используются без контейнеров (без .container и .container-fluid)
Строки не имеют padding

Media queries

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

/* Extra small devices (phones) */

@media (max-width: 782px) { … }

/* Small devices (tablets) */

@media (min-width: 783px) and (max-width: 900px) { … }

/* Medium devices (desktops) */

@media (min-width: 901px) and (max-width: 1199px) { … }

/* Large devices (large desktops) */

@media (min-width: 1200px) { … }

Columns

Используя набор классов .fw-col- *, вы можете создавать grid-системы, которые хорошо выглядят на любом устройстве:

.fw-col-xs-* — extra small devices (phones).
.fw-col-sm-* — small devices (tablets)
.fw-col-md-* — medium devices (desktops)
.fw-col-lg-* — large devices (large desktops)

СОВЕТ

Подробнее о грид-системе и примерах можно узнать здесь.

Responsive utilities

Для ускорения разработки на мобильных устройствах используйте эти классы утилиты для показа и скрытия содержимого с помощью устройства с помощью медиа-запроса.

ВАЖНО

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

Доступные классы

Используйте один или несколько доступных классов для переключения контента через viewport breakpoints..

Extra small devices(<783px)	Small devices (≥783px)	Medium devices (≥901px)	Large devices (≥1200px)
.visible-xs-*	Visible	Hidden	Hidden	Hidden
.visible-sm-*	Hidden	Visible	Hidden	Hidden
.visible-md-*	Hidden	Hidden	Visible	Hidden
.visible-lg-*	Hidden	Hidden	Hidden	Visible
.hidden-xs	Hidden	Visible	Visible	Visible
.hidden-sm	Visible	Hidden	Visible	Visible
.hidden-md	Visible	Visible	Hidden	Visible
.hidden-lg	Visible	Visible	Visible	Hidden

Классы .visible — * — * для каждой breakpoint представлены в трех вариантах, по одному для каждого значения свойства отображения CSS, приведенного ниже.

Group of classes	CSS display
.visible-*-block	display: block;
.visible-*-inline	display: inline;
.visible-*-inline-block	display: inline-block;

Таким образом, для дополнительных маленьких (xs) экранов, например, доступные классы .visible — * — *: .visible-xs-block, .visible-xs-inline и .visible-xs-inline-block.

Filters & Actions

Actions

Общее

fw_init — framework полностью загружен, и вы можете безопасно получить доступ к любому из его компонентов. Полезно, когда вам нужно запустить некоторые компоненты темы только при установке фреймворка.

add_action(‘fw_init’, ‘_action_theme_fw_init’);
function _action_theme_fw_init() {
$value = fw_get_db_customizer_option(‘hello’);
// fw()->…
}

fw_backend_add_custom_settings_menu — Change Theme Settings menu. Вы можете зарегистрировать меню самостоятельно как верхнее или подменю, тогда скрипт обнаружит, зарегистрирован ли он (slug) и пропустит внутренний регистр по умолчанию.

add_action(‘fw_backend_add_custom_settings_menu’, ‘_action_theme_custom_fw_settings_menu’);
function _action_theme_custom_fw_settings_menu($data) {
   add_menu_page(
       __( ‘Awesome Settings’, ‘{domain}’ ),
       __( ‘Awesome Settings’, ‘{domain}’ ),
       $data[‘capability’],
       $data[‘slug’],
       $data[‘content_callback’]
   );
}

fw_backend_add_custom_extensions_menu — Измените меню Unyson. Работает так же, как и предыдущее действие.

Assets Enqueue

fw_admin_enqueue_scripts:settings — Активируйте ресурсы только на странице «Настройки темы».

add_action(‘fw_admin_enqueue_scripts:settings’, ‘_action_theme_enqueue_scripts_theme_settings’);
function _action_theme_enqueue_scripts_theme_settings() {
   wp_enqueue_script(
       ‘theme-settings-scripts’,
       get_template_directory_uri() .‘/js/admin-theme-settings.js’,
       array(‘fw’),
       fw()->theme->manifest->get_version(),
       true
   ); }

fw_admin_enqueue_scripts:customizer — Enqueue assets only in Customizer page.

fw_admin_enqueue_scripts:post — Enqueue assets only in Post Edit page.
add_action(‘fw_admin_enqueue_scripts:post’, ‘_action_theme_enqueue_scripts_post_edit’);
function _action_theme_enqueue_scripts_post_edit(WP_Post $post) {
   if ($post->post_type == ‘page’) {
       wp_enqueue_script(
           ‘page-edit-scripts’,
           get_template_directory_uri() .‘/js/admin-page-edit.js’,
           array(‘fw’),
           fw()->theme->manifest->get_version(),
           true
       );
   }
}

fw_admin_enqueue_scripts:term — Enqueue assets only in Taxonomy Term Edit page.
add_action(‘fw_admin_enqueue_scripts:term’, ‘_action_theme_enqueue_scripts_term_edit’);
function _action_theme_enqueue_scripts_term_edit($taxonomy) {
   if ($taxonomy == ‘category’) {
       wp_enqueue_script(
           ‘category-edit-scripts’,
           get_template_directory_uri() .‘/js/admin-category-edit.js’,
           array(‘fw’),
           fw()->theme->manifest->get_version(),
           true
       ); } }

Database

fw_post_options_update — После database post option или все options были обновлены. Описание параметров можно найти здесь.
add_action(‘fw_post_options_update’, ‘_action_theme_fw_post_options_update’, 10, 4);
function _action_theme_fw_post_options_update($post_id, $option_id, $sub_keys, $old_value) {
   if ($option_id === ‘hello’ && empty($sub_keys)) {
       // do something …
   }
}

Filters

Общее

fw_framework_customizations_dir_rel_path — Относительный путь к каталогу настроек, расположенному в теме. По умолчанию это /framework-customizations.

add_filter(
‘fw_framework_customizations_dir_rel_path’,
‘_filter_theme_fw_customizations_dir_rel_path’
);
function _filter_theme_fw_customizations_dir_rel_path($rel_path) {
/**
* Make the directory name shorter. Instead of
* {theme}/framework-customizations/theme/options/post.php
* will be
* {theme}/fw/theme/options/post.php
*/
return ‘/fw’;
}

Options

fw_settings_options — Theme Settings Options, которые загружаются с{theme}/framework-customizations/theme/options/settings.php

add_filter(‘fw_settings_options’, ‘_filter_theme_fw_settings_options’);
function _filter_theme_fw_settings_options($options) {
$options[‘extra-tab’] = array(
‘type’ => ‘tab’,
‘title’ => __(‘Extra Tab’, ‘domain’),
‘options’ => array(
‘test’ => array(‘type’ => ‘text’),
),
);
return $options;
}

fw_customizer_options — Theme Customizer Options, которые загружаются {theme}/framework-customizations/theme/options/customizer.php

add_filter(‘fw_customizer_options’, ‘_filter_theme_fw_customizer_options’);
function _filter_theme_fw_customizer_options($options) {
$options[‘extra-option’] = array(‘type’ => ‘text’);
return $options;
}

fw_post_options — Post Options, которые загружаются {theme}/framework-customizations/theme/options/posts/{post-type}.php

add_filter(‘fw_post_options’, ‘_filter_theme_fw_post_options’, 10, 2);
function _filter_theme_fw_post_options($options, $post_type) {
if ($post_type == ‘page’) {
$options[‘extra-option’] = array(‘type’ => ‘text’);
}
return $options;
}

fw_taxonomy_options — Taxonomy Term Options, которые загружаются {theme}/framework-customizations/theme/options/taxonomies/{taxonomy}.php

add_filter(‘fw_taxonomy_options’, ‘_filter_theme_fw_taxonomy_options’, 10, 2);
function _filter_theme_fw_taxonomy_options($options, $taxonomy) {
if ($taxonomy == ‘category’) {
$options[‘extra-option’] = array(‘type’ => ‘text’);
}
return $options;
}

Categories : Word Press, www

#23. Unyson: Helpers, Filters & Actions

Latest Posts

Helpers

PHP Helpers

Общее

Options

Database

FW_Cache

FW_Form

Customize errors

Ajax submit

FW_Settings_Form

FW_Flash_Messages

Добавление флэш-сообщения

Displaying flash messages

Общее

Options Modal

Confirmation

Queueing confirms

Одно и то же подтверждение несколько раз

Events

CSS Helpers

Общее

Alignment classes

Transformation classes

Responsive images

Delete icon

Quick floats

Center content blocks

Clearfix

Showing and hiding content

Image replacement

Grid system

Media queries

Columns

Responsive utilities

Доступные классы

Filters & Actions

Actions

Общее

Assets Enqueue

Database

Filters

Общее

Options