ez a cikk egyablakos ügyintézés a WordPress HTML-kódjaihoz. Itt található A tartalom létrehozásához leggyakrabban használt WordPress HTML címkék és kódok listája. Mentse el a listát, és használja referenciaként a WordPress blogbejegyzéseinek és oldalainak összeállításakor.

WordPress HTML a Gutenberg szerkesztőben

a WordPress az egyik legjobb blogolási platform. Emberek és márkák milliói használják, hogy nagyszerű webhelyeket hozzanak létre.

ez az útmutató mind a WordPress saját, mind a tárolt verziójára érvényes. Lásd a különbséget WordPress.com vagy WordPress.org.

a WordPress 5.0 az új, 2018 decemberében kiadott Gutenberg szerkesztővel drámai módon javította és megkönnyítette a HTML-címkékkel való munkát a blogbejegyzéseiben és oldalain.

hogyan jelenít meg HTML kódot a Gutenberg szerkesztett bejegyzéseiben? Egyszerűen adja hozzá a” kód ” blokkot, és írja be a kódot. Megmutatja a kódot a látogatóknak.

hogyan szerkesztheti Gutenberg bejegyzéseit HTML használatával? Egyszerűen kattintson a” Szerkesztés HTML-ként ” elemre a szerkeszteni kívánt blokk opciók menüjében.

hozzáadhatja a “klasszikus” blokkot vagy a “klasszikus szerkesztő” plugint is, hogy a korábbi WYSIWYG szerkesztő legyen, amelyet ebben a bejegyzésben leírok.

klasszikus szerkesztő: mi a különbség a vizuális és a szöveg között?

két szerkesztési lehetősége van, amikor blogbejegyzést vagy oldalt ír a klasszikus WordPress szerkesztőben. Használhatja az alapértelmezett ” vizuális “nézetet vagy a” szöveg ” módot.

vizuális módban a tartalmat úgy láthatja, ahogy van. A vizuális módot WYSIWYG-nek hívják, amely pontosan azt jelenti, amit a vizuális mód csinál: amit látsz, azt kapod.

a tartalmat úgy látja, ahogy a látogatók a böngészőikben látják, és egyszerű gombokkal segít szerkeszteni. A legtöbb ember ezt a” vizuális ” bejegyzésszerkesztőt használja a WordPress-ben, amikor tartalmat hoz létre.

szöveges módban megjelenik a kód és a HTML-címkék. Ez a Szöveges mód lehetővé teszi bármilyen HTML-kód hozzáadását bármelyik blogbejegyzéséhez vagy oldalához. A HTML alapú szövegszerkesztő félelmetesebbnek tűnik, és nem olyan népszerű a kezdők körében.

de mi van, ha tudod, hogyan kell kódolni, vagy egy kicsit jobban ellenőrizni akarod az elrendezést és a struktúrát a bejegyzések vagy oldalak létrehozásakor? Használja a” szöveg ” szerkesztőt.

hogyan lehet szerkeszteni a HTML-t a WordPress Classic Editorban?

tehát hogyan juthat el a HTML szövegszerkesztőhöz? A WordPress adminisztrátori bejegyzésében vagy az oldalírás szakaszában kattintson a “szöveg” fülre. A szövegszerkesztőben adja hozzá és szerkeszti az összes HTML-címkét.

hogyan adhatunk HTML kódot egy WordPress bejegyzéshez vagy oldalhoz?

egyszerűen írhat vagy beilleszthet bármilyen HTML kódot közvetlenül a WordPress “szöveg” szerkesztőjébe. Próbálja ki az alábbi listám egyik leggyakrabban használt címkéjével.

másolja ide a webhelyen, illessze be a szövegszerkesztőbe, és “előnézeti” a bejegyzését vagy oldalát, hogy lássa, hogyan fogják látni a látogatók.

néha előfordul, hogy a kód eltávolításra kerül, amikor szövegről vizuális módra vált.

legyen óvatos, és ellenőrizze, hogy ez nem történt meg veled. Vagy csak akkor próbáljon ragaszkodni a szövegszerkesztőhöz, ha azt tervezi, hogy kódot ír, hogy ne találkozzon ezzel a problémával.

azok számára, akik kényelmesek a kódolásban, letilthatja a “vizuális” szerkesztőt is. Lépjen be a WordPress navigációs menü “felhasználók” elemébe, kattintson a “profilod” elemre, majd válassza a “Tiltsa le a vizuális szerkesztőt írás közben”lehetőséget.

másolás és beillesztés a Google Docs, a Microsoft Word és a WordPress között

a WordPress 5.0 kiadása zökkenőmentessé és egyszerűvé tette a Google Docs vagy a Microsoft Word bármely tartalmának másolását és beillesztését a WordPress bejegyzéseibe és oldalaiba.

ez nem mindig volt könnyű. Amikor HTML-vel dolgozik a klasszikus szerkesztőben, néha észrevehet néhány halandzsa karaktert.

ez akkor fordulhat elő, ha másolja/illessze be a Microsoft Word-ből a WordPress-be. Az egyik hasznos forrás a HTML-kód Word-ből a WordPress-szerkesztőbe történő beillesztésekor közzétehető.

másolja/illessze be HTML-jét a Wordből (vagy más forrásból) az eszközbe, hogy megkapja a kód WordPress-barát és tiszta verzióját, amelyet aztán beilleszthet a tartalmába.

hogyan jeleníthetek meg HTML kódokat a blogbejegyzéseimben normál szövegként?

mi lenne, ha HTML-címkéket és más kódokat szeretne beilleszteni és megjeleníteni a bejegyzésében, hogy a látogatók megtekinthessék őket, mint a normál szöveget?

olyan, mint amit itt csinálok a cikkemben? Még mindig használja a szövegszerkesztőt, de így csomagolja be a kódot:

<code><div class="header"></code> 

WordPress HTML szintaxis bővítmények a kód szebb megjelenítéséhez

vannak olyan WordPress bővítmények, amelyek segíthetnek ebben a folyamatban, és lehetővé teszik az elrendezés szerkesztését és a kód bemutatásának módját a blogján a látogatók számára.

a következő kettőt ajánlom. A SyntaxHighlighter Evolved a népszerűbb lehetőség, míg a Pastacode az, amely a legjobban működik azok számára, akik Oldalépítőket használnak egy blog tervezésekor.

Kép beszúrása

<img src="https://markosaric.com/essential-html-tags-wordpress/Image-URL" alt="Description of the image">

a kép kattinthatóvá tétele új célállomásra

<a href="Destination-URL"><img alt="Description of the image" src="https://markosaric.com/essential-html-tags-wordpress/Image-URL" /></a>

Hivatkozás beszúrása

vegye figyelembe, hogy a horgonyszöveg a link látható része. Ez az a szó vagy kifejezés, amelyre a látogatók rákattintanak, hogy elérjék azt az oldalt, amelyre hivatkozik.

<a href="Destination-URL">Anchor text</a>

készítse el a linket nofollow

SEO célokra előfordulhat, hogy el kell készítenie a link nofollow részét. Itt van, hogyan:

<a href="Destination-URL" rel="nofollow">Anchor text</a>

nyissa meg a linket egy új böngészőablakban

<a href="Destination-URL" target="_blank">Anchor text</a>

Link egy hosszú oldal adott szakaszához

ezeket oldalugrásoknak nevezzük. A látogatók rákattinthatnak egy linkre, és valahol lefelé vagy felfelé mozoghatnak a cikkben.

ez különösen hasznos azoknál a hosszabb útmutatóknál, amelyeket a tartalomjegyzék segítségével különböző fejezetekre szeretne osztani.

az oldalugrás létrehozásának első része egy szakasz (vagy cél) hozzárendelése, amelyhez hivatkozni szeretne.

helyezze ezt a kódot az oldal bármelyik szakaszába, amelyre hivatkozni szeretne. A második rész az, hogy valóban összekapcsolja az intro vagy a tartalomjegyzék hozzárendelt szakaszát.

<a></a><a href="#Specific-section">Anchor text</a>

ez akkor is működik, ha az oldal egy adott szakaszára szeretne hivatkozni a blog másik cikkéből. Beilleszthet egy linket erre a célra: https://yourblog.com/yourpost/#Specific-section.

így működnek a “Vissza a tetejére” linkek is. Rendeljen egy szakasznevet a bejegyzés tetejére, és tartalmazzon egy “ugrás a tetejére” gombot a bejegyzés alján, amely a felső szakaszhoz kapcsolódik.

kiemelkedő címek és alszámok létrehozása

<h1>This is a heading H1</h1> <h2>This is a heading H2</h2> <h3>This is a heading H3</h3>

sortörés beszúrása

<p>This is<br>a paragraph</br> with a line break</p>

új bekezdés létrehozása

<p>This is the first paragraph</p> <p>This is the second paragraph</p>

felsoroláspont-lista készítése

<ul> <li>list item with a bullet point</li><li>another item with a bullet point</li></ul>

számozott lista készítése

<ol><li>list item with number 1</li><li>list item with number 2</li></ol>

jelölje ki a szöveget egy bejegyzést sárga (vagy bármilyen más színű) háttér

<span style="background-color:yellow;">Your text</span>

rendelje meg a számot egy elemet a Számozott lista

<ol start="7"><li>List item number 7</li></ol>

készíts egy letters lista

<ol type="A"><li>Item A</li><li>Item B</li><li>Item C</li><li>Item D</li></ol>

készíts egy római számok listája

<ol type="I"><li>Item I</li><li>Item II</li><li>Item III</li><li>Item IV</li></ol>

középre a szöveg

<center>to be centered</center>

legyen a szöveg félkövér

<strong>to be bold</strong>

dőlt betűvel

<em>to be italic</em>

változtassa meg a szöveg színét

<span style="color: #000000;">Your text</span>

helyezzen be egy blokkos idézetet

<blockquote>Your quote</blockquote>

hozzon létre egy táblázatot