Как создать автоматический раздел для новостей в WordPress с фильтрацией по категориям

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

Почему важно автоматизировать раздел новостей в WordPress

Ручное создание и обновление страниц с новостями — это не только дорого по времени, но и чревато ошибками. Автоматизация позволяет:

• Автоматически отображать новые записи без необходимости редактирования страницы;
• Фильтровать новости по категориям, что удобно для пользователей;
• Улучшить SEO за счёт правильной организации контента;
• Сохранить единый стиль оформления и структуру.

Для этого мы используем возможности WordPress, такие как WP_Query, шаблоны и короткие коды.

Как создать кастомный раздел новостей с фильтрацией по категориям

1. Создаём страницу и добавляем шорткод

Для начала создадим новую страницу в админке — например, "Новости". В её содержимое мы вставим шорткод, который будет выводить список новостей с фильтром.

Добавим код шорткода в файл functions.php вашей темы или в плагин, чтобы не потерять изменения при обновлении темы:

function journalx_news_filter_shortcode() {
  ob_start();
  ?>
  <div id="journalx-news-filter">
    <select id="journalx-category-select">
      <option value="all">Все категории</option>
      <?php
      $categories = get_categories();
      foreach($categories as $category) {
        echo '<option value="' . esc_attr($category->slug) . '">' . esc_html($category->name) . '</option>';
      }
      ?>
    </select>
    <div id="journalx-news-list"></div>
  </div>
  <script>
  document.addEventListener('DOMContentLoaded', function() {
    const select = document.getElementById('journalx-category-select');
    const newsList = document.getElementById('journalx-news-list');

    function fetchNews(category) {
      let url = '<?php echo admin_url('admin-ajax.php'); ?>?action=journalx_get_news';
      if(category && category !== 'all') {
        url += '&category=' + category;
      }
      fetch(url)
        .then(response => response.text())
        .then(html => {
          newsList.innerHTML = html;
        });
    }

    select.addEventListener('change', function() {
      fetchNews(this.value);
    });

    // Загрузить новости сразу при загрузке страницы
    fetchNews('all');
  });
  </script>
  <?php
  return ob_get_clean();
}
add_shortcode('journalx_news_filter', 'journalx_news_filter_shortcode');

Этот шорткод создаёт селектор категорий и пустой блок для вывода новостей. При изменении категории происходит AJAX-запрос на сервер для получения свежих данных.

2. Обрабатываем AJAX-запрос и выводим новости

Теперь необходимо зарегистрировать обработчик AJAX-запроса в functions.php:

function journalx_ajax_get_news() {
  $category = isset($_GET['category']) ? sanitize_text_field($_GET['category']) : '';

  $args = [
    'post_type' => 'post',
    'posts_per_page' => 10,
  ];

  if ($category && $category !== 'all') {
    $args['category_name'] = $category;
  }

  $query = new WP_Query($args);

  if ($query->have_posts()) {
    echo '<ul class="journalx-news-items">';
    while ($query->have_posts()) {
      $query->the_post();
      echo '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a> <span>' . get_the_date('d.m.Y') . '</span></li>';
    }
    echo '</ul>';
  } else {
    echo '<p>Новости не найдены.</p>';
  }
  wp_die();
}
add_action('wp_ajax_journalx_get_news', 'journalx_ajax_get_news');
add_action('wp_ajax_nopriv_journalx_get_news', 'journalx_ajax_get_news');

Этот код проверяет переданную категорию, формирует запрос к базе и выводит список новостей. Если новостей нет, выводит сообщение об этом.

Подключение стилей для оформления раздела новостей

Для удобства восприятия добавим базовые стили. В файл style.css вашей темы или через enqueue_style добавьте:

.journalx-news-items {
  list-style: none;
  padding: 0;
}
.journalx-news-items li {
  margin-bottom: 10px;
  font-size: 16px;
}
.journalx-news-items li a {
  text-decoration: none;
  color: #0073aa;
}
.journalx-news-items li a:hover {
  text-decoration: underline;
}
#journalx-category-select {
  margin-bottom: 20px;
  padding: 5px;
  font-size: 16px;
}
#journalx-news-list p {
  font-style: italic;
  color: #666;
}

Стили сделают список новостей аккуратным и удобочитаемым, а селектор — заметным и простым в использовании.

Использование плагина для расширенных функций

Если хотите дополнительно улучшить раздел, например, добавить пагинацию, сортировку или кэширование, можно обратить внимание на плагин ABC Pagination от WPShop. Он позволяет легко интегрировать постраничную навигацию в ваш кастомный вывод новостей.

Подключение ABC Pagination может выглядеть так:

if (function_exists('abc_pagination')) {
  abc_pagination($query->max_num_pages);
}

Это позволит пользователям листать новости, не перегружая страницу большим количеством элементов.

Итоги и рекомендации по работе с разделом новостей

Созданный код — это лёгкий и гибкий способ организовать раздел новостей с фильтром категорий. Вы можете расширять функционал, добавляя сортировку, фильтры по датам, автору и другие параметры WP_Query.

Также рекомендуем использовать кэширование результатов AJAX, если у вас большой трафик, чтобы снизить нагрузку на сервер. Для этого подойдёт плагин Clearfy Pro с функциями оптимизации и кэширования.

Используйте данный пример как базу для создания удобного и современного новостного раздела на вашем сайте journalx.ru.