Nejste spokojeni se vzhledem svého WordPress webu? Vyzkoušejte úpravu šablony pomocí CSS a PHP. Každá vizuální šablona není nic jiného než sada obrázků, CSS dokumentů, javaskriptových souborů a PHP skriptů. Kterýkoliv z nich můžete přímo upravit a změnit tak vzhled webu k obrazu svému.
Než začnete upravovat, přečtěte si ještě o child šablonách: Jak vytvořit child theme a proč ho využívat
Čím editovat soubory šablony
Jednotlivé soubory šablony můžete editovat dvěma způsoby. Pokročilejší uživatelé či programátoři jistě sáhnou po změně CSS či PHP souborů v jejich oblíbeném vývojovém prostředí nebo běžném textovém editoru. Po každé změně však musí upravené dokumenty znovu nahrát na webserver prostřednictvím FTP klienta, což se nemusí být zrovna moc pohodlné. Méně zkušení uživatelé tak mohou využít jednu z funkcionalit WordPressu – editor zdrojových kódů. Ten je dostupný v menu Vzhled | Editor. Tady je k dispozici seznam všech relevantních souborů právě aktivované šablony, které lze vybrat a jednoduše upravit v editačním okně.
Které soubory upravit
Kdo chce upravovat soubory WordPress šablony, měl by samozřejmě alespoň trochu znát nejen principy CSS stylování a PHP skriptů, ale také strukturu WordPress šablony a funkci jednotlivých souborů. Ze všech editovatelných souborů je zde rozhodně nejdůležitější dokument style.css, který definuje, jak se budou informace na webu zobrazovat, popisuje tedy vizuální stránku webu. Většina ostatních souborů, především PHP skripty pak definují obsah webu, tedy co se bude zobrazovat. Klíčová je pak zejména tato šestice souborů:
- header.php – definuje hlavičku webu,
- footer.php – definuje patičku webu,
- sidebar.php – definuje postranní nabídku a menu,
- index.php – definuje hlavní stránku,
- single.php – definuje podobu příspěvku,
- page.php – definuje podobu stránky.
Změnou těchto PHP dokumentů můžete nastavit, které informace z databáze se mají použít a kde se mají zobrazit. Stylem CSS pak definujete jejich konkrétní vizuální podobu.
Všechný díly seriálu „Úvod do WordPressu“
Seriál „Obecný úvod do WordPress“: 1. část – Před instalací
Seriál „Obecný úvod do WordPress“: 2. část – Instalace
Seriál „Obecný úvod do WordPress“: 3. část – Základní nastavení
Seriál „Obecný úvod do WordPress“: 4. část – Pokročilé možnosti nastavení
Seriál „Obecný úvod do WordPress“: 5. část – Úprava vzhledu pomocí motivů
Seriál „Obecný úvod do WordPress“: 6. část – Úprava vzhledu pomocí CSS a PHP
Seriál „Obecný úvod do WordPress“: 7. část – V praxi
Seriál „Obecný úvod do WordPress“: 8. část – Vhodná rozšíření
Seriál „Obecný úvod do WordPress“: 9. část – Tvorba obsahu
Seriál „Obecný úvod do WordPress“: 10. část – Statistiky a měření návštěvnosti
Seriál „Obecný úvod do WordPress“: 11. část – Aktualizace a zálohy
Měla bych dotaz ohledně úprav v WP Editoru. Vytvořila jsem child theme, ale po jeho otevření v editoru se mi zobrazuje pouze soubor style.css a jedna šablona stránky.php. Potřebovala bych tam nakopírovat i ostatní šablony.php. Nevíte, jak na to?
Předem díky za odpověď.
Child theme slouží k tomu, aby jste při úpravách (ať už vhledu nebo funkce) vybrané šablony nemuseli upravovat původní zdrojové soubory a mohli šablonu aktualizovat bez ztráty úprav. Pokud child šabloně potřebujete další soubory z původní šablony, můžete je zkopírovat přes FTP. Například pomocí programu FileZilla.
Věnujete se problematice Child theme ještě na jiných místech?
Ano, napsal jsem k tomu celý článek https://novy.wplama.cz/jak-vytvorit-child-theme-a-proc-ji-vyuzivat/
Dobry den,
kdyz si stahnu vlastni THEME z wordpressu, co jake slozky ho mam pridat v adresari wordpress? Kdyz totiz otevru index, tak mi to vypisuje, ze nenaslo zadne PHP funkce – get header apod :/
DEKUJI
Zdravím,
složka na ftp je ve wp-content/themes/.
Dobrý den,
když udělám změny např. v single.php a později dojde k aktualizaci šablony, bude tento soubor přepsán nebo zůstanou mé úpravy zachovány?
dobrý deň
s WordPressom nemám skúsenosti, poznám skôr Joomlu 🙁
otázka:
Ako sa dá upraviť šírka textového poľa v šablóne Tventy Seventeen, alebo Fepper.
Viem, že cez Editor, ale kde a v ktorom skripte je nastavenie šírky?
Teraz tam je príliš úzky stlpec, a ten by som chcel nastaviť na širší.
Veľmi pekne ďakujem za radu vopred.
Príjený deň
V nastavení šablony stačí přepnout ze dvou sloupců na jeden a upravit šířku v style.css
Můžete nastavit třeba na 1000px
.page-one-column .panel-content .wrap {
max-width: 1000px;
}
Zdravím,
děkuji za návod. Nicméně, potřeboval bych menší radu:
koupil jsem prémiovou šablonu. Chci aby vypadala stejně jako v demu – samozřejmě, že si ji upravím.
Šablonu jsem nainstaloval ve formě zip – nahrál…a nevypadá ani zdaleka tak, jako je vidět v demu při koupi.
Nevíte náhodou, jestli není nějaký rychlý krok, jak tuto šablonu plně aktivovat?
ps. všechny pluginy, které mi to doporučilo jsem nainstalovat (kromě wookomerce)
Dobrý den,
autoři šablon někdy také nabízí import nastavení a obsahu. Pak by šablona mě vypadat přesně jako v demu.
Děkuji, moc mi pomohla informace o editoru zdrojáku přímo ve WP, neměla jsem o něm zdání. Už dřív jsem přidávala úpravy css přímo v šabloně, v Přizpůsobit, ale nyní jsem potřebovala změnit anglické texty na české, a ty byly ve zdrojáku. Díky Vám se mi to povedlo!