Вы когда-нибудь сталкивались с сайтом, который предлагает разные стили для каждого элемента? Некоторые сайты имеют разные статьи « вперед Выделены, в то время как другие имеют каждую категорию с разными цветами, иногда некоторые могут даже иметь очень уникальную перспективу.
Ну, это именно то, что мы собираемся охватить в этом уроке. Мы поделимся с вами различными методами, которые вы можете использовать, чтобы придать уникальный стиль вашим статьям на WordPress.
Так что мы будем использовать? Мы будем использовать функцию под названием " post_class ". Эта функция печатает различные классы в контейнерах статей (тег HTML), обычно в index.php, single.php и других файлах, отображающих " цикл статей «(Со ссылкой на» WordPress Loop ").
Ремарка: Для этого руководства требуется, чтобы вы были знакомы с дизайном WordPress тема и немного освоить HTML/CSS.
Когда вы открываете свой файл index.php или другой файл, в котором есть цикл, вы обычно видите " DIV "С классами" post- {id} ", но также возможно использование функции" post_class ".
" >
Добавление этой функции в тег DIV », Каждая из ваших статей будет иметь следующие классы, добавленные WordPress. Следующие классы добавляются по умолчанию:
- .post-идентификатор
- .post
- .attachment
- .sticky
- .hentry (hAtom микроформат страниц)
- .category ID
- .category имя
- .tag имя
Вот пример тега с классами.
Итак, если вы откроете свой файл "style.css" и добавите класс "category-dancing", вы сможете настроить отображение статей в категории "dancing".
.category танцы {фон: #97c3e1; границы: твердый 1px #84aac4;}
Вышеупомянутые статьи в категории "танцы" будут иметь синий фон. Вы можете продолжить, добавив еще один класс для класса «категория-танец» и т. Д. Вы можете использовать ту же технику, чтобы придать уникальный вид предметам с определенной этикеткой.
Но тем, кто действительно хочет настроить внешний вид своего сайта, могут потребоваться дополнительные элементы управления с точки зрения классов. Ну, вы можете указать классы, которые хотите использовать, следующим образом:
Но как это будет работать на динамической платформе, такой как WordPress? Итак, давайте рассмотрим несколько примеров того, как добавлять классы в ваши статьи на WordPress.
Стиль на основе авторов
Часто вы замечаете, что в некоторых блогах используется другой стиль в зависимости от автора. Для этих блогов рекомендуется придать каждой статье уникальный стиль, по мнению авторов. Итак, в этом примере мы собираемся дать каждому сообщению свой собственный стиль на основе имени автора. Итак, в вашем файле index.php или другом файле (archive.php / category.php и т. Д.) Мы найдем имя автора статьи:
Приведенный выше код извлекает "отображаемое" имя автора и присваивает ему переменную $ author. Теперь, когда у нас есть значение, мы можем добавить его в наш код post_class следующим образом:
Примечание: Вам не обязательно сохранять класс 1 и класс 2. Это просто, если вы хотите добавить статические классы.
Наш пример должен выглядеть так:
Название будет отличаться в каждой статье в зависимости от переменной публичного имени автора. Затем вы можете добавить стиль по вашему выбору следующим образом:
.Herve {border: 1px solid # 000;} .Thierry {border: 1px solid # d88b3d;} .Franklin {border: 1px solid # 4781a8;}
Тогда каждый элемент в цикле будет иметь свой класс и, следовательно, будет применяться другой стиль.
Стиль по количеству комментариев
Вы видели сайты с популярными статьями в виджете, которые в основном основаны на количестве комментариев. Что ж, в этом примере мы собираемся показать вам, как стиль сообщений меняется в зависимости от количества комментариев. Первое, что нам нужно сделать, это получить количество комментариев и связать с ним класс. Чтобы получить количество комментариев, нам понадобится следующий код в цикле:
утверждено; если ($ 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 Будет добавлено Если статья содержит больше комментариев 10 и меньше комментариев 20, тогда класс "ermergingБудет добавлено Если статья содержит больше комментариев 20, то класс Популярная " будут добавлены Вы можете изменить эту шкалу на основе средней оценки вашего сайта.
Таким образом, код статьи будет похож на это:
Убедитесь, что вы вставили код выше в цикле. Затем вы добавите переменную $ custom_values в функцию post_class.
.new {границы: твердый 1px #FFFF00;} .emerging {граница: пунктирная 1px #FF9933;} .popular {граница: пунктирная 1px #CC0000;}
На сегодняшний день это лучший способ настроить стиль статей на WordPress. Но иногда вы хотите иметь больше контроля. Классы CSS дают вам возможность редактировать предварительный просмотр, но не изменять структуру.
Вот именно для этого урока. Надеюсь, вам удастся создать конкретные стили для статей на WordPress.
