autorzy WordPress mają możliwość tworzenia stron i postów w edytorze wizualnym lub edytorze tekstu. Podczas gdy edytor wizualny wykonuje dość dobrą pracę dzięki opcjom paska narzędzi i łatwemu środowisku edycji, korzystanie z edytora tekstu pozwala na maksymalną elastyczność organizowania treści.

pozwól, że wyjaśnię nie tylko, dlaczego chcesz używać Edytora tekstu (zamiast edytora wizualnego), ale jak łatwo można go używać.

dlaczego wolisz edytor tekstu?

• Twoje treści będą miały większy sens dla czytelników i wyszukiwarek.
• wystarczy znać kilka znaczników HTML, aby edytor tekstu był bardzo użyteczny.
• możesz zastosować właściwości stylu CSS bezpośrednio do kodu HTML.

Co Się Dzieje, Gdy Używasz Edytora Wizualnego?

po dodaniu kopii, multimediów lub linków do edytora wizualnego naprawdę dodajesz HTML do swojej strony lub posta. Wszystko odbywa się pod maską.

nie wiesz co mam na myśli? Spróbuj tego.

Dodaj kopię w edytorze wizualnym. Następnie wybierz kartę Tekst. Będziesz patrzył na HTML. Podobnie jak w przypadku edytora wizualnego, możesz edytować kod HTML bezpośrednio za pomocą edytora tekstu.

w rzeczywistości możesz zrobić o wiele więcej z edytorem tekstu niż z edytorem wizualnym. To sprawia, że praca w trybie tekstowym jest nie tylko bardziej produktywna, ale również bardziej satysfakcjonująca. Będziesz mógł dokładniej oznaczyć swoje treści, co przyniesie korzyści czytelnikom i zwiększy wysiłki SEO.

HTML jest tak prosty, jak tylko się da. Każda strona internetowa, w tym te generowane przez WordPress, korzysta z niego.

Nauka HTML będzie miała korzyści daleko poza używaniem go z WordPress!

co to jest HTML?

znany jako lingua franca of the web, HyperText Markup Language (HTML) jest systemem, który pozwala autorom przypisać znaczenie treści. Za pomocą elementów HTML (lepiej znanych jako znaczniki) można zdefiniować zawartość jako akapity, nagłówki, listy, łącza i inne struktury.

HTML jest podobny do gramatyki.

to nie ma nic wspólnego z tym, jak Strona wygląda i jak jest stylizowana. Kwestia projektowania stron internetowych-układu, typografii i koloru – jest podejmowana przez CSS (Cascading Style Sheets), język stylu projektowania stron internetowych.

HTML jest rozwijany przez World Wide Web Consortium (W3C). Najbardziej aktualną wersją jest HTML5.

znaczniki, których najczęściej używasz

HTML to kontenerowy system znaczników. Dla każdego otwartego znacznika istnieje pasujący znacznik zamykający.

na przykład dla najważniejszych treści na stronie lub sekcji strony używasz znacznika Nagłówek 1 w ten sposób.

<H1>wszystko o HTML</H1>
otwarty tag to< h1>, a kontener jest zamknięty z</H1>

podobnie, oto jak jest oznaczany akapit:

<p>kilka lat temu klient i dobry przyjaciel zasugerowali mi nauczenie się WordPressa. W tym czasie byłem przeciwko wszelkiego rodzaju CMS. Nie wiedziałem, że pokocham go i nauczę go wielu ludziom w nowojorskich klasach i za pośrednictwem webinaru.</p>

wszystko, co musisz zrobić, to napisać treść w edytorze tekstu, dodając tagi w trakcie lub po wpisaniu kopii.

oto Wyjaśnienie najczęstszych tagów, których będziesz używać podczas pisania HTML. Są to nagłówek, lista, link, grupowanie i kilka różnych tagów.

tagi pozycji

<h1></h1>

<h2></h2>

<h3></h3>

• istnieją również znaczniki nagłówków h4, h5 i h6, które w praktyce są rzadko używane.
• nigdy nie używaj znacznika nagłówka w celu zmiany rozmiaru czcionki.

tagi listy

możesz utworzyć 3 typy list za pomocą HTML. 2 najbardziej popularne to listy uporządkowane i nieuporządkowane.

lista nieuporządkowana jest używana, gdy kolejność pozycji nie jest ważna.

<ul>

<li> kwiaty< / li>

<li> warzywa< / li>

<li> drzewa< / li>

</ul>

• kwiaty
• warzywa
• drzewa

uporządkowana lista jest używana, gdy kolejność pozycji jest istotna.

< ol>

<li> California< / li>

<li> Texas< / li>

<li> Florida< / li>

</ol>

1. Kalifornia
2. Teksas
3. Floryda

(w tym przykładzie kolejność jest istotna i określona przez największe populacje w Stanach Zjednoczonych.)

Uwaga: listy mogą być również zagnieżdżane w celu utworzenia hierarchii elementów listy. Jest to trudne do zrobienia podczas korzystania z edytora wizualnego.

TAG łącza

tekst lub obraz można przekształcić w link, zawijając tekst lub obraz wewnątrz dowolnego znacznika kotwicy (łącza). Podczas gdy składnia tworzenia łącza jest zawsze taka sama (<a href=”url”>tekst łącza</a>), istnieją dwa bardzo popularne sposoby, aby to zrobić.

aby uzyskać link do strony WordPress, użyj:

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

aby uzyskać link do dowolnej strony lub zasobu, nie tylko strony WordPress, użyj:

<a href=”http://domain.com/about.html”>link do strony HTML</a>

uwaga: w rzeczywistości istnieje trzeci sposób. Możesz użyć specjalnego sposobu WordPress tworzy linki o następującej składni:

<a href= ” index.php?page_id=356″>link do strony w Twojej witrynie</a

w takim przypadku musisz znać stronę lub identyfikator postu strony, do której linkujesz w swojej witrynie. (Każda strona lub post ma unikalny numer id).

grupowanie znaczników

technicznie nie ma czegoś takiego jak „grupowanie znaczników”, ale jest to najlepszy sposób na opisanie zestawu znaczników HTML, które zawierają inne elementy. Celem tych tagów jest dokładniejsze opisanie znaczenia Twoich treści.

na przykład znacznik <nagłówek> może być użyty do zdefiniowania części strony, która zawiera wiodące informacje, takie jak ta:

<nagłówek>

<h1> a Leading Heading Line< / h1>

<img src= „url pliku obrazu”>

<P>akapit informacji następujący po nagłówku i obrazie, który logicznie trzyma się razem jako grupa informacji.< / p>

</nagłówek>

oto kilka bardzo popularnych tagów grupujących

<main>

<section>

<article>

<aside>

<header>

<footer>

<nav>

<div>

inne tagi
poza tagiem, te tagi są bardzo pomocne podczas pracy z edytorem tekstu.

<img src="url of image file">

<br>

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

<blockquote> or <q>

chociaż te tagi dadzą ci długą drogę, oto kilka zasobów, które Ci pomogą.

● potrzebujesz tylko 10 znaczników HTML (tutorial)
● odniesienie do elementu HTML w kolejności Alfa
● odniesienie do elementu HTML

Zasady

piękno HTML polega na tym, że istnieje tylko kilka zasad do naśladowania i są łatwe do zapamiętania.

* HTML jest niewrażliwy na wielkość liter

wielkie, małe lub mieszane litery – napisz HTML w dowolny sposób. Powszechną praktyką jest pisanie małymi literami.

* dla każdego otwartego tagu musi być Close Tag

istnieją wyjątki od tego, ale aby było to naprawdę łatwe, wejdź w nawyk zamykania wszystkich otwartych tagów.

* Tagi są zamykane w odwrotnej kolejności, w jakiej są otwierane w bloku

może to być trochę trudne do zrozumienia, więc oto przykład.

<p>tutaj jest <strong>akapit z<a href=”url tutaj”>link</a> </strong > </p>

zwróć uwagę na zamówienie: <P><strong><a>….< / a></strong > < / p>

* niektóre elementy nie mają znacznika zamykającego

, takie jak <br> i < img > nie mają znacznika zamykającego, ponieważ nie ma takiego powodu.

* używaj HTML poprawnie i nie stylizuj swojej strony

na przykład nie używaj <br> tagów, gdy masz listę. Lub nie używaj znaczników< table >do tworzenia siatki dla układu.

pasek narzędzi edytora tekstu

ponieważ wydajne jest pisanie kodu do edytora tekstu, generalnie nie używam paska narzędzi. Jeśli jednak zaczynasz pracę z HTML, niektóre z narzędzi mogą okazać się przydatne jako sposób na nauczenie się HTML. Ostatecznie zdasz sobie sprawę, że istnieje więcej tagów, których możesz użyć do prawidłowego oznaczania treści, niż pozwala na to pasek narzędzi.

wtyczki HTML

prędzej czy później zauważysz, że jeśli utworzysz akapit w edytorze wizualnym, nie zobaczysz znacznika < p > owijającego się wokół kopii, gdy zobaczysz go w edytorze tekstu. Nie przejmuj się tym. WordPress nadal generuje znacznik <P>, gdy kopia pojawi się na twojej stronie.

jeśli masz ten lub inne problemy z kodem, możesz użyć tych wtyczek.

zawsze Edytuj w HTML

gwarantuje to, że po utworzeniu lub edycji strony lub treści postu twój edytor będzie zawsze otwarty jako edytor tekstowy, a nie edytor wizualny. Może to być bardzo przydatne, ponieważ WordPress może usunąć tagi w niektórych okolicznościach, w których używany jest edytor wizualny.

Zachowaj znaczniki edytora HTML Plus

jeśli masz problemy z usunięciem znaczników, może to być Twoje rozwiązanie.

zakreślacz składni edytora HTML

jest to wspaniała wtyczka, która zamienia mdły edytor tekstu w zakodowany kolorem róg obfitości. Może również zmienić się na czarne tło i większe czcionki. Najlepiej użyć tej wtyczki z opcją pełnego ekranu.

uwaga: nie testowałem dwóch lub więcej z tych wtyczek w tym samym czasie, więc mogą istnieć niezgodności.

jak skróty pasują do obrazu

skróty są tym, czego wiele wtyczek używa do dodawania formularza, konfigurowania kolumn lub dodawania innych funkcji do strony lub posta. Jest to łatwy sposób na dodanie kodu, takiego jak HTML, javascript, CSS i PHP, bez konieczności znajomości tych języków.

użyj skrótów w edytorze tekstu, tak jak w edytorze wizualnym.

dla niewtajemniczonych skróty mogą wyglądać jak HTML, ale nie są.

możesz wkleić krótki kod w ten sposób, jeśli dodajesz formularz kontaktowy, na przykład za pomocą popularnej wtyczki Contact Form 7,

lub możesz użyć go w ten sposób dla wtyczki,

zawartość dla lewej strony kolumny

zawartość dla prawej strony kolumny

, która tworzy dwie kolumny na stronie.

ten krótki kod wygląda jak HTML z tagiem Otwórz i zamknij, ale nie jest to

dodawanie stylów CSS za pomocą edytora tekstu

możesz zapewnić właściwości stylu CSS do zawartości dodawanej w edytorze tekstu. Nie można tego zrobić za pomocą domyślnego edytora wizualnego.

z edytorem tekstu można to zrobić na 2 sposoby.

jednym ze sposobów jest dodanie ID lub atrybutu klasy do elementu HTML, jak w tym przykładzie:

<P id = „lead” >to jest akapit lead w moim poście.</p>

to w Twoim stylu.plik css, który chcesz dodać właściwości stylu dla # lead. Może coś w tym stylu:

# lead

{font-weight:bold;

text-align:center;

color:#F00;}

drugim sposobem jest dodanie stylizacji inline. (Jednak najlepszym podejściem jest oddzielenie kodu HTML i CSS, jak w powyższym scenariuszu.) Możesz dodać stylizację inline w ten sposób:

<p style = „font-family:arial,helvetica,sans-serif” >czcionką dla tego akapitu jest Arial.</p>

Uwaga: spowoduje to nadpisanie reguły stylu rodziny czcionek dla tego akapitu, która może być obecna w pliku zewnętrznym lub w kontenerze <head> strony.

podsumowanie

edytor tekstu daje Ci całkowitą kontrolę nad tym, jak chcesz sformatować swoją stronę lub treść postu. Możesz użyć dowolnego znacznika HTML, nie tylko na pasku narzędzi edytora tekstu. Rezultatem będzie treść, która będzie łatwiejsza do odczytania i zrozumienia przez ludzi i pająki wyszukiwarek. Może to zająć trochę czasu, aby przyzwyczaić się do pisania HTML, ale w końcu, znajdziesz to bardzo satysfakcjonujące.

Author Bio

Bud Kraus [email protected] jest doświadczonym instruktorem WordPress w Nowym Jorku i uczy WordPress dla osób indywidualnych i grup poprzez webinar. Pracuje również na witrynach dla małych firm. http://joyofwp.com