WordPress forfattere har muligheten til å lage sider og innlegg I En Visuell Editor eller En Tekst Editor. Mens Visual Editor gjør en rimelig god jobb med verktøylinjealternativer og enkelt redigeringsmiljø, gir Bruken av Tekstredigereren maksimal fleksibilitet på hvordan man organiserer innhold.

La meg forklare ikke bare hvorfor Du vil bruke Tekstredigereren (i stedet For Visuell Editor), Men hvor lett det kan være å bruke.

Hvorfor foretrekker Du Kanskje Teksteditoren?

• innholdet ditt vil gi mer mening for leserne og søkemotorene dine.
• Du trenger bare å vite NOEN HTML-koder for Å gjøre Tekstredigeringsprogrammet veldig nyttig.
• DU kan bruke CSS stil egenskaper direkte TIL HTML-koden.

Hva Skjer Når Du Bruker Visuell Redigering?

når du legger til kopier, medier eller koblinger Til Visuell Redigering, legger du VIRKELIG TIL HTML på siden eller innlegget ditt. Alt foregår under hetten.

Ikke sikker på hva jeg mener? Prøv dette.

Legg til litt kopi i Visuell Redigering. Velg Deretter Tekstfanen. DET du vil se PÅ ER HTML. Akkurat som Med Visual Editor, kan du redigere HTML-koden direkte med Tekst Editor.

faktisk kan Du gjøre mye mer med Tekstredigereren enn Du kan med Visuell Editor. Dette gjør arbeidet i tekstmodus ikke bare mer produktivt, men mer tilfredsstillende også. Du vil kunne mer nøyaktig markup innholdet som vil gagne leserne og øke DIN SEO innsats.

HTML er omtrent like enkelt som det blir. Hver nettside, inkludert De som genereres Av WordPress, bruker den.

Å Lære HTML vil ha fordeler langt utover å bruke Det Med WordPress!

HVA ER HTML?

Kjent som lingua franca på nettet, HyperText Markup Language (HTML) er et system som tillater forfattere å tildele mening til innhold. VED HJELP AV HTML-elementer (bedre kjent som koder) kan du definere innhold som avsnitt, overskrifter, lister, koblinger og andre strukturer.

HTML er mye som grammatikk.

Det har INGENTING å gjøre med hvordan en nettside ser ut eller hvordan den er stylet. Spørsmålet om websidedesign-layout, typografi og farge-er tatt OPP MED CSS( Cascading Style Sheets), språket i webdesign stil.

HTML blir utviklet Av World Wide Web Consortium (W3C). Den nyeste versjonen er HTML5.

Kodene Du Mest Sannsynlig Vil Bruke

HTML er et containerisert markeringssystem. For hver åpen tag er det en matchende avsluttende tag.

for eksempel, for det viktigste innholdet på en side eller en del av en side, vil du bruke En Overskrift 1-tag som dette.

< h1>ALT OM HTML</h1>
den åpne taggen er<h1>og beholderen er lukket med</h1 >

På Samme måte er det slik et avsnitt er merket opp:

<p > For Flere år siden foreslo en klient og god venn at Jeg lærte WordPress. På den tiden var jeg imot ALLE TYPER CMS. Lite visste jeg at jeg ville komme til å elske det og lære det til Mange mennesker I new York city klasserom og via webinar.< / p>

Alt du trenger å gjøre er å skrive innholdet ditt i Tekstredigereren, legge til kodene dine enten mens du går eller etter at du har skrevet inn kopien.

her er en forklaring på de vanligste kodene du vil bruke når du skriver HTML. De er overskriften, liste, link, gruppering og noen diverse koder.

OVERSKRIFTSKODER

<h1></h1>

<h2></h2>

<h3></h3>

• det er også h4, h5 og h6 overskrift koder som i praksis er sjelden brukt.
• bruk Aldri en overskriftskode for å endre skriftstørrelsen.

LISTETIKETTER

du kan opprette 3 typer lister med HTML. De 2 mest populære er bestilte og uordnede lister.

en uordnet liste brukes Når rekkefølgen på elementene ikke er viktig.

< ul>

<li > blomster< / li>

<li> grønnsaker< / li>

<li > trær< / li>

</ul>

• blomster
• grønnsaker
• trær

en bestilt liste brukes når rekkefølgen på elementene er relevant.

< ol>

<li> California< / li>

<li> Texas< / li>

<li> Florida< / li>

</ol>

1. California
2. Texas
3. Florida

(i dette eksemplet er rekkefølgen relevant og bestemt av de største befolkningene i amerikanske stater.)

Merk: Lister kan også nestes for å opprette et hierarki av listeelementer. Dette er vanskelig å gjøre når Du bruker Visual Editor.

LINK TAG

du kan gjøre tekst eller et bilde om til en link ved å pakke inn teksten eller bildet i en hvilken som helst anker (link) tag. Mens syntaksen for å lage en lenke alltid er den samme (< a href=»url» > koblingstekst < / a>), er det 2 svært vanlige måter å gjøre det på.

for en lenke til En WordPress-side, bruk:

<a href=»http://domain.com/this-is-the-page-title»>link Til En WordPress-side< / a >

for en lenke til en hvilken som helst side eller ressurs, ikke bare En WordPress-side, bruk:

<a href= » http://domain.com/about.html»>link TIL EN HTML-side< / a >

MERK: Det er faktisk en tredje vei. Du kan bruke den spesielle Måten WordPress oppretter lenker med følgende syntaks:

<a href= » indeks.php?page_id=356″>lenke til en side på nettstedet ditt</a

I dette tilfellet må du vite side-eller post-id-en til siden du kobler til på nettstedet ditt. (Hver side eller post har et unikt id-nummer).

GRUPPERING AV KODER

Teknisk sett er Det Ikke noe slikt som «gruppering av koder», Men Det er den beste måten å beskrive ET SETT MED HTML-koder som inneholder andre elementer. Formålet med disse kodene er å mer nøyaktig beskrive betydningen av innholdet ditt.

for eksempel kan <header > taggen brukes til å definere den delen av siden som inneholder ledende informasjon som dette:

<topptekst>

<h1 > En Ledende Kurslinje< / h1>

<img src= «url av bildefilen»>

<p> et avsnitt med informasjon som følger overskriften og bildet som logisk holder sammen som en gruppe med informasjon.< / p>

</header>

her er noen svært vanlige grupperingskoder

<main>

<section>

<article>

<aside>

<header>

<footer>

<nav>

<div>

ANDRE TAGGER
I Tillegg til taggen, finner du disse kodene svært nyttige når du arbeider med Tekstredigereren.

<img src="url of image file">

<br>

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

<blockquote> or <q>

mens disse kodene vil få deg en lang vei, her er noen ressurser for å hjelpe deg.

● Du Trenger Bare 10 HTML-Koder (veiledning)
● Html-Elementreferanse I Alfa Rekkefølge
● Html-Elementreferanse

Reglene

DET FINE MED HTML er at DET bare er noen få regler å følge, og DE er enkle å huske.

* HTML Er Små Bokstaver

Store bokstaver, små bokstaver eller blandet sak – skrive HTML slik du vil. Vanlig praksis er små bokstaver.

* For Hver Åpen Tag Må Det Være En Lukk Tag

det er unntak fra dette, men for å gjøre det veldig enkelt, bli vant til å lukke alle åpne koder.

* Kodene Lukkes I Omvendt Rekkefølge Der De Åpnes I En Blokk

Dette kan være litt vanskelig å forstå, så her er et eksempel.

<p>her er et <sterkt> avsnitt med < a href=»url here» > en lenke< / a > < / sterkt> inne og noe av teksten er understreket.< / p>

Legg merke til rekkefølgen: < p ><sterk>< a >….< / a > < / sterk> < / p>

* Noen Elementer Har Ikke En Avsluttende Kode

Koder som < br> og< img > har ingen avsluttende kode da det ikke er grunn til en.

* BRUK HTML Riktig Og Ikke For Å Style Siden Din

ikke bruk <br> – koder når du har en liste. Eller ikke bruk < tabell> – koder for å opprette et rutenett for layout.

Tekstredigeringsverktøylinjen

Fordi jeg synes det er effektivt å skrive kode inn I Tekstredigeringsprogrammet, bruker jeg vanligvis ikke verktøylinjen. Men hvis DU kommer i gang MED HTML, kan du finne noen av verktøyene som er nyttige som en måte å lære DEG LITT HTML på. Til slutt, vil du innse at det er flere koder som du kan bruke til riktig markup innholdet enn Hva Verktøylinjen tillater.

HTML-Programtillegg

før eller senere vil du legge merke til at hvis du oppretter et avsnitt I Visual Editor, vil du ikke se en < p > tag innpakning rundt kopien når du ser det i Tekstredigeringsprogrammet. Ikke la det plage deg. WordPress vil fortsatt generere en <p > tag når kopien vises på siden din.

hvis du har dette eller andre problemer med koden din, vil du kanskje bruke disse pluginene.

Rediger ALLTID I HTML

dette garanterer at når du går til å opprette eller redigere side eller legge inn innhold, vil redaktøren alltid åpne som Tekstredigerer og ikke En Visuell Editor. Dette kan være svært nyttig Siden WordPress kan fjerne taggene dine under noen omstendigheter der Visuell Editor brukes.

Bevar HTML Editor Markup Plus

hvis du har problemer med å ha koder fjernet, kan dette være løsningen.

HTML Editor Syntaks Merkepenn

Dette er en fantastisk plugin som gjør tørt Tekst Editor til en fargekodet overflødighetshorn. Det kan også endre til en svart bakgrunn og større fonter. Det er best å bruke denne plugin Med fullskjerm alternativet.

MERK: jeg har ikke testet to eller flere av disse pluginene samtidig, så inkompatibiliteter kan eksistere.

Hvordan Kortkoder Passer Inn I Bildet

Kortkoder er det mange plugins bruker til å legge til et skjema, sette opp kolonner eller legge til en annen funksjon på en side eller et innlegg. Det er en enkel måte å legge til kode SOM HTML, javascript, CSS og PHP uten å vite noe om disse språkene.

Bruk kortkoder i Teksteditoren akkurat som Du ville gjort I Visual Editor.

til de uinnvidde, kortkoder kan se UT SOM HTML, men de er ikke.

du kan enten lime inn en snarvei på denne måten hvis du legger til et kontaktskjema, for eksempel med den populære Contact Form 7 plugin,

eller du kan bruke det som dette for en plugin,

Innhold for venstre side av kolonnen

Innhold for høyre side av kolonnen

som skaper to kolonner på en side.

den kortnummeret ser UT SOM HTML med en åpen og nær tag, men det er ikke

Å Legge TIL CSS-Styling Ved Hjelp Av Tekstredigeringsprogrammet

DU kan gi CSS-stilegenskaper til innholdet du legger til I Tekstredigeringsprogrammet. Dette kan ikke gjøres med Standard Visuell Editor.

Med Tekstredigeringsprogrammet kan det gjøres på 2 måter.

En måte er å legge til en id eller et klasseattributt til ET HTML-element som i dette eksemplet:

<p id= «lead» > Dette er hovedavsnittet i innlegget mitt.< / p >

deretter, i din stil.css-filen du vil legge til stilegenskapene for # lead. Kanskje noe sånt som dette:

# lead

{font-vekt:fet;

text-align: center;

farge:#f00;}

den andre måten er å legge inline styling. (Den beste tilnærmingen er imidlertid å holde HTML og CSS separat som i scenariet ovenfor.) Du kan legge til inline styling som dette:

<p style= «font-family: arial, helvetica, sans-serif»>skrifttypen for dette avsnittet Er Arial.< / p>

MERK: Dette vil overstyre enhver skriftfamiliestilregel for dette avsnittet som kan finnes i en ekstern fil eller i < – hodet> – beholderen på siden.

Konklusjon

Tekstredigeringsprogrammet gir deg full kontroll over hvordan du vil formatere siden eller legge inn innhold. DU kan bruke EN HTML-kode, ikke bare DE I Tekst Editor verktøylinjen. Resultatet vil være innhold som er lettere å lese og forstå av mennesker og søkemotoredderkopper. Det kan ta litt tid å bli vant TIL å skrive HTML, men til slutt vil du finne det veldig tilfredsstillende.

Forfatter Bio

Bud Kraus [email protected] er en veteran WordPress Instruktør I New York City og lærer WordPress for enkeltpersoner og grupper via webinar. Han jobber også på nettsteder for små bedrifter. http://joyofwp.com