Už ste niekedy narazili na webovú stránku, ktorá na blogu publikuje svoje články inak?
Niektoré webové stránky majú vybrané články zvýraznené vlastným pozadím, zatiaľ čo iné môžu mať príspevky jednotlivých kategórií jedinečným vzhľadom. Ak ste sa vždy chceli naučiť prispôsobovať každý príspevok vo WordPress, ste na správnom mieste.
V tomto návode vám ukážeme, ako tvarovať každý článok WordPress inak.
Ak ste však ešte nikdy nenainštalovali program WordPress, zistite to Ako nainštalovať 7 krokov WordPress blogu et Ako nájsť, nainštalovať a aktivovať WordPress tému na svojom blogu
Potom späť k tomu, prečo sme tu.
Poznámka: Tento výukový program vyžaduje, aby ste na WordPress pridali vlastné CSS. Budete tiež musieť použiť nástroj Kontrola. Vyžadujú sa určité znalosti CSS a HTML.
Dať osobitý štýl na WordPress položiek
WordPress pridáva predvolené triedy CSS do rôznych prvkov vášho webu. A WordPress tému kompatibilný so štandardom musí mať kód vyžadovaný WordPressom na pridanie tried CSS pre telo, príspevky, stránky, widgety, ponuky a ďalšie.
Objavte aj nášho sprievodcu Permalinks: Ako prispôsobiť svoj blog odkazy
Hlavná funkcia programu WordPress s názvom „ post_class () Používa sa na témy, aby ste povedali WordPress, kam pridať tieto predvolené triedy CSS k článkom.
Ak navštívite svoju webovú stránku a vo svojom prehliadači použijete nástroj Skontrolovať, uvidíte tieto triedy pridané pre každý príspevok.
Tu sú triedy CSS pridané v predvolenom nastavení na základe stránky zobrazenej používateľom.
- .post-id
- .poster
- .attachement
- .gluant
- .hentry
- .category ID
- .category-name
- .tag-name
- .format- {veľkosť meno}
- {.type- po typu názov}
- nesie názov post-miniatúra
- .post-password-vyžadované
- .protected-by-a-heslo
Príklad zobrazenia by mohol vyzerať takto:
Každú publikáciu WordPress môžete prispôsobiť rôzne pomocou príslušných tried CSS.
Čítajte tiež: Ako zlepšiť vaše WordPress blog o tomto víkende
Napríklad, ak chcete upraviť jednotlivú publikáciu, môžete vo svojej vlastnej CSS použiť triedu post-id.
.post-412 {background-color: #FF0303; Farba: #FFFFFF; }
Nezabudnite zmeniť poštové ID tak, aby sa zhodovalo s vašim poštovým ID.
Pozrime sa na ďalší príklad.
Tentoraz sa budeme zaoberať všetkými článkami uverejnenými v konkrétnej kategórii s názvom „správy“.
Objavte nášho sprievodcu Ako pridať vlastný CSS do blogu WordPress
Môžeme to urobiť pridaním nasledujúcich vlastných CSS do našej témy.
.category-news {font-size: 18px; font-style: italic; }
Tento CSS ovplyvní všetky položky v kategórii „ aktuálnosť ".
Funkcia post_class ()
Túto funkciu používajú vývojári tém post_class () povedať WordPress, kam pridať triedy príspevkov. Spravidla je v značke „article“.
funkcie post_class () nielenže predvolene načítava triedy CSS generované WordPressom, ale umožňuje vám aj pridávať vlastné triedy.
Discover Ako sa chrániť vaše škrabky obsahu blogu
Podľa tvojho WordPress tému, funkciu post_class() nájdete vo svojom súbore single.php alebo v súboroch šablón. Normálne bude kód vyzerať takto:
" >
Môžete pridať svoju vlastnú triedu CSS s týmto atribútom:
" >
Trieda post_class vytlačí príslušné predvolené triedy CSS s vašou vlastnou triedou CSS.
Ak chcete pridať viac tried CSS, môžete ich definovať ako pole a použiť ich vo funkcii post-class ().
" >
Zobraziť články s iným štýlom podľa autorov
Predvolené triedy CSS generované funkciou posts_class neobsahujú meno autora ako triedu CSS.
Ak chcete prispôsobiť štýl každého príspevku podľa autora, musíte najskôr pridať meno autora ako triedu CSS.
Prečítať tiež: Ako pridať CSS animácií WordPress
Môžete to urobiť pomocou nasledujúceho úryvku:
" >
Tento kód pridá používateľské meno ako triedu CSS. Používateľské meno je meno kompatibilné s adresou URL, ktorú používa WordPress. Nemá medzery a všetky znaky sú malé, čo je ideálne na použitie ako trieda CSS.
Prečítajte si tiež nášho sprievodcu Ako pridať vlastný CSS do blogu WordPress
Vyššie uvedený kód sa pravdepodobne zobrazí takto:
Teraz môžete vo svojom vlastnom CSS použiť príponu „.peter“ a upraviť tak všetky príspevky konkrétneho autora tak, aby vyzerali odlišne.
.peter {background-color: #EEE; border: pevná 1px #CCC; }
Prispôsobte uverejňovanie článkov na základe komentárov
Možno ste videli webové stránky s miniaplikáciami s obľúbenými článkami, ktoré sú niekedy hodnotené na základe komentárov. V tomto príklade vám ukážeme, ako vytvoriť iný štýl pomocou počtu komentárov.
Objavte naše 10 prémiových doplnkov WordPress na správu vašich komentárov
Najskôr musíme získať počet komentárov a priradiť triedu.
Ak chcete získať počet komentárov, musíte do svojich súborov pridať nasledujúci kód WordPress tému. Tento kód prechádza do slučky WordPress, môžete ho pridať tesne pred 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 = 'popular'; }?>
Tento kód kontroluje počet komentárov za zverejnenú publikáciu a priraďuje im hodnotu na základe účtu. Napríklad správy s menej ako 10 komentármi dostanú triedu s názvom „ nový Zavolá sa menej ako 20 šmirgeľ „A všetko, čo sa týka viac ako komentárov 20u, je“ populárne ".
Potom musíte do triedy post_class pridať triedu CSS.
" >
Tým sa do všetkých článkov pridajú nové, vznikajúce a obľúbené triedy CSS na základe počtu komentárov v každom príspevku.
Pozývame vás aj na prečítanie nášho článku o Zásuvné moduly 6 WordPress pre podpisovanie dokumentov online
Môžete tiež pridať vlastné CSS do štýlových publikácií na základe popularity:
.NEW {border: pevná 1px #FFFF00;} .emerging {border: prerušovaná 1px #FF9933;} .popular {border: prerušovaná 1px #CC0000;}
Pridáme iba hranice, ale môžete pridať akékoľvek požadované pravidlá CSS.
Objavte aj niektoré prémiové doplnky WordPress
Môžete použiť iné WordPress pluginy poskytnúť moderný vzhľad a optimalizovať prepojenie s vaším blogom alebo webovou stránkou.
Ponúkame vám tu niekoľko prémiových doplnkov WordPress, ktoré vám to pomôžu.
1. Ultimate Membership Pro
Ultimate Membership Pro je skvelé WordPress Plugin prémiové predplatné a obmedzenie obsahu. Umožňuje spravovať používateľov podľa ich balíka (bezplatný alebo platený) vytvorením exkluzívnych úrovní prístupu.
Preto bude možné chrániť celý obsah svojej webovej stránky, alebo len jeho časť. Bude to napríklad kurz, lekcia, stránka, produkt, kategória, obrázok atď.
Prečítajte si aj náš článok 4 premium WordPress pluginy na vytváranie miniatúr
Medzi jeho hlavné funkcie patrí okrem iného: ochrana obsahu, viac úrovní prístupu, podpora viacerých platobných brán - PayPal, Authorize.net, Stripe, 2Kontakt, Bankový prevod, čiastočná ochrana obsahu, A oveľa viac…
Stiahnuť | demo | web hosting
2. Ako Slider pre facebook
Ako Slider pre facebook je WordPress Plugin prémiový, ktorý ponúka návštevníkom možnosť zanechať komentáre na vašom webe. S týmto moderným a nevtieravým boxom na komentáre toto WordPress Plugin poskytuje funkciu Like Box a Fan Page Wall, ktorá rozšíri integráciu vašej webovej stránky so sociálnou sieťou Facebook.
Doplnok tiež poskytuje rôzne funkcie na rozšírenie kapacít vášho webu: Má napríklad sekcia Like („Páči sa mi to“) alebo stránka venovaná fanúšikom („Fan Page Wall“).
Objavte tiež Ako postupne načítať komentáre Facebook a Disqus
Na príspevky alebo stránky nemusíte vkladať tlačidlá „Páči sa mi to“ a „Zdieľať“, pretože posúvač komentárov na Facebooku ich už má a môžu sa zobrazovať na ľubovoľných príspevkoch alebo stránkach. Návštevníci nájdu tlačidlo „Páči sa mi to“, tlačidlo „Zdieľať“ a pole pre komentáre jazdca na Facebooku. Zrejme budú používať svoje účty Facebook.
Okrem toho môžete zapnúť, vypnúť a nastaviť čas efektu chvenia.
Stiahnuť | demo | web hosting
3. Prihlásiť sa Ninja
Tento prémiový doplnok WordPress vám umožňuje prispôsobiť svoju prihlasovaciu stránku. Je to viac než len prispôsobenie prihlasovací formulár, Celú stránku môžete prispôsobiť tak, že zmeníte farbu stránky, pridáte obrázok na pozadí, pridáte logo a ďalšie.
Medzi ďalšie vlastnosti patrí: ochrana prihlasovacích a registračných formulárov pomocou captcha, automatické a manuálne blokovanie adries IP, ktoré na vás zaútočia hrubou silou, podrobný protokol všetkých aktivít súvisiacich s pripojením, presmerovanie používateľov na základe rolí a používateľských mien, prijímanie e-mailových upozornení pre všetky udalosti pripojenia ľahko použiteľné grafické rozhranie, podrobnú dokumentáciu a ďalšie.
Stiahnuť | demo | web hosting
Odporúčané zdroje
Zistite ďalšie odporúčané zdroje, ktoré vám pomôžu pri vytváraní a správe vašich webových stránok.
- 9 WordPress pluginy pre správu PayPal platieb na jeho Blog
- 10 základných doplnkov WordPress, ktoré si môžete nainštalovať na svoj blog
- 10 doplnkov WordPress, ktoré sa používajú na správu reklamy
- Zásuvné moduly 10 WordPress na vytváranie atribútov pre vaše premenlivé produkty
záver
Voila! To je všetko pre tento tutoriál, dúfam, že vám umožní prispôsobiť zobrazenie článkov na vašom blogu WordPress. Ak máte nejaké obavy alebo návrhy v tejto oblasti, dajte sa do toho časť na diskusiu.
Môžete sa však poradiť aj s našimi zdroje, ak potrebujete viac prvkov na realizáciu svojich projektov tvorby internetových stránok, konzultujte nášho sprievodcu na internete Tvorba blogu WordPress alebo jeden na Divi: najlepšia téma WordPress všetkých čias.
Ale medzičasom zdieľajte tento článok na rôznych sociálnych sieťach.
...
