A blogbejegyzések formázásához nem szükséges, hogy sokat tudj HTML-t, de mindenképpen segít!
Ha azt akarod, hogy a blogodat komolyan vegyék, akkor el kell sajátítanod a blogbejegyzések formázását.
Ez azt is jelenti, hogy meg kell tanulnod néhány alapvető HTML trükköt, amelyek segítenek érdekessé és következetesen stilizáltá tenni a cikkeidet.
Ne aggódj, nem azt mondom, hogy programozónak vagy bármi másnak kell lenned ahhoz, hogy vonzó és tájékozatlan blogbejegyzéseket készíts, de néhány alapvető készség elsajátítása sokat segít.
A WordPress egy CMS (Content Management System), és mint ilyen, nem igényli, hogy mindent magad kódolj.
Ezekre vannak eszközök.
A kód nagy része el van rejtve, hogy semmi ne törjön el, és van egy WYSIWYG (What You See is What You Get) szerkesztő a blogbejegyzések és oldalak írásához és formázásához.
Ha már használod a WordPress-t egy ideje, akkor tudod, hogy van egy vizuális és egy szöveges fül a tartalomszerkesztő jobb felső részén, amely lehetővé teszi, hogy válts a bejegyzésed stilizált verziója és a nyers HTML között.
A kezdőknek.
Vizuális = WordPress vizuális szerkesztő
Text = WordPress HTML szerkesztő / nyers szöveg
A legtöbb kezdő megijed és megijed, amikor először látja a nyers HTML-t a szöveg fülön, és gyorsan visszalép.
De ennek nem kell így lennie, és sokkal jobb bloggerré válhatsz, ha időt szánsz arra, hogy kényelmesen dolgozz és szerkessz ebben a módban.
Egy kis gyakorlással könnyen elsajátíthatod az alapokat, a szintaxis valójában elég logikus.
Szintaxis (számítógépes definíció): Egy számítógépes nyelv utasításainak felépítése.
Mi is az a HTML?
A HTML a Hypertext Markup Language (hipertext jelölőnyelv) rövidítése, és a weboldalak és alkalmazások létrehozására használt programozási nyelv.
A HTML lehetővé teszi az alapvető funkciók létrehozását, amelyeket aztán CSS (Cascading Style Sheets) segítségével stilizálhat.
Azt 1990-ben alkotta meg Tim Berners-Lee, személyes hősöm, akinek az internet feltalálását is tulajdonítják, de nem fogok mindent megtanítani a HTML-ről és a történetéről, de ha kíváncsi típus vagy, a Wikipédián tovább olvashatsz.
Mi most csak azt nézzük meg, hogy a HTML hogyan vonatkozik a WordPress bejegyzések és oldalak írására és szerkesztésére.
Ha ismeretlen kódot látsz a WordPress szerkesztő Szöveg lapján, akkor HTML-t látsz, és bizonyos esetekben tartalmazhat néhány CSS inline stílust is.
HTML példa
<h2>This is a title</h2>
A pirossal kiemelt részek HTML-t jelentenek, és ebben a példában egy nyitó h2 title tag-et lát az elején és egy záró h2 title tag-et a végén.
Észrevetted, hogy az egyetlen különbség az, hogy a záró tag előtt egy backslash van a tag neve előtt? Így gyorsan láthatja, hogy a HTML megnyílt és bezáródott.
Ez egy nagyszerű tipp a hibák vagy a hibás HTML kiszűréséhez.
HTML inline CSS példával
<h2 style="color:red;">This is a title</h2>
A fenti példában ugyanazt a h2-t használtuk, ezúttal azonban a HTML segítségével hívtunk meg egy CSS-t, hogy a színt pirosra változtassuk. Figyeld meg, hogy az egyetlen olyan rész, amely valójában CSS, pirossal van kiemelve.
Igazából nem fogsz sok inline CSS-t látni, mert a legjobb, ha a HTML-elemeket külső CSS-fájlokkal stilizálod, ez a WordPress témák tipikus módja a stílusok automatikus alkalmazásának a blogoldalon.
Én személy szerint nem tanácsolom a HTML inline stílusozását a WordPress szerkesztőben, de fontos, hogy tisztában legyél vele, ha esetleg olyan kódot kell szerkesztened vagy tisztítanod, amely más forrásból, például egy pluginból vagy más forrásból történő másolásból és beillesztésből került be.
Elkerülhetetlenül hasznodra válik, ha képes vagy megtisztítani a dolgokat, ha a gremlinek (nem szakkifejezés) utat találnak a tartalmaidba.
Nézzük tehát, hogyan kell HTML-t hozzáadni a WordPress bejegyzésekhez, posztokhoz és oldalakhoz, és mit kell tudnod.
WordPress alapvető HTML alapismeretek
Amikor HTML-t adsz hozzá a tartalom stílusához, nem szabad elfelejtened, hogy a tartalmat a megfelelő nyitó és záró címkékkel csomagold be.
Példa:
<p>Paragraphs should be wrapped with p tags</p>
Vannak példák olyan hasznos HTML-elemekre, amelyek nem igényelnek záró taget, mert maguktól záródnak.
Az egyik példa a sortörés <br>, amely záró tag nélkül is működik, ez azért van, mert a sortörés nem tartalmaz és nem is tartalmazhat tartalmat belül.
Feliratcímkék & Alfejlécek
Egy WordPress bejegyzésnél többféle címsor létezik, először is van a bejegyzés címsorcím, ez egy <h1>, majd lehetőséged van címsorcímeket adni a tartalomhoz, hogy segítsd a gondolatok csoportosítását.
Ezek a h1-től (Heading 1) egészen a h6-ig (Heading 6) terjednek, és a témád jellemzően úgy alakítja ki őket, hogy megfelelő méretűek legyenek.
Mivel az oldalad vagy a bejegyzésed címe automatikusan h1, kerülni akarod ennek használatát a tartalmadban, mivel minden más példány versenyezni fog a főcímmel, ami a bejegyzésed neve.
Ehelyett kövesse a szemantikailag helyes sorrendiséget, és az első alkalommal, amikor szakaszcímet kell használnia, lépjen lefelé a h2 címsorcímre.
Míg ezeket könnyen beállíthatod a bejegyzésszerkesztő WYSIWYG bal felső részén található legördülő menüpont segítségével, hasznos tudni, hogyan működnek HTML-formátumban, hogy ki tudd javítani az esetleges hibákat.
Itt van néhány példa
<h1>This is a heading 1, you won't need to use me in your content</h1><h2>This is a heading 2, I'm very useful, you can use me to organize your articles into sections.</h2><h3>This is a heading 3, Only use me if you already have h2 section headings and you need to divide those sections into sub-sections.</h3><h4>This is a heading 4, I'm similar to the above, only use me if you have already used h3's</h4>
Remélhetőleg kezdesz látni egy mintát itt a HTML-szintaxisban.
Minden HTML-elem egy nyitó <
Mindegyik záró >
A nyitó elemek egyszerűen tartalmazhatják az elem nevét.
A záró címkék a nyitó < után és a záró HTML-elem neve előtt egy előremenő perjelet tartalmaznak.
Még ha egy kicsit jobban megismerkedsz a fentiekkel, máris ugrásnyira a legtöbb WordPress-t használó blogger fölé kerülsz.
Fett vagy dőlt betűk
Ha ki akarsz emelni egy pontot, és fel akarod hívni a figyelmet bizonyos szavakra, akkor érdemes félkövér vagy dőlt betűt használni, hogy kiemeld őket.
Ezt a megközelítést határozottan jobban szeretem, mint az ALL CAPS-ot, ami számomra kiabálásnak hat.
A félkövér HTML-je a <strong>, a dőlt betűé pedig a <em>.
Fun fact: A Strong könnyen megjegyezhető ahhoz, hogy valami félkövér legyen, de miért használja a dőlt betű elem az em-et? Az em a hangsúlyozás rövidítése. Ez talán segít megragadni.
<em>This text is italicized, I am for gentle emphasis</em>
<strong>This text is bold, I am for strong emphasis</strong>
Kiegészítésképpen természetesen használhatod a WordPress WYSIWYG-et vagy a CTRL + B billentyűkombinációt a Bold és a CTRL + I billentyűkombinációt a dőlt betűhöz, miután kiemelted a módosítani kívánt szöveget.
A WordPress billentyűkombinációk és egyéb formázási, formázási módszerek teljes listáját itt találod.
Létezik néhány szabály arra vonatkozóan, hogyan kell és hogyan nem szabad ezeket használni, beleértve, hogy kölcsönösen kizárják egymást, rövid mondatokra tartogasd őket, és takarékosan használd őket.
A Gyakorlati tipográfiában van egy nagyszerű cikk, amely elmagyarázza ezeknek a szabályoknak a fontosságát.
Ha olyan szöveget írsz, amely valóban leköti az embereket, mint például az értékesítési szöveg, akkor ezeket a szabályokat el lehet hajlítani, de nem szabad megszegni.
kiemelés
Ne feledd, ha mindent hangsúlyozol, akkor semmit sem hangsúlyozol!
Listák – Rendezett & Rendezetlen
A HTML segítségével kétféle listát adhatsz hozzá, amelyeket a WordPress WYSIWYG is támogat.
Ezek a következők:
Rendezett listák – <ol>
A rendezett listák számozott elemek sorozataként jelennek meg. Ez akkor hasznos, ha olyan listát írunk, ahol a sorrend számít.
<ol><li>Item 1</li><li>Item 2</li><li>Item 3</li></ol>
A fenti kód így alakul:
- Item 1
- Item 2
- Item 3
Rendezetlen listák – <ul>
A rendezetlen listák lényegében bullet-point listák.
<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>
Ez pedig az alábbi bullet listává alakul.
- Item 1
- Item 2
- Item 3
Mindannyian tudjuk, milyen hasznosak a listák, ráadásul segítenek megtörni a tartalmat és érdekesebbé tenni azt.
Az egyik legfontosabb különbség, amit itt észre fogsz venni, hogy vannak egyedi listaelemek <li> és ezek teljes egészében egy <ol> vagy <ul> wrapperrel vannak körbecsomagolva.
Ezzel fontos tisztában lenni, mert ha a csomagoló <ol> vagy <ul> hiányzik, a listaelemek nem fognak renderelni.
Képek
A blogbejegyzés vagy bármely oldal WordPress-szel történő formázásának másik fontos szempontja a képek használata, és nem okozhat gondot néhány érdekes képet találni, amelyeket a Yahoo images és más szerzői jogdíjmentes képoldalakról szerezhetsz be. Néhány ilyen lehetőség fizetős, de sok közülük ingyenes, feltéve, hogy a forrás megemlítésével és hivatkozással adsz hitelt.
Egy kis árat kell fizetned azért, hogy professzionális képanyaggal rendelkezz a webhelyeden vagy a blogodon.
A kép többet ér ezer szónál, ahogy mondják, vizuális ingereket is adnak az olvasóidnak, valamint szüneteket, amelyek segítenek emészthető darabokra bontani a tartalmat.
Ez segít lekötni az olvasóidat, és bár nem kell magadnak képeket kódolnod, a szintaxis megértése hasznos.
Íme egy példa a képkódra, és arra, hogyan fog kinézni, amikor a szerkesztő szöveg lapján megnézed.
<img src="https://mazepress.com/image.png">
A képnek nincs szüksége záró tagre, mert minden szükséges információ a HTML elem nyitó és záró záró zárójelében van. Az src egyszerűen az URL helyét hívja meg.
A WordPress lehetővé teszi, hogy a képeket balra, jobbra lebegtetheted, vagy középre állíthatod őket. Ha ezt megteszi, és ellenőrzi a kódot a Szöveg lapon, látni fogja, hogy osztályok kerültek hozzáadásra, amelyeket a képek megfelelő stílusához használnak.
Ez egy példa arra, hogy külső CSS-t használnak a különböző képek különböző stílusainak alkalmazására. Hasznos tudni!
Fontos: Mielőtt képeket adna hozzá a bejegyzéseihez és oldalaihoz, győződjön meg róla, hogy azok optimalizáltak a sebesség és a keresőmotorok számára.
Embed
Megkerülhetetlen, hogy külső webhelyekről származó beágyazási kódokat használjon.
Egy példa erre, amikor a YouTube-ról vagy a Vimeo-ról szeretne egy videót beilleszteni, a megosztásra megy, és a program ad egy hosszú kódot, amit bemásolhat.
A legfontosabb dolog, amit nem szabad elfelejteni, hogy a tartalomszerkesztő vizuális lapjára nem illeszthet HTML- vagy más kódot. Ha így teszel, az összekuszálja a kódot, és használhatatlanná teszi, amikor megnyomod a mentést.
Győződj meg róla, hogy a szöveg fülre mész, majd beilleszted oda, ahol meg szeretnéd jeleníteni.
Az alábbiakban egy példa a YouTube-ról származó beágyazási kódra.
<iframe width="560" height="315" src="https://www.youtube.com/embed/ssxCQuv3KzE" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
Míg a WordPress lehetővé teszi, hogy egyszerűen beillessz egy YouTube URL-t a bejegyzésedbe, hogy videóként jelenjen meg, ez nem feltétlenül ad teljes ellenőrzést a videó mérete és az egyéb beágyazási beállítások felett.
Ezért, és mert én régi vágású vagyok, még mindig az iframe beágyazási kódot használom.
A legtöbb beágyazási kódokat kínáló webhelyet a WordPress nem támogatja natívan, ezért továbbra is tisztában kell lenned a beágyazási kódokkal, az iframe-ekkel és azok működésével ahhoz, hogy multimédiát tudj hozzáadni a bejegyzéseidhez.
Kapcsolókódok
A kapcsolókódok nem HTML-kódok. Valójában még csak nem is egy programozási nyelv, hanem egy WordPress natív funkció, amely lehetővé teszi a plugin- és témafejlesztők számára, hogy egyszerű módokat hozzanak létre számodra és számomra, hogy elemeket adjunk hozzá a weblapjainkhoz és bejegyzéseinkhez.
A legegyszerűbb példa, amely nagyjából minden blogon megtalálható, egy kapcsolatfelvételi űrlap rövidkód, de a rövidkódoknak több száz, ha nem ezer olyan lehetséges felhasználási módja van, amely magában foglalja a hozzáadás képességét:
- Táblázatok
- Galériák
- Árcsomagok
- Videók
- Lead Magnets / Email Opt-in űrlapok
- Podcast epizódok
Itt egy rövidkód a Contact Form 7 plugin által generált kapcsolati űrlaphoz, az egyik általunk ajánlott plugin, amelyet az oldalaink és blogjaink 90%-ára telepítünk.
Megjegyzem: szóközöket kellett hozzáadnom a nyitó és a záró zárójelek után, hogy ne jelenítse meg ténylegesen a kapcsolatfelvételi űrlapot, ezért képzeld el szóközök nélkül.
Megjegyzem, hogy a rövidkód szintaxisa más. A < és > helyett nyitó zárójelekkel kezdődnek.
A rövidkódok fejlesztője formázza őket, hogy megkönnyítse a lényeges beállítások beállítását és módosítását.
A weboldal betöltésekor ez a kapcsolatfelvételi űrlap valójában körülbelül 20 sornyi kusza HTML-t tölt be, így sokkal könnyebb a dolga, ha hozzáférhet egy rövidkódhoz.
Az egyetlen figyelmeztetés, hogy ne akarja túlságosan használni a rövidkódokat, mivel azok lelassítják a weboldalakat.
Hasznos tudni róluk, és sokkal kevésbé körülményessé teheti a hozzászólás szerkesztésének folyamatát, ha nem kell nagy mennyiségű HTML-t használnod, amelyet nem értesz, és óvatosan kell dolgoznod vele.
Egyéb formázási tanácsok
Van még néhány tipp, amit az új WordPress-tanulóknak ajánlok szem előtt tartani, és amire röviden kitérek.
Ezek közé tartozik:
- Ne adj hozzá felesleges sortöréseket. Ez azt jelenti, hogy próbáld meg nem használni a <br> HTML taget, és kerüld el, hogy kétszer nyomd le az Entert a bekezdések és szakaszok között, hacsak nem feltétlenül szükséges. Ez rendezetlenné teszi a cikkeid megjelenését, és elkerülhetetlenül következetlenségeket okoz.
- Ne adj hozzá oldalspecifikus betűtípuscsaládokat, -méreteket és -színeket – Ettől megint csak borzalmasan néznek ki a bejegyzéseid, és olyanok lesznek, mintha 1995-ben készültek volna. Azt gondolhatod, hogy az egyedi méretű zöld cím egyedi betűtípussal megragadja a figyelmet, amikor valójában következetlennek és szakszerűtlennek tűnik. A témádnak kell diktálnia ezeket a stílusokat.
- Soha ne adj HTML- vagy beágyazott kódot a Vizuális laphoz – Ez váratlan eredményekhez vezethet, sok takarítással járhat, vagy teljesen tönkreteheti az oldaladat.
- Soha ne tölts videókat a WordPressre – A weboldalad tárhelye nem videotartalmak szolgáltatására készült. Szerencsére a YouTube és a Vimeo amúgy is szupergyors és 100%-ban ingyenes videohosztingot biztosít. Ezért a legjobb a YouTube-ról származó videókat beágyazni, még akkor is, ha azok a sajátjaid.
Nem túl bonyolult, de gyakran látom, hogy az emberek elkövetik ezeket a hibákat és megnehezítik az életüket.
De hamarosan a dolgok megváltozhatnak, sőt, nagyon is megváltozhatnak!
Gutenberg, a blogolás jövője?
A Gutenberg egy új tartalomszerkesztő, amelyet a WordPress az alapoktól kezdve épít, és hamarosan egy hozzád közeli telepítésre kerül.
Ez a blogolás jövője? Ki tudja? De mindenképpen ez a WordPress jövője, úgyhogy itt az ideje, hogy vele tartsunk.
A Gutenberg egy másfajta fenevad.
Ha valaha is használtad a Medium.com-ot blogolásra, akkor amikor először kipróbálod a Gutenberget, kísértetiesen hasonlónak fogod érezni.
Véleményem szerint ez jó dolog, a Medium zavaró tényezők nélküli tartalomszerkesztője gyönyörűen könnyen használható, és ha a WP ezt tudomásul veszi, az pozitívum a WP-n futó blogok és weboldalak működtetésében érintettek számára.
A Gutenberg szerkesztő is moduláris, és lehetővé teszi, hogy blokkokat húzz és dobj a tartalomba, amelyek mindegyikének más célja van.
Ez hasonló ahhoz, ahogyan jelenleg a page builder pluginek és bizonyos témák biztosítják ezt a fajta drag and drop megoldást, de most ezek a funkciók alapértelmezésben érkeznek a WordPressbe.
Ha van a WordPressnek egy olyan aspektusa, ami nem sokat fejlődött az évek során, az a TinyMCE szerkesztő, így tárt karokkal üdvözlöm ezt az újítást.
Ha a blogbejegyzések formázásával küzdesz a jelenlegi szerkesztővel, máris kipróbálhatod a Gutenberget, ha letöltöd és telepíted, ha a műszerfaladon a pluginekre mész, és rákeresel a “Gutenberg”-re.
Blogbejegyzések formázása & Alapvető HTML Final Word
Ha egy kis időt fordítasz a fentiek gyakorlására, sokkal nagyobb kontrollt nyerhetsz a tartalmaid és azok megjelenítésének módja felett.
Hoffe, most már kicsit jobban érzed magad a blogbejegyzések formázása és az alapvető HTML-használat terén.
Ezek a készségek sok időt, pénzt és fejvakarást takaríthatnak meg neked, amikor a tartalom formázása elromlik vagy nem jelenik meg megfelelően.
Míg a fenti alapismeretek a legtöbb blogger és WordPress weboldal tulajdonos számára elegendőek, ha kíváncsi vagy a továbbiakra, van néhány nagyszerű ingyenes weboldal, ahol HTML-t tanulhatsz, köztük a CodeAcademy és a w3Schools.
Most, menj, és tedd széppé a tartalmaidat! 🙂
Ha hasznosnak találtad ezt a cikket, érdemes megnézned más hasznos blogolási útmutatónkat, például a Blogbejegyzés-ellenőrzési listát: Essentials Guide vagy How to Repurpose Content, és ha rajongsz az ilyen típusú útmutatókért, iratkozz fel a hírlevelemre, és e-mailben megosztom veled a legjobb tartalmaimat és felfedezéseimet.
