Obsah
Pomerne časté požiadavky sa týkajú skrytia konkrétnych častí webovej stránky, ktoré nemajú vlastné tlačidlo zapnutia/vypnutia na strane administrátora. Keďže nie je možné mať tlačidlá administrátora témy pre každý detail na prednej strane, môžete jednoducho skryť nechcené časti pomocou CSS, ak sa nevyznáte v úprave kódov HTML, aby ste časť vôbec odstránili.
Vyhľadajte časť, ktorú chcete odstrániť
Pomocou nástrojov pre vývojárov prehliadača môžete nájsť presnú časť, ktorú chcete odstrániť.
Povedzme, že chcete odstrániť časť s dátumom a autorom pod blogovým príspevkom, pričom na túto časť kliknite pravým tlačidlom myši Inšpiračný prvok a otvorte vývojárske nástroje prehliadača:
Pri pohybe kurzora myši nad zdrojovým kódom sa na stránke zobrazí zvýraznená časť, ktorá odkazuje na riadok zdrojového kódu pod kurzorom myši:
Takto môžete nájsť časť, ktorú chcete skryť - napríklad podľa vyššie uvedených snímok obrazovky, či ide o všetky časti s dátumom a autorom, alebo len časť s dátumom, alebo len časť s autorom.
Napíšte CSS na skrytie vybranej časti
Keď ste vybrali časť, ktorú chcete skryť, použite atribút ID alebo CLASS vybranej značky HTML vo vlastných štýloch CSS alebo použite presný selektor CSS, ktorý pre túto značku používa téma. Selektor CSS pre vybraný tag použitý témou môžete nájsť na pravej strane nástrojov pre vývojárov prehliadača.
Ak ste sa napríklad rozhodli odstrániť celú časť s dátumom a autorom, selektorom používaným témou je: .elm-posts-main .item .item-info
Štýl CSS na skrytie značky HTML na strane je "display: none;", môžete použiť aj !important aby sa zabránilo ďalšiemu prepisovaniu štýlu CSS iným štýlom CSS.
Takže konečný štýl CSS na skrytie časti s dátumom a autorom bude:
.elm-posts-main .item .item-info {
display: none !important;
}
Pridanie vlastného kódu CSS do nástroja Customizer
Vlastný kód CSS môžete pridať do Vzhľad > Prispôsobiť > Ďalšie CSS
Po zverejnení si ho môžete skontrolovať na svojej webovej stránke:
