Створюємо шорт-код для виведення списку записів із різними параметрами

Дуже часто треба створити список постів на сторінці сайту, використовуючи різні додаткові параметри. Для створення таких списків, що настроюються, необхідно застосовувати кілька різних параметрів і запитів. Але є й інший, простіший шлях вирішення цього завдання.

Завантажити вихідні

У цьому пості йдеться про використання шорт-коду для різних типів постів та списків, що дозволить вам створювати практично будь-які переліки на сторінках сайту WordPress.

Для початку: Створюємо контент

Перед початком роботи із шорт-кодом треба зареєструвати новий тип постів с 2 типами таксономіїяка буде використовуватися для тестування нашого шорт-коду.

Дивіться також:

• Посібник з кастомних типів записів WordPress
• Custom Post Types: таксономії, фільтри та архіви в WordPress
• Як використовувати кастомні поля для створення мета-блоків із оглядами

Сам код міститься у плагіні, який був написаний спеціально для виконання шорт-коду; хоча в реальних, а не тестових проектах, ми рекомендуємо застосовувати окремо код та окремо – плагін для виконання цього коду.

Для початку створюємо новий файл у папці з плагінами під назвою post-listing-shortcode.php. У нього розміщуємо код, який наведено нижче.

Примітка: Створення видів постів, що настроюються, і пов'язаної з ними таксономії — не ключовий момент у цьому практичному керівництві Якщо хочете, можете копіювати наведений далі код із завантаженого вами файлу та пропустити цей крок.

<?php
/*
Plugin Name: WPTutsPlus Post-listing shortcode
Plugin URI: 
Description: This plugin provides a shortcode to list posts, with parameters. It also registers a couple of post types and tacxonomies to work with.
Version: 1.0
Author: Rachel McCollin
Author URI: 
License: GPLv2
*/
// register custom post type to work with
add_action( 'init', 'rmcc_create_post_type' );
function rmcc_create_post_type() {  // clothes custom post type
    // set up labels
    $labels = array(
        'name' =--> 'Clothes',
        'singular_name' => 'Clothing Item',
        'add_new' => 'Add New',
        'add_new_item' => 'Add New Clothing Item',
        'edit_item' => 'Edit Clothing Item',
        'new_item' => 'New Clothing Item',
        'all_items' => 'All Clothes',
        'view_item' => 'View Clothing Item',
        'search_items' => 'Search Clothes',
        'not_found' =>  'No Clothes Found',
        'not_found_in_trash' => 'No Clothes found in Trash',
        'parent_item_colon' => '',
        'menu_name' => 'Clothes',
    );
    register_post_type(
        'clothes',
        array(
            'labels' => $labels,
            'has_archive' => true,
            'public' => true,
            'hierarchical' => true,
            'supports' => array( 'title', 'editor', 'excerpt', 'custom-fields', 'thumbnail','page-attributes' ),
            'taxonomies' => array( 'post_tag', 'category' ),
            'exclude_from_search' => true,
            'capability_type' => 'post',
        )
    );
}
 
// register two taxonomies to go with the post type
add_action( 'init', 'rmcc_create_taxonomies', 0 );
function rmcc_create_taxonomies() {
    // color taxonomy
    $labels = array(
        'name'              => _x( 'Colors', 'taxonomy general name' ),
        'singular_name'     => _x( 'Color', 'taxonomy singular name' ),
        'search_items'      => __( 'Search Colors' ),
        'all_items'         => __( 'All Colors' ),
        'parent_item'       => __( 'Parent Color' ),
        'parent_item_colon' => __( 'Parent Color:' ),
        'edit_item'         => __( 'Edit Color' ),
        'update_item'       => __( 'Update Color' ),
        'add_new_item'      => __( 'Add New Color' ),
        'new_item_name'     => __( 'New Color' ),
        'menu_name'         => __( 'Colors' ),
    );
    register_taxonomy(
        'color',
        'clothes',
        array(
            'hierarchical' => true,
            'labels' => $labels,
            'query_var' => true,
            'rewrite' => true,
            'show_admin_column' => true
        )
    );
    // fabric taxonomy
    $labels = array(
        'name'              => _x( 'Fabrics', 'taxonomy general name' ),
        'singular_name'     => _x( 'Fabric', 'taxonomy singular name' ),
        'search_items'      => __( 'Search Fabrics' ),
        'all_items'         => __( 'All Fabric' ),
        'parent_item'       => __( 'Parent Fabric' ),
        'parent_item_colon' => __( 'Parent Fabric:' ),
        'edit_item'         => __( 'Edit Fabric' ),
        'update_item'       => __( 'Update Fabric' ),
        'add_new_item'      => __( 'Add New Fabric' ),
        'new_item_name'     => __( 'New Fabric' ),
        'menu_name'         => __( 'Fabrics' ),
    );
    register_taxonomy(
        'fabric',
        'clothes',
        array(
            'hierarchical' => true,
            'labels' => $labels,
            'query_var' => true,
            'rewrite' => true,
            'show_admin_column' => true
        )
    );
}
?>

Цей код "повідомляє" движку WordPress про новий плагін і реєструє тип постів, що настроюється.одяг' і 2 види в рамках таксономії - 'color'І'тканину.

Новий плагін ми зберігаємо та активуємо його на сторінці "Плагіни" в консолі WordPress.

Ми створили власний тип постів і таксономію до нього. Тепер час зайнятися створенням контенту. Ось як це виглядатиме:

Створюємо простий шорт-код для списку

Якщо ви просто хочете представити пости в формат списку, можна створити дуже простий шорт-код, в якому не використовується ніяких додаткових параметрів.

Для цього відкрийте файл знову і додайте до нього наступний код:

// create shortcode to list all clothes which come in blue
add_shortcode( 'list-posts-basic', 'rmcc_post_listing_shortcode1' );
function rmcc_post_listing_shortcode1( $atts ) {
    ob_start();
    $query = new WP_Query( array(
        'post_type' => 'clothes',
        'color' => 'blue',
        'posts_per_page' => -1,
        'order' => 'ASC',
        'orderby' => 'title',
    ) );
    if ( $query->have_posts() ) { ?>
        <ul class="clothes-listing">
            <?php while ( $query->have_posts() ) : $query->the_post(); ?>
            <li id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
            </li>
            <?php endwhile;
            wp_reset_postdata(); ?>
        </ul>
    <?php $myvariable = ob_get_clean();
    return $myvariable;
    }
}

Ось у нас з'явився простий шорт-код із використанням WP_Query для виконання настроюваного запиту до контенту та видачі результату у форматі списку постів. Коли вводимо [list-posts-basic] на сторінці, результати відображаються так:

Додаємо параметри для зміни запиту

Але від нашого шорт-коду буде набагато більше користі, якщо ми додамо до нього якісь вибіркові параметри, Наприклад:

• Скільки постів має бути у списку
• Які типи постів торкаються нашого запиту
• Які категорії мають бути включені до запиту
• Які кольори та матеріали тканини повинні фігурувати у списку
• Упорядкування параметрів

Для додавання цих додаткових параметрів до нашого шорт-коду ми використовуємо функцію shortcode_atts()дозволяє нам визначити конкретні атрибути для використання.

І ось у ваш код треба внести такі зміни (у файлі плагіна):

// create shortcode with parameters so that the user can define what's queried - default is to list all blog posts
add_shortcode( 'list-posts', 'rmcc_post_listing_parameters_shortcode' );
function rmcc_post_listing_parameters_shortcode( $atts ) {
    ob_start();
 
    // define attributes and their defaults
    extract( shortcode_atts( array (
        'type' => 'post',
        'order' => 'date',
        'orderby' => 'title',
        'posts' => -1,
        'color' => '',
        'fabric' => '',
        'category' => '',
    ), $atts ) );
 
    // define query parameters based on attributes
    $options = array(
        'post_type' => $type,
        'order' => $order,
        'orderby' => $orderby,
        'posts_per_page' => $posts,
        'color' => $color,
        'fabric' => $fabric,
        'category_name' => $category,
    );
    $query = new WP_Query( $options );
    // run the loop based on the query
    if ( $query->have_posts() ) { ?>
        <ul class="clothes-listing ">
            <ul class="clothes-listing ">
                <li id="post-<?php the_ID(); ?>">></li>
            </ul>
        </ul>
    <?php
        $myvariable = ob_get_clean();
        return $myvariable;
    }
}

Примітка: Застосування ob_start () и ob_get_clean() як параметри гарантує вам, що виведення циклу відбудеться на тій самій сторінці або на тому ж посту, де ви помістили свій шорт-код. Якщо ви не додасте ці параметри, список буде виводитися просто вгорі до завантаження решти контенту.

За умовчанням усі пости сортуються за датою за спаданням, так що якщо ви вкажете параметр [list-posts] на сторінці або в пості, то отримаєте такий результат, як на малюнку нижче:

Але якщо додати кілька інших параметрів, то може вийти видача і цікавіше за колишню. Наприклад, щоб скласти список усіх видів одягу чорного кольору, вводимо:

А щоб перерахувати у списку всі найменування одягу з категорії 'розумний', вводимо:

Якщо вам потрібно вказати більше параметрів, можна визначити більше атрибутів, з якими зможуть працювати користувачі, які задають запити для сортування та отримання списків. Але вам потрібно всі ці доступні параметри для списків та сортування включити у ваш плагін у функцію extract( shortcode_atts)).

Не варто вказувати значення за промовчанням для всіх цих параметрів (наприклад, я залишив порожнім значення для категорії та таксономії). Параметри, які ви можете задати у явному вигляді, це ті, які можна визначити у WP_Query. Для доступу до їх повного переліку подивіться ось цю Codex-сторінку.

Підводимо підсумки

Додавання списку постів / товарів / предметів на сторінку або пост - зручна фішка для будь-якого інтернет-ресурсу, яка може розширити і доповнити його функціональність. Шорт-коди, про які йшлося в цьому практичному уроці, допоможуть вам вирішити завдання додавання списків, що настроюються, з різними параметрами. Код у циклі, наведений у прикладах цього практичного заняття, можна замінити на теги для відображення картинок, різних видів контенту і так далі.

Корисні посилання

За темою створення списків на основі шорт-кодів вам знадобляться:

• The Shortcode API
• Атрибути шорт-кодів
• WP_Query та параметри для нього

Джерело: WP.tutsplus.com

Олексій Шевченко

редактор wpcafe

Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, що спеціалізується на створенні сайтів WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/