Как разбить цикл на группы Цикл WordPress (слайдер)


Содержание материала:

Как разбить цикл foreach или цикл на 10 записей

Предположим, у меня есть 56 записей в моей базе данных. Я использую FOR LOOP для их отображения.
Я хочу добавить ДИВ после 10 записей каждый раз.

Я хочу добавить

Решение

Вы можете использовать оператор модуля для этого.

Обратите внимание, что если число циклов неизвестно — возможно, что $a будет 9, и ваш вывод будет:

Если вы хотите предотвратить дублирование закрытого элемента div в случае точного деления, вы можете изменить свой код на:

Другие решения

Вам нужно добавить открывающие и закрывающие делители на основе некоторых условий, которые в первую очередь

  1. Если это первая итерация
  2. Если это десятая итерация
  3. Если это последняя итерация

Слайдер постов WordPress. Подборка из 5 плагинов

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

Ранее я уже пытался сделать подобный слайдер, только еще добавлял свой блок с последними публикациями. Но затея потерпела неудачу из-за удаления плагина с официального репозитория. Наверно было связано с безопасностью. Возможно, в будущем его восстановят, если разработчики не забросят идею, но, а пока подберем ему замену. Подборка включает в себя 5-ть слайдер плагинов постов с кратким описание и демо роликами.

Smart Slider 3

Современный слайдер с полным набором настроек и понятным интерфейсом управления. Легко устанавливается через шорткод, виджет сайдбара, функцию вызова. Это позволяет встраивать слайдер прямо в тело файла. В отличие от других похожих плагинов, Smart Slider 3 имеет преимущество в функциональности бесплатной версии. Кроме того, есть инструмент для вставки видео с таких видеохостингах, как YouTube и Vimeo.

Некоторые особенности:

  • Адаптивный под мобильные устройства
  • Создание слайда: изображений, постов, видео
  • Готовые темы оформления
  • Управление: стрелки, эскизы, тени, автозапуск
  • Многое другое

Meta Slider

Русифицированный, отзывчивый слайдер с эффектами Nivo Slider, Flex, Coin Slider, Responsive Slides. В своей тематики имеет статус «самый популярный» за легкость и простоту. Также не отстает от вышеупомянутого конкурента с возможностью добавлять слайдер через шорткод, виджет, функцию вызова. Но в бесплатной версии присутствует больше ограничений, к примеру, вставка видео доступна лишь про версии.

Особенности:

  • Предварительный просмотр в админ-панели
  • Конфигурация: эффекты, переходы, скорость и т.д.
  • Полная локализация
  • Бесплатная начальная поддержка (вопросы об установки и конфликтов)
  • Отзывчивый
  • Многое другое

Master Slider — Responsive Touch Slider

Условно бесплатный слайдер работает с любой темой, включая и стандартные. Поддерживает сенсорное управление, отзывчивый на всех основных устройствах. Но есть один небольшой минус, во всяком случае я не нашёл этих параметров, нет возможности установит краткое описание и название поста. То есть можете выбрать любое изображение, указать ссылку, куда эта картинка должна ввести. А вот вывести информация, о чем и что, нет способа. В остальном довольно неплохой выбор.

Особенности:

  • Полностью отзывчивый
  • Кроссбраузерность IE8+ и другие современные браузеры
  • Поддержка сенсорного управления
  • Красивые эффекты переходов
  • Полная настройка: стрелки, эскизы и т.д.
  • Прочее

Meteor Slides

Простой русифицированный слайдер, поддерживающий сенсорное управление и адаптивный под мобильные устройства. Работает на jQuery Cycle, что обеспечивает больше чем 20 эффектных переходов. Может интегрироваться в тему через шорткод, функцию вызова и виджет сайдбара. Нет возможности добавлять краткое описание и название поста.

Dessky Responsive Slider

Последний из писка плагин почти аналогичен предыдущему, за исключением мелких отличий. Простой, интегрируется через короткий код и функцию вызова, а также есть возможность выводить название поста в слайде.

Слайдер с последними новостями

В заключение статьи повторим проделанный маневр с блоком последних записей из определенной рубрики, расположенным возле слайдера. Ориентированные размеры слайда 600×300, а сам блок длиной 1000px. И так как адаптивность присутствует в каждом плагине, мы подкорректируем весь блок для мобильных устройств.

Откройте файл темы header.php , в самом конце после всех функций добавьте следующий код:

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

Осталось добавить стили в файл style.css .

Если что-то не получается или есть вопросы, задавайте их в комментариях.

Как создать слайдер из изображений, загруженных в пост?

После того, как в WordPress изменился загрузчик изображений, его стало удобнее использовать для других различных целей, то есть не только для загрузки изображений в пост .

Например для создания галерей или слайдеров. Слайдер мне кажется наиболее интересным, поэтому давайте попробуем реализовать его на стандартной вордпрессовской теме, например TwentyEleven.

Основная суть в том, что все изображения, добавленные в пост (но не вставленные в редакторе), можно прокрутить в слайдере или вывести как галерею.

Создание слайдера в 4 шага

Слайдер довольно удобная вещь, особенно если у вас на сайте есть несколько продуктов, и на страницу каждого из них вам хотелось бы добавить по несколько изображений.

Ниже пример такого слайдера с одного из созданных мной сайтов:

Можете кликнуть по изображению и посмотреть на него в действии.

Итак, для создания слайдера нам само собой понадобится какой-нибудь jQuery-плагин, я буду использовать бесплатный Nivo Slider, вы же можете взять что-нибудь другое.

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

  • nivo-slider.css — CSS стили, необходимые для корректного отображения слайдера,
  • jquery.nivo.slider.pack.js — собственно сам jQuery-плагин.

Шаг 1. Подключение необходимых файлов

Прежду всего вы должны убедиться в том, что в шапке сайта задействована функция wp_head(), а в футере wp_footer(). Если этих функций там нет, то добавьте, иначе не рассчитывайте, что всё будет работать, как надо.

Итак, помещаем скачанные файлы в папку с темой (например), после этого воспользуемся функциями wp_enqueue_script() и wp_enqueue_style().

Вставляем следующий код в functions.php , который находится в папке с темой:

Содержимое файла nivo-slider.css можно засунуть внутрь стандартного style.css, в этом случае 4-ю строчку из предыдущего листинга можно удалить или закомментировать.

Шаг 2. Определяемся с размерами слайдера

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

После этого открываем functions.php и вписываем туда следующую строку:

Это нужно для того, чтобы при загрузке изображения, WordPress автоматически генерировал копию соответствующих размеров непосредственно для слайдера.

Шаг 3. Выводим изображения в слайдер

Открываем необходимый нам PHP-файл, в котором будет выводиться слайдер, например у меня это шаблон обычного поста single.php .

Читайте подробнее про функцию get_children().

После добавления этого кода зайдите на страницу редактирования какого-нибудь поста и загрузите туда несколько изображений (вставлять в редактор поста их ни к чему, просто загружаем через загрузчик).

Шаг 4. Активируем слайдер.

Тут нужно обязательно выполнить следующее условие — код надо вставлять непосредственно перед закрывающим тегом

Изучаем WP_Query: Используем циклы

Как было отмечено во вступительной части этой серии статей, класс WP_Query состоит из четырех основных элементов:

  • Аргументы для запроса – о них мы поговорим более детально в следующих статьях из этой серии;
  • Сам запрос;
  • Цикл – выводит содержимое записи, заголовки или все то, что вам нужно вывести на экран;
  • Заключительная секция – здесь закрываются теги if и while , а также сбрасываются данные записи.

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

Где уместно использовать циклы

После того как WordPress запускает запрос с использованием указанных вами аргументов, ему нужно сообщить, что из извлеченных данных надо отобразить на странице. Именно здесь в действие вступает цикл.

При этом чаще всего используются три конструкции:

  • if($query->have_posts()) — проверяет наличие записей;
  • while($query->have_posts()) — повторяет цикл после каждой записи;
  • $query->the_post() — осуществляет доступ к конкретной записи.

Цикл в классе WP_Query выглядит следующим образом:

Структура цикла

Структура вашего цикла, зависит от того, какие данные из записи вы хотите вывести на экран. Предлагаем вам пример цикла, который выводит заголовок записи, миниатюру и отрывок из текста:

Проверка содержимого с помощью циклов

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

Эту проблему легко обойти, если поместить элемент или заголовок внутрь самого тега:

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

Элемент списка ul находится за пределами нашего цикла, так как не связан с какой-то определенной записью, и нам нужно выводить его только при наличии записей:

Мы проверяем, извлек ли запрос какие-нибудь записи, и если да, то мы открываем ul -элемент, а затем запускаем цикл.

Запуск дополнительных циклов

jQuery можно использовать для запуска нескольких циклов, но для этого нужно восстанавливать данные записи после каждого цикла, и только потом запускать второй экземпляр класса WP_Query . Потому что каждый цикл будет возвращать данные на основе заданных ему значений аргументов.

В этом примере выводится отрывок текста и миниатюра из первой записи, а затем заголовки каждой последующей записи:

Здесь мы использовали два ключевых аргумента:

  • posts_per_page’ => ‘1’ , используется в первом запросе для вывода последней записи;
  • ‘offset’ = ‘1’ , используется во втором запросе, пропускает самую свежую запись, чтобы избежать ее повторения в создаваемом списке.

Как видно из примера, цикл лишь слегка отличается для каждого запроса. Первый запрос выводит миниатюру, заголовок и выдержку из самой свежей записи, а второй запрос проверяет наличие записей в запросе. Если они есть, то открывает ul -элемент и включает в него заголовок каждой записи, обрамленный в элемент li с указанием ссылки на страницу записи.

После обоих циклов используется функция wp_reset_postdata() . Если бы мы не использовали ее, то второй цикл повторно выводил бы данные, начиная с самой свежей записи.

В завершение

Цикл – это код, который вы используете для вывода данных, которые WordPress извлек из базы данных, руководствуясь аргументами вашего запроса.

Простой цикл выводит все записи в порядке, указанном в аргументах запроса ( либо по дате по умолчанию ). Если вы разделите if( $query->have_posts() ) и while( $query->have_posts() ) , то сможете использовать дополнительную разметку прямо внутри цикла, но только, если запрос вернул какие-либо данные. И, наконец, указывая альтернативные аргументы и используя функцию wp_reset_postdata() после каждого цикла, вы можете применять WP_Query несколько раз в рамках отдельной страницы.

Топ-пост этого месяца:  Курс по jQuery. Работа со стилями и атрибутами

Данная публикация представляет собой перевод статьи « Mastering WP_Query: Using the Loop » , подготовленной дружной командой проекта Интернет-технологии.ру

Циклы wordpress (основа основ)

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

Стандартный цикл wordpress (index.php, category.php, tag.php, архивы)

Обратите внимание: в стандартном Цикле мы не указываем никаких данных для выборки записей, а сразу начинаем цикл с if( have_posts() )<… Это говорит о том, что данные уже существуют и их нужно просто обработать и вывести на экран.

Цикл на основе query_posts()

Преимущества такого изменения в том, что если мы, например, изменим количество выводимых записей на странице с 10 (по умолчанию) на 20, то пагинация на странице автоматически подстроиться под это изменение, потому что query_post() меняет данные глобальной переменной $wp_query, а пагинация строиться именно на основе этих данных.

Не нужно использовать query_posts() для создания нескольких циклов на одной странице, для вывода в сайдбар списка постов, для создания дополнительного вывода записей и т.п., для этих целей используйте циклы на основе get_posts(). К тому же, обе функции понимают параметры одинаково! Так зачем «платить» больше.

Пользовательские типы записей в шаблоне категорий (&post_type=video) — не очень хорошая идея, т.к. ломается пэйджинация. Типы записей лучше делать архивами.

Цикл на основе WP_Query()

Особенность циклов на WP_Query() в том, что мы создаем новый объект ( $query ), который никак не связан с аналогичным глобальным объектом $wp_query и поэтому мы никак не нарушаем структуру текущей страницы.

Цикл на основе get_posts()

Самый удобный вариант выводить нужные записи в нужном порядке — это выводить их с помощью get_posts() . get_posts() в 99% случаев полностью заменяет WP_Query()

Где и какой из 3-х вариантов циклов использовать:

  • query_posts() — если нужно изменить/подправить стандартный вывод записей на страницах WordPress. Можно использовать 1 раз на странице;
  • get_posts() — если нужно вывести записи из Базы Данных. Можно использовать сколько угодно раз на странице;
  • Класс WP_Query() — во всех других случаях когда не подошли query_posts() и get_posts().

Инфографика по данной теме

И еще раз тезисно:

query_posts — основной (базовый) запрос wordpress, влияет в каком месте (запись, категория, поиск и т.д.) сайта мы находимся. Если необходимо незначительно скорректировать используем query_posts.
Если нужно создать какой-либо масштабный запрос, используем WP_Query — это независимый полноценный запрос.
get_posts является легковесной служебной функцией для создания выборки постов.

Любопытно, но на деле, если всего один цикл, у query_posts меньше обращений к БД чем у get_posts. Расчет был сделан на основе функции замера количества запросов к БД.

Изменение основного цикла

Нужно добавлять перед if ( have_posts() ) :

Дальнейшая тема для изучения — глобальные переменные.

Поделится информацией с друзьями

Цикл WordPress — Что это такое и как его использовать?

Цикл WordPress — это код, с помощью которого отображается контент на вашем сайте на WordPress.

Возьмем, к примеру, шаблон index.php . В основной теме для блога этот шаблон используется для вывода нескольких записей или же анонса записи на домашней странице сайта, а WordPress цикл помогает это сделать.

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

Понимание цикла в WordPress

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

Ниже приведен пример самого простого цикла WordPress. Код в используемой вами теме на WordPress для цикла может быть более длинным, но его структура ничем не отличается.

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

Первым делом мы сообщаем серверу, что мы будем использовать PHP. Открываем функцию PHP следующим образом:

В следующей строке у нас идет привычная функция проверки « if » с функцией have_posts . Эта функция относится к логической, что означает, что она может быть как правдивой, так и ложной.

Поэтому следующая строка в коде говорит нам следующее, что «Если есть записи, которые должны выводиться – эту строку нужно использовать, если их нет — ничего не делать»:

В следующей строке используется цикл while . Он будет выполняться, если информация «правдива». То есть, если есть записи, которые должны выводиться на сайте, то эта строка должна быть в коде.

Поэтому, если на вашем сайте должны отображаться пять постов на домашней странице, функция while будет отображать данные в цикле пять раз:

Затем мы берем данные со следующей записи, используя функцию the_post . Это позволяет настроить запись и получить любую часть или информацию о посте, включая контент, дату публикации, автора записи, категорию публикации и многое другое:

Раз уж мы упомянули нашу запись, мы можем отобразить в ней все, что хотим. Существует более тысячи доступных тэгов, которые могут быть использованы только в цикле WordPress. Например, the_title для вывода заголовка поста, the_content для отображения самого поста, the_category — для категорий и рубрик:

После подтверждения информации, которая должна отображаться на сайте, мы закрываем цикл while :

Затем мы закрываем функцию проверки « if »:

И закрываем код PHP:

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

Примеры цикла

В WordPress Codex есть шаблон маленького кода index.php . В коде ниже видно, что в шаблоне index.php упоминается шапка, цикл WordPress, сайдбар и футер:

Код для цикла WordPress выглядит немного иначе в большинстве тем WordPress, потому что и отображаемая информация немного другая. Самый лучший способ понять, как цикл работает на практике – это изучить цикл WordPress в разных темах оформления.

Ниже приведен пример кода, который используется для цикла в шаблоне нынешней стандартной темы на WordPress — Twenty Fourteen . Как вы видите, в этой теме используются разные шаблоны для контента, в зависимости от типа поста. Например, стандартный пост будет выводить разную информацию из видео-постов и цитат-постов.

Навигационные линки выводятся после последнего поста, и сообщение отображается для посетителей в случае, если пост был не найден (это осуществляется с помощью шаблона content-none.php ).

Цикл легче использовать в темах TwentyFourteen и Twenty Thirteen , потому что код для вывода контента и мета-информации находится в разных шаблонах. Более практично структурировать код для тем, которые поддерживают форматы постов.

Если проанализировать популярную тему Twenty Twelve , то можно заметить, что цикл требует наличия других файлов шаблона. Но большинство кода остается в шаблоне цикла — index.php .

Лучше всего запомнить принцип кодирования « Не повторяйте самостоятельно !». Сокращая количество повторений, вы можете создать более компактные темы, и вам будет легче их изменять.

Источник: elegantthemes.com

Насколько полезным был этот пост?

Нажмите на звезду, чтобы оценить этот пост!

Средний рейтинг: / 5. Количество голосов:

Пока нет голосов! Будьте первым, кто оценит этот пост.

Как разбить цикл на несколько столбцов

Если у меня есть цикл, запущенный из запроса категории, например:

Как я могу создать предложение if, которое разбивает список с определенным интервалом и запускает новый. Так, например, на 10-м столбце верните

и запустите новый

    в 11.

    Это неверно, но для иллюстрации моей цели:

    Каков правильный способ включить эту логику в цикл?

    Solutions Collecting From Web of «Как разбить цикл на несколько столбцов»

    Создание столбцов для вашего запроса и простое отображение

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

    Более легкий подход, который возник в моем сознании, заключался в том, чтобы расширить «цикл» с помощью столбцов и дошел до этого решения:

    Объект WP_Query_Columns «расширяет» любой стандартный запрос WP с помощью колонок, которые можно легко повторить. Первым параметром является переменная запроса, а второй параметр – количество элементов, отображаемых для каждого столбца:

    Чтобы использовать его, просто добавьте класс WP_Query_Columns из этого gist в ваши темы function.php.

    Расширенное использование

    Если вам нужен номер столбца, который вы сейчас показываете (например, для некоторых четных / нечетных классов CSS, вы также можете получить это из foreach:

    Также доступно общее количество столбцов:

    Пример двадцать десять

    Я мог быстро взломать двадцать десять тем для теста и добавить заголовки выше любой петли таким образом. Он вставлен в loop.php, начало – код темы:

    Для более длительного ответа:

    (это в основном то, как я пришел к вышеприведенному материалу, но лучше объясняет, как реально решить проблему с помощью простых математических операций. Мое новое решение – перебрать что-то заранее рассчитанное.)

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

    Например, если количество элементов на столбец равно единице, это очень просто:

    Можно заметить, что даже с помощью этого простого кода необходимо принять несколько решений:

    • Сколько элементов находится в одном столбце?
    • Сколько всего предметов?
    • Есть ли новый столбец?
    • И есть ли колонна, чтобы закончить?

    Последний вопрос довольно сложный для вывода HTML, поскольку вы, вероятно, хотите заключить не только элементы, но также столбец с элементами html.

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

    И иногда даже, мы не можем даже ответить на каждый вопрос с самого начала. Для exmaple количество общих элементов: есть ли какие-либо, некоторые, несколько, точные подсчеты, совпадающие с целым числом столбцов?

    Даже ответ Jan Fabry может работать в некоторых случаях (как мой пример выше для сценария с одним элементом за столбец), вас может заинтересовать то, что работает для любого количества элементов, возвращаемых WP_Query.

    Сначала для математики:

    Этот код не запускается, поэтому давайте перейдем к простому текстовому примеру

    Это действительно работает и уже делает некоторый вывод:

    Это очень хорошо имитирует, как это может выглядеть в шаблоне WordPress:

    (Я не выполнил последний пример в среде WP, но он должен быть, по крайней мере, синтаксически правильным.)

    Это более общий вопрос программирования, но вот основная идея:

    Нет необходимости создавать отдельный var для подсчета, поскольку запрос var уже рассчитывает его на: $wp_query->current_post . Кроме того, вам необходимо учесть окончательную запись в списке, чтобы у вас не было пустого в вашей разметке.

    Добавьте get_columns_array() функцию function.php. Затем вы можете легко перебирать столбцы:

    В вашей теме вы затем зацикливаете цикл по столбцам:

    Я установил размер по умолчанию для столбца равным 10. Вы можете использовать второй параметр, чтобы самостоятельно установить размер столбца. Как и для 7: get_columns_array($post_count, 7); ,

    Вот еще один подход, который вы можете предпринять:

    WP Query: Примеры циклов

    В предыдущих статьях мы рассмотрели весь теоретический материал о классе WP_Query, теперь посмотрим более подробно как все это работает на практике. В этом уроке мы разберем 10 различных сценариев применения данного класса и связанных с ним функций.

    Это будет интересно и в то же время познавательно. Итак, приступим!

    Создание цикла с помощью класса WP_Query

    На эту тему можно было бы написать отдельную статью, но мы постараемся здесь изложить все основные моменты кратко и предельно понятно.

    Цикл, созданный при помощи WP_Query, отличается от стандартного цикла. Типичный WordPress цикл выглядит следующим образом:

    А вот как выглядит цикл, созданный посредством использования WP_Query:

    Отличия между ними заключаются вот в чем:

    • Мы задаем ряд аргументов для экземпляра WP_Query,
    • Затем инстанцируем класс WP_Query,
    • Добавляем $my_query-> в начало функций have_posts() и the_post() (в данном случае это методы класса WP_Query),
    • И сбрасываем данные параметра $post для возврата основного запроса.


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

    Выводим записи автора за текущий год

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

    Вам остается только передать этот запрос в цикл.

    Выводим записи из текущей категории (за исключением текущей записи)

    Предположим, вы хотите создать цикл для каждой записи на соответствующих страницах и вывести список записей из категории, к которой эта запись относится. Очевидно, вам придется исключить из выборки текущую запись, поскольку она может быть одной из последних записей в данной категории. Создаем запрос с параметрами ‘cat’ и ‘post__not_in’:

    Проще простого, не так ли? А если мы создадим пользовательский шаблон страницы с циклом, выполняющим подобный запрос, то получим в результате страницу «Самые комментируемые записи».

    Настраиваем простой слайдер

    При создании корпоративных сайтов, портфолио или веб-журналов, слайдеры стали своеобразным «мастхэвом», неотъемлемой составляющей подобных проектов. Я не большой фанат слайдеров (считаю, они отрицательно воздействуют на пользовательское восприятие), но в сети они весьма популярны. Если вам нужны слайдеры, используйте простой запрос, созданный с помощью класса WP_Query.

    Аргумент ‘cat’ можно использовать для получения слайдов из различных категорий, что позволит вам поделить слайды на группы и использовать несколько слайдеров на разных страницах. Если же вы предпочитаете наличие лишь одного слайдера на своем сайте, удалите эту строку.

    Выводим случайные цитаты в сайдбаре

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

    Здесь мы создаем тип записи, а затем с помощью запроса создаем цикл в сайдбаре. Простое и элегантное решение.

    Выводим список товаров в определенном ценовом диапазоне

    Вот этот пример будет самым востребованным среди пользователей. Он более техничен, чем все предыдущие, поскольку его можно успешно применять на сайтах электронной коммерции, созданных на базе WordPress. Если вы хотите вывести спи,сок элементов пользовательского типа записи «Product» и отфильтровать результаты по произвольным полям цены, воспользуйтесь следующим фрагментом:

    Создаем шорткод для встраивания записей внутрь записей

    В этом примере мы создадим шорткод, который позволит вставлять одну запись (или пользовательский тип записи) в другую. Кроме того, мы сможем определять будет ли запись выводиться полностью либо лишь ее часть:

    Выводим список текущих запланированных записей

    Почему бы вам не попробовать вывести несколько анонсов будущих записей для своих посетителей? С помощью следующей функции можно вывести список запланированных записей с/без выдержек после заголовков:

    Выводим запись годичной давности

    Если ваш блог создан более года назад, а его контент актуален во все времена (и в 2015 и в 2025 гг.), то добавление раздела «Записи в этот день год назад» позволит существенно увеличить количество просмотров ваших страниц. Сделать это можно следующим образом:

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

    Выводим дочерние страницы текущей страницы

    Вы считаете, что на страницах «Услуги», «Мои работы» и «Мое портфолио» кроме заголовков подстраниц разместить больше нечего? Вы правы, эти страницы обречены на роль «заполнителей». Подстраницы в этом случае – наиболее предпочтительный вариант. А если конкретнее, здесь можно было бы разместить, к примеру, сетку (grid) с миниатюрами квадратной формы и ниже их заголовками. Давайте посмотрим, какой вид запроса можно использовать для создания подобного шаблона страницы:

    Заключение

    Надеюсь, в этой статье вы узнали много для себя нового и полезного. В следующем уроке мы поговорим о классе WP_User_Query.

    Циклическое слайд-шоу на чистом CSS3

    Благодаря CSS3 мы можем создавать эффекты анимации, не используя JavaScript, что упростит работу многих разработчиков.
    Мы не должны злоупотреблять CSS3, потому что старые браузеры не поддерживают все его свойства. В любом случае, все мы видим потенциал CSS3, и в этой статье мы обсудим, как создать зацикленный слайдер изображений, используя только CSS3-анимацию.

    Разделы статьи

    Чтобы понять процесс от начала и до конца, ниже предоставлено содержание статьи. Обратите внимание на то, что этот эффект будет работать должным образом только в современных браузерах, которые поддерживают используемые свойства CSS3.

    1. Введение
      Описание базовых понятий, связанные с CSS3-переходами и анимацией по ключевым кадрам.
    2. Разметка HTML
      Создание HTML-разметки для слайдера изображений.
    3. Стили CSS
      Создание таблицы стилей для отображения слайдера.
    4. CSS3-анимация по ключевым кадрам
      Добавление анимации к слайдеру. Мы рассмотрим различные процессы, происходящие здесь.
    5. Индикатор выполнения
      Добавление индикатора выполнения для нашего слайдера.
    6. Всплывающая подсказка
      Добавление всплывающей подсказки, для отображения заголовков.
    7. CSS3-переходы
      Выводим подсказку при наведении курсором, используя CSS3-переходы
    8. Пауза и рестарт
      Остановка слайдера при наведении курсором.
    9. Демонстрация
      Показываем слайдер в действии.
    10. Заключение
      Заключительные размышления.

    1. Введение

    Для использования этого урока необходимо иметь базовое понимание CSS, в частности CSS3-переходов и анимации по ключевым кадрам.
    Оперируя этими простыми понятиями, мы увидим, как сделать функциональный слайдер изображений.

    Базовые понятия CSS3-переходов

    Обычно, когда вы изменяете значение CSS, изменения отображаются статично. Теперь, благодаря свойству перехода, мы можем с легкостью производить изменения от одного состояния к другому.

    Мы можем использовать четыре свойства перехода:

    transition-property
    Определяет имя (имена) свойств CSS, к которым должны быть применены переходы.

    transition-duration
    Определяет время, за которое должен произойти переход.

    transition-timing-function
    Определяет, как вычислены промежуточные значения перехода.

    transition-delay
    Определяет, когда переход запускается.

    В настоящее время переходы CSS3 поддерживаются в Safari 3.2+, Chrome, Firefox 4+, Opera 10.5+ и IE 10. Поскольку технология все еще относительно новая, то необходимы префиксы для браузеров. Синтаксис одинаков для всех браузеров за исключением добавлениея необходимых префиксов. Мы опустим их в этой статье, но не забудем включить префиксы в код.

    Давайте посмотрим, как применить простой переход к ссылке:

    Присваивая анимацию элементу, вы можете также использовать сокращеную форму:

    Базовые понятия CSS3-анимации

    CSS-анимация позволяет нам создавать анимацию без JavaScript при помощи набора ключевых кадров.
    В отличие от CSS-переходов, анимация по ключевым кадрам в настоящее время поддерживается только в WebKit-браузерах, Firefox, а также в скором времени и в IE 10. Неподдерживаемые браузеры просто проигнорируют код анимации.

    У свойства анимации есть восемь подсвойств:

    animation-delay
    Определяет, когда анимация запускается.

    animation-direction
    Определяет, должна ли анимация играть в обратном направлении в чередующихся циклах.

    animation-duration
    Определяет отрезок времени, который анимация занимает, чтобы завершить один цикл.

    animation-iteration-count
    Определяет количество циклов анимации перед остановкой.

    animation-name
    Определяет имя правила в @keyframes.

    animation-play-state
    Определяет, проигрывается ли анимация или приостановлена.

    animation-fill-mode
    Определяет, как CSS-анимация должна применить стили к своей цели до и после выполнения.

    Давайте посмотрим, как применить простую анимацию к блоку:

    Мы можем использовать сокращенную запись, чтобы задать сразу все свойства анимации:

    Ключевые кадры

    Каждый ключевой кадр описывает, как анимированный элемент должен вести себя в данной временной точке анимации. Ключевые кадры принимают процентные значения, чтобы определить время: 0% — запуск анимации, в то время как 100% — конец. Вы можете дополнительно добавить промежуточные кадры для анимаций.

    У W3C есть много полезной и подробной информации про “CSS3-анимацию”

    Базовая структура нашего слайдера

    Теперь, когда мы знаем, как функционируют переходы и анимация, давайте посмотрим, как создать наш слайдер, используя только CSS3. Этот эскиз показывает, как анимация должна работать:

    Как вы видите, слайдер будет контейнером, в котором будут отображаться изображения.
    Анимация очень проста: изображение следует по заданному направлению, изменяя свойства » top «, » z-index » и » opacity «.
    Давайте перейдем прямо к HTML-разметке, чтобы создать слайдер.

    2. HTML-разметка

    Разметка HTML очень проста. Она четко организована и благоприятна для SEO. Давайте сначала посмотрим полный код, а затем подробно выясним, как все работает.

    div
    Это основной контейнер слайдера. У него нет определенной функции, но он нам нужен, чтобы приостановить анимацию.

    div
    Мы будем использовать этот блок, чтобы скрыть всё, что происходит за пределами слайдера. В дополнение к этому, маска позволяет нам отображать содержание слайдера.

    li
    У каждого элемента списка есть ID и класс. ID выводит на экран подсказку, а класс привязан к анимации, которая должна произойти.

    div
    Этот блок выводит на экран заголовок изображения. Можете изменить его в зависимости от потребностей, например, делая его кликабельным или добавляя краткое описание.

    div
    Этот блок содержит функцию, которая показывает прогресс выполнения анимации.

    Теперь пришло время к формированию CSS-файла.

    3. Стили CSS

    Давайте создадим базовую структуру слайдера. У него будет тот же размер, что у изображения. Свойство границы будет полезно для создания рамки вокруг изображения.

    Класс » mask » скроет все элементы, которые расположены за пределами слайдера. Его высота должна быть равной высоте слайдера.

    Наконец, чтобы отсортировать список изображений, будем использовать » position: absolute » и » top: -325px » так, чтобы все изображения были расположены за пределами слайдера.

    Этими немногими строками кода, мы сделали разметку слайдера. Теперь мы просто должны добавить анимацию.

    4. CSS3-анимация по ключевым кадрам

    Прежде, чем мы начнем с анимации, мы должны определить некоторые параметры, чтобы получить правильное представление анимации.
    Как мы знаем, полная продолжительность анимации составит 25 секунд, но мы должны знать, сколько будет ключевых кадров в 1 секунде.
    Давайте решим ряд операций, который даст нам точное число ключевых кадров и полную продолжительность анимации. Вот вычисления:
    Определяем общее количество изображений, в слайдере: 5;
    Определяем продолжительность анимации для каждого изображения: 5 секунд;
    Определяем полную продолжительность анимации, умножая общее количество изображений на продолжительность каждого: 5 изображений × 5 секунд = 25 секунд;
    Вычисляем, сколько ключевых кадров (процентов) будет в одной секунде.
    Делим общее количество ключевых кадров на полную продолжительность анимации: 100%/25 = 4%,
    В одной секунде 4 ключевых кадров, или 1 секунда равна 4% от анимации.

    Со всей этой математикой мы можем теперь применить CSS-анимацию к слайдеру. Мы можем поместить анимацию в бесконечный цикл, т.к. для каждого изображения будет задана отдельная анимация, не зависящая от остальных изображений.

    Как только свойства анимации были присвоены, мы должны использовать ключевые кадры, чтобы привести анимацию в движение.
    Следуя этому принципу, мы можем соединить все анимации друг с другом, даже если они независимы друг от друга. Это и даст нам бесконечный цикл.
    Я добавил свойства » opacity » и » z-index «, чтобы сделать переход от одного изображения к следующему более привлекательным.
    Как видите в коде, у первой анимации больше ключевых кадров, чем у остальных. Причина этого состоит в том, что, когда слайдер запущен, первое изображение освобождает место для второго, но когда последнее изображение закончит свою анимацию, у первого изображения должны быть дополнительные ключевые кадры, чтобы не создавать прерываний между циклами анимации.

    Вот весь код для анимаций:

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

    5. Индикатор выполнения

    Процесс анимации индикатора выполнения совпадает с тем, что был для слайдера. Создаем сам индикатор выполнения:

    Не бойтесь синтаксиса. Тут есть такая же функция как «from to». Вы можете увидеть, что ключевые кадры устанавливают появление и исчезновение каждого изображения.

    6. Всплывающая подсказка

    Слайдер более или менее завершен. Давайте добавим несколько деталей, чтобы сделать его более функциональным. Мы вставим всплывающие подсказки для заголовков изображений, которые будут видимы при наведении курсором.

    Стили для подсказок:

    Здесь мы сделали видимыми только заголовки изображений, но вы можете сделать так же для любого текста, ссылок и всего, чего захотите.

    7. CSS3-переходы

    Мы увидели, как применить CSS3-переходы к элементам, теперь давайте сделаем их для подсказок.
    Если помните, мы добавили ID к каждому списку («first», «second», и т.д.), чтобы при наведении каждая подсказка была связана с отдельным изображением, при этом не появлялись все подсказки сразу.

    8. Пауза и рестарт

    Чтобы позволить пользователям остановить слайдер, для просмотра содержиого, мы должны останавливать анимацию, при наведении курсором. Также мы должны будем остановить анимацию индикатора выполнения.

    9. Демонстрация

    Наконец, мы дошли до конца урока. Слайдер теперь готов на 100%!
    Посмотрите демонстрацию слайдера (Альтернативный источник). Она работает в Firefox 5+, Safari 4+ и Google Chrome, а также iPhone и iPad. Можете также загрузить архив (Альтернативный источник).
    Спасибо Massimo Righi за его изображения.

    10. Заключение

    Эффект внушителен, но по общему признанию, этот слайдер не очень универсален. Например, чтобы добавить больше изображений, необходимо отредактировать все ключевые кадры. У CSS3 есть большой потенциал, но у него действительно есть пределы, и иногда JavaScript более предпочтителен, в зависимости от целевой аудитории.
    У этого слайдера есть некоторые интересные функции, такие как пауза (при наведении) и уникальные ссылки для изображений, которые позволяют пользователям взаимодействовать со слайдером. Если необходима полная поддержка всеми браузерами, то использование CSS3 не возможно, таким образом, рекомендуется JavaScript. К сожалению, у CSS3-анимации есть много ограничений. На данный момент, из-за нехватки гибкости, мы не имеем возможности широкого использования. Надеюсь, эта статья будет стимулировать вас к дальнейшему изучению CSS3.
    Не стесняйтесь делиться мыслями в комментариях.

    От переводчика:
    Если вы нашли какие-то ошибки перевода, прошу отписаться в личных сообщениях. Спасибо.

    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Настройка цикла loop в WordPress

    Как упоминалось ранее, если и есть одна вещь, которую нужно понимать для того, чтобы быть реально крутым перцем-разработчиком шаблонов, так это как работает цикл и что вы можете с ним делать. Давайте посвятим наше внимание трем способам заставить WordPress Loop делать все, что нам угодно.

    Если вы работаете с одиночным циклом записей и просто хотите модифицировать тип записей, которые он возвращает, используйте query_posts(). Это идеально для ограничения количества записей, исключения записей из определенной рубрики и т.д..

    WP_Query() https://codex.wordpress.org/Functi on_Reference/WP_Query Для мощной настройки множественных циклов, используйте WP_Query(). Настройкой дополнительных экземпляров WP_Query() в вашем шаблоне можно создать любое количество множественных циклов и настроить вывод каждого из них.

    Последний, но не худший, get_posts() – позволяет создать дополнительные циклы где угодно в шаблоне. get_posts() принимает те же параметры, что и query_posts() и идеален для вывода дополнительных циклов в сайдбаре, футере или где угодно.

    Разберемся с ними подробнее.

    Настраиваем query_posts()

    Типичный цикл по умолчанию выглядит вот так:

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

    Но что, если мы хотим вместо отображения записей из всех категорий исключить содержимое определенной, чтобы вывести их в отдельном месте страницы. Это идеальная задача для query_posts(), которая легко с ней справится:

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

    Тег wp_reset_query восстанавливает оригинальный запрос query_posts и используется при применении в шаблонах нескольких последовательных циклов.

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

    что значит вывести 3 записи, исключив 7,8,9 категории и отсортировать записи по алфавиту.

    Ключ к успешному использованию query_posts заключается в сохранении оригинального формата запроса с помощью $query_string переменных. Будучи однажды подключенными, можно добавить столько параметров, сколько нужно (подробнее тут https://codex.wordpress.org/Function_Reference/WP_Query#Parameters ).

    Этот способ хорош, но не лишен недостатков. query_posts использует дополнительные запросы к базе данных и может повлиять на работоспособность других условных тегов, таких как is_page() и is_ single(). Поэтому рекомендуется не использовать этот способ, хотя он и работоспособен, а заменить его на WP_Query с которым точно проблем не будет.

    Настраиваем WP_Query

    Для полного контроля над любым количеством циклов, WP_Query – самый лучший способ. Если нужно модифицировать дефолтовый цикл, то это выглядит очень похоже на query_posts:

    Применяются те же параметры, что и для query_posts, поэтому для модификации числа постов, используемыхисключаемых рубрик, порядка сортировки делается все то же самое.

    А также любые нужные комбинации

    В дополнение к сферам применения, мы также можем создавать и настраивать дополнительные множественные циклы, вот типовой пример:

    Каждый из этих циклов может быть размещен в любом месте шаблона, не нужно вписывать их последовательно. Например, первый цикл может быть в сайдбаре, второй в футере и т.д.. И каждый выводит свои собственные списки записей, в соответствии с параметрами.

    При желании можно комбинировать вместе 3 разных способа query_posts , get_posts и WP_Query в множественных циклах. А в версии вордпресса 3.3 появилась функция is_main_query , позволяющая модифицировать только главные объекты в WP_Query, подробнее на https://codex.wordpress .org/Functi on_Reference/i s_main_query

    Настраиваем get_posts

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

    Этот код создает циклы всех постов за исключением указанной рубрики. Конечно, исключение рубрик не единственный способ применения циклов. Опять же, используя различные параметры можно получить любой нужный результат.

    Но есть один момент, get_posts требует передачи параметров в виде массива, т.е.

    Также обратите внимание, что мы используем numberposts вместо posts_per_page для ограничения количества записей. В соответствии с кодексом WP параметр posts_per_page все же должен работать, но если нет — то замените его на numberposts.

    Стандартный цикл, а также модифицированные с помощью query_posts и WP_Query поддерживают постраничную навигацию, используя next_posts_link и previous_posts_link, а вот get_posts не поддерживает ее, отображая статический список постов, соответствующих выбранному критерию и все.

    Подытожим:

    • Чтобы модифицировать стандартный цикл, используйте query_posts()
    • Чтобы модифицировать иили создать множественные циклы, используйте WP_Query()
    • Чтобы создать статический, дополнительный цикл, используйте get_posts()

    Цикл не беспокоится о разметке

    Это правда. Можно использовать все, что нам в голову придет. Вот пример типового цикла, закрытого в тег

    И вот точно такой же цикл, оформленный в стиле нумерованного списка

    А вот пример списка определений

    Обратите внимание, что не только разметка отличается в этих трех примерах, но и используемые функции разные. Например, в третьем случае использовался the_excerpt() для вывода цитат вместо контента.

    По умолчанию the_excerpt() выводит первые 55 слов записи, если не задано поле цитата записи. Поэтому для постов длиной меньше 55 слов будет выведено полное содержание, более 55 слов – только часть.

    Мораль такая — циклы WordPress очень удобная, гибкая и мощная штука — вы можете как угодно применять их и где угодно размещать.

    Мощь WP_Query

    Много магии осуществляется с помощью функции WP_Query, которая определенно стоит того, чтобы с ней разобраться. Как мы видели ранее, каждое выполнение цикла основано на запросе, соответствующем типу загруженной страницы, настройкам сайта и т.п.. Этот запрос по умолчанию может быть изменен и заменен с помощью WP_Query.

    В большинстве случаев вы можете сохранить оригинальный запрос и модифицировать только некоторые параметры, например вот так

    Как и в предыдущих примерах, изменением параметров в новом WP_Query вы легко настраиваете вывод любого набора записей. Давайте подробно разберем наиболее типичные способы применения.

    Отображение разного количества записей

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

    Таким образом мы ограничим количество выводимых постов шестью, вместо десяти (значение по умолчанию). Чтобы вывести абсолютно все записи, нужно указать параметр равный «-1».

    Исключаем некоторые категории

    Одна из самых популярных задач – исключение записей определенной категории на главной странице сайта. Например, у вас есть несколько записей про хомячков, но вы хотели бы убрать их с главной страницы сайта. Этот контент остается в базе данных, отображается в своей рубрике и RSS ленте, но только не на главной. Есть множество способов сделать это, но мы применим самое простое из решений. да, это WP_Query class:

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

    Поэтому мы исключили третью рубрику (про хомячков).

    Другие возможности исключить содержимое этой рубрики — использовать php функцию continue и пропускать записи определенной категории, скрывать контент с помощью css и javascript, править файлы ядра вордпресс и использовать плагины. Согласитесь, WP_Query однозначно лучше.

    Изменяем порядок сортировки

    WordPress относится к приложениям LIFO типа — last in, first out , т.е. последний пришел, первый вышел. Что означает, что мы видим сначала свеже опубликованные записи, а старички спрятаны глубоко в недрах навигации. Это рационально, т.к. большинство блоговых сайтов стремится первым показать самый свежий контент. Это дает людям смысл периодически возвращаться на сайт, т.к. они смогут найти что-то новенькое прямо на первой странице сайта. Но это не идеальный вариант для каждого типа сайтов.

    Допустим, вы используете вордпресс для того, чтобы публиковать свой роман. Это означает, что вы писали и публиковали его хронологически, главу за главой. Поэтому, когда посетители приходят на ваш сайт, вы хотите показать им сначала главу Один , но она является фактически самой старой записью, поэтому вместо этого они увидят самую последнюю опубликованную главу. Но нет проблем, всего навсего изменим порядок сортировки:

    Покажем специфические страницы, встраивая страницу в страницу

    Другой интересный и полезный цикл, это использовать новый WP_Query class для отображения только одной определенной страницы. Это может быть полезно из разных соображений, например, для встраивания одной страницы в другую. Вот пример запроса, когда содержимое страницы About встраивается в другую страницу:

    Обратите внимание, что в pagename нужно использовать не реальное название страницы, а ее слаг.

    Пример использования множественных циклов

    Ничто не заставляет вас ограничиваться только одним циклом. Вы можете использовать ровно столько, сколько вам нужно. Фактически, это в целом нормально иметь множественные циклы в шаблоне. Простым примером будет главная страница, которая показывает полное содержание трех новых публикаций. А затем в сайдбаре, в втором цикле показывает выдержки из остальных семи публикаций. И все работает чудесным образом.

    А вот пример более сложной реализации. Допустим, у нас есть милый четырех колоночный шаблон. В левом сайдбаре мы покажем выдержки из одной категории. Затем в главной центральной части, разбитой на две колонки, мы покажем 10 последних записей по 5 в каждой. И затем в правом сайдбаре, мы покажем еще 10 записей, идущих после первых десяти.

    Таким образом у нас получается 4 цикла

    3 последние записи из рубрики номер 7

    5 последних записей, кроме из рубрики номер 7

    еще 5 последних записей, кроме из рубрики номер 7

    еще 10 последних записей, кроме из рубрики номер 7

    которые будут находиться в index.php, но также разместить их можно будет где угодно еще.

    Теперь необходимо разобраться с используемыми параметрами, которые помогают отображать именно то, что нам нужно.

    Параметр cat

    • Цикл 1 — отображает записи только из 7 рубрики (cat=7)
    • Цикл 2 — отображает записи кроме 7 рубрики (cat=-7)
    • Цикл 3 — отображает записи кроме 7 рубрики (cat=-7)
    • Цикл 4 — отображает записи кроме 7 рубрики (cat=-7)

    Параметр showposts

    • Цикл 1 — отображает только 3 записи (showposts=3)
    • Цикл 2 — отображает только 5 записей (showposts=5)
    • Цикл 3 — отображает только 5 записей (showposts=5)
    • Цикл 4 — отображает только 10 записей (showposts=10)

    Параметр offset

    • Цикл 1 — не используется Цикл 2 — не используется
    • Цикл 3 — пропускает первые 5 записей (offset=5)
    • Цикл 4 — пропускает первые 10 записей (offset=10)

    Таким образом, каждый цикл модифицирован для отображения желаемых записей. Последнее, что останется рассмотреть, это нужна ли нам навигация в одном из этих циклов. В обычных циклах по умолчанию мы используем теги posts_nav_link() для вывода навигационных ссылок на главную, рубрики и архивы.

    Для этого примера мы создадим навигацию на предыдущие и следующие записи в втором цикле. А также настроим отображение полных записей или цитат записей в нужных местах.

    Цикл 1 — Левый сайдбар

    Отображает 3 кратких записи.

    Цикл 2 — Левая колонка

    Отображает 5 полных записей, а после них выводит ссылки на следующие и предыдущие записи.

    Цикл 3 — Правая колонка

    Цикл 4 — правый сайдбар

    Отображает 10 полных записей.

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

    Топ-пост этого месяца:  Способы использования фиксированных фоновых рисунков в CSS
    Добавить комментарий
    1 — Левый сайдбар 2 — Левая колонка 3 — Правая колонка 4 — Правый сайдбар