Tartalomjegyzék
Elég gyakori kérések kapcsolódnak a weboldal bizonyos részeinek elrejtéséhez, amelyeknek nincs saját be/ki gombjuk az admin oldalon. Mivel nem lehetséges, hogy a frontendben minden egyes részlethez legyen témaadmin gomb, egyszerűen elrejtheti a nem kívánt részeket CSS segítségével, ha nem ismeri a HTML-kódok szerkesztését, hogy egyáltalán eltávolítsa a részt.
Keresse meg az eltávolítandó alkatrészt
Használhatja a böngésző fejlesztői eszközeit, amelyekkel pontosan megkeresheti azt a részt, amelyet el szeretne távolítani.
Tegyük fel, hogy el akarja távolítani a dátumot és a szerzőt tartalmazó részt a blogbejegyzés alatt, jobb egérgombbal kattintva erre a részre Inspect Element és nyissa meg a böngésző fejlesztői eszközeit:
Ha az egérkurzort a forráskód fölé mozgatja, akkor az egérkurzor alatt látható az oldalon kiemelt rész, amely a forráskód egy sorára utal:
Így megtalálhatja, hogy mit szeretne elrejteni - például a fenti képernyőképekre hivatkozva, ha az összes szakasz dátummal és szerzővel, vagy csak a dátummal, vagy csak a szerzővel kapcsolatos szakasz.
CSS írása a kiválasztott szakasz elrejtéséhez
Ha kiválasztott egy elrejteni kívánt részt, használja a kiválasztott HTML-címke ID vagy CLASS attribútumát a saját CSS-stílusaiban, vagy használja a téma által a címke számára használt pontos CSS-kiválasztót. A téma által használt CSS-szelektor a kiválasztott taghez a böngésző fejlesztői eszközeinek jobb oldalán található.
Például, ha úgy döntesz, hogy eltávolítod a dátumot és a szerzőt tartalmazó teljes részt, a téma által használt szelektor a következő: .elm-posts-main .item .item-info
CSS stílus a HTML tag elrejtéséhez az oldalon a "display: none;", használhatja a !important utasítással megakadályozza a CSS stílus további felülírását egy másik CSS-szel.
Tehát a végső CSS stílus a dátumot és a szerzőt tartalmazó rész elrejtéséhez a következő lesz:
.elm-posts-main .item .item-info {
display: none !important;
}
Egyéni CSS kód hozzáadása a Testreszabóba
Az egyéni CSS kódot a Megjelenés > Testreszabás > Kiegészítő CSS
A közzététel után ellenőrizheti a weboldalán:
