18
Базовый плагин WordPress 1. Структура плагина 2. Работа с action’ами WordPress 3. Локаль в WordPress 4. Правильное подключение стилей и скриптов 5. AJAX в WordPress с помощью jQuery и JSON 6. Определение версии WordPress 7. Работа с API Media Uploader в зависимости от версии WordPress, втч новый Media Uploader

Создание базового плагина на WordPress (Base WordPress Plugin creating)

Embed Size (px)

DESCRIPTION

Slide from WordPress MeetUp Moscow #13 plugin example link to download http://yadi.sk/d/x9hDWGH33KUNI

Citation preview

Page 1: Создание базового плагина на WordPress (Base WordPress Plugin creating)

Базовый плагин WordPress 1. Структура плагина 2. Работа с action’ами WordPress 3. Локаль в WordPress 4. Правильное подключение стилей и скриптов 5. AJAX в WordPress с помощью jQuery и JSON 6. Определение версии WordPress 7. Работа с API Media Uploader в зависимости от

версии WordPress, втч новый Media Uploader

Page 2: Создание базового плагина на WordPress (Base WordPress Plugin creating)

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

/wp-content/plugins/my-plugin /wp-content/plugins/my-plugin/css /wp-content/plugins/my-plugin/css/my_plugin.css /wp-content/plugins/my-plugin/images /wp-content/plugins/my-plugin/images/my_plugin_icon.png /wp-content/plugins/my-plugin/js /wp-content/plugins/my-plugin/js/my_plugin.js /wp-content/plugins/my-plugin/languages /wp-content/plugins/my-plugin/my-plugin-functions.php /wp-content/plugins/my-plugin/my-plugin.php

Page 3: Создание базового плагина на WordPress (Base WordPress Plugin creating)

my-plugin.php (1)

Пока как-то так: /* Plugin Name: My Plugin Plugin URI: http://www.my-plugin.ru/ Description: My Plugin Description Author: Igor Sazonov Version: 1.0 Author URI: https://twitter.com/tigusigalpa */ include_once(plugin_dir_path(__FILE__).'/my-plugin-functions.php');

Page 4: Создание базового плагина на WordPress (Base WordPress Plugin creating)

my-plugin-functions.php (1)

Определяем вспомогательные переменные $my_plugin_name = 'my-plugin';

Page 5: Создание базового плагина на WordPress (Base WordPress Plugin creating)

my-plugin-functions.php (2)

Определяем папку для хранения переводов локалей function my_plugin_init() { global $my_plugin_name; $current_locale = get_locale(); if(!empty($current_locale)) { load_plugin_textdomain($my_plugin_name, false, $my_plugin_name."/languages/"); } } add_action('init', 'my_plugin_init');

Page 6: Создание базового плагина на WordPress (Base WordPress Plugin creating)

my-plugin-functions.php (3)

Делаем для плагина свой пункт меню в админке

function my_plugin_add_menu() { global $my_plugin_name; $page = add_menu_page(__('My Plugin page name', 'my-plugin'), $my_plugin_name, 'activate_plugins', __FILE__, 'my_plugin_index', plugins_url('images/my_plugin_icon.png', __FILE__)); add_action('admin_print_scripts-' . $page, 'my_plugin_admin_scripts'); } add_action('admin_menu', 'my_plugin_add_menu');

Page 7: Создание базового плагина на WordPress (Base WordPress Plugin creating)

my-plugin.php (2) Вывод HTML разметки страницы плагина

function my_plugin_index() { if(!is_user_logged_in()) die('-1');?> <div class="wrap columns-2"> <div id="poststuff"> <div id="post-body" class="metabox-holder columns-2"> <div id="post-body-content"> <a class="button my-plugin-button" href="javascript:;"><?php _e('Open Media library', 'my-plugin');?></a><br /> <div id="my-plugin-div"></div> </div> <div id="postbox-container-1" class="postbox-container"> </div> </div> </div> </div> <?php }?>

Page 8: Создание базового плагина на WordPress (Base WordPress Plugin creating)

my-plugin-functions.php (4)

Функция определения версии WordPress function my_plugin_get_wp_version() { global $wp_version; return $wp_version; }

Page 9: Создание базового плагина на WordPress (Base WordPress Plugin creating)

my-plugin-functions.php (5) Инициализация скриптов и стилей плагина и создание nonce’a для

верификации запроса в AJAX function my_plugin_admin_scripts_init() { global $my_plugin_name; wp_register_script('my-plugin-js', plugins_url('js/my_plugin.js', __FILE__), array('jquery')); wp_register_style('my-plugin-css', plugins_url('css/my_plugin.css', __FILE__)); $array = array( 'wp_version_new' => (version_compare(my_plugin_get_wp_version(), '3.5', '>='))?1:0, 'security' => wp_create_nonce('my-plugin-action'), 'title' => __('Sample Title', 'my-plugin'), 'button_title' => __('Button Title', 'my-plugin') ); wp_localize_script('my-plugin-js', 'mp_array', $array); } add_action('admin_init', 'my_plugin_admin_scripts_init');

Page 10: Создание базового плагина на WordPress (Base WordPress Plugin creating)

my-plugin-functions.php (6) Правильное подключение стилей и js-скрипов

function my_plugin_admin_scripts() { if(version_compare(my_plugin_get_wp_version(), '3.5', '>=') && function_exists('wp_enqueue_media')) { wp_enqueue_media(); wp_enqueue_script('media-upload'); wp_enqueue_style('media'); } else { wp_enqueue_script('thickbox'); wp_enqueue_style('thickbox'); } wp_enqueue_script('my-plugin-js'); wp_enqueue_style('my-plugin-css'); }

Page 11: Создание базового плагина на WordPress (Base WordPress Plugin creating)

my-plugin-functions.php (7) + JS Создание AJAX-action’a плагина для

версий WordPress ниже 3.5 (мы надеемся что это будет версия 3.3 =)

function my_plugin_ajax_action_wp33() { global $my_plugin_name; check_ajax_referer('my-plugin-action', 'sec'); $ret_array = array(); $ret_array['res'] = false; $html = trim(stripcslashes($_POST['html'])); $ret_array['code'] = $html; if($html && $ret_array['code']) { $ret_array['res'] = true; } die(json_encode($ret_array)); } add_action('wp_ajax_my_plugin_action_wp33', 'my_plugin_ajax_action_wp33');

Тизер функции на JS/jQuery jQuery.post(ajaxurl, {html:html,sec:array.security,action:'my_plugin_action_wp33'}, function(data) { if(data.res) { jQuery("#my-plugin-div").html(data.code); } }, "json" );

Page 12: Создание базового плагина на WordPress (Base WordPress Plugin creating)

my-plugin-functions.php (8) + JS Создание AJAX-action’a плагина для

версий WordPress выше или 3.5 function my_plugin_ajax_action_wp35() { global $my_plugin_name; check_ajax_referer('my-plugin-action', 'sec'); $ret_array = array(); $ret_array['res'] = false; $link = trim(stripcslashes($_POST['link'])); $url = trim(stripcslashes($_POST['url'])); $ret_array['code'] = "<a href=\"{$link}\" target=\"_blank\"><img src=\"{$url}\" /></a>"; if($link && $url && $ret_array['code']) { $ret_array['res'] = true; } die(json_encode($ret_array)); } add_action('wp_ajax_my_plugin_action_wp35', 'my_plugin_ajax_action_wp35');

Тизер функции на JS/jQuery jQuery.post(ajaxurl, {link:attachment.link,url:attachment.url,sec:array.security,action:'my_plugin_action_wp35'}, function(data) { if(data.res) { jQuery("#my-plugin-div").html(data.code); } }, "json" );

Page 13: Создание базового плагина на WordPress (Base WordPress Plugin creating)

my_plugin.js (1)

jQuery(document).ready(function(){ jQuery(document).on('click', '.my-plugin-button', function(event) { if(mp_array.wp_version_new < 1) { //to do if WP version less 3.5 } else { //to do if WP version greater or equal 3.5 } }); });

Page 14: Создание базового плагина на WordPress (Base WordPress Plugin creating)

my_plugin.js(2)

Версия WP < 3.5 (1)

tb_show(mp_array.title,'media-upload.php?TB_iframe=true'); if((window.original_tb_remove == undefined) && (window.tb_remove != undefined)) { window.original_tb_remove = window.tb_remove; window.tb_remove = function() { window.original_tb_remove(); }; }

Page 15: Создание базового плагина на WordPress (Base WordPress Plugin creating)

my_plugin.js (3) Версия WP < 3.5 (2)

window.original_send_to_editor = window.send_to_editor; window.send_to_editor = function(html) { jQuery.post(ajaxurl, {html:html,sec:mp_array.security,action:'my_plugin_action_wp33'}, function(data) { if(data.res) { jQuery("#my-plugin-div").html(data.code); } }, "json"); tb_remove(); } return false;

Page 16: Создание базового плагина на WordPress (Base WordPress Plugin creating)

my_plugin.js (4) Версия WP >= 3.5 (1)

var custom_file_frame; event.preventDefault(); if(typeof(custom_file_frame)!=="undefined") { custom_file_frame.close(); } custom_file_frame = wp.media.frames.customHeader = wp.media({ title: mp_array.title, library: {type: 'image'}, button: {text: mp_array.button_title}, multiple: false });

Page 17: Создание базового плагина на WordPress (Base WordPress Plugin creating)

my_plugin.js (5)

Версия WP >= 3.5 (2) custom_file_frame.on('select', function() { var attachment = custom_file_frame.state().get('selection').first().toJSON(); jQuery.post(ajaxurl, {link:attachment.link,url:attachment.url,sec:mp_array.security,action:'my_plugin_action_wp35'}, function(data) { if(data.res) {jQuery("#my-plugin-div").html(data.code);} }, "json"); }); custom_file_frame.open();

Page 18: Создание базового плагина на WordPress (Base WordPress Plugin creating)

Спасибо за внимание!

Вопросы