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

Някои уебсайтове съдържат статии, подчертани с персонализиран фон, докато други могат да имат всяка публикация в категория с уникален външен вид. Ако винаги сте искали да научите как да персонализирате всяка публикация в WordPress, попаднали сте на правилното място.

В този урок ще ви покажем как да оформите всяка статия в WordPress по различен начин.

Но ако никога не сте инсталирали WordPress, открийте Как да инсталирате WordPress Блог в 7 Стъпки et Как да се намери, инсталиране и активиране на WordPress тема на вашия блог 

След това обратно към защо сме тук.

Ремарк: Този урок изисква да добавите персонализиран CSS на WordPress. Също така ще трябва да използвате инструмента за проверка. Необходими са някои знания за CSS и HTML.

Дайте индивидуален стил на WordPress статии

WordPress добавя CSS класове по подразбиране към различни елементи на вашия уебсайт. А WordPress тема стандартно съвместим трябва да има код, изискван от WordPress за добавяне на CSS класове за тяло, публикации, страници, джаджи, менюта и др.

Открийте и нашето ръководство за Пермалинковете: Как да персонализирате вашия блог връзки

Основна функция на WordPress, наречена „ post_class () Използва се от теми, за да каже на WordPress къде да добавите тези CSS класове по подразбиране към статии.

Ако посетите уебсайта си и използвате инструмента за проверка в браузъра си, ще можете да видите тези класове добавени за всяка публикация.

Ето CSS класове, добавени по подразбиране въз основа на страницата, показана от потребител.

  • .post-ид
  • .poster
  • .attachement
  • .gluant
  • .hentry
  • .category ID
  • .category име
  • .tag име
  • .format- {format-name}
  • {.Type- след типа име}
  • .has след картинка
  • .post-с парола се изисква
  • .protected-по-по-парола

Пример за показване ще изглежда така:

Можете да персонализирате всяка публикация в WordPress по различен начин, като използвате съответните CSS класове.

Прочетете още: Как да подобрите вашия блог WordPress този уикенд

Например, ако искате да редактирате отделна публикация, можете да използвате клас id-id във вашия персонализиран CSS.

.post-412 {цветен фон: #FF0303; Цвят: #FFFFFF; }

Не забравяйте да промените идентификатора на публикацията, за да съответства на идентификатора на публикацията ви.

Нека да разгледаме друг пример.

Този път ще разгледаме всички статии, публикувани в конкретна категория, наречена „новини“.

Открийте нашето ръководство за Как да добавите персонализиран CSS към вашия блог за WordPress

Можем да направим това, като добавим следния персонализиран CSS към нашата тема.

.category-actualities {размер на шрифта: 18px; font-style: курсив; }

Този CSS ще засегне всички елементи в категорията " актуалност ".

Функцията post_class ()

Разработчиците на теми използват функцията post_class () да каже на WordPress къде да добави класовете за публикации Обикновено е в тага „article“.

Функцията на 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, можете да го добавите точно преди маркера .

одобрен; if ($ 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 коментари получават клас, наречен „ нов Извикват се по-малко от 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, Authorize.net, Нашивка, 2CheckOut, банков превод-, частична защита на съдържанието, И още много…

Изтегляне | демонстрация | уеб хостинг 

2. Как Slider за Facebook

Как Slider за Facebook е WordPress плъгин премия, която предлага на посетителите възможността да оставят отзиви на вашия уебсайт. С това модерно и ненатрапчиво поле за коментари, това WordPress плъгин предоставя Like Box и Fan Page Wall функция, която ще разшири интеграцията на вашия уебсайт със социалната мрежа Facebook.

Плъгинът също така предлага различни функции за разширяване на капацитета на вашия уебсайт: Той има например раздел „Харесвам“ („Like Box“) или страница, посветена на феновете („Wall Page Wall“).

Открийте и вие Как постепенно да зареждаме коментари във Facebook и Disqus

Не е необходимо да вграждате бутоните „Харесване“ и „Споделяне“ в публикации или страници, защото Facebook Comment Slider вече ги има и те могат да се появят на всяка публикация или страница. Посетителите ще намерят бутона "Харесвам", бутона „Споделяне“ и полето за коментари на плъзгача на Facebook. Те очевидно ще използват своите акаунти във Facebook.

Освен това можете да включите, изключите и да зададете времето на ефекта на разклащане.

Изтегляне | демонстрация | уеб хостинг

3. Влезте в нинджа

Тази първокласна приставка за WordPress ви позволява да персонализирате страницата си за вход. Това е нещо повече от персонализиране вашата форма за вход, Можете да персонализирате цялата страница, като промените цвета на страницата, добавите фоново изображение, добавите лого и др.

Другите му характеристики са: защита на формулярите за вход и регистрация с капча, автоматично и ръчно забраняване на IP адреси, които ви атакуват с груба сила, подробен дневник на всички дейности по свързване, пренасочване на потребителя въз основа на роли и потребителски имена, получаване на известия по имейл за всички събития на връзка, лесен за използване графичен интерфейс, подробна документация и др.

Изтегляне | демонстрация | уеб хостинг

Препоръчителни ресурси

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

Заключение

Ето го ! Това е всичко за този урок, надявам се, че ще ви позволи да персонализирате показването на статии във вашия блог на WordPress. Ако имате някакви притеснения или предложения в тази област, нека се озовем секцията за коментари за обсъждане.

Ще можете обаче да се консултирате с нас грабене на ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове, като се консултирате с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.

Но междувременно, споделете тази статия във вашите различни социални мрежи.

... 

Тя ПИН на Pinterest