Ценовые таблицы являются ключевым компонентом вашего бизнеса, который способствует его продвижению и помогает покупателям в выборе того, что у вас есть. Большинство современных коммерческих WordPress тем обеспечивают построение таких таблиц. Существует множество бесплатных и платных плагинов WordPress для создания ценовых таблиц. В данном руководстве мы рассмотрим создание плагина WordPress с нуля, что позволит выполнять необходимые настройки различных проектов самостоятельно.
Каждый веб-дизайнер пытается добиться адаптации своих разработок, чтобы проект лучше выглядел и использовался на любом устройстве, в таких случаях можно начать с адаптивного мобильного меню. Таблицы, созданные с помощью плагина, разработанного самостоятельно, будут работать на всех устройствах, таких как мобильный телефон или планшет одинаково хорошо. Итак, начнем.
Окончательный дизайн ценовой таблицы представлен ниже.
Планирование создание плагина адаптивной ценовой таблицы
Планирование — сложная часть любого проекта. Прежде чем делать плагин, лучше распланировать используемые методы и состав ценовой таблицы. Основными компонентами ценовой таблицы будут:
- Ценовая таблица – совокупность предлагаемых вами продуктов (пакетов) или услуг. Так как в примере мы запланировали создание нескольких ценовых таблиц, то лучшим вариантом будет выбор пользовательской записи pricing_tables.
- Цена продукта (пакета) — эта функция варьируется в зависимости от выбираемого продукта. Так как ценообразование указывается для нескольких пакетов, будет использоваться пользовательская запись pricing_packages.
- Особенности продукта (пакета) – это уникальные элементы вашего продукта или услуги. Данные функции добавятся динамически в настраиваемых полях ценообразования продукта.
- Дизайн ценовой таблицы – для отображения ценовой таблицы можно выбрать шаблон страницы или короткий номер. В разрабатываемом примере плагина будет использоваться shortcode. Вы можете добавить CSS fade эффект в таблицы или оставить дизайн, как в исходниках.
Создание ценовых пакетов, как на картинке
В работе будет использована пользовательская запись
pricing_packages. Можно просто сгенерировать код для пользовательских записей с помощью онлайн-генератора кодов. Следующий код создает Custom Post Type со стандартной конфигурацией:
|
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 |
add_action( 'init', 'wppt_register_cpt_pricing_packages' ); function wppt_register_cpt_pricing_packages() { $labels = array( 'name' => _x( 'Пакеты цен', 'pricing_packages' ), 'singular_name' => _x( 'Пакеты цен', 'pricing_packages' ), 'add_new' => _x( 'Создать', 'pricing_packages' ), 'add_new_item' => _x( 'Создать Пакеты цен', 'pricing_packages' ), 'edit_item' => _x( 'Редактировать Пакеты цен', 'pricing_packages' ), 'new_item' => _x( 'Новый Пакеты цен', 'pricing_packages' ), 'view_item' => _x( 'Просмотр Пакеты цен', 'pricing_packages' ), 'search_items' => _x( 'Поиск Пакеты цен', 'pricing_packages' ), 'not_found' => _x( 'Пакеты цен не найден', 'pricing_packages' ), 'not_found_in_trash' => _x( 'В корзине нет Пакета цен', 'pricing_packages' ), 'parent_item_colon' => _x( 'Главный Пакет цен:', 'pricing_packages' ), 'menu_name' => _x( 'Пакет цен', 'pricing_packages' ), ); $args = array( 'labels' => $labels, 'hierarchical' => false, 'description' => 'Пакет цен', 'supports' => array( 'title', 'editor' ), 'public' => true, 'show_ui' => true, 'show_in_menu' => true, 'show_in_nav_menus' => true, 'publicly_queryable' => true, 'exclude_from_search' => false, 'has_archive' => true, 'query_var' => true, 'can_export' => true, 'rewrite' => true, 'capability_type' => 'post' ); register_post_type( 'pricing_packages', $args ); } |
Использование настраиваемых пользовательских полей (Custom Fields) для внесения информации о продукте (пакете)
Название продукта (пакета), цена и ссылка для покупки — наиболее важные компоненты. Чтобы добавить эту информацию будем использовать мета поля. Нам необходимо добавить несколько компонентов, поэтому для удаления или добавления компонентов в динамическом режиме необходимо использовать другое мета поле, как показано в коде ниже.
|
1 2 3 4 5 6 7 8 |
add_action( 'add_meta_boxes', 'wppt_pricing_packages_meta_boxes' ); function wppt_pricing_packages_meta_boxes() { add_meta_box( "pricing-package-info", "Пояснение пакета цен", 'wppt_generate_pricing_package_info', "pricing_packages", "normal", "high" ); add_meta_box( "pricing-features-info", "Характеристики цен", 'wppt_generate_pricing_features_info', "pricing_packages", "normal", "high" ); } |
Мета поля (окна) добавляются действием add _meta_boxes. Можно использовать одно окно вместо двух. На примере использовано два мета окна для внесения ясности.
|
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 |
function wppt_generate_pricing_package_info() { global $post; $package_price = get_post_meta( $post->ID, "_package_price", true ); $package_buy_link = get_post_meta( $post->ID, "_package_buy_link", true ); $html = '<input type="hidden" name="pricing_package_box_nonce" value="' . wp_create_nonce( basename( __FILE__ ) ) . '" />'; $html .= '<table class="form-table-name">'; $html .= '<tr>'; $html .= ' <th><label for="Price">Цена *</label></th>'; $html .= ' <td>'; $html .= ' <input name="package_price" id="package_price" type="text" value="' . $package_price . '" />'; $html .= ' </td>'; $html .= '</tr>'; $html .= '<tr>'; $html .= ' <th><label for="Buy Now">Ссылка купить *</label></th>'; $html .= ' <td>'; $html .= ' <input name="package_buy_link" id="package_buy_link" type="text" value="' . $package_buy_link . '" />'; $html .= ' </td>'; $html .= '</tr>'; $html .= '</tr>'; $html .= '</table>'; echo $html; } |
Первое окно будет содержать поля цены и ссылки для покупки. Делаем основу как в интернет магазине WordPress, только на много проще. Эти два поля сохранятся в
post_meta таблицы с использованием соответствующих ключей:
_package_price и
_package_buy_link.
|
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 |
function wppt_generate_pricing_features_info() { global $post; $package_features = get_post_meta( $post->ID, "_package_features", true ); $package_features = ( $package_features == '' ) ? array() : json_decode( $package_features ); $html .= '<table class="form-table-price">'; $html .= '<tr><th><label for="Price">Создать характеристики пакета</label></th>'; $html .= ' <td> $html .= ' <input name="package_feature" id="package_feature" type="text" />'; $html .= ' <input type="button" id="add_features" value="Создать" />'; $html .= ' </td></tr>'; $html .= '<tr><td>'; $html .= ' <ul id="package_features_box" name="package_features_box" >'; foreach ($package_features as $package_feature) { $html .= '<li><input type="hidden" name="package_features[]" value="' . $package_feature . '" />' . $package_feature . ''; $html .= '<a href="javascript:void(0);">Удалить</a></li>'; } $html .= '</ul></td></tr>'; $html .= '</table>'; echo $html; } |
Приведенный выше код содержит
HTML разметку для особенностей продукта. Один продукт (пакет) содержит множество особенностей, поэтому они будут добавлены динамически неупорядоченным списком со скрытых полей с помощью
jQuery. Особенности будут храниться в таблице
post_meta с ключем
_package_features. Отформатированные
JSON строки будут использоваться для хранения нескольких особенностей.
- Плагины для мультиязычных сайтов на WordPress
- Смена шрифта WordPress, на собственный
- Плагин бэкапа базы данных и файлов WordPress
Проверка (validation) создания продукта
Стоимость продукта (пакета услуг) и ссылка для покупки – основные элементы для каждого продукта. Поэтому необходимо подтверждение их создания. Для проверки используют
jQuery код, указанный ниже.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
jQuery(document).ready(function($) { $("#post-body-content").prepend('<div id="pricing_error" class="error" style="display:none" ></div>'); $('#post').submit(function() { if ( $("#post_type").val() =='pricing_packages' ) { return wppt_validate_pricing_packages(); } else if ( $("#post_type").val() =='pricing_tables' ) { return wppt_validate_pricing_tables(); } }); }); |
Для отображения ошибок нужно добавить элемент
div на экране создания поста, который содержит форму поста с
ID. Это не меняется также и для пользовательских постов. В примере представлен
#post форма для проверки.
В связи с использованием различных пользовательских постов для фильтрации сообщений используется код, указанный ниже. Форма поста создания содержит скрытое поле с
ID post_type.
|
1 2 3 4 5 6 |
if ( $("#post_type").val() =='pricing_packages') { return wppt_validate_pricing_packages(); } else if ( $("#post_type").val() =='pricing_tables' ) { return wppt_validate_pricing_tables(); } |
После завершения фильтрации мы создаём определенную функцию проверки согласно типу поста, как показано ниже.
|
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 |
var wppt_validate_pricing_packages = function() { var err = 0; $("#pricing_error").html(""); $("#pricing_error").hide(); if ( $("#title").val() == '' ) { $("#pricing_error").append( "<p>Введите название пакета.</p>" ); err++; } if ( $("#package_price").val() == '' ) { $("#pricing_error").append( "<p>Введите цену пакета.</p>" ); err++; } if ( $("#package_buy_link").val() == '' ) { $("#pricing_error").append( "<p>Напишите линк.</p>" ); err++; } if ( err > 0 ) { $("#publish").removeClass( "button-primary-disabled" ); $("#ajax-loading").hide(); $("#pricing_error").show(); return false; } else { return true; } }; |
Сначала необходимо очистить любые уже существующие ошибки, предварительно установленные в элементе
pricing_error. Тогда появится возможность проверить каждое поле и добавить сообщение об ошибке в контейнер
pricing_error. И, наконец, можно отображать ошибки, используя функцию
$("#pricing_error").show().
- Плагин интернет магазина WordPress WooCommerce
- Сделать всплывающее окно, popup на сайте
- Парсинг, для сайтов кино тематики
Сохраняем информацию о продукте (пакете) в плагине
Все области создания и проверки продукта (пакетов услуг) выполнены. Перейдем к сохранению информации в базе данных. Для этого будем использовать действие
save_post, которое выполняется после сохранения поста в базе данных.
|
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 |
add_action( 'save_post', 'wppt_save_pricing_packages' ); function wppt_save_pricing_packages( $post_id ) { if ( ! wp_verify_nonce( $_POST['pricing_package_box_nonce'], basename( __FILE__ ) ) ) { return $post_id; } if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) { return $post_id; } if ( 'pricing_packages' == $_POST['post_type'] && current_user_can( 'edit_post', $post_id ) ) { $package_price = ( isset( $_POST['package_price'] ) ? $_POST['package_price'] : '' ); $package_buy_link = ( isset( $_POST['package_buy_link'] ) ? $_POST['package_buy_link'] : '' ); $package_features = ( isset( $_POST['package_features'] ) ? $_POST['package_features'] : array() ); $package_features = json_encode( $package_features ); update_post_meta( $post_id, "_package_price", $package_price ); update_post_meta( $post_id, "_package_buy_link", $package_buy_link ); update_post_meta( $post_id, "_package_features", $package_features ); } else { return $post_id; } } |
Сначала необходимо выполнить некоторые проверки для того, чтобы убедится в совпадении стоимости, созданной в форме поста, со значением кода, полученным (сгенерированным) в
$_POST. Далее необходимо проверить это сохранение автоматическое или ручное. Далее перед сохранением нужно проверить тип поста. Если этого не сделать, то один и тот же код будет выполнен на каждом типе постов. Стоимость продукта (пакета) и ссылка для покупки будут сохранены непосредственно в таблице
post_meta с использованием функции
update_post_meta. Особенности продукта (пакета) будут сохранены в виде закодированных
JSON строк. Создание продукта (пакета) закончено. Перейдем к созданию ценовых таблиц.
Создание ценовых таблиц
Ценовые таблицы будут еще одной пользовательской записью (Post Type) нашего плагина. Создание пользовательских типов постов и сохранение их в базе данных схоже с объяснениями кодов, изложенными ранее. Вы сможете найти создание пользовательского поста и кода сохранения для ценовой таблицы в файлах плагина.
Ценовые таблицы содержат цены всех продуктов (пакетов). Таким образом, мета поля, используемые для образования ценовых таблиц, будут отличаться от тех, которые были использованы для образования цен продуктов (пакетов). Создание мета поля для ценовой таблицы можно посмотреть ниже.
|
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 |
add_action( 'add_meta_boxes', 'wppt_pricing_tables_meta_boxes' ); function wppt_pricing_tables_meta_boxes() { add_meta_box( "pricing-table-info", "Pricing Table Info", 'wppt_generate_pricing_table_info', "pricing_tables", "normal", "high" ); } function wppt_generate_pricing_table_info() { global $post; $table_packages = get_post_meta( $post->ID, "_table_packages", true ); $table_packages = ( $table_packages == '' ) ? array() : json_decode( $table_packages ); $query = new WP_Query( array( 'post_type' => 'pricing_packages', 'post_status' => 'publish', 'posts_per_page' => -1, 'orderby' => 'post_date', 'order' => 'ASC' ) ); $html = '<input type="hidden" name="pricing_table_box_nonce" value="' . wp_create_nonce( basename( __FILE__ ) ) . '" />'; $html .= '<table class="form-table">'; $html .= '<tr><th>Package Status</th>'; $html .= ' <td>Package Name</td></tr>'; while ( $query->have_posts() ) : $query->the_post(); $checked_status = ( in_array( $query->post->ID, $table_packages ) ) ? "checked" : ""; $html .= '<tr><th><input type="checkbox" name="pricing_table_packages[]" ' . $checked_status . ' value="' . $query->post->ID . '" /></th>'; $html .= ' <td>' . $query->post->post_title . '</td></tr>'; endwhile; $html .= '</table>'; echo $html; } |
Можно добавлять пользовательские мета поля ценовых таблиц, используя подобный код предыдущего раздела. Все продукты (пакеты) ценовой таблицы будут храниться в виде закодированных
JSON строк в
post_meta. Таким образом, используя функцию
get_post_meta, получаем пакеты для текущей таблицы. Тогда с помощью пользовательских запросов мы получим опубликование всех цен продуктов (пакетов), как показано ниже.
|
1 2 3 4 5 6 7 |
$query = new WP_Query( array( 'post_type' => 'pricing_packages', 'post_status' => 'publish', 'posts_per_page' => -1, 'orderby' => 'post_date', 'order' => 'ASC' ) ); |
Пакеты можно выбирать с помощью постов пользовательского типа
pricing_packages. Условия запроса можно выбрать другими в соответствии со своими предпочтениями.
Затем для отображения всех ценовых пакетов с флажками перед ними используем результаты, полученные (сгенерированные) от WP_Query. Циклом проверяется, является ли пакет уже назначенным в таблицу и назначается проверка пакетов с флажками. Добавлять или удалять пакеты можно динамически, выбрав /сняв флажки и нажав на кнопку «Обновить».
- Руководство как добавить сайдбар WordPress
- Плагин менеджер сайдбаров Вордпресс
- Плагин статистики рекламы на сайте
Проверка создания ценовых таблиц
Необходимо проверить имя ценовой таблицы, так же как выполнялось ранее для цен продуктов (пакетов). Для проверки будет использоваться следующий
JQuery код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
var wppt_validate_pricing_tables = function() { var err = 0; $("#pricing_error").html(""); $("#pricing_error").hide(); if ( $("#title").val() == '' ) { $("#pricing_error").append( "<p>Please enter Pricing Table Name.</p>" ); err++; } if ( err > 0 ) { $("#publish").removeClass( "button-primary-disabled" ); $("#ajax-loading").hide(); $("#pricing_error").show(); return false; } else { return true; } }; |
Код, приведенный выше, уже включен в
JS папку плагина в файл
pricing_admin.js.
Создание ID ценовой таблицы
Для того чтобы включить ценовые таблицы в короткий номер, необходим уникальный ключ. В качестве такого уникального ключа будем использовать ID ценовой таблицы. После создания ценовой таблицы можно показать ее ID в виде списка с помощью пользовательского столбца. WordPress предоставляет простой способ включения настраиваемых столбцов, представленных в виде списка, как показано ниже:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
add_filter( 'manage_edit-pricing_tables_columns', 'wppt_edit_pricing_tables_columns' ); function wppt_edit_pricing_tables_columns( $columns ) { $columns = array( 'cb' => '<input type="checkbox" />', 'ID' => __( 'Pricing Table ID' ), 'title' => __( 'Pricing Table Name' ), 'date' => __( 'Date' ) ); return $columns; } |
Чтобы настроить отображение столбцов в виде списка можно использовать фильтр
manage_edit-{Custom Post Type}_columns. На примере видно назначение пользовательского столбца
ID ценовой таблицы с использованием
ID поста.
|
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 |
add_action( 'manage_pricing_tables_posts_custom_column', 'wppt_manage_pricing_tables_columns', 10, 2 ); function wppt_manage_pricing_tables_columns( $column, $post_id ) { global $post; switch ( $column ) { case 'ID' : $pricing_id = $post_id; if ( empty( $pricing_id ) ) echo __( 'Unknown' ); else printf( $pricing_id ); break; default : break; } } add_filter( 'manage_edit-pricing_tables_sortable_columns', 'wppt_pricing_tables_sortable_columns' ); function wppt_pricing_tables_sortable_columns( $columns ) { $columns['ID'] = 'ID'; return $columns; } |
Переключателем условия (положения)
manage_{Custom Post Type}_posts_custom_column можно присваивать значения в столбце. Колонка для сортировки создается с помощью фильтра
manage_edit-{Custom Post Type}_sortable_columns. После создания в плагине ценовой таблицы номер (
ID) можно увидеть в списке.
Содержание в плагине скриптов и стилей
Для проверки функции области администрирования используется специальный файл
JavaScript. Для начала взглянем на файлы сценариев в созданном плагине WordPress, включенных в область администрирования.
|
1 2 3 4 5 6 7 |
function wppt_pricing_admin_scripts() { wp_register_script( 'pricing-admin', plugins_url( 'js/pricing_admin.js', __FILE__ ), array( 'jquery' ) ); wp_enqueue_script( 'pricing-admin' ); } add_action( 'admin_enqueue_scripts', 'wppt_pricing_admin_scripts' ); |
admin_enqueue_scripts – средство (зацепка), которую можно использовать для включения всех
CSS и файлов сценариев в админку WordPress. Сначала необходимо с помощью функции
wp_register_script, имеющей уникальный ключ и путь к файлу, зарегистрировать сценарий. Тогда можно будет использовать функции
wp_eniqueue_script для включения (размещения) файлов.
Посмотрим на включение передних (фронтальных) окончательных стилей и скриптов, используя код ниже:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
function wppt_pricing_front_scripts() { wp_register_style( 'pricing-base', plugins_url( 'css/base.css', __FILE__ ) ); wp_enqueue_style( 'pricing-base' ); wp_register_style( 'pricing-layout', plugins_url( 'css/layout.css', __FILE__ ) ); wp_enqueue_style( 'pricing-layout' ); wp_register_style( 'pricing-fluid-skeleton', plugins_url( 'css/fluid_skeleton.css', __FILE__ ) ); wp_enqueue_style( 'pricing-fluid-skeleton' ); wp_register_style( 'pricing-table', plugins_url( 'css/pricing_table.css', __FILE__ ) ); wp_enqueue_style( 'pricing-table' ); } add_action( 'wp_enqueue_scripts', 'wppt_pricing_front_scripts' ); |
В начале упоминалось о создании реагирования ценовой таблицы. Для обеспечения функциональности реагирования легче использовать существующую структуру
CSS. Поэтому в качестве основы выбран Скелетон (часть сгенерированного программного кода). Первые три
CSS файла будут файлами модели Скелетона, а затем включенный в файл
pricing_table.css пользовательский стиль для нашей ценовой таблицы.
Все данные для установления ценовых таблиц готовы и можно переходить к созданию дизайна ценовой таблицы.
Проектирование вывода цены таблицы
Проектирование реагирования ценовой таблицы – трудоемкая задача, требующая глубоких знаний
HTML и
CSS. Следующий код содержит код ценовой таблицы с двумя продуктами (пакетами):
|
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 |
<div class="container"> <div id='pricing_plan1' class="four columns"> <dl class='plans' > <dd class="plan_title"> Basic </dd> <dd class="plan_price"> $9.99 </dd> </dl> <dl class='plan' id="one"> <dt class='plan_more'>View<a href="#one" class="more_icon"></a><a href="#" class="less_icon"></a></dt> <dd class="plan_features"> <div class="feature_desc"><span class="highlight">1GB</span> Storage</div> </dd> <dd class="plan_features"> <div class="feature_desc"><span class="highlight">5GB</span> Bandwidth</div> </dd> <dd class="plan_features"> <div class="feature_desc"><span class="highlight">2</span> Domains</div> </dd> <dd class="plan_features"> <div class="feature_desc"><span class="highlight">3</span> Databases</div> </dd> <dd class="plan_features"> <div class="feature_desc"><span class="highlight">1</span> FTP Account</div> </dd> <dd class="plan_features"> <div class="feature_desc"><span class="highlight">25</span> Email Accounts</div> </dd> <dd class="plan_buy"> <a href='' class='buy' >Buy Now</a> </dd> </dl> </div> <div id='pricing_plan2' class="four columns"> <dl class='plans'> <dt class="plan_title"> Standard </dt> <dd class="plan_price"> $19.99 </dd> </dl> <dl class='plan' id="two"> <dt class='plan_more'>View<a href="#two" class="more_icon"></a><a href="#" class="less_icon"></a></dt> <dd class="plan_features"> <div class="feature_desc"><span class="highlight">10GB</span> Storage</div> </dd> <dd class="plan_features"> <div class="feature_desc"><span class="highlight">50GB</span> Bandwidth</div> </dd> <dd class="plan_features"> <div class="feature_desc"><span class="highlight">10</span> Domains</div> </dd> <dd class="plan_features"> <div class="feature_desc"><span class="highlight">25</span> Databases</div> </dd> <dd class="plan_features"> <div class="feature_desc"><span class="highlight">10</span> FTP Account</div> </dd> <dd class="plan_features"> <div class="feature_desc"><span class="highlight">100</span> Email Accounts</div> </dd> <dd class="plan_buy"> <a href='' class="buy">Buy Now</a> </dd> </dl> </div> </div> |
Теперь необходимо выбрать метод включения кода ценовой таблицы в WordPress. Можно включить этот код в короткий номер или создать определенный шаблон страницы. Далее будем использовать короткий номер. А также попробуем метод шаблона страницы.
- Статейное продвижение сайтов
- Составляем саментическое ядро
- Преимущества и недостатки использования HTML5
Создание shortcode цен
Shortcode – простой способ динамического добавления функциональности ваших постов и страниц. Для вставки ценовой таблицы будем использовать код под названием
wppt_show_pricing. Необходимо пройти идентификацию
ID ценовой таблицы как параметра короткого номера с помощью ключа
pricing_id. Реализация
Shortcode:
|
1 2 3 4 5 6 7 8 9 10 |
add_shortcode( "wppt_show_pricing", "wppt_generate_pricing_table" ); function wppt_generate_pricing_table( $atts ) { global $post; extract( shortcode_atts( array( 'pricing_id' => '0', ), $atts ) ); // Remaining Code } |
В примере shortcode называется
wppt_show_pricing и использована WordPress функция
add_shotcode, которая автоматически преобразует
shortcode. Сначала мы извлекаем массив коротких номеров и
ID ценовой таблице будет присвоено значение переменной
pricing_id. Остальная часть кода разъясняется в следующих разделах.
|
1 2 3 |
global $post; $table_packages = get_post_meta( $pricing_id, "_table_packages", true ); $table_packages = ( $table_packages == '' ) ? array() : json_decode( $table_packages ); |
В результате получаем
ID ценовой таблицы, который соответствует (присваивается) короткому номеру и всем пакетам, включенным в ценовую таблицу из таблицы
post_meta.
|
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 |
$html = '<div class="container">'; $pricing_index = 0; foreach ( $table_packages as $table_package ) { $pricing_index++; $plan_title = get_the_title( $table_package ); $package_price = get_post_meta( $table_package, "_package_price", true ); $package_buy_link = get_post_meta( $table_package, "_package_buy_link", true ); $package_features = get_post_meta( $table_package, "_package_features", true ); $package_features = ( $package_features == '' ) ? array() : json_decode( $package_features ); $html .= '<div id="pricing_plan' . $pricing_index . '" class="four columns">'; $html .= '<dl class="plans"> <dd class="plan_title"> ' . $plan_title . ' </dd> <dd class="plan_price"> $' . $package_price . ' </dd> </dl>'; $html .= '<dl class="plan" id="pr' . $pricing_index . '"> <dt class="plan_more">View<a href="#pr' . $pricing_index . '" class="more_icon"></a> <a href="#" class="less_icon"></a> </dt>'; foreach ( $package_features as $package_feature ) { $html .= '<dd class="plan_features"> <div class="feature_desc"><span class="highlight">' . $package_feature . '</span></div> </dd>'; } $html .= '<dd class="plan_buy"> <a href="' . $package_price . '" class="buy" >Buy Now</a> </dd> </dl>'; $html .= '</div>'; } $html .= '</div>'; echo $html; |
Функцией
get_post_meta получаем особенности и детали продукта (пакета) при прохождении каждого продукта (пакета), созданного в предыдущем коде. Затем вставляем (включаем)
HTML код с динамическими данными для отображения ценовой таблицы. И, наконец, возвращаем сгенерированный
HTML код, отображенный внутри страницы, содержащей короткий номер.
Разработка плагина ценовой таблицы для WordPress завершена. Можно конечно добавить переключатель размера текста jQuery или другие css навороты. Можно пройти через первичный (исходный) код и добавить собственные пользовательские функции в соответствии со своими предпочтениями.
- SEO: Как поднять Тиц и PR сайта
- Микроформаты для бизнес сайтов
- Что такое региональная выдача?
- Правила успеха в приобритении ссылок
Рекомендации по использованию ценовых таблиц
С помощью этого плагина любой человек, обладающий базовыми знаниями работы с WordPress, сможет создать ценовые таблицы. Далее приведены шаги для того, чтобы сделать плагин более удобным для пользователей без особого опыта работы с WordPress.
- Устанавливаем плагин через админ панель или FTP.
- Выбирайте раздел «Цены продуктов (пакетов)» в левом меню и создайте продукт (пакет) с именем, ценой, ссылкой для покупки и возможностями. Продолжайте этот процесс, пока не создадите все свои пакеты.
- Затем для добавления новой ценовой таблицы следует нажать на «Ценовые таблицы» в левом меню. Список продуктов (пакетов) отобразится в нижней части экрана. Выберите желаемые (необходимые) продукты (пакеты) и сохраните в ценовой таблице с определенным именем.
- Переходим к списку ценовой таблицы и находим ID вновь созданной таблицы.
- Затем нажимаем на раздел страниц для добавления новой страницы. Вводим короткий код [wppt_show_pricing hpising_id='ID'/] внутрь редактора страницы. Заменяем ID фактическим ID ценовой таблицы.
- Сохраняем таблицу и смотрим на нее в браузере. Вы получите свою реагирующую ценовую таблицу.
0 комментарий