Коли з'являється нова версія WordPress, зазвичай доступні кілька нових функцій не тільки для користувачів, але і для розробників. WordPress пропонує безліч інструментів, які значно полегшать розробку нових тем чи плагінів.
Однією з недавніх розробок API для WordPress є новий інструмент Колір Picker для вибору кольорів. Ця опція дозволяє замінити стандартні текстові поля на привабливий та зручний color picker (вибір кольору).
Щоб зрозуміти, про що йдеться, подивіться на малюнок нижче:
І сьогодні ми дізнаємося, як додати цей інструмент для будь-якої теми оформлення WordPress.
Чим корисний WordPress Color Picker
Є кілька причин, виходячи з яких розробникам варто використати нову функцію для вибору кольору за допомогою color picker API:
для користувачів:
- Можливість швидше та простіше вибирати потрібний колір
- Широкий вибір форматів кольорів для — hexadecimal, RBG, інше
- Забезпечується відмінний користувальницький досвід
для розробників:
- Сторінки панелі інструментів будуть інтегровані з інтерфейсом користувача WordPress
- Забезпечується простіша перевірка введення значення колірного поля
- На виході виходить професійніший продукт, оскільки використовуються власні засоби управління WordPress
Ми пройшлися за основними аспектами WordPress Color Picker, а тепер давайте додамо цей інструментарій у плагін чи тему.
Включаємо Color Picker
Нагадаємо, що Color Picker API був представлений з версією WordPress 3.5, тому, щоб скористатися цим посібником, переконайтеся, що у вас встановлений реліз 3.5 або пізніший.
Щоб додати Color Picker, необхідно легко включити файл jQuery і файл таблиці стилів. Як це зробити вказано у коді нижче. Додайте цей код у файл functions.php Ваша тема оформлення.
add_action( 'admin_enqueue_scripts', 'wptuts_add_color_picker' );
function wptuts_add_color_picker( $hook ) {
if( is_admin() ) {
// Add the color picker css file
wp_enqueue_style( 'wp-color-picker' );
// Include our custom jQuery file with WordPress Color Picker dependency
wp_enqueue_script( 'custom-script-handle', plugins_url( 'custom-script.js', __FILE__ ), array( 'wp-color-picker' ), false, true );
}
}Зверніть увагу, що коли ми увімкнули custom-script.js разом з wp-color-picker, можна застосувати вибір кольору текстових полів у файлі jQuery.
(function( $ ) {
// Add Color Picker to all inputs that have 'color-field' class
$(function() {
$('.color-field').wpColorPicker();
});
})( jQuery );Створюємо плагін для вибору кольору через Color Picker
А тепер ви дізнаєтесь, як інтегрувати Color Picker у свій плагін.
А саме:
- Як додати сторінку опції панелі інструментів, яка імітує сторінку налаштувань теми.
- Як додати поля налаштувань, підготовлені спеціально для Color Picker.
- Як перевірити та зберегти введення даних через color picker.
Крок 1.
Після того, як ви створили заготівлю плагіна в папці wp-content/plugins, можна приступати. Нижче на зображенні показано, як структурований плагін для цього уроку.
Крок 2.
У файлі color-picker-plugin.php напишіть коментарі з використанням інформації плагіна та створіть новий PHP клас під назвою CPA_Theme_Options. У коді нижче показані всі методи класів, які ми будемо покроково впроваджувати.
/*
Plugin Name: Color Picker API
Plugin URI: http://code.tutsplus.com
Description: Demo about the new Color Picker API
Version: 1.0
Author: code.tutsplus.com
Author URI: http://code.tutsplus.com
*/
/**
* Main Class - CPA stands for Color Picker API
*/
class CPA_Theme_Options {
/*--------------------------------------------*
* Attributes
*--------------------------------------------*/
/** Refers to a single instance of this class. */
private static $instance = null;
/* Saved options */
public $options;
/*--------------------------------------------*
* Constructor
*--------------------------------------------*/
/**
* Creates or returns an instance of this class.
*
* @return CPA_Theme_Options A single instance of this class.
*/
public static function get_instance() {
if ( null == self::$instance ) {
self::$instance = new self;
}
return self::$instance;
} // end get_instance;
/**
* Initializes the plugin by setting localization, filters, and administration functions.
*/
private function __construct() { }
/*--------------------------------------------*
* Functions
*--------------------------------------------*/
/**
* Function that will add the options page under Setting Menu.
*/
public function add_page() { }
/**
* Function that will display the options page.
*/
public function display_page() { }
/**
* Function that will register admin page options.
*/
public function register_page_options() { }
/**
* Function that will add javascript file for Color Piker.
*/
public function enqueue_admin_js() { }
/**
* Function that will validate all fields.
*/
public function validate_options( $fields ) { }
/**
* Function that will check if value is a valid HEX color.
*/
public function check_color( $value ) { }
/**
* Callback function for settings section
*/
public function display_section() { /* Leave blank */ }
/**
* Functions that display the fields.
*/
public function title_settings_field() { }
public function bg_settings_field( ) { }
} // end class
CPA_Theme_Options::get_instance();Крок 3.
Спочатку ми запровадимо клас конструктора. У коді нижче показано, що робитиме плагін, коли буде створено новий екземпляр.
А саме:
- додасть нову сторінку опцій під розділом "Налаштування" до адмін-меню WordPress
- здійснить реєстрацію налаштувань полів на сторінці опцій
- додасть таблиці стилів для WordPress Color Picker
- додасть файл JavaScript, який викликає Color Picker
- задасть options-атрибут зі збереженими налаштуваннями.
private function __construct() {
// Add the page to the admin menu
add_action( 'admin_menu', array( &$this, 'add_page' ) );
// Register page options
add_action( 'admin_init', array( &$this, 'register_page_options') );
// Css rules for Color Picker
wp_enqueue_style( 'wp-color-picker' );
// Register javascript
add_action('admin_enqueue_scripts', array( $this, 'enqueue_admin_js' ) );
// Get registered option
$this->options = get_option( 'cpa_settings_options' );
}Крок 4.
Тут ми розглянемо, як додати сторінку параметрів та як її відобразити.
/**
* Function that will add the options page under Setting Menu.
*/
public function add_page() {
// $page_title, $menu_title, $capability, $menu_slug, $callback_function
add_options_page( 'Theme Options', 'Theme Options', 'manage_options', __FILE__, array( $this, 'display_page' ) );
}
/**
* Function that will display the options page.
*/
public function display_page() {
?>
<div class="wrap">
<h2>Theme Options</h2>
<form method="post" action="options.php">
<?php
settings_fields(__FILE__);
do_settings_sections(__FILE__);
submit_button();
?>
</form>
</div> <!-- /wrap -->
<?php
}Зверніть увагу, що ми вже написали – у display_page() метод – код, за допомогою якого додадуться форми, поля та кнопка для реєстрації сторінки опцій.
Крок 5.
У цьому кроці ми впровадимо методи, які зареєструють та відобразять два поля налаштувань: Blog Title та Background Color. І те, й інше поле відноситься до розділу Theme Options.
/**
* Function that will register admin page options.
*/
public function register_page_options() {
// Add Section for option fields
add_settings_section( 'cpa_section', 'Theme Options', array( $this, 'display_section' ), __FILE__ ); // id, title, display cb, page
// Add Title Field
add_settings_field( 'cpa_title_field', 'Blog Title', array( $this, 'title_settings_field' ), __FILE__, 'cpa_section' ); // id, title, display cb, page, section
// Add Background Color Field
add_settings_field( 'cpa_bg_field', 'Background Color', array( $this, 'bg_settings_field' ), __FILE__, 'cpa_section' ); // id, title, display cb, page, section
// Register Settings
register_setting( __FILE__, 'cpa_settings_options', array( $this, 'validate_options' ) ); // option group, option name, sanitize cb
}
/**
* Functions that display the fields.
*/
public function title_settings_field() {
$val = ( isset( $this->options['title'] ) ) ? $this->options['title'] : '';
echo '<input type="text" name="cpa_settings_options[title]" value="' . $val . '" />';
}
public function bg_settings_field() {
$val = ( isset( $this->options['title'] ) ) ? $this->options['background'] : '';
echo '<input type="text" name="cpa_settings_options[background]" value="' . $val . '" class="cpa-color-picker" >';
}Крок 6.
У цьому кроці за допомогою вказаного нижче коду показується, як перевірити два поля перед тим, як їх зберегти.
/**
* Function that will validate all fields.
*/
public function validate_options( $fields ) {
$valid_fields = array();
// Validate Title Field
$title = trim( $fields['title'] );
$valid_fields['title'] = strip_tags( stripslashes( $title ) );
// Validate Background Color
$background = trim( $fields['background'] );
$background = strip_tags( stripslashes( $background ) );
// Check if is a valid hex color
if( FALSE === $this->check_color( $background ) ) {
// Set the error message
add_settings_error( 'cpa_settings_options', 'cpa_bg_error', 'Insert a valid color for Background', 'error' ); // $setting, $code, $message, $type
// Get the previous valid value
$valid_fields['background'] = $this->options['background'];
} else {
$valid_fields['background'] = $background;
}
return apply_filters( 'validate_options', $valid_fields, $fields);
}
/**
* Function that will check if value is a valid HEX color.
*/
public function check_color( $value ) {
if ( preg_match( '/^#[a-f0-9]{6}$/i', $value ) ) { // if user insert a HEX color with #
return true;
}
return false;
}Коли користувач намагається вставити код кольору вручну, Color Picker показує, якщо введено неправильну комбінацію, але навіть якщо і колір вказано неправильно, він все одно буде збережено. Функція check_color() забезпечує перевірку кольору.
Крок 7.
Це останній крок, в якому ми включимо JavaScript файл, який конвертує звичайне поле для введення тексту в поле вибору кольору.
/**
* Function that will add javascript file for Color Piker.
*/
public function enqueue_admin_js() {
// Make sure to add the wp-color-picker dependecy to js file
wp_enqueue_script( 'cpa_custom_js', plugins_url( 'jquery.custom.js', __FILE__ ), array( 'jquery', 'wp-color-picker' ), '', true );
}Створюємо файл jquery.custom.js
(function( $ ) {
$(function() {
// Add Color Picker to all inputs that have 'color-field' class
$( '.cpa-color-picker' ).wpColorPicker();
});
})( jQuery );При активації плагіна ви повинні отримати сторінку панелі інструментів з усіма полями, як на малюнку нижче:
От і все!
Джерело: code.tutsplus.com
Коментарі до запису: 0