Jak jsem s pomocí ChatGPT upravil šablonu WordPress: Případová studie redesignu zapomenutého blogu

  Návody

Začalo to nenápadně – chtěl jsem oprášit svůj zapomenutý blog, který ležel ladem už roky. Používám šablonu MyWiki, která je jednoduchá a funkční, původní design jsem si trochu upravil, ale do hloubky jsem moc nešel a bylo to znát. Mým cílem bylo přetvořit ji do moderního kyberpunkového stylu, inspirovaného hrou Cyberpunk 2077 – tmavé pozadí, zářící neonové barvy a futuristická atmosféra.

Jsem nadšenec, ale rozhodně ne profík na CSS. Proto jsem se rozhodl, že zkusím experimentovat s ChatGPT, abych viděl, kam mě tento nástroj může posunout. Výsledkem je blogový článek, který ukazuje, jak jsme s pomocí umělé inteligence přešli od základů CSS až k hotovému redesignu webu.

Co je CSS a jak funguje ve WordPressu

Než se pustíme do samotného procesu, je potřeba pochopit základní koncepty. CSS (Cascading Style Sheets) je jazyk, který se používá k úpravě vzhledu webových stránek. CSS určuje barvy, fonty, velikosti textů, rozložení prvků a mnoho dalšího.

Ve WordPressu existuje možnost vkládat vlastní CSS přímo přes administraci:

  1. Přihlaste se do administrace WordPressu.
  2. Přejděte na Vzhled > Přizpůsobit > CSS.
  3. Vložte svůj kód a okamžitě uvidíte, jak se mění vzhled stránky.

Toto je úžasná funkce zejména pro začátečníky, protože:

  • Výsledek vidíte ihned: Nemusíte nahrávat soubory přes FTP nebo editovat šablony.
  • Není potřeba kódování HTML: Pracujete jen s vizuálním stylem stránky.
  • Jednoduchá editace a návrat zpět: Pokud se něco nepovede, stačí odstranit nebo upravit vložený CSS kód.

Jak mi pomáhal ChatGPT

ChatGPT jsem použil jako svého osobního konzultanta na CSS. Moje otázky byly často velmi jednoduché: „Jak upravit barvu patičky?“ nebo „Jak vytvořit neonový efekt pro nadpisy?“. Systém byl velmi efektivní v poskytování řešení.

Proč právě Cyberpunk 2077? ChatGPT velice dobře pracuje s něčím co dobře zná, na čem je natrénovaný. V podstatě zná celý výsledek.

Zde je, co vše zvládl:

  1. Poradil mi, jak strukturovat styly: Doporučil, abych používal proměnné CSS (:root), které mi usnadnily opakované použití stejných barev.
  2. Navrhl první verze stylů: Od základu jsem dostal styly pro tlačítka, nadpisy a pozadí.
  3. Pomohl s laděním konkrétních prvků: Když jsem poskytl HTML kód části webu (např. patičky), ChatGPT mi pomohl vytvořit specifické selektory pro úpravy.

Kde byly slabiny ChatGPT?

Při práci s ChatGPT jsem ale narazil na několik slabin:

  • Nechtěl si načíst styly ze stránky: ChatGPT nevidí přímo obsah webu ani jeho CSS styly. Musel jsem mu ručně poskytovat části HTML a popisovat, co vidím na stránce.
  • Nedokáže ověřit výsledek: Generované styly je nutné vložit do WordPressu nebo editoru (např. Visual Studio Code), kde jsem je kontroloval a testoval. To je krok, na který nesmíte zapomenout.
  • Někdy byl kód příliš složitý: ChatGPT občas přidával složitější efekty, než jsem potřeboval, což vedlo k nejasnostem nebo nepřesnostem.

Jak jsem styly kontroloval a ladil

Při práci jsem si vytvořil pracovní postup:

  1. Styly jsem ukládal stranou: Používal jsem Visual Studio Code, kde jsem měl všechny verze stylů pohromadě.
  2. Změny jsem testoval postupně: Místo vložení celého kódu najednou jsem přidával menší části a testoval jejich funkčnost.
  3. HTML jsem přidával podle potřeby: Když něco nefungovalo, prozkoumal jsem HTML stránky a poskytl ChatGPT přesné selektory.

Naše neshody a jak jsme je vyřešili

Během spolupráce jsem zjistil, že s ChatGPT se občas neshodneme:

  • Patička byla pořád oranžová: S tímto jsme se celkem natrápili. Zajímavé bylo, že ChatGPT navrhoval přidat !important, což ve WordPressu by nemělo nebylo potřeba, protože šablona automaticky zpracovává prioritní styly. Nicméně to problém vyřešilo.
  • Texty byly někdy špatně čitelné: ChatGPT použil příliš syté neonové barvy na světlejší pozadí, což působilo rušivě. Musel jsem upravit kontrast a zvolit tlumenější tóny.
  • Komplexní styly: Některé efekty, jako animace nebo textové stíny, byly příliš výrazné. Upravoval jsem je, aby působily jemněji.

Finální styly: Ukázky kódu

Proměnné CSS

Proměnné jsem použil pro zjednodušení práce s barvami:

:root {
	--barva-pozadi: #0a0f1d; /* Tmavé pozadí */
	--barva-akcent: #00ffa3; /* Neonově zelená */
	--barva-akcent-modra: #03e1ff; /* Neonově modrá */
	--barva-akcent-zluta: #ffd700; /* Neonově žlutá */
	--barva-paticka: #121212; /* Tmavší barva pro patičku */
}

Patička

/* Footer */
#footer {
	background: #121212 !important;; /* Tmavé pozadí */ 
	color: #f5f5f5; /* Světle šedý text pro čitelnost */
	padding: 20px;
	border-top: 3px solid #03e1ff; /* Neonově modrá linka nahoře */
}

#footer a {
	color: #00ffa3; /* Neonově zelená pro odkazy */
	text-decoration: none;
	transition: color 0.3s ease, text-shadow 0.3s ease;
}

#footer a:hover {
	color: #ffd700; /* Neonově žlutá při hoveru */
	text-shadow: 0 0 10px #ffd700, 0 0 20px #03e1ff;
}

Tlačítka

button {
	background: linear-gradient(90deg, var(--barva-akcent-zluta), var(--barva-akcent));
	color: black;
	border: none;
	padding: 12px 20px;
	text-transform: uppercase;
	cursor: pointer;
	transition: all 0.3s;
}
button:hover {
	box-shadow: 0 0 10px var(--barva-akcent-modra);
}

Co jsem se naučil

  1. CSS je jednoduché, ale zrádné: I malá chyba v selektoru může způsobit, že změny nefungují.
  2. Visual Studio Code je skvělý pomocník: Umožnil mi mít vše přehledně uložené a lépe si organizovat práci. Nebojte se mít otevřených více oken. VSC umí mít i dvě naráz na jedné obrazovce. V jednom mějte poslední stabilní verzi, v další experimentujte.
  3. ChatGPT je jako mentor: Pomáhá pochopit základy, ale je potřeba ověřovat jeho výstupy. Klidně se jej ptejte proč.

Závěr

Redesign mého zapomenutého blogu byl nejen estetickou změnou, ale i cestou, jak více proniknout do CSS a možnosti WordPressu. ChatGPT byl skvělým pomocníkem, který mi poskytl podporu i inspiraci. Pokud hledáte jednoduchý způsob, jak si přizpůsobit svůj web, nebojte se experimentovat a zkoušet nové věci. A hlavně – bavte se tím! 😊

Napiš komentář