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