Chcete přidat liché a sudé třídy k článkům na vaše téma? WordPress blog ? Přidání třídy vám umožní zobrazit konkrétní styl pro každý článek.
V tomto tutoriálu vám ukážeme, jak zobrazit sudé nebo liché třídy na WordPress.
Proč přidat třídy? paires "Nebo" lichý » na vaše téma WordPress blog ?
Mnoho Témata WordPress použijte starou nebo stejnou třídu pro komentáře WordPress. Umožňuje uživatelům vidět, kde jeden komentář končí a druhý začíná.
Podobně můžete tuto techniku použít pro své články. Vypadá esteticky, umožňuje uživatelům rychle skenovat velké stránky. To je zvláště užitečné pro domovskou stránku novin nebo časopisů.
To znamená, že uvidíme, jak přidat třídu do vašich článků WordPress blog.
Jak přidat do třídy WordPress párnou / lichou třídu
WordPress generuje výchozí třídy CSS a přidává je do různých článků na vašem webu za běhu. Tyto třídy CSS pomáhají vývojářům zásuvných modulů a motivů přidávat vlastní styly do každého jiného článku.
WordPress také nabízí funkci nazvanou „ post_class Což používají vývojáři témat k přidávání tříd do článků.
Funkce post_class Je to také filtr, což znamená, že s tím můžete manipulovat. To je přesně to, co tady uděláme.
Stačí přidat tento kód do souboru functions.php. WordPress téma.
funkce oddeven_post_class ($ třídy) {global $ current_class; $ třídy [] = $ current_class; $ current_class = ($ current_class == 'liché')? "dokonce": "zvláštní"; vrátit třídy $; } add_filter ('post_class', 'oddeven_post_class'); globální $ current_class; $ current_class = 'liché';
Tato funkce jednoduše přidá třídu k lichým a sudým položkám.
Ve zdrojovém kódu vašeho webu najdete liché a sudé třídy. Stačí přejet myší k nadpisu článku a poté kliknutím pravým tlačítkem zkontrolovat položku.
Nyní, když jste do svých článků přidali liché a sudé třídy. Dalším krokem je poskytnout jim jedinečný styl pomocí CSS. Svůj vlastní kód CSS můžete přidat na své podřízené téma nebo pomocí jednoduchého pluginu CSS.
Zde je příklad kódu CSS, který můžete použít jako výchozí bod:
.even {background: # f0f8ff; } .odd {pozadí: # f4f4fb; }
Takto může být výsledek:
Abyste dosáhli dobrých výsledků, budete potřebovat trochu tréninku, ale k tomu budete muset zvládnout CSS nebo prostě použít podobný nástroj CSS Hero.
Je to tak jednoduché. Doufám, že vám tento tutoriál pomůže. Neváhejte se na nás zeptat nebo sdílet tento tutoriál se svými přáteli na svých oblíbených sociálních sítích.
