Az egyedi CSS hozzáadása a WordPress-ben az egyik legegyszerűbb módja az oldal stílusának testreszabásának, a témaszerkesztő módosítása nélkül.
Egyedi CSS hozzáadása a Customize menüben
Az egyedi CSS az alábbiak szerint adható hozzá:
- 1. Lépés: Az adminisztrátori panelon az „Appearance” menüre kattintás
- 2. Lépés: A „Customize” opcióra kattintás
- 3. Lépés: Az „Additional CSS” szekció megkeresése
- 4. Lépés: Az egyedi CSS kód beírása
- 5. Lépés: A módosítások mentése
CSS alapok
Az alábbiak az alapvető CSS szabályok:
h1 { color: #333; font-size: 32px; }– H1 színe és mérete.post { background-color: #f0f0f0; padding: 20px; }– Osztályon alapuló stílus#header { background-image: url('image.jpg'); }– ID-n alapuló stílus és háttérkép
CSS media queries
A media queries lehetővé teszik a responsive design-t:
@media (max-width: 768px) { body { font-size: 14px; } }– Mobil készülékekre@media (min-width: 1200px) { .container { width: 1200px; } }– Nagy képernyőkre
CSS szűrő és hover effektek
Az interaktív effektek az alábbiak segítségével érhetők el:
a:hover { color: #007bff; text-decoration: underline; }– Hivatkozás hover effekt.button:active { background-color: #0056b3; }– Gomb kattintott stílusa
Az egyedi CSS az oldal stílusának teljes kontrollját biztosítja anélkül, hogy a téma fájljait módosítanád.