Seriál „Obecný úvod do WordPressu“: 6. část – Úprava vzhledu pomocí CSS a PHP

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

Správa WordPress webu

Nemusíte na to být sami. Pomůžeme vám s pravidelnou údržbou i novými vylepšeními.

Více informací

12 názorů na “Seriál „Obecný úvod do WordPressu“: 6. část – Úprava vzhledu pomocí CSS a PHP”

  1. 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ěď.

    1. Tomáš Cirkl

      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.

  2. 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

  3. Michael

    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?

  4. 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ň

  5. 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;
    }

  6. 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)

  7. 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!

Diskuze

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

Nákupní košík

Neuteklo vám něco?

Pokrok a WordPress na nikoho nečekají, tak nám tu raději nechte e-mail, ať o nic nepřijdete!

Zkontrolujte svoji doručenou poštu nebo spam koš, abyste mohli svůj e-mail potvrdit.

Vylaďte WordPress stránky s naším tahákem

V e-booku najdete informace a rady pro WordPress od A do Z. Zadejte e-mail a my vám WordPress tahák pošleme.

Zkontrolujte svoji doručenou poštu nebo spam koš, abyste mohli svůj e-mail potvrdit.

Přejít nahoru