a WordPress szerzőinek lehetőségük van oldalak és bejegyzések létrehozására vizuális szerkesztőben vagy szövegszerkesztőben. Míg a vizuális szerkesztő meglehetősen jó munkát végez az eszköztár opcióival és az egyszerű szerkesztési környezettel, a szövegszerkesztő használata maximális rugalmasságot biztosít a tartalom rendezésében.

hadd magyarázzam el nem csak azt, hogy miért szeretné használni a szövegszerkesztőt (a vizuális szerkesztő helyett), hanem azt is, hogy milyen egyszerű lehet használni.

miért érdemes a szövegszerkesztőt választani?

• A tartalom értelmesebb lesz az olvasók és a keresőmotorok számára.
• csak néhány HTML-címkét kell tudnia, hogy a szövegszerkesztő nagyon hasznos legyen.
• a CSS stílus tulajdonságait közvetlenül a HTML-kódra is alkalmazhatja.

Mi Történik A Vizuális Szerkesztő Használatakor?

amikor másolatot, médiát vagy linkeket ad hozzá a vizuális szerkesztőhöz, akkor valóban HTML-t ad hozzá az oldalához vagy a bejegyzéséhez. Minden a motorháztető alatt zajlik.

nem biztos benne, hogy mire gondolok? Próbáld ezt.

adjon hozzá néhány példányt a vizuális szerkesztőbe. Ezután válassza a szöveg fület. Amit meg fog nézni, az a HTML. Csakúgy, mint a vizuális Szerkesztőnél, a HTML-kódot közvetlenül a szövegszerkesztővel is szerkesztheti.

valójában sokkal többet tehet a szövegszerkesztővel, mint a vizuális szerkesztővel. Ez a szöveges módban végzett munkát nemcsak produktívabbá, hanem kielégítőbbé is teszi. Pontosabban meg tudja jelölni a tartalmát, ami előnyös lesz az olvasók számára, és növeli a SEO erőfeszítéseit.

HTML körülbelül olyan egyszerű, mint ez lesz. Minden weboldal, beleértve a WordPress által generált oldalakat is, használja.

a HTML tanulásának előnyei messze túlmutatnak a WordPress használatával!

mi a HTML?

a Web lingua franca néven ismert HyperText Markup Language (HTML) egy olyan rendszer, amely lehetővé teszi a szerzők számára, hogy jelentést rendeljenek a tartalomhoz. HTML elemek (ismertebb nevén címkék) használatával a tartalmat bekezdésekként, címsorokként, listákként, hivatkozásokként és egyéb struktúrákként határozhatja meg.

a HTML olyan, mint a nyelvtan.

ennek semmi köze a weboldal kinézetéhez vagy stílusához. A webdesign – elrendezés, tipográfia és szín – kérdését a CSS (Cascading Style Sheets), a webdesign stílus nyelve veszi fel.

a HTML-t a World Wide Web Consortium (W3C) fejleszti. A legfrissebb verzió a HTML5.

a leggyakrabban használt címkék

a HTML egy konténeres jelölőrendszer. Minden nyitott címkéhez tartozik egy megfelelő záró címke.

például egy oldal vagy egy oldalszakasz legfontosabb tartalmához egy ilyen Címsor 1 címkét használ.

< h1> minden a HTML-ről< / h1>
a nyitott címke< h1> és a tartály zárva van</h1>

hasonlóképpen, itt van, hogy egy bekezdés van jelölve:

<p> néhány évvel ezelőtt egy ügyfél és egy jó barátom javasolta, hogy tanuljak WordPress-t. Abban az időben bármilyen típusú CMS ellen voltam. Nem tudtam, hogy szeretni fogom, és sok embernek tanítom New York-i tantermekben és webináriumon keresztül.< / p>

mindössze annyit kell tennie, hogy írja be a tartalmat a szövegszerkesztőbe, hozzáadva a címkéket akár menet közben, akár a másolat beírása után.

itt található a HTML írásakor leggyakrabban használt címkék magyarázata. Ezek a címsor, lista, link, csoportosítás és néhány egyéb címke.

CÍMSORCÍMKÉK

<h1></h1>

<h2></h2>

<h3></h3>

• vannak h4, h5 és h6 címcímkék is, amelyeket a gyakorlatban ritkán használnak.
• soha ne használjon címsorcímkét a betűméret megváltoztatásához.

LISTACÍMKÉK

3 típusú listát hozhat létre HTML-vel. A 2 legnépszerűbb a rendezett és rendezetlen listák.

rendezetlen listát használnak, ha az elemek sorrendje nem fontos.

< ul>

<li> Virágok< / li>

<li> zöldség< / li>

<li> fák< / li>

</ul>

• Virágok
• zöldségek
• fák

rendezett listát használnak, ha a tételek sorrendje releváns.

< ol>

<li> Kalifornia< / li>

<li> Texas< / li>

<li> Florida< / li>

</ol>

1. Kalifornia
2. Texas
3. Florida

(ebben a példában a sorrendet az Egyesült Államok legnagyobb lakossága határozza meg.)

Megjegyzés: A listák beágyazhatók a listaelemek hierarchiájának létrehozásához is. Ezt nehéz megtenni a vizuális szerkesztő használatakor.

LINKCÍMKE

a szöveget vagy képet linkké alakíthatja úgy, hogy a szöveget vagy képet bármely horgonycímke (link) belsejébe csomagolja. Míg a link létrehozásának szintaxisa mindig ugyanaz (<a href=”url”>linkszöveg</a>), ennek 2 Nagyon gyakori módja van.

a WordPress oldalra mutató linkhez használja a következőket:

<a href= “http://domain.com/this-is-the-page-title”>link egy WordPress oldalra< / a>

bármely oldalra vagy erőforrásra mutató linkhez, nem csak egy WordPress oldalra, használja:

<a href= ” http://domain.com/about.html”>linkegy HTML oldalra</a>

megjegyzés: valójában van egy harmadik út. Használhatja azt a speciális módszert, amellyel a WordPress linkeket hoz létre a következő szintaxissal:

<href = ” index.php?page_id=356 ” >link a webhely egyik oldalára</a

ebben az esetben ismernie kell annak az oldalnak az oldalát vagy bejegyzésazonosítóját, amelyre a webhelyén hivatkozik. (Minden oldal vagy bejegyzés egyedi azonosító számmal rendelkezik).

címkék csoportosítása

technikailag nincs olyan, hogy “címkék csoportosítása”, de ez a legjobb módja annak, hogy más elemeket tartalmazó HTML-címkéket írjunk le. Ezeknek a címkéknek az a célja, hogy pontosabban leírják a tartalom jelentését.

például a <fejléc> címke használható az oldal olyan részének meghatározására, amely ilyen vezető információkat tartalmaz:

<fejléc>

<h1> a vezető irányvonal< / h1>

<img src= “képfájl url-je”>

<p> a fejlécet és a képet követő információ bekezdés, amely logikusan információcsoportként tart össze.< / p>

</header>

Íme néhány nagyon gyakori csoportosítási címke

<main>

<section>

<article>

<aside>

<header>

<footer>

<nav>

<div>

egyéb címkék
a címkén kívül ezeket a címkéket nagyon hasznosnak találja a szövegszerkesztővel való munka során.

<img src="url of image file">

<br>

<!-- hidden code or info here -->

<blockquote> or <q>

míg ezek a címkék hosszú utat fognak elérni, itt van néhány forrás, amely segít.

6835> a HTML-ben csak 10 HTML Tagre van szükség (oktatóanyag)
a HTML-ben
a HTML-ben

a szabályok

a HTML-ben az a szép, hogy csak néhány szabályt kell követni, és könnyen megjegyezhetők.

* a HTML Nagybetűérzékeny

nagybetűs, kisbetűs vagy vegyes nagybetűs írás HTML ahogy tetszik. A szokásos gyakorlat kisbetűs.

* minden nyitott Tag kell lennie egy közeli Tag

vannak kivételek ez alól, de hogy ez nagyon egyszerű, kap a szokása, hogy lezárja az összes nyitott tag.

* a címkék fordított sorrendben vannak bezárva, amelyben egy blokkon belül nyitják meg őket

ezt kissé nehéz megérteni, tehát itt van egy példa.

<p>itt van egy <strong>bekezdés <a href=”url here”>egy link</a></strong> belül és a szöveg egy része hangsúlyos.< / p>

figyeljük meg a sorrendben: < p> <erős><a>….< / a>< / erős>< / p>

* néhány elemnek nincs

Zárócímkéje, például <br> és <img> nincs zárócímkéje, mivel nincs oka annak.

* a HTML-t helyesen használja, és nem az oldal stílusához

például ne használjon < br> címkéket, ha van listája. Vagy ne használja a < táblázat > címkéket az elrendezés rácsának létrehozásához.

a szövegszerkesztő eszköztár

mivel hatékonynak találom a kód írását a szövegszerkesztőbe, általában nem használom az eszköztárat. Ha azonban elkezdi a HTML használatát, akkor néhány eszköz hasznos lehet arra, hogy megtanítsa magának néhány HTML-t. Végül rájön, hogy több címke használható A tartalom megfelelő jelölésére, mint amit az eszköztár megenged.

HTML Plugins

előbb vagy utóbb észre fogod venni, hogy ha létrehozol egy bekezdést a vizuális szerkesztőben, nem fogsz látni egy < p> címkét, amely a szövegszerkesztőben jelenik meg. Ne hagyd, hogy ez zavarjon. A WordPress továbbra is létrehoz egy < p> címkét, amikor a másolat megjelenik az oldalon.

ha ilyen vagy más problémája van a kóddal, érdemes használni ezeket a bővítményeket.

mindig szerkesztés HTML-ben

ez garantálja, hogy amikor oldalt hoz létre vagy szerkeszt, vagy tartalmat tesz közzé, a szerkesztő mindig szövegszerkesztőként nyílik meg, nem pedig vizuális szerkesztőként. Ez nagyon hasznos lehet, mivel a WordPress bizonyos körülmények között eltávolíthatja a címkéket, amikor a vizuális szerkesztőt használják.

a HTML-szerkesztő jelölésének megőrzése plusz

ha problémái vannak a címkék eltávolításával, ez lehet a megoldás.

HTML szerkesztő Szintaxis kiemelő

ez egy csodálatos plugin, amely bekapcsolja a nyájas szövegszerkesztő egy színkódolt bőségszaru. Azt is megváltoztathatja a fekete háttér és a nagyobb betűtípusok. A legjobb, ha ezt a bővítményt a teljes képernyős opcióval használja.

megjegyzés: nem teszteltem egyszerre két vagy több ilyen bővítményt, így inkompatibilitások létezhetnek.

hogyan Shortcodes illeszkednek a képbe

Shortcodes, amit sok plugin használni, hogy adjunk egy űrlapot, hozzanak létre oszlopokat, vagy adjunk hozzá néhány más funkció egy oldal vagy post. Ez egy egyszerű módja a HTML, javascript, CSS és PHP kódok hozzáadásának anélkül, hogy bármit is kellene tudni ezekről a nyelvekről.

használjon rövid kódokat a szövegszerkesztőben ugyanúgy, mint a vizuális szerkesztőben.

az avatatlanok számára a rövid kódok HTML-nek tűnhetnek, de nem azok.

akkor sem illessze be a shortcode ezen a módon, ha hozzá egy kapcsolatfelvételi űrlapot, például a népszerű Kapcsolatfelvételi űrlap 7 plugin,

vagy tudod használni, mint ez a plugin,

tartalom bal oldalán oszlop

tartalom jobb oldalán oszlop

amely létrehozza a két oszlop az oldalon.

ez a rövid kód úgy néz ki, mint a HTML egy open and close címkével, de ez nem

CSS stílus hozzáadása a szövegszerkesztővel

megadhat CSS stílus tulajdonságokat a szövegszerkesztőben hozzáadott tartalomhoz. Ezt az alapértelmezett vizuális szerkesztővel nem lehet megtenni.

a szövegszerkesztővel 2 módon lehet elvégezni.

ennek egyik módja az id vagy class attribútum hozzáadása egy HTML elemhez, mint ebben a példában:

<p id=”lead” > ez a vezető bekezdés a bejegyzésemben.< / p>

akkor, az Ön stílusában.css fájl hozzáadná a #lead stílus tulajdonságait. Talán valami ilyesmi:

#lead

{font-weight:félkövér;

text-align:center;

szín:#f00;}

a második módszer az inline stílus hozzáadása. (A legjobb megoldás azonban az, ha a HTML-t és a CSS-t külön tartjuk, mint a fenti forgatókönyvben.) Felveheti inline stílus, mint ez:

<p style= “font-family: arial,helvetica,sans-serif”>a bekezdés betűtípusa Arial.< / p>

megjegyzés: ez felülírja a bekezdésre vonatkozó minden olyan betűcsalád-stílusszabályt, amely jelen lehet egy külső fájlban vagy az oldal < head> tárolójában.

következtetés

a szövegszerkesztő teljes ellenőrzést ad az oldal vagy a tartalom formázásának módjáról. Bármilyen HTML-címkét használhat, nem csak a szövegszerkesztő eszköztárában lévőket. Az eredmény olyan tartalom lesz, amelyet az emberek és a keresőmotorok könnyebben olvashatnak és megérthetnek. Lehet, hogy egy kis időbe telik, amíg megszokja a HTML írását, de végül nagyon kielégítőnek találja.

szerző életrajza

Bud Kraus [email protected] veterán WordPress oktató New Yorkban, és webináriumon keresztül tanítja a WordPress-t egyének és csoportok számára. Kisvállalkozások helyszínein is dolgozik. http://joyofwp.com