Как настроить вывод анонсов на главной в виде плитки


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

Как изменить отображение анонсов WordPress Часть 1

Привет! Хочешь изменить отображение записей в WordPress? Специально для этого я написал серию статей по видоизменению анонсов статей.

Часть первая

  • Отображение анонсов.
  • Разделение между записями, с помощью элементов (рамка и полоса)
  • Разделение записей при помощи фона (создание эффекта отдельных блоков для каждой записи) Часть №2

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

Как отображаются анонсы?

Анонсы могут идти друг за другом разделяясь различными элементами, либо не разделяться вообще.

Вот примеры с таким отображением записей.

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

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

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

Как создать разделение между записями с помощью (рамки или линии) ?

Для этого нам понадобятся файлы index.php, archive.php, search.php, style.css просто откройте их в своем текстовом редакторе.

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

Content Views — оригинальный вывод постов на главной и других страницах

Плагин Content Views помогает решить задачу нестандартного оформления главной (и других) страниц блога. По умолчанию цикл (loop) в шаблоне сайта выводит посты блога друг за другом, начиная с самого нового. С помощью редактирования шаблона вы можете задать отображение даты, заголовка, категорий, автора и некоторых других параметров, но логику выборки постов особо поменять не получится (без добавления специального PHP кода и функций). Поэтому сегодняшний модуль может пригодиться многим новичкам и вордпресс разработчиками.

Он позволяет настраивать отображение записей на главной и других страницах блога без каких-то специализированных знаний в программировании — скачать его можно отсюда. Название на странице репозитория какое-то слишком длинное «Query posts by category… and display posts on page in grid layout without coding — Content Views», если устанавливаете через админку вордпресс, попробуйте поискать по ключу Content Views. Требуемая версия WP выше 3.3 и до 4.2.2 (на момент написания поста), скачали модуль более 10тыс. раз, рейтинг практически максимальный!

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

  • отображать на главной посты по категориям в адаптивном дизайне;
  • выводить записи блога в 2/3 колонки;
  • выводить посты в нужном формате на определенной странице;
  • выводить заметки по нужному тегу или автору;
  • для отображаемых записей выбрать сортировку по заголовку или дате;
  • заменить стандартную навигацию на более красивую;
  • отображать в анонсах постов миниатюры разных размеров.

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

После установки в админке появится раздел плагина Content View Settings. Для создания нового элемента вывода постов кликаем по ссылке «Add New».

Здесь задача делится на 2 составляющих:

  • Filter Settings — задание параметров выборки записей;
  • Display Settings — формат отображения постов.

На первом шаге вы определяете тип записи — страница или пост. Можно при этом включить в список или исключить из него конкретные ID. Параметр Limit определяет число элементов.

Чуть ниже в Advanced filters происходит все самое интересное. На скриншоте вы видите как я отметил параметр Taxonomies и задал выборку по рубрикам. Дальше определил категорию из которой будут выводиться посты. Есть возможность сделать выборку по нескольким рубрикам или исключить какую-то из общего списка.

Кроме параметра Taxonomies есть:

  • Status — статус отображаемых записей. Внимание! Если вы хотите показывать только опубликованные посты, то также задайте этот параметр (значение Publish).
  • Order & Orderby — варианты сортировки.
  • Search — отображение записей по поисковой фразе.
  • Author — выборка по конкретному автору.

Вкладка Display Settings содержит настройки по внешнему виду блока:

Здесь есть три формата отображения: сетка (Grid), раскрывающийся список (Collapsible List), блоки с перелистыванием (Scrollable List). Для «сетки» можно выбрать число элементов в столбце и/или 2 колонки при отображении. Также отмечаете поля, которые требуется выводить у каждого элемента: дата, заголовок, текст, миниатюра. Можно выбрать открытие ссылки в новом окне.

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

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

Напоследок хочется сказать, что у плагина есть Pro версия, которая обладает чуть большим числом опций и настроек. Стоимость ее 29 долларов за 1 или 89 за 5 сайтов. Тут добавляется 2 дополнительных варианта отображения Pinterest, Timeline, идет полная замена отображения последних постов в архивах категорий, тегов, авторов, появляется поддержка WooCommerce, добавляется механизм Drag & drop, а также много разных параметров для внешнего вида блоков. В принципе, бесплатной версии для решения задачи оригинального оформления главной страницы WordPress сайта мне хватило.

Управление выводом товаров в категории

В данной статье мы рассмотрим:

Виды отображения каталога

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

Далее ниже в подразделе «Тип отображения списка товаров«, в строке «В каталоге (по умолчанию)» выбираем вид отображения товаров в категориях. Их три: плитка, список и таблица (рис.2).

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

Расположение товара в виде плитки

Расположение товара в виде списка

Расположение товара в виде таблицы

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

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

Количество товаров на одной странице

Чтобы указать какое количество товаров выводить в категории на одной странице, необходимо перейти в панель администрирования, пункт меню «Интернет-магазин — Параметры магазина» вкладка «Категория товаров» (рис.7).

В разделе «Вывод товаров» в строке «Количество товаров на странице» укажите, какое количество товаров выводить в категории на одной странице.

Настройка вывода превью фотографий в каталоге

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

Чтобы настроить вывод превью фотографий в каталоге, необходимо перейти в панель администрирования, пункт меню «Интернет-магазин — Параметры магазина«. В разделе «Вывод товаров» в строке «Показывать превью фотографий» устанавливаем галочку.

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

Настройка вывода количества фотографий в каталоге

Чтобы настроить вывод количества фотографий в каталоге у товара, необходимо перейти в панель администрирования, пункт меню «Интернет-магазин — Параметры магазина«. В разделе «Вывод товаров» в строке «Выводить количество фотографий» устанавливаем галочку (рис.10).

Данная опция определяет отображать или нет в каталоге у товара небольшую иконку с количеством фотографий у товара (рис.11).

Настройка вывода товаров в наличии не в наличии

Чтобы настроить вывод всего товара или только товара, который есть в наличии, необходимо перейти в панель администрирования, пункт меню «Интернет-магазин — Параметры магазина» вкладка «Категория товаров«. В разделе «Вывод товаров» в строке «Показывать только в наличии» устанавливаем галочку.

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

Настройка вывода товаров в каталоге в соответствии с сортировкой

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

Чтобы установить сортировку, необходимо перейти в панель администрирования, вкладка «Товары — Категории и товары«. Нажимаем кнопку «Редактировать» (рис.13) и в блоке «Отображение — Сортировка по умолчанию» выбираем соответствующую сортировку (рис.14).

Топ-пост этого месяца:  Циклы While и do…while в JavaScript

Далее в редактировании каталога ниже в разделе «Отображение» выбираем необходимый нам вид сортировки.

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

Как скрыть отображение артикула в каталоге

При просмотре каталога под наименованием товара отображается артикул (рис. 15), при необходимости его можно скрыть.

Для этого необходимо перейти в панель администрирования, пункт меню «Интернет-магазин — Параметры магазина«, далее вкладка «Категория товаров» (рис.16).

Далее в разделе «Вывод товаров» в строке «Показывать артикул товара» снимите галочку и нажмите кнопку «Сохранить«, если хотите скрыть отображение артикула в каталоге для представления в виде «Плитки«.

Как вкл/выкл рейтинг товаров

Рейтинг товара – это ряд звездочек, с помощью которых покупатели выставляют свою личную оценку товару (рис.17). Формируется рейтинг товаров как среднее арифметической всех оценок пользователей.

Для того чтобы включить/выключить рейтинг товаров, необходимо перейти в панель администрирования, пункт меню «Интернет-магазин — Параметры магазина«, далее вкладка «Категория товаров«(рис. 18)

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

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

Как выставить рейтинг товаров вручную

Можно указать рейтинг массово у всех товаров. Для этого в поле «Выставить вручную для всех продуктов» укажите значение от 1 до 5 и нажмите «Выставить«.

Отключение отображения цветов в каталоге

Рассмотрим, как же отключить отображение цветов в каталоге.

Цвета в каталоге отображаются следующим образом (рис.20).

Для того, чтобы цвета отображались только в карточке товара, в каталоге их не было, необходимо перейти в пункт меню «Интернет-магазин — Параметры магазина«, вкладка «Категория товаров«, раздел «Размер и цвет«, и снимите галочку в поле «Учитывать в клиентском каталоге разные цены, цвета, фотографии у одного товара (требуется больше ресурсов)» (рис.21)

Сохраните изменения и проверьте в клиентской части, цвет в каталоге не отображается (рис.22)

Как переместить товары не в наличии в конец списка?

Чтобы переместить товары не в наличии в конец списка на странице каталога, необходимо перейти в панель администрирования, пункт меню «Интернет-магазин — Параметры магазина — вкладка «Категория товаров» (рис.23).

Далее в разделе «Вывод товаров» в строке «Товары не в наличии перемещать в конец списка» установите галочку и нажмите кнопку «Cохранить«.

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

Супер анонсы записей в виде плитки Tiles wordpress ! (адаптивные)

Привет всем, сегодня я покажу вам как сделать стильные анонсы записей в виде плитки. Дизайн плиток, как написано в описании плагина, очень похож на дизайн операционной системы Windows 8. Но вы сможете создавать не просто стильные плитки, в настройках плагина можно задавать эффекты для плиток. Можно комбинировать текстовые плитки с плитками-изображениями. Плагин имеет достаточно простые настройки, с которыми вы сможете разобраться, а я вам в этом помогу.

Плагин — Post Tiles можно установить прямо из админ-панели wordpress. Перейдите по вкладке: Плагины — Добавить новый , введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.

Чтобы настроить плагин, перейдите по вкладке: Настройки — Post Tiles .

Pick Your Cutom Tile Colors, здесь вы сможете выбрать цвет фона плитки для каждой категории, а так же цвет текста в плитке.

Tile Trasnparency, здесь можно указать процент прозрачности плиток.

Set Tile Dimensions, размеры плиток.

Set Featured Image Dimensions, размеры плиток с изображениями.

Make Post Tiles Responsive, вы сможете сделать плитки адаптивными под любые устройства, смартфоны, планшеты и т.д. Если вы включите On адаптивный режим, то размер плиток вы не сможете задавать.

Set Excerpt Length, количество символов из отрывка записи, для отображения в плитке.


jQuery Category Sorting & Animation, эффект анимации.

Display the Category Key, если включите данную функцию, то над плитками будут отображаться название категорий, как показано на скриншоте в начале. Нажав на определённую категорию, будут показаны плитки из данной категории.

Display Pagination For Tiles, можно включить навигацию и указать где она будет отображаться.

Use Featured Images For Tiles, использовать избранные изображения для плитки.

Feature Image Animation Type, здесь можно выбрать тип анимации. С данной функцией нужно поэкспериментировать.

Нажмите на кнопку — Сохранить изменения .

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

1.) Отображаются плитки с записями из всех категорий, по умолчанию 8 записей.

2.) Можно увеличить или уменьшить количество записей-плиток, указав цифру в шорткоде.

3.) Можно указать ID категорий, записи которых будут отображаться в плитках. Так же можно указать и id категорий и количество записей-плиток.

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

Как изменить вывод товара в разделах по умолчанию?

  • Интернет-магазины
    • Аспро: Next
    • Аспро: Интернет-магазин
    • Аспро: Крутой шоп
    • Аспро: Маркет
    • Аспро: Оптимус
    • Аспро: Шины и диски 2.0
    • Аспро: Шины и диски, интернет-магазин
  • Корпоративные сайты
    • Аспро: Приорити
    • Аспро: Корпоративный сайт 2.0
    • Аспро: Digital-компания
    • Аспро: Корпоративный сайт
    • Аспро: Корпоративный сайт современной компании
    • Аспро: Корпорация
    • Аспро: Курорт
    • Аспро: Ландшафт
    • Аспро: Медицинский центр 2.0
    • Аспро: Сайт медицинского центра
    • Аспро: Стройка
  • Модули
    • Аспро: Кредитный калькулятор
    • Аспро: Универсальный импорт
    • Аспро: Шинный калькулятор
  • 1С-Битрикс
    • Общее

Как изменить вывод товара в разделах по умолчанию?

Существует 3 варианта отображения товаров — плиткой, списком и таблицей.

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

Шаг 1

В режиме правки наведите курсор на окно каталога, где находится список товаров, и нажмите на шестеренку.

Шаг 2

В открывшемся окне настроек найдите параметр «Настройка списка» и в поле «Показывать товары по умолчанию» выберите подходящий вариант.

Content Views плагин вывода записей и страниц WordPress

Content Views один из лучших плагинов вывода записей и страниц на WordPress. С его помощью можно вывести любые страницы сайта в виде красочных анонсов с добавлением миниатюр (изображений). Отображение страниц может содержать заголовок, описание, автора, дату публикации. Также возможен вывод определенных рубрик, записей по категориям и меткам. Плагин Content Views способен реализовать практически любую идею веб-мастера для вывода записей. В этой статье вы найдете следующую информацию «Вывод последних записей на WordPress», «Вывод записей с миниатюрами WordPress» и «Вывод записей по id на WordPress».

TimeWeb лучший хостинг для WordPress: домен в подарок, 99 рублей в месяц.
Попробуйте, 10 дней бесплатно: РЕГИСТРАЦИЯ ОБЗОР ВИДЕО

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

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

Вывод миниатюры WordPress

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

Как вывести миниатюру WordPress: зайдите на страницу редактирования записи, в правой колонке настроек под надписью «Изображение страницы» нажмите «Установить изображение страницы», загрузите необходимое изображение или выберете из уже загруженных и обновите страницу, чтобы изменения сохранились. Такими простыми действиями вы назначили изображение страницы, которое будет отображаться на странице вывода записей: Установка плагина Content Views. Перейдите в административную панель «WordPress» ⇒ «Плагины» ⇒ «Добавить новый» и в форме поиска вбейте «Content Views». Затем нажмите установить и активировать. Все, установка завершена.

Content Views настройка

Суть плагина проста – нужно создать форму вывода контента и добавить шорткод формы в статью. Для создания формы зайдите в административную панель «WordPress» ⇒ «Content Views» ⇒«Добавить новую». У плагина два основных раздела настроек: «Настройки фильтрации» и «Настройки отображения». Давайте подробно разберем, как настроить каждый из этих разделов плагина Content Views.

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

Обычная. Здесь три настройки: показать только (если вы хотите вывести статьи по id, в этом поле перечислите через запятую id этих страниц), скрыть (если вы хотите скрыть какие-либо статьи, в этом поле перечислите через запятую id этих страниц) и предел (число страниц, которые будут показаны на одной странице).

Дополнительно. Здесь представлены пять настроек:

  • таксономия (настройка отображения рубрик и меток);
  • сортировать (здесь можно выбрать сортировку контента по >

Настройки отображения. Эта настройка отвечает за отображения выводимого контента: Макет. Здесь настраиваем макет вывода контента: сетка, складывающийся список или прокручивающийся список. И назначаем количество элементов в строке. Как выглядит тот или иной макет, можно посмотреть, нажав на кнопку «Обновить превью».

Адаптивный. Настройка отображения контента на мобильных устройствах и планшетах.

Формат. Здесь выбираете формат вывода миниатюры и текста: показывать миниатюру и текст вертикально или показывать миниатюру слева/справа от текста.

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

Пагинация. Рекомендую включить эту настройку, поставив галочку напротив поля «Enable». Она включает порядковую нумерацию страниц. Как это выглядит, можете посмотреть здесь.

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

Как добавить форму вывода контента от Content Views на страницу сайта. После завершения настроек сохраняете изменения, затем переходите во вкладку настроек «Все виды», копируете шорткод, вставляете в текстовый редактор страницы и сохраняете изменения: Content Views pro версия. Плагин обладает платной версией, купив которую у вас откроется доступ к новым функциям. Например, в премиум версии доступны такие полезные фишки: возможность показывать смешанные типы контента в одной форме, изменение цвета и шрифта для кнопки «читать далее», расширенные настройки отображения контента: выравнивание элементов в одной строке, добавление границы между элементами, и многое другое.

На мой субъективный взгляд бесплатная версия плагина Content Views работает на достаточно высоком уровне. Покупать pro версию не нужно, стандартные функции плагина замечательно выводят практически любые сочетания записей и страниц.

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

Блог записей WordPress

Вступление

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

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

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

Блог записей WordPress

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

Для этого на вкладке Настройки>>>Чтение, просто выберите пункт настроек: Последние записи. Эту же настройку можно выставить/поменять на вкладке Внешний вид>>>Настройки.

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

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

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

Blog Manager Light

Лучший плагин, станица плагина ТУТ, дающий в бесплатной версии максимальное количество настроек блога.

По умолчанию, 6 шаблонов блога:

  • 1 колонка;
  • 4 колонки:
  • 1 колонка в стиле виджет;
  • Красивый шаблон в две колонки с оформлением;
  • Слайдер большой,
  • Слайдер в 3 колонки.

Масса нужных и полезных настроек. Например, вы легко можете изменить вид материала в блоге, а именно:

  • Выбрать категории для этого блога.
  • Убрать/оставить заголовок, картинку, мета-теги, дату, ссылку «читать далее».
  • Есть настройка миниатюры: размеры, ссылка на неё, цвет фона.

Все плагины, предназначенные сделать блог записей WordPress, управляются приблизительно одинаково. Покажу, как создать блог на примере этого плагина (Blog Manager Light).

  • Установите плагин, найдя его по названию (слову) на вкладке Плагины;
  • Установите и активируйте плагин. Если забыли, как это делать, читать тут;
  • Плагин появится в консольном списке. Вам нужна вкладка: Blog Manager >>> Add list;

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

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

После сохранения созданный блог появится в списке на вкладки Blog Manager >>> Blog lists. Под названием блога, есть кнопки Edit для изменения его настроек и кнопка Delete для его удаления.

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

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

Шорт код вставить на вновь создаваемую страницу, на вкладке «Добавить страницу».

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

И так, для создания блога нужно:

  • В настройках плагина создать блог;
  • Взять шорткод созданного блога;
  • Вставить шорткод на новую страницу;
  • Добавить эту страницу как пункт в любое меню.

Всё готово. Вы создали отдельный блог записей выборочных рубрик и/или меток и/или авторов и вывели это блог на сайт отдельным пунктом меню.

Blog Designer

Во первых, плагин «Blog Designer» распространяется в двух вариантах, бесплатном и платном (за 30$). В бесплатной версии авторы дали 6 шаблонов (классический, легкий бриз, Spektrum, эволюция, хронология и новости) чтобы создать блог записей WordPress.

При создании блога, предусмотрены настройки для выбора рубрик для блога, выбор макета блога, добавления шаред кнопок, выбор цвета фона сообщений блога, изменение длины отрывка, изменение надписи «Read more».

Чтобы создать блог на странице, используется короткий код, wp_blog_designer (в квадратных скобках).

Недостатки

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

И главный недостаток, как мне кажется, с помощью этого плагина вы сможете создать, только один блог на своём сайте.

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

Напомню, платная версия стоит 30-40$, в зависимости от сезона.


WP Blog and Widget

Плагин «WP Blog and Widget» позволит создать страницу блог записей WordPress. К плагину прилагается свой виджет. Блог можно создавать по рубрике, и настраивать, изменяя основной шорткод плагина.

Чтобы создать блог, создайте страницу блога и добавьте короткий код:

  • blog , в квадратных скобках.

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

  • blog category=»category_id» , в квадратных скобках.

Есть другие настройки кода для создания сетки, количества сообщений и т.д.

Мне не показался этот плагин интересным, наверное, потому что, мало визуальных настроек.

Примечание. Плагин «WP Blog and Widget» создан с настраиваемым типом сообщения. Если вы ищете плагин, который работает с существующими постами, используйте другой плагин этого же автора «Blog Designer — Post и Widget»

Blog Designer — Post and Widget

Это плагин того же автора, что и предыдущий плагин. Он позволяет создать блог только из постов сайта. Работает также через шорткоды. Можно создать стеку сообщений, слайдер и т.д. Работают такие шорткоды (всё есть в документации плагина на его странице):

  • wpspw_post, простой блог, шорткод в квадратных скобках;
  • wpspw_recent_post_sl >

Плагин «Post Grid» поможет создать адаптивный блог постов в виде сетки и списка без кодирования. Вы можете отображать сообщения по любой категории (категориям), тегам, авторам, ключевым словам, также заказывать сообщения по идентификатору, типу, дате создания, изменению даты и порядку меню.

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

Fusion Page Builder: Extension — Blog

Страница плагина ТУТ. Это дополнительный плагин к конструктору страниц, плагину Fusion. С его помощью можно создать блог записей отфильтровав их по рубрике, дате, автору, меткам. В блоге используется отрывок (excerpt), а не полное содержание (content).

Плагин подхватывает настройки количества сообщений на странице, установленных на странице «Настройки>>> Чтение».

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

Вывод

Вместо вывода, для блог записей WordPress я использую бесплатный плагин Blog Manager Light. Потому что, неограниченное количество блогов и 6 шаблонов внешнего вида меня устраивают. Из платных вариантов, рекомендую Blog Designer, их demo страница впечатляет.

Плагин Advanced Excerpt – улучшаем вывод анонсов на сайте

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

Вывод анонсов на главной странице

WordPress по умолчанию позволяет два варианта главной страницы: либо как отдельную страницу, либо как список записей (анонсов). Чтобы на главной выводились анонсы страниц нужно перейти в Настройки – Чтение и установить переключатель “На главной странице отображать” – Ваши последние записи и затем сохранить изменения.

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

Это, конечно, не очень хорошо выглядит и нужно вручную указать, какой отрывок поста от его начала считать анонсом. Для простановки тега нужно поставить курсор в нужную позицию и нажать значок more (“Далее”). После его установки тег появится в записи (выделено на картинке).

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

Плагин Advanced Excerpt

WordPress позволяет автоматизировать формирование анонсов при помощи плагинов. Одним из лучших плагинов в этом деле является Advanced Excerpt. Рассмотрим его возможности (и кстати, на этом сайте работает именно этот плагин).

  1. Сохранять HTML разметку в анонсе (вы сами можете выбрать теги, которые следует сохранять).
  2. Формирует анонс в указанном вами размере (указывается количество символов или слов). При этом учитывается только реальный текст (без HTML тегов).
  3. Выводить последнее слово или предложение полностью завершенным.
  4. Добавить ссылку “читать дальше” в конце текста.
  5. Игнорировать пользовательский анонс.

Чтобы у нас были такие возможности, устанавливаем плагин (его можно найти в поиске добавления нового плагина в админке WordPress или на официальной странице плагина http://wordpress.org/plugins/advanced-excerpt/) и активизируем его.

Идем в настройки плагина в меню “Параметры – Excerpt”.

  • excerpt length – количество символов/слов в анонсе (если не активирована пометка “use words, то это количество символов, если активирована, то слов);
  • ellipsis – символ многоточия (выводится в конце анонса). Можете указать свой символ;
  • finish – заканчивать на слове (если помечено “word”) или на предложении (помечено “sentense”);
  • read-more text – текст который будет выводиться в конце анонса. Если помечено “add link to excerpt”, то этот текст будет в виде ссылки. Можете посмотреть, как это выглядит на этом сайте;
  • no custom excerpts – если отметите, то анонс будет формироваться автоматически по своим правим, даже если вы указали в записи анонс вручную;
  • strip shortcodes – удаляет шорткоды;
  • keep markup – сохранять html разметку. Если пометите “don’t remove any markup”, вся разметка будет сохраняться. Можете также указать конкретно какие теги оставлять – надо в списке тегов оставить на них пометку, а с других пометку снять.

Жмем Save Changes для сохранения наших изменений.

Если вы проверите автоматическое формирование анонсов после этого, то заметите, что ничего не поменялось, записи так и выводятся в полном размере. Все дело в том, что плагин воздействует на функцию wordpress, выводящую анонс the_excerpt(), в то время как у вас в шаблоне, скорее всего, используется функция вывода записи the_content().

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

MnogoBlog

как создать сайт на wordpress, настроить и оптимизировать wordpress

Разбиваем главную страницу на колонки, плитки с помощью CSS

Здравствуйте, сегодня поговорим о том как с помощью только CSS стилей разбить/разделить любую страницу (в данной статье возьмем главную страницу) сайта на колонки/плитки (pinterest стиль)/ кирпичики.
Скачать исходники для статьи можно ниже

PS: Статья в процессе написания…

Начнем с того, как добавить CSS стили в тему вашего сайта, способы:

1. Непосредственно изменять файл стилей темы – style.css.

Для этого нужно войти в админ панель wordpress, в левом меню выбрать пункт “Внешний вид” и его подпункт “Редактор”, справа в списке шаблонов найти файл стилей – style.css.

Главный минус данного способа – это то, что при обновлении темы сайта – все ваши изменения исчезнут.

2. В некоторых темах есть пункт “Пользовательские стили CSS” (Custom CSS).

3. Воспользоваться плагинами, например:

Simple Custom CSS, сведения о плагине:

Последнее обновление: 2014-6-5
Загрузок: 98,743
Сайт плагина: “wordpress.org/plugins/simple-custom-css/”

4. Использовать дочернюю тему сайта

Более подробно о создании дочерней темы сайта на wordpress читайте здесь (на русском языке) – “codex.wordpress.org/Дочерние_темы”

Приступим же к верстке главной страницы сайта!

Для тестирования примеров использовал стандартную тему wordpress – Twenty Twelve, данные способы должны подойти для большинства тем wordpress.

1. Начнем с разбивки главной страницы на колонки.

Для этого достаточно использовать следующий CSS код:

В итоге получиться следующее:

2. Разбиваем главную страницу сайта на плитки (кирпичики) – “Pinterest.com” стиль.

Для этого достаточно использовать следующий CSS код:

Отображение постов и страниц WordPress в виде сетки (Gr >Июнь 25, 2015 | Плагины

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

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

Использование grid-разметки в WordPress

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

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

Плагины для разметки сеткой

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

1. uSquare ($14)

Это отличный премиум плагин, который достиг более 2,000 покупок в Code Canyon. Вы удивитесь насколько легко его установить и начать им пользоваться, учитывая то, на что способен этот плагин.

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

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

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

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

2. Essential Grid ($25)

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

3. UberGrid ($18)

UberGrid является мощным плагином для создания адаптивной сетки/галереи WordPress. Он может построить замечательную стену из квадратных элементов, выбранных вручную или автоматически, используя ваши посты с WordPress, в том числе продукцию WooCommerce и кастомный тип постов, созданный с помощью других плагинов или тем.

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

5. Justified Image Grid ($28)

Это адаптивный WordPress плагин для галерей, который выравнивает ваши эскизы в сетке по формату с помощью JQuery, как это происходит в Flickr и поиске изображений в Google. Помогите вашим галереям эффектно выделиться из толпы! Замените стандартные галереи WP на шорткод [justified_image_grid] с большим количеством новых функций и возможностей.

6. Grid Layout Shock (free)

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

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

  • Шрифт и размер заголовка
  • Шрифт и размер содержания
  • Размер каждой ячейки
  • Возможность использовать кнопку ‘Читать далее’ и выбирать ее цвет
  • Выбор источника данных для таких категорий, как таксономия, тип постов, RSS-каналы, и т.д.
  • Что выводить: заголовок, изображение, отрывок и т.д.
  • Количество элементов для отображения и порядок их сортировки

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

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

7. Gr >(free)

Это бесплатный плагин WordPress для создания разметки сеткой. Он очень прост в использовании, позволяет сразу перетаскивать элементы из списка постов и страниц на ячейки сетки, для размещения на вашем сайте.

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

После того, как вы добавили элемент в сетку, вы можете редактировать отображаемую информацию: название, отрывок и т.д. Это является интересной особенностью и дает вам больше контроля над тем, как ваши сетки и их содержимое будут выглядеть в конечном итоге. Размер элементов может быть изменен с помощью простого интерфейса «drag and drop», который поможет вам придать сеткам творческий вид.

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

Заключение

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

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

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

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

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

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

Топ-пост этого месяца:  Почему 38% посетителей не задерживаются на вашем сайте
Добавить комментарий