Создаем плагин для реализации «книжной полки» в WordPress

В данном учебном руководстве мы рассмотрим процесс создания плагина, позволяющего выводить все книги и пособия в виде изображений, которые будут появляться на импровизированной «книжной полке». Пример такого вывода можно видеть на сайте Smashing Magazine в разделе eBooks. Базовая функциональность WordPress, необходимая для реализации указанного действия, будет продемонстрирована в руководстве – вы сможете легко ее использовать в своих проектах.

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

Установка плагина

Стандартный метод регистрации плагина в WordPress состоит в следующем – вы должны добавить специальную информацию в заголовок файла. Создайте файл под названием sm_books.php и добавьте к нему данные, представленные ниже. Обратите внимание на то, что в данном случае регистрируемой информацией будет являться “Plugin Name,” “Author,” “Version,” и т.д. Все эти данные требуются для активации плагина и управления им на соответствующей странице панели администратора.

<?php 
/*
Plugin Name: SM Books
Plugin URI: http://b4ucode.com
Description: Displays Books and books
Author: B4uCode
Version: 1.0.0
Author URI: http://b4ucode.com
*/

Регистрация типов записи

Чтобы добавить книжную систему, нам понадобится зарегистрировать новый произвольный тип записей с помощью функции register_post_type. Чтобы получить доступ к ней, мы инициируем ее посредством функции add_action. Добавьте следующий код к файлу sm_books.php:

//Register Book Post Type 
add_action( 'init', 'create_sm_book_type' );
function create_sm_book_type() {
   register_post_type( 'sm_books',
      array(
         'labels' => array(
            'name' => __( 'Books' ),
            'singular_name' => __( 'Book' )
         ),
      'public' => true,
      'has_archive' => true,
      'supports' => array('title','editor','thumbnail')
      )
   );
}

Данный сниппет является основным способом создания типа записей. Функция register_post_type( $post_type, $args ) получает два параметра: $post_type и $args. Первый параметр представляет собой 20-символьную строку, которая используется для названия нового типа. Стандартные типы записей в WordPress: “Post,” (запись) “Page,” (страница) “Attachment,” (прикрепление) “Revisions” (редакции) и “Navigation Menus.” (навигационные меню). Эти стандартные названия не могут быть использованы при создании произвольного типа данных. Мы остановимся на названии sm_books. Второй параметр (необязательный) – это массив, который хранит в себе различные опции для произвольного типа. Массив поддерживает «метки», которые мы будем использовать в sm_books наряду с другими опциями, доступными для типа записей — exclude_from_search, show_ui и т.д.

Добавление рубрики

В данном руководстве мы хотим добавить произвольный набор рубрик для книг. Этот набор называется «таксономией» — мы создадим его с помощью с помощью функции register_taxonomy, которую мы назовем sm_book_category. Рубрики помогут нас разбросать различные записи по нескольким категориям, чтобы затем вывести их на экран. Так же, как и в предыдущем примере, мы будем использовать функцию add_action для инициирования нашей новой функции. Кроме того, функция register_taxonomy($taxonomy, $object_type, $args) очень похожа на функцию register_post_type по своим параметрам:

$taxonomy
Строка без прописных букв и пробелов
$object_type
Определяет тип записи, к которому будет прикреплена новая таксономия
$args
Дополнительный массив, который содержит опции и метки подобно тому, что мы видели в функции register_post_type:

//Add Book Categories
add_action( 'init', 'sm_book_taxonomies', 0 );
function sm_book_taxonomies(){
   register_taxonomy('sm_book_category', 'sm_books', array(
      'hierarchical'=>true,
      'label'=>'Categories'
      )
   );
}

Добавление мета полей

Как вы, возможно, заметили, у каждой книги есть разнообразные атрибуты, включающие в себя цену, ссылки и т.д. Мы добавим эти атрибуты как произвольные поля метаданных, используя хук add_meta_boxes. Также мы добавим хук save_post для сохранения этих полей. Как только мы инициируем нашу функцию, функция add_meta_box( $id, $title, $callback, $post_type, $context, $priority, $callback_args ) установит “ID,” “Name” и “Description” для области поля. Параметр $post_type определяет, в каких типах записей должны появляться заданные поля. В качестве $callback мы будем использовать функцию sm_bk_info_box, которая будет обрабатывать HTML-представление полей формы.

add_action( 'add_meta_boxes', 'sm_book_extra_box' );
add_action( 'save_post', 'sm_books_save_postdata' );

function sm_book_extra_box() {
   add_meta_box(
      'sm_bk_info_box',
      __( 'Book Information', 'sm_bk_info_box' ), 
      'sm_bk_info_box',
      'sm_books',
      'side'
   );
}

/* Prints the box content */
function sm_bk_info_box( $post ) {

   $price = get_post_meta( $post->ID, 'price', true );
   $sale_price =  get_post_meta( $post->ID, 'sale_price', true );
   $link_amazon =  get_post_meta( $post->ID, 'link_amazon', true );
   $link_google =  get_post_meta( $post->ID, 'link_google', true );
   $link_apple =  get_post_meta( $post->ID, 'link_apple', true );

   // Use nonce for verification
   wp_nonce_field( plugin_basename( __FILE__ ), 'sm_book_noncename' );
?>

<p>
  <label for="price">Price
  <input type="text" name="price"
   id="price" size="10" value="<?php echo $price; ?>" />
  </label>
</p>
<p>
  <label for="sale_price">Sale Price
  <input type="text" name="sale_price"
   id="sale_price" size="10" value="<?php echo $sale_price; ?>" />
  </label>
</p>
<p>
  <label for="link_amazon">Amazon Link
  <input type="text" name="link_amazon"
   id="link_amazon" size="25" value="<?php echo $link_amazon; ?>" />
  </label>
</p>
<p>
  <label for="link_google">Google Link
  <input type="text" name="link_google"
   id="link_google" size="25" value="<?php echo $link_google; ?>" />
  </label for="myplugin_new_field">
</p>
<p>
  <label for="link_apple">Apple Link
  <input type="text" name="link_apple"
   id="link_apple" size="25" value="<?php echo $link_apple; ?>" />
  </label>
</p>
<?php
}

Для сохранения мета данных мы создадим функцию sm_books_save_postdata, которую мы определили в хуке save_post. В этой функции мы установим проверку для отправленных данных записи и обновим мета данные записи с помощью функции update_post_meta. Добавьте следующий сниппет к файлу sm_books.php, чтобы предоставить плагину обновляемый набор произвольных полей:

function sm_books_save_postdata($post_id){
if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) 
   return;

   if ( !wp_verify_nonce( $_POST['sm_book_noncename'],
   plugin_basename( __FILE__ ) ) )
    return;

    if ( !current_user_can( 'edit_post', $post_id ) )
    return;

    if( isset( $_POST['price'] ) ){
      update_post_meta( $post_id,'price', 
      esc_attr( $_POST['price'] ) );
   }
     if( isset( $_POST['sale_price'] ) ){
      update_post_meta( $post_id,'sale_price', 
           esc_attr( $_POST['sale_price'] ) );
   }
   if( isset( $_POST['link_amazon'] ) ){
      update_post_meta( $post_id,'link_amazon', 
           esc_attr( $_POST['link_amazon'] ) );
   }
   if( isset( $_POST['link_google'] ) ){
      update_post_meta( $post_id,'link_google', 
           esc_attr( $_POST['link_google'] ) );
   }
   if( isset( $_POST['link_apple'] ) ){
      update_post_meta( $post_id,'link_apple', 
           esc_attr( $_POST['link_apple'] ) );
   }
}

Функция update_post_meta получает в качестве первого параметра ID записи, в качестве второго параметра – ключ для обновления, а в качестве третьего параметра – значение поля.

Добавляем популярную запись (Featured Post)

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

//Enable Thumbnail
if ( function_exists( 'add_theme_support' ) ) {
   add_theme_support( 'post-thumbnails' );
      set_post_thumbnail_size( 150, 150 );
      add_image_size( 'book-thumb', 84, 107, true );
}

Название миниатюры, на которую мы будем ссылаться, сохраним в book-thumb. Размер миниатюры будет составлять 84 × 107 пикселей. Числа можно менять в случае необходимости.

Добавляем шорткоды

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

[sm_books category="coding"]

Шорткод, приведенный выше, будет использоваться для вывода на экран книг в рубрике “Coding”. Обратите внимание на то, что “Coding” – это слаг для произвольной таксономии, которую мы создали. Если мы уберем атрибут category в шорткоде, плагин просто выведет список всех книг.

Давайте теперь продолжим работу с шорткодами. Добавим в файл sm_books.php следующий код:

function sm_display($atts) {
   extract( shortcode_atts( array('category' => ''), $atts ) );
   $args = array('post_type'=>'sm_books', 'sm_book_category'=>$category);
   $posts = new WP_Query( $args );
   $html = '<div class="sm_holder"><div class="shelf"><div class="innerDiv" id="sm_book_1">';

   // Book Loop 
   if ( $posts->have_posts() ) : while ( $posts->have_posts() ) : $posts->the_post();
      $book_cover = get_the_post_thumbnail(
         get_the_ID(),'book-thumb', 
         $attr=array("alt"=>get_the_title())
      );
   $html .= '<a href="'.get_permalink().'" class="books">'.$book_cover.'</a>';
   endwhile; endif;

   $html.='</div></div><table class="sm_book_tbl" cellspacing="0" cellpadding="0">';

   // The Loop 
   if ( $posts->have_posts() ) : while ( $posts->have_posts() ) : $posts->the_post();

      $price =  get_post_meta( get_the_ID(), 'price', true );
      $sale_price = get_post_meta( get_the_ID(), 'sale_price', true );
      $link_amazon = get_post_meta( get_the_ID(), 'link_amazon', true );
      $link_google = get_post_meta( get_the_ID(), 'link_google', true );
      $link_apple = get_post_meta( get_the_ID(), 'link_apple', true );
      $html.='<tr><td class="title"><a href="'.get_permalink().'">'.get_the_title().'</a><br>';
      if ($link_amazon): 
         $html .= '<small><a style="color:#999" href="'.$link_amazon.'">Amazon</a>';
      if ($link_google || link_apple):   
         $html .=' | ';  
      endif;
      endif;
      if($link_google): 
         $html .='<a style="color:#999" href="'.$link_google.'">Google</a></small>';
      if($link_apple):    
         $html .=' | '; 
      endif;
      endif;
      if($link_apple):
         $html .='<a style="color:#999" href="'.$link_apple.'">Apple</a></small>';
      endif;
      $html .= '</td><td>'; 

      if ($sale_price && $price) { 
         $html .= $sale_price.'<br />';
         $html .= '<span class="old_price">'.$price.'</span>';
      } elseif ($price) {
         $html .= $price;
      } else {
         $html .= '';
      }
      $html .= '</td>
      <td class="cart">
         <a style="margin:0px" class="sm_cart_button" href="'.get_permalink().'">Add to Cart</a>
      </td>
      </tr>';

   endwhile; endif;

   $html .= '</table>';
   $html .= '</div>';
   return $html;
}

В данном сниппете мы создали несколько циклов, которые будут обрабатываться в случае ввода шорткода. С помощью класса WP_Query мы создаем несколько циклов, позволяющих вывести книги на экран. Аргументы, которые нам понадобятся — post_type из sm_books, а также аргумент, запрашивающий таксономию в функции sm_book_category. Необходимое значение мы получим из шорткода.

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

get_permalink()
Выбирает постоянную ссылку.
get_the_ID()
Выбирает ID (идентификатор) записи, который объединен с get_post_meta для получения мета полей.
get_the_title()
Выбирает заголовок.

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

add_shortcode( 'sm_books', 'sm_display' );

Стилизация списка книг

Внешний вид того, что мы сейчас имеем, может показаться не слишком презентабельным. На данном этапе мы добавим некоторый CSS-код, чтобы как-то разнообразить наш вывод. Создадим папку под названием sm_books. Затем в ней создадим файл style.css и добавим к нему следующий код:

.sm_holder {
   padding: 0px;
   border-bottom: 5px solid #41B7D8;
   width: 630px;
}
div.shelf {
   background-image: url(shelf_bg.jpg);
   display: block;
}
.shelf div.innerDiv {
   padding: 0px 34px;
   width: 100%;
}
.shelf .books img {
   margin-right: 10px;
   padding-top: 15px;
   margin-bottom: 11px;
}
span.old_price {
   color: #E53B2C;
   text-decoration: line-through;
}
.sm_book_tbl {
   margin: 0px 20px 0px 0px !important;
   width: 100%;
   background-color: #f3f3f3;
   border: 1px solid #e5e5e5
}
.sm_book_tbl td.title {
   height: 60px;
   width: 70%;
   padding-left: 20px;
   padding-right: 20px;
   color: #999
}
.sm_book_tbl td.cart {
   padding: 10px 20px;
   color: #999;
}

В нашей таблице стилей мы добавим фоновое изображение к блоку div для книжной полки, что отмечено в объявлении класса div.shelf. Это изображение будет находиться в папке sm_books. Добавим изображение shelf_bg.jpg в эту папку.

После того, как изображение окажется в папке, мы прикрепим таблицу стилей к нашему плагину. Добавьте следующей сниппет в самый низ файла sm_books.php. С помощью функций WordPress мы проведем регистрацию таблицы стилей относительно текущей папки с системой WordPress.

function sm_add_styles() {
   wp_register_style( 'sm_add_styles',
   plugins_url('sm_books/style.css', __FILE__) );
   wp_enqueue_style( 'sm_add_styles' );
}
add_action( 'wp_enqueue_scripts', 'sm_add_styles' );

Плагин готов. Если вам лень самостоятельно создавать плагин, вы можете скачать готовое решение по ссылке: http://media.smashingmagazine.com/wp-content/uploads/2012/07/b4ucode-smashing-bookshelf.1.0.0.zip.

http://wp.smashingmagazine.com/2012/07/24/wordpress-bookshelf-plugin/

Блог про WordPress
Комментарии: 3
  1. Дулат

    привет. можешь подсказать как сделать такую у себя на сайте? http://joxi.ru/v29706WiZPv7lr

  2. дулат

    как шапку закрепить на шаблоне ребут

    1. Дмитрий (автор)

      Я думаю, этот вопрос лучше адресовать разработчикам Reboot. У них мощная поддержка и сразу подсказывают (если у вас оф. тема, купленная у них).

Добавить комментарий

Получать новые комментарии по электронной почте.