Nedávno jsem dostal zajímavý dotaz. Jak co nejrychleji dát na pozadí jedné konkrétní stránky obrázek. Přemýšlel jsem, která varianta by byla nejjednodušší a nakonec jsem doporučil použít úpravu šablony, respektive CSS.

V tomto konkrétní případě se jednalo o trvalou změnu, na WordPress byla child šablona a tak nebylo nutné shánět plugin a zatěžovat zbytečně server. Ať se s tím popere internetový prohlížeč návštěvníka 🙂

Ok takže jaký byl postup.

Nejdříve je třeba nahrát obrázek do WordPress. K tomu stačí využít MédiaNahrát soubor. Jde samozřejmě vložit obrázek i z externí URL, ale z bezpečnostních důvodů je lepší mít to všechno pohromadě.

Pak potřebujte zjistit id příspěvku anebo stránky. Existuje více možností, ale nejjednodušší je prostě najet myší na název příspěvku v Přehledu příspěvků. V náhledu URL pak uvidíte jeho id, případně si jej rozklikněte k editaci a pak bude součástí URL jako hodnota ?post. U stránky je to to samé.

Teď máte vše co potřebujete. Klikněte na VzhledEditor. Měli byste mít možnost editovat soubor Kaskádové styly (CSS) (style.css). Jen pro pořádek, hrabete se v něčem, co vám může vizuálně rozbít web, takže si vše zazálohujte před jakoukoliv změnou.

Na začátku šablony jsou informace mezi /* a */. Pod ně můžete vložit svůj kód, který by měl vypadat následovně:

body.postid-X {
 background-image: url("http://domena.tld/wp-content/uploads/rok/mesic/nazev.jpg");
}

X je ID příspěvku, do url je nutné vložit celou adresu, kde se nachází obrázek.

Klikněte na Aktualizovat soubor a je hotovo. V případě že máte zapnutou cache, je nutné jí ještě vyčistit.

Jak to funguje technicky

WordPress automaticky vkládá do značky body, class s označením. Třeba:

<body class="post-template-default single single-post postid-639 single-format-standard">

Pokud je značka označená, tak jí můžete upravovat v CSS. Například ve výše uvedeném příkladu je, že aktuální příspěvek je postid-639. Takže pak mi stačí přes body.postid-639 libovolně upravovat jak se bude stránka chovat.

Jen pro zajímavost domovská stránka označena jako home blog. stránka obecně page a konkrétně page-id-4846. Své označení mají i štítky a kategorie. Snadno tak můžete měnit pozadí/formátování u všech anebo konkrétních.

Upozornění – proč tento příklad není úplně správně

V tomto konkrétním příkladě šlo o jednoduchost a rychlost. Ovšem z pohledu fungování WordPress to nebylo úplně správně. Důvody jsou hned dva.

První je, že zasahujete do šablony. Pokud máte vlastní child theme, kterou si editujete tak je to víceméně na vás. Jestliže zasahujete do cizí, tak se připravte že jakmile se aktualizuje, tak všechny vaše zásahy budou smazány. Dále pokud by se mělo měnit více pozadí na více stránkách, tak by to už chtělo plugin, který bude CSS generovat podle potřeb.

Další chybou je použití absolutního odkazu na obrázek. Pokud například za pár měsíců změním strukturu URL anebo přejdu z HTTP na HTTPS, tak už to nebude fungovat. Pokud bych to řešil pluginem, tak bych mohl zajistit že si WordPress změnu URL ohlídá, protože bude pracovat s obrázek jako souborem, ke kterému má data z databáze.

Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInBuffer this page