Більше результатів...

Загальні селектори
Тільки точні збіги
Шукати у заголовках
Шукати у контенті
Вибір типів постів
Фільтрувати за категоріями
FAQ
Hostenko
Натхнення
Відео уроки
Новини
Плагіни
теми
Уроки
Хакі

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

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

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

inet.ws - Powerful VPS Hosting в США, Canada, UK та DE!

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

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

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

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

Для початку створюємо новий файл у папці з плагінами під назвою 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] на сторінці або в пості, то отримаєте такий результат, як на малюнку нижче:

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

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

[list-posts type="clothes" color="black" orderby="name" order="ASC"]

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

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

[list-posts type="clothes" category="smart" orderby="name" order="ASC"]

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

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

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

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

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

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

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

  • The Shortcode API
  • Атрибути шорт-кодів
  • WP_Query та параметри для нього
Джерело: WP.tutsplus.com
inet.ws - Powerful VPS Hosting в США, Canada, UK та DE!
Олексій Шевченко
редактор wpcafe
Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, який спеціалізується на створенні сайтів на WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/

Коментарі до запису: 7

Георгій:

Дякуємо за статтю.

Підкажіть потім отриманий стовпець розбити на колонки (оптимально на 3).

Георгій:

Виведення тегів запису до шаблону запису:

Заголовок тегів:

<?php

echo '';

echo get_the_term_list($post->ID, 'post_tag', », », »);

echo»;

?>

Виведення таксономії 'poslugi' у шаблон запису:

Заголовок таксономії:

<?php

echo '';

echo get_the_term_list($post->ID, 'poslugi', », », »);

echo»;

?>

Теги:

<?php

echo '';

echo get_the_term_list($post->ID, 'post_tag', », », »);

echo»;

?>

У файл стилів додав таке:

/* стилі для блоку виведення тегів і таксономій та безпосередньо розбивки даних на 3 стовпці*/

#three-columns{

/* Кількість колонок */

-webkit-column-count: 3;

-moz-column-count: 3;

column-count: 3;

}

#three-columns > ul li {

list-style: none; /* Забираємо маркери списку */

запас: 0;

}

#three-columns > ul li > a {

Дисплей: блок;

padding:4px 0 4px 2px;

color: #067AB4; /* Колір посилань */

border-bottom:1px dotted #53575f;

font-family: 'helvetica neue', Helvetica, sans-serif; /* шрифт */

font-size: smaller; /* Розмір шрифту */

}

#three-columns > ul li > a:hover {

background-color: #f0f0f0;

}

/* стилі для блоку виведення тегів та таксономій - кінець */

todayz:

Корисна стаття Ось тільки не зрозуміло чому, але потім не можу подивитися створений пост. Сторінку не знайдено. Використання WP 4.4. Може там щось змінилося в двигуні?

Ян:

Вам потрібно зайти в Налаштування => Постійні посилання, та оновити всі налаштування

todayz:

Дивно… Заліз у «Налаштування постійних посилань»
Змінив спочатку на прості види "? p = 123". Почали відкриватися. Потім змінив на назву запису і зберіг. І сторінки стали нормально відкриватися))

Влад:

Чудова стаття! Але як реалізувати пагінацію?

Ян:

У мене виводяться лише звичайні записи: (

Додати коментар або відгук