Sokszor kérdezik tőlem, hogy hogyan kell például bannert tenni az oldalsávba, vagy elhelyezni egy partner linkjét, vagy szépen megjeleníteni a cégadatokat, vagy hasonló kihívásnak eleget tenni. A Szöveg widget éppen erre való, csakhogy van egy kis bökkenő: kell hozzá némi HTML-tudás. Mit tehetsz, ha nem értesz a HTML-hez?

Az egyik lehetőség, hogy megtanulod… Nem kell tőle megijedni, a HTML igazán egyszerű és logikus, a tetejében nem is kell belőle minden, csak az alapok, a leggyakrabban előforduló utasítások.

A legfontosabb tudnivaló, hogy a HTML utasításokat mindig “kacsacsőrök” (< és > jelek) közé írják. Ami nincs kacsacsőrök között, az meg fog jelenni a képernyőn, a böngésző alapértelmezése szerint. Tehát ha leírjuk egy Jegyzettömbbe, hogy “Szia!”, és elmentjük index.html néven, akkor létrehoztunk egy weblapot, amely annyit csinál, hogy a képernyő bal felső sarkába, Times New Roman betűtípussal, 12-es betűnagysággal, fekete színben kiírja, hogy “Szia!”

A HTML-utasítások tehát a képernyőn való megjelenést befolyásolják. Meg kell adnunk, hogy a soron következő szöveg milyen legyen, majd ahonnan már nem akarjuk, hogy a többi is olyan legyen, ott le kell zárnunk az utasítást. Azaz például ha azt akarjuk, hogy a “Kedvenc napom a hétfő.” mondatból a “hétfő” szó félkövér legyen, akkor ezt kell írnunk:
Kedvenc napom a <b>hétfő</b>.

hirdetés
Online WordPress Tanfolyam - Hamarosan nyitunk!

A <b> jelzi, hogy innentől kezdve félkövér betűt kell alkalmazni, a </b> pedig azt, hogy itt a vége, innentől már nem kell a félkövér betű. Hasonlóan az <i> a dőlt betűt jelzi, az <u> az aláhúzottat, a <font color="red"> azt jelenti, hogy vörös színű legyen a betű, és így tovább.

Ha képet akarsz megjeleníteni, arra az img utasítás való. Valahogy így fog kinézni:
<img src="http://domainneved.hu/wp-content/uploads/2013/05/kepneve.jpg">
– ha a képet előzőleg feltöltötted a WordPress oldalad Médiatárába.

Ha egy linkre van szükséged, akkor ezt kell írnod:
<a href="http://masikoldal.hu" target="_blank">link szövege</a>.

Ha azt akarod, hogy a kép egy link legyen, vagyis ha valaki rákattint a képre, akkor kerüljön át mondjuk a partnered oldalára, akkor az <a> és a </a> közé a kép kódját kell beírnod. Ugye, tudod, mit csináltál most? Igen, ez egy banner! 🙂
(A target="_blank" azt jelenti, hogy a link új lapon nyílik majd meg.)

Nagyon jó oktató és gyakorló oldal a w3schools.com, ahol élőben is kipróbálhatod a kódok hatását. Érdemes eljátszani vele!

 

Ha mégsem jött meg a kedved a HTML megtanul(gat)ására, a WordPress most is segít.

Hozz létre egy új oldalt vagy bejegyzést. Készítsd el benne a tartalmat, amit a widgetedbe szánsz, a megszokott módon. (Ne tedd közzé, csak Vázlatként mentsd.) Amikor kész vagy, és a tartalmad pontosan úgy néz ki, ahogy akarod, akkor kattints át HTML módba a bejegyzésszerkesztő tetején. Jelöld ki a kapott HTML-kódot, másold a vágólapra (CTRL+C), majd menj át a Megjelenés -> Widgetek menüpontba, húzd be a Szöveg widgetet a megfelelő helyre, és illeszd be (CTRL+V) az imént kimásolt kódot a widgetbe.

Ezek után, ha valaki megkérdezi, hogy hogy csináltad azt az ügyes kis valamit az oldalsávodban, szerényen mosolyogva csak annyit kell mondanod: ó, azt magam programoztam HTML-ben 🙂