Чек лист по WP 2 часть

Дневник разработчика

Вывод списка постов в шаблоне архивов

Для этого мы редактируем шаблон archive.php

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

В результате чего должна получиться примерно такая конструкция:

Это изображение имеет пустой атрибут alt; его имя файла - image-47.png
В этом примере я нашёл обёртку списка статей, удалили все повторяющиеся блоки и обернул оставшийся блок в цикл с условием, если есть посты… А снизу добавил, что если нет — показывать текстовое сообщение.

Вот что получилось в итоге вставок всех необходимых фрагментов php:

<?php the_excerpt(); ?> — вывод анонса статьи (краткое содержание)

<?php the_permalink(); ?> — вывод ссылки на полную статью

Это изображение имеет пустой атрибут alt; его имя файла - image-48.png
<!-- grid posts -->
          <div class="row items-grid">
            <?php          // проверяем есть ли посты в глобальном запросе - переменная $wp_query          
            if( have_posts() ) : ?>

            <?php while(have_posts() ) : the_post(); ?> <div class="col-sm-6">
              <article class="entry-item">
                <div class="entry-img"> <a href="<?php the_permalink(); ?>"> <img
                      src="<?php echo get_stylesheet_directory_uri() ?>/img/post_1.jpg" alt="Чек лист по WP 2 часть"> </a> </div>
                <div class="entry-header">
                  <div class="entry-category"><?php the_category( ', '); ?></div>
                  <h2 class="entry-title"> <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> </h2>
                </div>
                <div class="entry-wrap">
                  <div class="entry">
                    <div class="entry-content"> <?php the_excerpt(); ?> </div>
                    <div class="entry-meta-wrap clearfix">
                      <ul class="entry-meta">
                        <li class="entry-date"> <?php the_time( 'j F Y H:i'); ?> </li>
                        <li class="entry-comments"> <a href="blog-single.html">5 комментариев</a> </li>
                      </ul>
                    </div>
                  </div>
                </div>
              </article>

            </div> 
            <?php endwhile; ?>
            </div> <!-- end grid posts --> 
            
            <?php else: ?> 
            <p>К сожалению тут нет публикаций. заходите попозже.</p>
            <?php endif; ?>

Вывод названия рубрик и описание к ним на отдельных страницах

Для того что бы видеть названия рубрик и их описание на страницах категорий или архивов нам потребуется сделать две вещи:

Заполнить описание в админке (если этого еще не сделано)

Вывести заголовки и описание в шаблоне файла archive.php

для этого мы используем следующие команды (функции)

<?php single_cat_title(); ?> — заголовок категории (её название)

<?php echo category_description(); ?> — выводим описание отдельной категории

Это изображение имеет пустой атрибут alt; его имя файла - image-50.png

Добавление новой папки для хранения отдельных мелких фрагментов шаблонов темы

В созданной ранее папке для шаблонов page-templates создадим еще одну папку, в которой будем сохранять отдельно взятые фрагменты кода — шаблоны виджетов, анонсов, хлебных крошек и прочего.

Это потребуется нам, что бы упростить разработку и админисртирование темы.

В нашем случае создадим отдельный темплейт анонса поста, который используется в архивах и списках статей. А затем подключим его в шаблон.

Это изображение имеет пустой атрибут alt; его имя файла - image-51.png
Вырезали из шаблона блок кода, который отвечал за вывод разметки анонса статьи на страницах категорий и архивов. Сохранив его в отдельный файл.

Теперь наша тема использует не только большие шаблоны, но и мини-шаблоны отдельных элементов сайта и если на сайте что то сломается — мы легко и просто сможем это исправить в отдельном файле, без риска для остальных файлов темы.

Давайте глянем на структуру темы на данный момент.

Вывод динамической пагинации

для вывода пагинации нам понадобится сделать две вещи:

  1. Вынести фрагмент разметки пагинации в отдельный файл
  2. Используя функцию paginate_links() выведем пагинаци.
  3. Подключить этот файл мини-шаблона в основных шаблонах, на которых предусмотрена пагинация.

Фрагмент шаблона с пагинацией выглядит вот так

Это изображение имеет пустой атрибут alt; его имя файла - image-52.png

Чтобы добавить ссылки на предыдущую/следующую страницу, нужно включить логический параметр prev_next (указать ему true), а затем можно установить текст ссылок указав параметры prev_text/next_text  (предыдущая ссылка/следующая ссылка). Так мы и сделали.

На всяк случай сохраню этот код здесь.

<!-- Пагинация -->
<div class="row mt-20">
  <div class="col-md-12 text-center pagination">
    <?php echo paginate_links( array(
              'prev_next' => true,
              'prev_text' => '<i class="icon arrow_carrot-left"></i>',
              'next_text' => '<i class="icon arrow_carrot-right"></i>',
            ) ); ?>

  </div>
</div>

Не забываем проделать манипуляции с кодом разметки и функциями на всех шаблонах: index.php, archive.php и tag.php

Оживление тегов и создание отдельного шаблона для списка статей по тегу

Кстати, у нас появился новый файл шаблона tag.php. Мы создали его для шаблонизации страницы тегов, на которую переходишь при клике по конкретному тегу. на ней отображается список постов с выбранным тегом.

По идее с этой задачей отлично справится наш шаблон archive.php, но мы же любим делать все хорошо. Да и к тому же пример работы с этим шаблоном позволит показать еще одну особенность с выводом заголовка и описания тега.

Обратите внимание на то, какие функции я использую:

<?php single_tag_title(); ?> — функция вывода заголовка тега

<?php echo tag_description(); ?> — функция вывода описания тега

Это изображение имеет пустой атрибут alt; его имя файла - image-53.png

Настраиваем вывод прикреплённых постов

Ранее на шаблоне главной страницы мы использовали цикл вывода постов.

 <?php
          // проверяем есть ли посты в глобальном запросе - переменная $wp_query
          if( have_posts() ) : ?>

            <?php while(have_posts() ) : the_post(); ?>
            <?php get_template_part( '/page-templates/post-card/standard' )?>

            <?php endwhile; ?>

            <?php else: ?>
            <p>К сожалению тут нет публикаций. заходите попозже.</p>
            <?php endif; ?>

Но НАД списком постов, в вёрстке была разметка прикреплённой записи.

Это изображение имеет пустой атрибут alt; его имя файла - image-54.png

Пользуясь этой особенностью макета хочется рассказать о таком функционале WordPress, как «Прикреплённые посты». Благодаря этому функционалу в разделе админки со статьями, можно закрепить любое количество публикаций НАД всеми остальными (по умолчанию статьи идут по дате публикации, от самых новых, к более старым).

Это изображение имеет пустой атрибут alt; его имя файла - image-55.png
Отметив этот чекбокс ваша публикация станет самой верхней в ленте статей на сайте.

так же эту галочку можно нажать и в общем списке статей в админке

Это изображение имеет пустой атрибут alt; его имя файла - image-56.png

Соответственном нам нужно запрограммировать сайт таким образом, что бы все прикреплённые статьи имели вид как большой анонс в вёрстке и отображались наверху списка статей. А все остальные были поменьше и снизу.

Для реализации этой задачи нам потребуется воспользоваться функцией <?php post_class(‘)?> которая позволяет изменить список CSS классов для текущей записи.

Я заранее вынес два шаблона с большой и маленькой карточкой статьи в отдельные файлы.

Это изображение имеет пустой атрибут alt; его имя файла - image-57.png

И подключил их в шаблонах страниц сайта. Теперь надо написать цикл и настроить счётчик внутри цикла таким образом, что бы прикреплённые статьи переносились наверх и показывались с использованием большой карточки анонса.

Вот что я предлагаю сделать

  1. в шаблонах карточек вставить функцию изменения списка классов для статьи.
Это изображение имеет пустой атрибут alt; его имя файла - image-58.png
Для большой карточки вставляем функцию в тег <article> и передаём классы, которые мы удалили в качестве парамета функции (Что бы вёрстка не сломалась. Они же были в вёрстке.)
Это изображение имеет пустой атрибут alt; его имя файла - image-59.png
А для мелкой карточки вставлим функцию в контейнер. Это же бутстрап. Что поделать ))) Главное что логически и структурно мы ничего не сломаем.

Теперь перепишем цикл и добавим туда счётчик, для того что бы наша задумка работала как нам нужно

Это изображение имеет пустой атрибут alt; его имя файла - image-60.png

Если у нас есть посты — показываем их. А если постов нет — выводим сообщение. тут все по старому.

А внутри, сам цикл вывода постов мы доработали.

Для начала мы объявляем переменную и присваиваем ей значение 1.

Далее по циклу идём и проверяем прикреплён ли пост if( is_sticky()…

Если прикреплён — показываем его с использованием шаблона большой карточки

А если пост не прикреплён — показываем с использованием маленькой карточки.

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

if( $count == 1 ) {
echo '<div class="row items-grid">';

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

А в самом конце цикла мы выводим еще один фрагмент вёрстки с закрывающим тегом:

endwhile;
if($count > 1 ) {
echo '</div>';
}
?>

<?php get_header(); ?>

<div class="content-wrapper oh">

  <!-- Content -->
  <section class="content blog-standard">
    <div class="container relative">
      <div class="row">

        <!-- post content -->
        <div class="col-md-9 post-content mb-50">

          <!-- Большой анонс -->
          <?php if( have_posts() ) : ?>

          <?php
          $count = 1;

          while(have_posts() ) : the_post();

        if( is_sticky() ) {
          get_template_part( '/page-templates/post-card/large' );

        } else {
          if( $count == 1 ) {
            echo '<div class="row items-grid">';
          }
            get_template_part( '/page-templates/post-card/standard' );
            $count++;
          }


        endwhile;
          if($count > 1 ) {
          echo '</div>';
        }
        ?>

          <?php else: ?>
          <p>К сожалению тут нет публикаций. заходите попозже.</p>
          <?php endif; ?>


          <!-- Пагинация -->
          <?php get_template_part( '/page-templates/pagination/pagination' )?>

        </div> <!-- end col -->

        <?php get_sidebar(); ?>

      </div> <!-- end row -->
    </div> <!-- end container -->
  </section> <!-- end content -->

  <?php get_footer(); ?>

Юрий Ронин