Jak dát jedinečný styl s každým bodem na WordPress

Už jste někdy narazili na web, který na svém blogu publikuje jeho články jinak?

Některé weby mají vybrané články zvýrazněné vlastním pozadím, zatímco jiné mohou mít každý příspěvek kategorie s jedinečným vzhledem. Pokud jste se vždy chtěli naučit, jak přizpůsobit každý příspěvek WordPress, jste na správném místě.

V tomto tutoriálu vám ukážeme, jak tvarovat každý článek WordPress jinak.

Ale pokud jste nikdy nenainstalovali WordPress, objevte to Jak nainstalovat 7 kroků WordPress blogu et Jak najít, nainstalovat a aktivovat WordPress téma na svém blogu 

Pak zpět k tomu, proč jsme tady.

Poznámka: Tento výukový program vyžaduje, abyste na WordPress přidali vlastní CSS. Budete také muset použít nástroj Inspect. Jsou vyžadovány určité znalosti CSS a HTML.

Uveďte individuální styl v článcích WordPress

WordPress přidává výchozí třídy CSS do různých prvků vašeho webu. A WordPress téma kompatibilní se standardem musí mít kód vyžadovaný WordPressem pro přidání tříd CSS pro tělo, příspěvky, stránky, widgety, nabídky a další.

Objevte také našeho průvodce Permalinks: Jak přizpůsobit svůj blog odkazy

Hlavní funkce WordPress s názvem „ post_class () Je používán tématy, aby řekl WordPress, kam přidat tyto výchozí třídy CSS k článkům.

Pokud navštívíte svůj web a použijete ve svém prohlížeči nástroj Inspect, uvidíte tyto třídy přidané pro každý příspěvek.

Zde jsou třídy CSS přidány ve výchozím nastavení na základě stránky zobrazené uživatelem.

• .post-id
• .poster
• .attachement
• .gluant
• .hentry
• .category ID
• .category-name
• .tag-name
• .formát- {form-name}
• {.type- po typu název}
• nese název post-miniatura
• .post-password-vyžadováno
• .protected-by-a-heslo

Příklad zobrazení by vypadal takto:

Každou publikaci WordPress můžete přizpůsobit odlišně pomocí příslušných tříd CSS.

Čtěte také: Jak zlepšit svůj blog WordPress tento víkend

Pokud například chcete upravit jednotlivou publikaci, můžete ve své vlastní CSS použít třídu post-id.

.post-412 {barva pozadí: #FF0303; Barva: #FFFFFF; }

Nezapomeňte změnit ID příspěvku tak, aby odpovídalo vašemu ID příspěvku.

Pojďme se podívat na další příklad.

Tentokrát se budeme zabývat všemi články publikovanými v konkrétní kategorii nazvané „novinky“.

Objevte našeho průvodce Jak přidat vlastní CSS do blogu WordPress

Toho můžeme dosáhnout přidáním následujícího vlastního CSS do našeho motivu.

.kategorie-aktuality {font-size: 18px; font-style: italic; }

Tento CSS ovlivní všechny položky v kategorii „ aktuálnost ".

Funkce post_class ()

Funkci používají vývojáři motivů post_class () říct WordPress, kam přidat třídy příspěvků. Obvykle je ve značce „article“.

Funkce post_class () ve výchozím nastavení nejen načte třídy CSS generované WordPressem, ale také vám umožní přidat vlastní třídy.

Objevte také Jak se chránit vaše škrabky obsahu blogu

Podle vašeho WordPress téma, najdete funkci post_class() ve svém souboru single.php nebo v souborech šablon. Normálně bude kód vypadat takto:

" >

Můžete přidat svou vlastní třídu CSS s atributem, jako je tento:

" >

Třída post_class vytiskne příslušné výchozí třídy CSS s vaší vlastní třídou CSS.

Pokud chcete přidat více tříd CSS, můžete je definovat jako pole a použít je ve funkci post-class ().

" >

Zobrazit články s jiným stylem podle autorů

Výchozí třídy CSS generované funkcí posts_class neobsahují jméno autora jako třídu CSS.

Chcete-li přizpůsobit styl každého příspěvku podle autora, musíte nejprve přidat jméno autora jako třídu CSS.

Přečíst také: Jak přidat animace CSS do aplikace WordPress

Můžete to udělat pomocí následujícího úryvku:

" >

Tento kód přidá uživatelské jméno jako třídu CSS. Uživatelské jméno je název kompatibilní s adresou URL používanou WordPressem. Nemá mezery a všechny znaky jsou malé, takže je ideální pro použití jako třída CSS.

Viz také náš průvodce Jak přidat vlastní CSS do blogu WordPress

Výše uvedený kód se pravděpodobně zobrazí takto:

Nyní můžete použít „.peter“ ve svém vlastním CSS a upravit všechny příspěvky od konkrétního autora tak, aby vypadaly odlišně.

.peter {barva pozadí: #EEE; hranice: 1px solid #CCC; }

Přizpůsobte zveřejňování článků na základě komentářů

Možná jste viděli webové stránky s widgety s oblíbenými články, které jsou někdy hodnoceny na základě komentářů. V tomto příkladu vám ukážeme, jak vytvořit jiný styl pomocí počtu komentářů.

Objevte naše 10 prémiových pluginů WordPress pro správu vašich komentářů

Nejprve musíme získat počet komentářů a přidružit třídu.

Chcete-li získat počet komentářů, musíte do svých souborů přidat následující kód WordPress téma. Tento kód jde do smyčky WordPress, můžete ho přidat těsně před značku .

schválený; if ($ my_comment_count <10) {$ my_comment_count = 'new'; } elseif ($ my_comment_count> = 10 && $ my_comment_count <20) {$ my_comment_count = 'ermerging'; } elseif ($ my_comment_count> = 20) {$ my_comment_count = 'populární'; }?>

Tento kód kontroluje počet komentářů k publikované publikaci a přiřadí jim hodnotu na základě účtu. Například zprávy s méně než 10 komentáři dostanou třídu s názvem „ nový Volá se méně než 20 smirek „A vše, co se týká více než komentářů 20, je“ populární ".

Potom musíte přidat funkci CSS do funkce post_class.

" >

Tím se do všech článků přidají nové, nově vznikající a oblíbené třídy CSS na základě počtu komentářů v každém příspěvku.

Zveme vás také k přečtení našeho článku o Zásuvné moduly 6 WordPress pro podepisování dokumentů online

Můžete také přidat vlastní CSS do stylových publikací na základě popularity:

.NEW {border: pevná 1px #FFFF00;} .emerging {border: přerušovaná 1px #FF9933;} .popular {border: přerušovaná 1px #CC0000;}

Přidáme pouze hranice, ale můžete přidat libovolná pravidla CSS.

Objevte také některé prémiové doplňky WordPress  

Můžete použít jiné WordPress pluginy poskytnout moderní vzhled a optimalizovat připojení k vašemu blogu nebo webu.

Nabízíme vám zde prémiové doplňky WordPress, které vám to pomohou.

1. Nejlepší členství pro

Ultimate Membership Pro je skvělé WordPress Plugin prémiové předplatné a omezení obsahu. Umožňuje spravovat uživatele podle jejich balíčku (zdarma nebo placeného) vytvořením exkluzivních úrovní přístupu.

Bude tedy možné chránit veškerý obsah vašich webových stránek, nebo jen jeho část. Bude to například kurz, lekce, stránka, produkt, kategorie, obrázek atd ...

Přečtěte si také náš článek 4 premium WordPress pluginy pro vytváření náhledů

Mezi jeho hlavní funkce patří mimo jiné: ochrana obsahu, více úrovní přístupu, podpora více platebních bran - PayPal, Authorize.net, Proužek, 2Kontakt, Bankovní převod, částečná ochrana obsahu, A mnohem víc…

Stáhnout | Demo | Web hosting 

2. Jak Slider pro facebook

Jak Slider pro facebook je WordPress Plugin prémiový, který nabízí návštěvníkům možnost zanechat komentáře na vašem webu. S tímto moderním a nevtíravým polem s komentáři toto WordPress Plugin poskytuje funkci Like Box a Fan Page Wall, která rozšíří integraci vašeho webu se sociální sítí Facebook.

Plugin také poskytuje různé funkce pro rozšíření kapacit vašeho webu: Má například sekce Like („Like Box“) nebo stránka věnovaná fanouškům („Fan Page Wall).

Objevte také Jak postupně načítat komentáře Facebook a Disqus

Na příspěvky nebo stránky nemusíte vložit tlačítka „Líbí se mi“ a „Sdílet“, protože jezdec pro komentáře na Facebooku je již má a mohou se objevit na jakémkoli příspěvku nebo stránce. Návštěvníci najdou tlačítko „Líbí se mi“, tlačítko „Sdílet“ a pole komentářů jezdce na Facebooku. Zjevně budou používat své účty na Facebooku.

Kromě toho můžete zapnout, vypnout a nastavit čas efektu chvění.

Stáhnout | Demo | Web hosting

3. Přihlásit se Ninja

Tento prémiový plugin WordPress vám umožňuje přizpůsobit si přihlašovací stránku. Je to víc než jen přizpůsobení přihlašovací formulář. Můžete přizpůsobit celou stránku změnou barvy stránky, přidáním obrázku na pozadí, přidáním loga a dalších.

Mezi jeho další funkce patří: ochrana přihlašovacích a registračních formulářů pomocí captcha, automatické a manuální zakázání IP adres, které na vás zaútočí hrubou silou, podrobný protokol všech aktivit připojení, přesměrování uživatelů na základě rolí a uživatelských jmen, přijímání e-mailových oznámení pro všechny události připojení snadno použitelné grafické rozhraní, podrobnou dokumentaci a další.

Stáhnout | Demo | Web hosting

Doporučené zdroje

Zjistěte další doporučené zdroje, které vám pomohou vytvořit a spravovat váš web.

• 9 WordPress pluginy pro správu PayPal plateb na jeho Blog
• 10 základních doplňků WordPress k instalaci na váš blog
• 10 pluginů WordPress pro správu reklamy
• Zásuvné moduly 10 WordPress pro vytváření atributů pro vaše proměnné produkty

Proč investovat do čističky vzduchu?

Tady je ! To je vše pro tento tutoriál, doufám, že vám umožní přizpůsobit zobrazení článků na vašem blogu WordPress. Pokud máte v této oblasti nějaké obavy nebo návrhy, najděte si nás v sekci komentáře k diskuzi.

Budete však také moci konzultovat naše ressources, pokud potřebujete více prvků k realizaci vašich projektů vytváření internetových stránek, nahlédněte do našeho průvodce na internetu Vytvoření blogu WordPress nebo ten, který je zapnutý Divi: nejlepší téma WordPress všech dob.

Mezitím sdílejte tento článek na různých sociálních sítích.

...