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

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

Когда разные сайдбары для разных страниц или категорий – это хорошая идея?

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

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

Но дело не только в удобстве пользователей.

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

Разные сайдбары для разного контента

Для этого вам понадобится плагин Content Aware Sidebars .

Content Aware Sidebars работает со всеми темами и позволяет вам создать неограниченное количество кастомных сайдбаров для:

  • Записей
  • Страниц
  • Категорий
  • Кастомных типов записей

Также вы можете использовать Content Aware Sidebars для отображения сайдбаров в ваших магазинах или .

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

Как использовать Content Aware Sidebars

Шаг 1: Создайте новый сайдбар

После установки и активации Content Aware Sidebars, вы увидите новую ссылку Sidebars в панели управления, которая позволит вам управлять всеми сайдбарами

Чтоб начать кликаем на Add New (Добавить новый):

Шаг 2: Выберете ваши условия

Условия (Conditions) – это то, что запускает тот или иной сайдбар. Например, если вы выбрали условие Category, то новый сайдбар будет отображаться в этой категории.

Вы можете добавить множество условий – но обратите внимание на разницу между И (AND) и ИЛИ (OR).

Если вы используете And, то все условия должны совпасть в одну и ту же единицу времени для того, чтоб сайдбар отобразился. Если вы используете Or, ваш сайдбар отобразится, если совпадает хотя бы одно условие:

Шаг 3: выберете ваши опции

Затем выберете ваши опции (Options) в правой стороне вашего экрана

Нужно сделать 4 вещи:

Action – вы можете полностью заменить ваш существующий сайдбар новым. Либо существующий сайдбар может дополниться новым: то есть у вас будет базовый сайдбар, который в случае необходимости будет дополняться необходимой информацией.
Target Sidebar – это тот сайдбар, который вы хотите заменить или миксовать
Merge Position – если вы выбрали Merge и не Replace, то здесь вы можете указать, добавляется ли дополнительный контент выше или ниже существующего
Visibility – видимость можно настроить по статусу пользователя (или пользовательской роли в Pro версии).
Например, чтоб полностью заменить существующий сайдбар, я настроил плагин вот так:

и если вы хотите добавить контент вашего нового сайдбара выше контента существующего сайдбара, то это будет выглядеть так:

Шаг 4: Выбираем расписание

Вы также можете выбрать определенное время для показа определенных сайдбаров.

Если вы предоставляете ограниченнное предложение, то эта опция для вас. Если же вы ее проигнорируете, то ваш сайдбар будет показываться 24/7:

Сохраняем настройки

Шаг 5: Добавляем контент в ваш новый сайдбар

После сохранения вашего нового сайдбара, вы можете добавить контент туда в обычном виджет-интерфейсе. Так что идем в Внешний вид → Виджеты и видем наш новый сайдбар:

вы можете просто перетащить виджет, как обычно:

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

Конфликт кастомных сайдбаров? Используйте принудительную замену.

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

Не переживайте, есть встроенный механизм, который позволяет решить эту проблему

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

Но если вы не хотите, чтоб такое происходило, можете применить Forced Replace в опциях каждого сайдбара:

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

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

По умолчанию в Wordpress наш новый список ссылок с иллюстрациями будет выглядеть «коряво». Поэтому требуется дополнить файл стилей (обычно style.css). Переходим в раздел «Внешний вид» — «Редактор» либо правим код через FTP. Как минимум, туда следует вставить следующее оформление:

#text-2 .textwidget ul { list-style : none ; } #text-2 .textwidget ul li { float : left ; }

#text-2 .textwidget ul { list-style: none; } #text-2 .textwidget ul li { float: left; }

Здесь #text-2 — ID блока, содержащего ваш список (посмотрите код страницы через инспектор Ctrl+Shift+I или любым другим методом). В стилях выше задается выравнивание по левому краю и убирается оформление отдельных пунктов, если оно есть.

Внимание! Статья — не урок по CSS, поэтому я не останавливаюсь детально на данном моменте. Размер картинки можно править в самом виджете или тоже через стили. Напоследок проверьте адаптивность блока.

Модули блогролла в сайдбаре

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

Simple Links

Не смотря на меньшее число скачиваний (10тысяч) плагин Simple Links является намного более функциональным и продвинутым. Поддерживаются актуальные версии системы, последний апдейт был не так давно. Кроме базовых фишек найдете:

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

Здесь также имеются какие-то премиальные опции, хотя в базовом комплекте Simple Links и так уже есть все необходимое.

Альтернативные решения

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

  • Вывод — реализуется через WP_Query, можно добавлять картинку и вообще оформить код как угодно.
  • Отображение в WordPress с миниатюрами. Вставка выполняется через шорткоды.
  • Интересный хак про (часто встречается в корпоративных сайтах).

В качестве еще одного необычного метода можно вообще использовать базовое меню WordPress:

  1. Переходите в раздел «Внешний вид» — «Меню», где формируете желаемый список, в котором могут быть как страницы, так и посты с внешними линками.
  2. Далее размещаете в боковой колонке виджет «Меню навигации» («Произвольное» в старых версиях Вордпресс).
  3. Нужно будет установить модуль Menu Image, позволяющий (о нем уже рассказывал).

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

Итого. Повторюсь, что все зависит от вашей текущей задачи и навыков. Самые простые и универсальные методы реализации — через плагины. В первом способе потребуются знания CSS стилей. Для каких-то оригинальных и нетрадиционных списков ссылок в WordPress придется поискать или запрограммировать соответствующее решение.

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

Если знаете еще какие-то интересные нюансы по теме, интересно будет услышать.

Для добавления необходимых плагинов и дополнений на страницу в WordPress необходимо просто перетащить в админке интересующий вас виджет на sidebar. Таким образом, даже новички в движке WordPress могут без осложнений видоизменить свою боковую панель (и не только её).

Порой разработчики темы предоставляют на выбор несколько возможных сайдбаров, куда вы можете перетащить widget . Но бывают и темы, где сайдбаров 1-2, и они используются чисто для нужд самой темы (то есть новые виджеты вы туда запихнуть не сможете).

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

Для начала необходимо зарегистрировать ваш сайдбар. Это можно сделать в файле functions.php в папке с шаблоном. Некоторые разработчики шаблонов создают спец. функцию по регистрации сайдбаров. К примеру, function twentyten_widgets_init() {} . Это не принципиально. Просто найди то место в коде, где происходит регистрация. Выглядит это примерно так:

Register_sidebar(array("name"=>"Site description", "before_widget" => "

", "after_widget" => "
"));

Как добавить свой сайдбар?

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

Register_sidebar(array("name" =>"Second sidebar", "id" => "secondary-widget-area", "before_widget" => "

  • ", "after_widget" => "
  • ", "before_title" => "

    ", "after_title" => "

    ",));

    Name — название вашего sidebar. оно будет отображаться в админке.

    id — уникальный идентификатор. Он вам понадобиться при добавлении на страницу (об этом ниже).

    before_widget — код/текст, который будет вставлен перед каждый виджетом.

    after_widget — соответственно, код/текст, который будет вставлен после каждого виджеа.

    before_title — код/текст, который будет вставлен перед заголовком виджетов.

    after_title — код/текст, который будет вставлен после заголовком виджетов.

    После добавления выше приведённого кода в файл, сохраните его и зайдите на страницу виджетов в административной панели. Теперь точно так же, как и с остальными сайдбарами, вы можете перетаскивать на новый необходимые виджеты. Чтобы этот сайдбар отобразился на вашем веб-сайте, вам нужно открыть соответствующий файл шаблона, а именно sidebar.php , и найти код:

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

    Для красивого вывода, можете включить этот код в блок:

    Как вы уже наверно заметили secondary-widget-area при выводе на странице — это имя сайдбара. Оно должно быть точно таким же, как имя указанное при регистрации в файле functions.php . Теперь, редактируя файл style.css придать сайдбару нужный вид.

    Потрясающая фишка в WordPress!

    Начну с нуля. Итак, для начала вы должны понять разницу между миниатюрами и обычными изображениями из поста. Миниатюра — это что-то вроде превьюшки к посту, в самом посте она может даже и не использоваться.

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

    В общем ладно, в двух словах, миниатюра — это изображение-превью к постам, которое:

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

    По сути вы можете использовать ее даже в качестве фона сайта, т.е. для каждой записи — собственный фон.

    Шаг 1. Включение поддержки миниатюр для вашей темы WordPress

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

    Всё, что нам потребуется для активации миниатюр — это вставить следующую строчку кода в ваш файл functions.php (файлов с таким названием может быть много — нам нужен именно тот, который находится непосредственно в папке с вашей текущей темой).

    Если вы не хотите использовать миниатюры во всех сразу, вы можете подключить их например только для записей (post):

    или только для записей и только для страниц:

    add_theme_support( "post-thumbnails" , array ( "post" , "page" ) ) ;

    Можно ли назначить миниатюру таксономии WordPress?

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

    Шаг 2. Как установить миниатюру для поста?

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

    Способ 1. Метабокс «Миниатюра записи»

    Он вот такой:

    ">

    ">

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

    Тот же самый пример для функции :

    ">

    ">

    Получение URL миниатюры при помощи функции wp_get_attachment_image_src() и get_post_thumbnail_id()

    Если вам нужна помощь с вашим сайтом или может даже разработка с нуля - .

    Всем привет! Прошла уже неделя с тех пор, как мы уехали из Питера и поселились в деревушке Хиккадува на Шри-Ланке. Чуть подробнее об этом в конце поста.

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

    Как используют миниатюры на WordPress-блоге?

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

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

    Теперь перейдем к тому, как выводить миниатюры на WordPress-блоге и их настройкам.

    Вывод превью к записи в WordPress

    Чтобы проверить, поддерживает ли ваш шаблон WordPress вывод миниатюр, нужно зайти в редактор записей или страниц. Если поддерживает, вы должны увидеть следующее:

    У меня эта опция находится в правом нижнем углу на странице редактирования.

    Теперь, чтобы создать превьюшку для статьи, нажимаем «Задать миниатюру».

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

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

    Задать размеры миниатюры к записям в WordPress можно в админке: «Настройки» — «Медиафайлы»:

    Что же делать, если вывод миниатюр не предусмотрен в вашей теме, а вам они нужны?

    Для этого можно использовать следующую функцию в файл functions.php вашей темы:

    add_theme_support (‘post-thumbnails’); ?>

    Авто миниатюры в Вордпресс с помощью плагина

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

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

    Для того чтобы найти подходящий плагин, введем в строке их поиска thumbnails (с англ. – эскизы).

    Таким образом, мы отыщем наиболее актуальные и популярные плагины для нашей задачи.

    Один из часто используемых и простых плагинов для изменения размеров всех миниатюр в WordPress – Regenerate Thumbnails:

    После установки, заходим «Инструменты» — «Regen.Thumbnails»:

    В появившемся окне нажимаем кнопку «Regenerate All Thumbnails», если вы хотите подогнать все превью к заданному в настройках блога размеру.

    Ждем, пока закончится процесс:

    Один из самых простых плагинов по вставке авто миниатюр ко всем записям на Вордпресс — Easy Add Thumbnail.

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

    Еще один плагин для создания миниатюр к записям в WordPress – Generate Post Thumbnails. Он позволяет задать номер картинки в записи, по которой будет формироваться превью.

    Как видите, вывести миниатюры в WordPress и даже их автоматически генерировать очень просто.

    P.S. Хиккадува — замечательное туристическое местечко на юго-восточном побережье Шри-Ланки. Здесь нам нравится: буйная сочная растительность, чистый бушующий океан с большущими волнами, много кокосов и прочих фруктов, доброжелательные местные жители. Снимаем домик за 45000 рупий (21000 рублей). Сезон дождей сейчас заканчивается и в ближайшие несколько месяцев погода должна быть прекрасной! Приезжайте в гости:)



     

    Пожалуйста, поделитесь этим материалом в социальных сетях, если он оказался полезен!