Вы когда-нибудь сталкивались с сайтом, который по-разному публикует свои статьи в блоге?
На некоторых веб-сайтах есть избранные статьи, выделенные настраиваемым фоном, в то время как на других сообщения каждой категории могут иметь уникальный вид. Если вы всегда хотели узнать, как настроить каждую запись WordPress, вы попали в нужное место.
В этом уроке мы покажем вам, как по-разному оформлять каждую статью WordPress.
Но, если вы никогда не устанавливали WordPress, откройте для себя Как установить WordPress блог шаги 7 et Как найти, установить и активировать WordPress тему на своем блоге
Тогда вернемся к тому, почему мы здесь.
Ремарка: Это руководство требует, чтобы вы добавили собственный CSS в WordPress. Вам также потребуется использовать инструмент Inspect. Требуются некоторые знания CSS и HTML.
Дайте индивидуальный стиль на WordPress пунктов
WordPress добавляет классы CSS по умолчанию к различным элементам вашего сайта. А WordPress тема стандартный совместимый должен иметь код, требуемый WordPress для добавления классов CSS для тела, сообщений, страниц, виджетов, меню и многого другого.
Также откройте наш гид по Permalinks: Как настроить ссылки в блоге
Основная функция WordPress называется post_class () Используется темами, чтобы сообщить WordPress, куда добавить эти классы CSS по умолчанию для статей.
Если вы посетите свой веб-сайт и воспользуетесь инструментом Inspect в своем браузере, вы сможете увидеть эти классы, добавленные для каждого сообщения.
Вот классы CSS, добавленные по умолчанию на основе страницы, отображаемой пользователем.
- .post-идентификатор
- .poster
- .attachement
- .gluant
- .hentry
- .category ID
- .category имя
- .tag имя
- .format- {размер-имя}
- {.type--имя-сообщение типа}
- .has пост-миниатюру
- .post-пароль требуется
- .protected-на-а-пароль
Пример отображения будет выглядеть так:
Вы можете настроить каждую публикацию WordPress по-разному, используя соответствующие классы CSS.
Читайте также: Как улучшить свой WordPress блог в эти выходные
Например, если вы хотите редактировать отдельную публикацию, вы можете использовать класс post-id в своем собственном CSS.
.post-412 {цвет фона: #FF0303; цвет: #FFFFFF; }
Не забудьте изменить идентификатор сообщения в соответствии с идентификатором вашего сообщения.
Давайте посмотрим на другой пример.
На этот раз мы рассмотрим все статьи, опубликованные в определенной категории под названием «новости».
Откройте для себя наш гид по Как добавить собственный CSS в свой блог WordPress
Мы можем сделать это, добавив следующий пользовательский CSS в нашу тему.
.category-новости {размер шрифта: 18px; стиль шрифта: курсив; }
Этот CSS повлияет на все элементы в категории " актуальность .
Функция post_class ()
Разработчики темы используют функцию post_class () чтобы сообщить WordPress, куда добавить классы записей. Обычно он находится в теге «статья».
функция post_class () не только загружает классы CSS, созданные WordPress по умолчанию, но также позволяет добавлять свои собственные классы.
Откройте для себя Как защитить ваш блог скребки контента
В соответствии с вашим WordPress тема, вы найдете функцию post_class() в вашем файле single.php или в файлах шаблона. Обычно код будет выглядеть так:
" >
Вы можете добавить свой собственный класс CSS с таким атрибутом:
" >
Класс post_class будет печатать соответствующие классы CSS по умолчанию с вашим собственным классом CSS.
Если вы хотите добавить несколько классов CSS, вы можете определить их как массив и использовать их в функции post-class ().
" >
Показать статьи в другом стиле по мнению авторов
Классы CSS по умолчанию, созданные функцией posts_class, не включают имя автора в качестве класса CSS.
Если вы хотите настроить стиль каждого сообщения в зависимости от автора, вам необходимо сначала добавить имя автора в качестве класса CSS.
Читайте также: Как добавить CSS анимации на WordPress
Вы можете сделать это с помощью следующего фрагмента:
" >
Этот код добавит имя пользователя как класс CSS. Имя пользователя - это имя, совместимое с URL-адресом, используемым WordPress. В нем нет пробелов, а все символы в нижнем регистре, что делает его идеальным для использования в качестве класса CSS.
Смотрите также наше руководство по Как добавить собственный CSS в свой блог WordPress
Код выше, скорее всего, будет отображаться так:
Теперь вы можете использовать ".peter" в своем собственном CSS, чтобы изменить все сообщения этого конкретного автора, чтобы они выглядели иначе.
.peter {фонового цвета: #EEE; границы: твердый 1px #ccc; }
Настроить размещение статей на основе комментариев
Возможно, вы видели сайты с виджетами с популярными статьями, которые иногда ранжируются на основе комментариев. В этом примере мы покажем вам, как создать другой стиль, используя количество комментариев.
Откройте для себя 10 премиальных плагинов WordPress для управления вашими комментариями
Во-первых, нам нужно получить количество комментариев и связать класс.
Чтобы получить количество комментариев, вам нужно добавить следующий код в свои файлы WordPress тема. Этот код входит в цикл WordPress, вы можете добавить его непосредственно перед тегом .
утверждено; если ($ my_comment_count <10) {$ my_comment_count = 'новый'; } elseif ($ my_comment_count> = 10 && $ my_comment_count <20) {$ my_comment_count = 'ermerging'; } elseif ($ my_comment_count> = 20) {$ my_comment_count = 'популярный'; }?>
Этот код проверяет количество комментариев для опубликованной публикации и присваивает им значение на основе учетной записи. Например, сообщения с комментариями менее 10 получают класс с именем " new Менее чем 20 называются появление "И все, что касается не только комментариев 20, это" популярный .
Затем вам нужно добавить класс CSS в функцию post_class.
" >
Это добавит новые, появляющиеся и популярные CSS-классы ко всем статьям на основе количества комментариев в каждом посте.
Мы также приглашаем вас прочитать нашу статью на Плагины 6 WordPress для подписания документов в Интернете
Вы также можете добавить собственный CSS в стиль публикаций в зависимости от популярности:
.new {границы: твердый 1px #FFFF00;} .emerging {граница: пунктирная 1px #FF9933;} .popular {граница: пунктирная 1px #CC0000;}
Мы просто добавляем границы, но вы можете добавить любые правила CSS, которые вы хотите.
Откройте для себя также несколько премиальных плагинов WordPress
Вы можете использовать другие WordPress плагины придать современный вид и оптимизировать подключение к вашему блогу или веб-сайту.
Мы предлагаем вам несколько премиальных плагинов WordPress, которые помогут вам сделать это.
1. Окончательный Pro членство
Ultimate Membership Pro — отличный Плагин Wordpress подписка премиум и ограничение контента. Это позволяет управлять пользователями в соответствии с их пакетом (бесплатным или платным), создавая эксклюзивные уровни доступа.
Поэтому будет возможно защитить весь контент вашего сайта, или просто его часть. Это будет, например, курс, урок, страница, продукт, категория, изображение и т. Д.
Читайте также нашу статью о Премиальные плагины 4 для WordPress для создания миниатюр
Среди его основных функций: защита контента, несколько уровней доступа, поддержка нескольких платежных шлюзов - PayPal, Авториз.нет, Полоса, 2CheckOut, банковский перевод-, частичная защита контента, И многое другое…
скачать | Демонстрация | веб-хостинг
2. Как слайдер для Facebook
Как слайдер для Facebook является Плагин Wordpress премиум, который предлагает посетителям возможность оставлять комментарии на вашем сайте. Благодаря этому современному и ненавязчивому блоку комментариев этот Плагин Wordpress предоставляет функции Like Box и Fan Page Wall, которые расширят интеграцию вашего сайта с социальной сетью Facebook.
Плагин также предоставляет различные функциональные возможности для расширения возможностей вашего веб-сайта: например, он имеет раздел "Нравится" («Like Box») или страницу, посвященную фанатам («Fan Page Wall»).
Откройте для себя тоже Как постепенно загружать комментарии Facebook и Disqus
Вам не нужно встраивать кнопки «Нравится» и «Поделиться» в сообщения или страницы, потому что в слайдере комментариев Facebook они уже есть, и они могут отображаться в любом сообщении или странице. Посетители найдут кнопку «Нравится», кнопка "Поделиться" и поле комментариев слайдера Facebook. Они, очевидно, будут использовать свои учетные записи Facebook.
Кроме того, вы можете включать, выключать и устанавливать время эффекта встряхивания.
скачать | Демонстрация | веб-хостинг
3. Войти ниндзя
Этот премиальный плагин WordPress позволяет вам настроить страницу входа в систему. Это больше, чем просто настройка Ваша форма входа, Вы можете настроить всю страницу, изменив цвет страницы, добавив фоновое изображение, добавив логотип и многое другое.
Его другие особенности: защита логина и регистрационных форм с помощью капчи, автоматическая и ручная блокировка IP-адресов, которые атакуют вас методом перебора, подробный журнал всех действий при подключении, перенаправление пользователей на основе ролей и имен пользователей, получение уведомлений по электронной почте для всех событий подключения, простой в использовании графический интерфейс, подробная документация и многое другое.
скачать | Демонстрация | веб-хостинг
Рекомендуемые ресурсы
Узнайте о других рекомендуемых ресурсах, которые помогут вам создать и управлять своим сайтом.
- 9 WordPress плагины для управления платежами PayPal в своем блоге
- 10 основных плагинов WordPress для установки в свой блог
- 10 плагинов WordPress для управления рекламой
- Плагины 10 WordPress для создания атрибутов для ваших переменных продуктов
Заключение
Вот! Это все для этого урока, надеюсь, оно позволит вам настроить отображение статей в вашем блоге WordPress. Если у вас есть какие-либо проблемы или предложения в этой области, давайте окажемся в раздел комментариев для обсуждения.
Однако вы также сможете ознакомиться с нашими Ressources, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...
