Создаем плагин для реализации «книжной полки» в 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/
