Создание плагина галереи для WordPress
Для того чтобы создать плагин на WordPress достаточно всего одного файла в одной папке, имеющей одноименное название плагина. Итак, назовем плагин галереи: wp-gallery-list — и оно должно быть уникальным. Создадим папку wp-gallery-list в папке plugins wordpress и создадим файл wp-gallery-list.php, который будет содержать основной код.
Заголовок плагина, который содержит стандартную информацию о плагине для wordpress выглядит следующим образом:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<?php /** * @package WP-Gallery-List */ /* Plugin Name: WP-Gallery-List Plugin URI: https://webproggi.com/ Description: A simple gallery plugin for wordpress. Version: 1.0.0 Author: Webproggi.ru Author URI: https://webproggi.com/ License: GPLv2 or later */ ?> |
Этого достаточно чтобы система wordpress распознала содержимое как плагин. Теперь приступим к функциям, которые будет выполнять сам плагин. Плагин будет выполнять простые функции по заполнению информации из админ панели с помощью текстовых полей, загрузка и редактирование изображений будет происходить стандартными средствами wordpress. Отображение галереи во фронт офисе будет происходить списком по шаблону с использованием lightbox. Галерею можно вставить в любую часть записи или страницы.
Код, который будет отвечать за административную часть, выглядит следующим образом:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 |
/** Install Folder */ define('WGL_FOLDER', '/' . dirname( plugin_basename(__FILE__))); /** Path for front-end links */ define('WGL_URL', WP_PLUGIN_URL . WGL_FOLDER); // Post type define('WGL_POSTYPE', 'wgl'); add_action( 'init', 'wgl_create_post_type' ); add_action( 'admin_head', 'wgl_posttype_icon' ); add_action( 'save_post', 'wgl_save_postdata', 1, 2 ); // =================== // ** Setup the style and script // =================== add_action( 'init', 'wp_add_gallery_style' ); add_action( 'init', 'wp_add_gallery_script' ); function wp_add_gallery_style(){ wp_register_style('wpgallery.css', WGL_URL . '/wpgallery.css'); wp_enqueue_style('wpgallery.css'); wp_register_style('jquery.lightbox-0.5.css', WGL_URL . '/js/jquery.lightbox-0.5.css'); wp_enqueue_style('jquery.lightbox-0.5.css'); } function wp_add_gallery_script(){ wp_register_script( 'jquery', WGL_URL . '/js/jquery-1.4.4.min.js'); wp_enqueue_script( 'jquery' ); wp_register_script( 'jquerylightbox', WGL_URL . '/js/jquery.lightbox-0.5.js'); wp_enqueue_script( 'jquerylightbox' ); } // ======================= // ** Create the post type // ======================= function wgl_create_post_type() { // Define the labels $labels = array( 'name' => _x('WPGalleryList', 'post type general name'), 'add_new' => _x('Add New View', 'new view') ); // Register the post type register_post_type(WGL_POSTYPE, array( 'labels' => $labels, 'public' => true, 'show_ui' => true, 'capability_type' => 'post', 'query_var' => true, 'menu_icon' => WGL_URL .'/images/gallery_ico.png', 'register_meta_box_cb' => 'wgl_add_url_box', 'supports' => array( 'title', 'editor') )); } // =========================== // ** Create the icon in admin // =========================== function wgl_posttype_icon() { global $post_type; $qry_postype = ( isset($_GET['post_type']) ) ? $_GET['post_type'] : '' ; if (($qry_postype == WGL_POSTYPE) || ($post_type == WGL_POSTYPE)) { $icon_url = WGL_URL . '/images/gallery_ico.png'; ?> <style type="text/css" media="all"> /*<![CDATA[*/ .icon32 { background: url(<?php echo $icon_url; ?>) no-repeat 1px !important;} /*]]>*/ </style> <?php } } // =================================== // ** Create box arrays for image urls // =================================== $wgl_box_images = array ( 'Url for small image' => array ( array( 'wgl_small_img_url', 'Location of the small image:', 'text') ), 'Url for large image' => array ( array( 'wgl_large_img_url', 'Location of the large image:', 'text') ) ); // =================================== // ** Add boxes for image's urls // =================================== function wgl_add_url_box() { global $wgl_box_images, $post; if ( function_exists( 'add_meta_box' ) ) { $val = explode(";", get_post_meta($post->ID, 'wgl_img_url', true)); foreach ( array_keys( $wgl_box_images ) as $key=>$wgl_box_image ) { add_meta_box( $wgl_box_image, __( $wgl_box_image), 'wgl_post_url_box', WGL_POSTYPE, 'normal', 'high', $val[$key] ); } } } function wgl_post_url_box ( $obj, $box) { global $wgl_box_images, $post; // Generate box contents foreach ( $wgl_box_images[$box['id']] as $wgl_box ) { echo '<br /><label for="'.$wgl_box["0"].'">'.$wgl_box["1"].'</label><br />' . '<input style="width: 95%;" type="text" name="'.$wgl_box["0"].'" value="'.$box['args'].'"/>'; } } // =============================== // ** Save data when post is saved // =============================== function wgl_save_postdata($post_id, $post) { global $wgl_box_images; if ( 'page' == $_POST['post_type'] ) { if ( ! current_user_can( 'edit_page', $post->ID )) return $post->ID; } else { if ( ! current_user_can( 'edit_post', $post->ID )) return $post->ID; } foreach ( $wgl_box_images as $wgl_box_image ) { foreach ( $wgl_box_image as $wgl_fields ) { $wgl_data[$wgl_fields[0]] = $_POST[$wgl_fields[0]]; } } if ( 'revision' == $post->post_type ) { // don't store custom data twice return; } if ( get_post_meta($post->ID, $key, FALSE) ) { // Field has a value. update_post_meta($post->ID, 'wgl_img_url', $wgl_data['wgl_small_img_url'].';'.$wgl_data['wgl_large_img_url']); } else { // Field does not have a value. add_post_meta($post->ID, 'wgl_img_url', $wgl_data['wgl_small_img_url'].';'.$wgl_data['wgl_large_img_url']); } if (!$wgl_data['wgl_small_img_url'] && !$wgl_data['wgl_large_img_url']) { delete_post_meta($post->ID, 'wgl_img_url'); } } |
В первых строчках кода, определяются константы путей и типов, которые будут использоваться в последующем коде. Затем подключаются действия к прописанным функциям во втором параметре функции add_action(). В данном коде используются следующие действия:
1. init — срабатывает после окончания загрузки wordpress, но перед передачей заголовков.
2. admin_head — срабатывает между тегами head административной панели.
3. save_post — срабатывает, когда запись или страница создается или изменяется.
Ниже идут функции, которые описывают эти действия. Функция wgl_create_post_type() содержит в своем составе функцию register_post_type(), которая в свою очередь создает или модифицирует тип записи галереи согласно вводимым параметрам. Она же вызывает дополнительную функцию wgl_add_url_box(), которая служит для вывода дополнительных полей для сохранения ссылок изображений. Функция wgl_posttype_icon() подгружает стили для административной части галереи. Функция wgl_save_postdata() создает, удаляет, сохраняет записи галереи.
В результате такого кода управление через админ панель имеет такой вид:
Загрузка и масштабирование изображений происходит через встроенный браузер-редактор wordpress:
После того как изображения готовы, остается только вставить нужные ссылки в соответствующие поля для вывода изображений:
Для отображения галереи на страницах или записях используем Shortcode API, а именно функцию add_shortcode(), где указывается краткое название вызова, которое будет вставляться на страницы или записи, а также функция, которая убедит отвечать за вывод содержимого:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
// =================== // ** Setup the style and script // =================== add_action( 'init', 'wp_add_gallery_style' ); add_action( 'init', 'wp_add_gallery_script' ); function wp_add_gallery_style(){ wp_register_style('wpgallery.css', WGL_URL . '/wpgallery.css'); wp_enqueue_style('wpgallery.css'); wp_register_style('jquery.lightbox-0.5.css', WGL_URL . '/js/jquery.lightbox-0.5.css'); wp_enqueue_style('jquery.lightbox-0.5.css'); } function wp_add_gallery_script(){ wp_register_script( 'jquery', WGL_URL . '/js/jquery-1.4.4.min.js'); wp_enqueue_script( 'jquery' ); wp_register_script( 'jquerylightbox', WGL_URL . '/js/jquery.lightbox-0.5.js'); wp_enqueue_script( 'jquerylightbox' ); } //================================== // ** Add Shortcode [wpgallerylist] //================================== add_shortcode('wpgallerylist', 'wpgallerylist_shortcode'); function wpgallerylist_shortcode($atts, $content = null) { global $wpdb; $rows = $wpdb->get_results( "SELECT w.id, w.post_date, w.post_title, w.post_content, m.meta_key, m.meta_value FROM $wpdb->posts w LEFT JOIN $wpdb->postmeta m on (w.id = m.post_id) WHERE w.post_type = 'wgl' and w.post_status='publish' and m.meta_key in ('wgl_img_url') ORDER BY w.post_date DESC"); $display = ''; $display = '<script type="text/javascript"> // <![CDATA[ jQuery(function() { jQuery("#wpgallery a").lightBox({ overlayOpacity: 0.6, containerResizeSpeed: 350, txtImage: "Изображение", txtOf: "из" }); }); // ]]> </script>'; $display .= '<ul id="wpgallery">'; foreach ( (array) $rows as $row ) { $display .= '<li>'; $wp_images = explode( ";", $row->meta_value); $display .= '<div class="img_container"><a href="'.$wp_images[1].'">'; $display .= '<img src="'.$wp_images[0].'"/>'; $display .= '</a></div>'; $display .= '<div class="text_container">'; $display .= '<div>'.$row->post_title.'</div>'; $display .= '<div>'.$row->post_content.'</div>'; $display .= '</div>'; $display .= '</li>'; } $display .= '</ul><div class="clear"></div>'; $display .= '<br><br><br>'; return $display; } |
В первых строчках подключаются действия по выводу стилей и скриптов. Показана функция wpgallerylist_shortcode() которая вызывается в нашем контенте и выводит содержимое галереи по заданному шаблону. Для отображения галереи на странице или записи нужно разместить вызов: [wpgallerylist]. Как результат будет отображение галереи:
Скачать галерею здесь:
[download id=»842″ template=»wp-gallery-list»]
Не могу понять почему у меня не вводятся url для маленькой и большой картинок или их надо копировать из свойств изображения и самостоятельно вставлять?
Да, нужно самостоятельно вставлять, нужен путь где лежит изображение.
Большое спасибо. Мне очень понравилась статья и помогла мне в решении моей задачи. Все же хотел спросить можно ли сделать так, чтобы путь для маленькой и большой картинок вставлялся автоматически, когда я исполоьзую опцию вставить в запись?
Плагин бесплатный и существует в том виде какой он есть, доработок по нему не предвидится.
Спасибо большое.
Добрый день. Возникла небольшая проблема, после активации плагина не работает визуальный редактор и не отображается библиотека. Версия WP 4.1.1. Скажите в чем проблема?
Это связано както с новой версией WP?
На данный момент у меня версия 4.1.1 и работает нормально.
А еще вопрос. Например я хочу чтобы post_content выезжал при клике на картинку вот такой код, но он не работает. Я могу както получить через jQuery этот post_content?
<![CDATA[
jQuery(function() {
jQuery("#wpgallery li").click(function(){
jQuery("»).slideToggle();
});
});
// ]]>
‘;
С этим разобрался. А еще вопрос. Я хочу чтобы при клике на картинку выезжал блок контента. Я могу както через jquery получить контент привязанный именно к этой картинке? Можно както получить этот магический post_content? Вот кусок кода.
jQuery(function() {
jQuery(«#wpgallery li»).click(function(){
jQuery(«»).slideToggle();
Зачем это $_GET[‘post_type’]?
Спасибо за труды! Но не айс! Ваш плагин формирует новую страницу с префиксом /wgl/… , а как известно дубли страниц — это не есть хорошо !
Удачи Вам!