Bármit bárhová – Saját widgetek

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

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 🙂

 

Oszd meg Te is:

Share on facebook
Facebook
Share on google
Google+
Share on twitter
Twitter
Share on linkedin
LinkedIn

Ezek is érdekesek lehetnek számodra: 

Ne maradj le semmiről, iratkozz fel hírlevelünkre!

Javasolt eszközök:

Banner250x250.png
Elementor Pro
Generatepress Logo White Asset
GeneratePress
Divi 4.0
Divihello
Prémium támogatás és ajándék Divi licence
Adatvedelem.png
ADATVÉDELEM minta
Aszf.png
Webshop ÁSZF minta

“Bármit bárhová – Saját widgetek” bejegyzéshez 19 hozzászólás

  1. Szia Moni!

    Köszi az újabb bejegyzést, nagyon hasznos volt. 🙂 Mindig is szerettem volna szép oldalsávot, csak sosem tudtam, hogy hogyan lehetne megformázni…
    Köszi!

  2. Custom Post Widget nevű bővítménnyel un. Content Blockokat lehet létrehozni, mely TinyM. szerkesztő felülettel rendelkezik. Ha kész a Content Block bejegyzés, csak behúzod a widgetet a megfelelő helyre és kész.

  3. Ha valaki html-t akar gyakorolni, akkor ajánlom neki a Putra Writer nevű programot. Ez ingyen letölthető, magyarul tud (Konkrétan magyar fejlesztés) és nagyon egyszerűen lehet akár bonyolultabb kódokat is készíteni vele. Ráadásul a programon belül van élő elölnézet, amivel azonnal meg is lehet nézni, mit csinál a kód. A hátránya az, hogy csak XP-n fut, WIN 7 alatt nem. Vistát nem tudom, azon nem próbáltam.

  4. Hasznos a bejegyzés, mint mindig!
    Bírom benned, Móni, hogy a legbonyolultabb dolgokat is olyan egyszerűen el tudod magyarázni, hogy az ember csak a homlokára csap, “jé, tényleg!”
    Szóval, köszi! Ki is fogom próbálni. 🙂

  5. Szia!
    Adsense reklámokat szeretnék elhelyezni az oldalon, megkaptam a lehetőséget a google-tól, csak bele kellene írni a kódba is valamit.
    Az nem megy!
    És meg szeretném szüntetni a bejegyzések alatt a posted és a by angol feliratot.

    • Szia!
      Az első kérdést nem értem, bocs… Az AdSense kódot egy Szöveg widgetbe kell beletenni, és kész. Mi egyebet kellene még beleírni?
      A másodikra pedig nincs egységes válasz, ez sablontól függ, de általában két eset lehetséges: az egyik az, hogy ki lehet kapcsolni ezt (a meta adatok kiírását), a másik, hogy nem – ez esetben a sablon kódjából kell kitörölni ezt a részt, általában a single.php fájlból.

      • Szia
        A szöveg dobozba hiába rakom bele, nekem az kell, hogy pl. megállapodtam a bwin, unibet, stb. kirakhatom a bannereit, de, hogyan tudom úgy kirakni, hogy ha az adott bannere kattintanak, akkor átvezesse őket a megfelelő oldalra?

      • Pont ezt írtam meg a cikkben fent:
        “Ha egy linkre van szükséged, akkor ezt kell írnod:
        <a href="http://masikoldal.hu" target="_blank" rel="nofollow">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.)

  6. Szia!
    Képet szeretnék beilleszteni. Kimásoltam innen az img-s sort, az “-jelek közé bemásoltam a feltöltött kép közvetlen hivatkozását, de sajnos csak egy ikon jelenik meg. Mit csináltam rosszul?
    Köszi
    Edina

    • Bocs, de nem értem a kérdést. Hogy kerül szövegszerkesztő egy widgethez?

      Ha a Szöveg típusú widgetre gondolsz, az tisztán txt alapú. Ha formázni akarod a benne lévő szöveget, akkor html tageket kell használnod. A widget eredeti (szerintem helyesebb) neve: Szöveg / HTML widget.

  7. Sziasztok!
    Segítséget szeretnék kérni! A kapcsolat című oldalamba szeretnék beilleszteni googl térképet, de sajnos hiányos angol és egyéb tudás birtokában, nem sikerül. Van valimi egyszerű módja? Előre is köszönöm!

    • Több bővítmény is van ehhez, de még egyszerűbb, ha magából a Google Maps szolgáltatásból másolod ki a kódot – ehhez még angoltudás sem kell, mivel magyarul van.

      Menj fel a https://www.google.hu/maps oldalra, írd be a címet, kattints a Megosztásra, majd a Beágyazásra, másold ki a kódot, majd a Kapcsolat oldaladon HTML nézetben másold be a kódot. Ha kell, írd át a méretét. Ennyi az egész.

      Sok sikert hozzá!

Szólj hozzá!

Ez a weboldal az Akismet szolgáltatását használja a spam kiszűrésére. Tudjunk meg többet arról, hogyan dolgozzák fel a hozzászólásunk adatait..