Pozdrav, dragi čitaoci blog stranice. Odlučio sam da današnju publikaciju posvetim pitanju pisanja članaka u WordPress HTML editoru ().

Činjenica je da ponekad nije moguće koristiti vizualni uređivač u admin panelu (najčešće je to zbog problema s hostingom), a bez njega će blogerima početnicima biti prilično teško pisati korektno i lijepo dizajnirane članke, jer jednostavan uređivač koji radi za sve bez izuzetka zahtijeva najmanje .

Kada sam prvi put počeo da pišem ovaj blog i da se upoznajem sa motorom, jednostavno nisam mogao da koristim vizuelni uređivač. Nisu pomogli ni dodatni dodaci sa njihovim različitim verzijama, niti drugi "plesovi s tamburom". Stoga sam, hteli-nehteli, morao da savladam postojeći osnovni uređivač, srećom, tada sam već bio poprilično upoznat sa jezikom za označavanje hiperteksta.

Koristeći samo HTML editor u WordPress-u

Ali poenta nije bila čak ni u HTML-u, već u praktičnosti izvođenja svakodnevnih i čestih radnji. Da, podrazumevani WordPress uređivač vam omogućava da koristite jedno dugme za dodavanje podebljanih (oznaka STRONG) i italic (EM) oznaka, umetanje linkova, citata, slika, numerisanih lista i lista za nabrajanje, isticanje različitog koda i .

Ali ovo mi nije bilo dovoljno, jer... U tekstu članaka aktivno sam koristio interne naslove različitih nivoa (od H2 do H5), isticao kod (PHP, CSS, itd.) posebnim oznakama i učinio mnogo više.

Dakle, sve što nije bilo uključeno u standardni set alata osnovnog WordPress editora je moralo da se unese ručno sa tastature, a to nimalo nije olakšavalo rad na kreiranju postova i bilo je veoma neugodno.

Ali ovaj problem je uspješno riješen zahvaljujući prekrasnom WP dodatku Post Editor Buttons, pomoću kojeg možete dodati koliko god želite dodatnih dugmadi na alatnu traku HTML editora, programirajući ih za određene radnje.

Danas ćemo detaljno razmotriti pisanje postova u WP-u od početka do kraja, bez izostavljanja nijansi i tehnika koje su, po mom mišljenju, pomogle sajtu bloga (sada ga čitate, osim ako, naravno, ovaj članak nije ukraden a ne objavljeno na drugom sajtu) dostižu nivo od nekoliko hiljada jedinstvenih posetilaca.

Odnosno, ova publikacija će biti detaljan dodatak članku (ovo nije originalni naslov, već preuzet iz retweeta jednog od čitalaca, ali, po mom mišljenju, čak je uspješniji od mog originalnog imena).

U tom članku sam iznio nijanse koje su, po mom mišljenju, utjecale na priliv prometa (posjetitelja) sa pretraživača, a u ovom postu pokušat ću proniknuti u detalje koji su često vrlo važni i na prvi pogled nisu očigledni. .

Osim toga, smatram da blogeru početniku ili onima koji tek razmišljaju o kreiranju i vođenju vlastitog projekta neće biti nezanimljivo saznati kako je sve u WordPress-u lako ako znate šta i gdje treba učiniti da biste dobili željeni rezultat. Pa dobro, uvod je odgođen, vrijeme je da pređemo direktno na prezentaciju materijala.

Za one koji još nemaju svoj WP blog, ali imaju želju da postanu bloger, ili za one koji žele preći sa drugog blogerskog mehanizma ili besplatne platforme na WordPress, dat ću linkove na materijale o njegovoj instalaciji i početnoj konfiguraciji :

Počnimo pisati članak u WordPress HTML editoru

Dakle, da biste napisali novi članak, morat ćete otići na admin panel (http://sait.ru/wp-admin/) i odabrati iz lijevog izbornika (ako koristite standardni dizajn WP admin panela) " Dodajte novu" stavku u oblasti "Objave"

Kao rezultat, otvorit će se standardna stranica za dodavanje članka (posta) koja će imati polje za unos njegovog naslova i veliko polje za unos teksta posta.

Nema trikova prilikom unosa teksta naslova u polje koje je za to namenjeno, ali ono što je veoma važno nije način na koji ga unosite, već činjenica da u njemu treba da koristite ključne reči. Koliko dobro odaberete naslov za svoju objavu (), više će se vaša objava povećati u rezultatima pretraživanja za određene upite.

Ali u isto vrijeme, naslov članka u WordPressu mora dobro korelirati s njegovim tekstom (biti relevantan za tekst posta). Osim toga, bit će prikazana u rezultatima pretraživanja i buduća sudbina vaše publikacije ovisit će o tome koliko je atraktivna (ako ne kliknu na nju, faktori ponašanja će se pogoršati i ona će napustiti vrh).

Obično formulišem konačnu verziju naslova nakon što napišem sam članak. Ponekad kopiram sve međunaslove u zaseban tekstualni fajl i, držeći ih sve pred očima, formiram opšti, pokušavajući da uzmem u obzir sve što je u njemu pomenuto.

Vjerovatno su zato moji naslovi jako dugački, ali kao što praksa pokazuje, u tome nema ništa loše. Pretraživači rade odličan posao s mojim naslovima i rezultati pretrage prikazuju onaj dio NASLOVA u kojem se pojavljuju riječi iz upita za pretraživanje.

Zašto je naslov toliko važan za promociju stranice u pretraživačima? Da, jer je za njih to glavni kriterij za određivanje relevantnosti (stepena usklađenosti - i druge složene riječi) vašeg članka za određeni upit za pretraživanje.

Iako ne, ne baš tako. Ne naslov posta, već naslov stranice TITLE je najvažniji kriterijum za pretraživače pri određivanju pozicije za određeni upit za pretragu (vidi sve detalje).

Kakve veze onda ima naslov posta u WP-u? I pored toga što tačan NASLOV treba formirati od naslova članka plus naslova cijelog bloga, i to tim redoslijedom. Usput, možete konfigurirati ispravnu formaciju TITLE u WordPress-u. Dodatak je jednostavno prekrasan, a istovremeno vam omogućava da riješite mnogo problema u vezi interne optimizacije.

Želeo bih da vam skrenem pažnju na razliku između HTML logičke oznake za isticanje “STRONG” i druge podebljane oznake za isticanje “B”, kao i između “EM” i “I”. Prvu od ovih oznaka (STRONG i EM) treba koristiti ne samo da privuče pažnju čitalaca na važne tačke u tekstu.

Pretraživači će uzeti u obzir riječi i fraze istaknute ovim oznakama za naglasak (STRONG i EM) sa većom težinom u odnosu na obične, nenaglašene riječi u tekstu. Međutim, sada morate biti vrlo oprezni s ovim kako ne biste otišli predaleko i ne.

Odabir optimalne strukture naslova na nivoima H1-H6

Sada, što se tiče oznaka naslova H1-H6, koje se takođe mogu koristiti u člancima na blogu za stavljanje naglaska na potrebne riječi i fraze.

Ovi interni podnaslovi, baš kao i NASLOV, trebaju sadržavati ključne riječi i fraze za koje želite da se rangirate u pretraživačima. Pretraživanje će ih uzeti u obzir sa većom težinom od običnih. Ali opet, ni u kom slučaju ne biste trebali spamovati ključeve, jer zbog toga možete patiti u savremenim uslovima promocije.

Osim toga, interni podnaslovi (obično od nivoa H2, H3 nadalje) pružaju dodatnu priliku za strukturiranje teksta, što poboljšava njihovu percepciju od strane čitalaca.
Ali postoji još jedan problem optimizacije na stranici koji ima veze sa nivoima naslova (H1 do H6) koji se koriste na stranicama WordPress blogova.

Glavni način za distribuciju nivoa naslova na web stranici je da naslov cijelog članka treba staviti u oznaku H1 (najviši nivo) i treba da bude jedan na stranici, a svi interni podnaslovi u tekstu trebaju početi sa H2.

Inače, želio bih da vam preporučim vrlo zgodan način koji vam omogućava da jasno vidite u WordPress-u gdje se i na kom nivou koriste zaglavlja na određenom sajtu. Ovo je dodatak za FireFox() pod nazivom .

Dakle, ako iz menija ovog dodatka (njegov meni se dodaje na vrh pretraživača) odaberete stavke “Outlines” - “Header Outlines”, tada će sve one koje se nalaze na web stranici trenutno otvorene u pretraživaču biti zaokružene sa raznobojnim pravokutnicima, pored kojih će biti natpis njihov nivo je H1 -H6.

Kao što se vidi iz gornje slike, nivo naslova članka nisam postavio na H1, već na H2, dok se H1 koristi za prilaganje opisa cijelog projekta, tj. ne na neki određeni članak, već na cijeli blog.

Ovaj Maul je u jednom od svojih članaka spomenuo da bi zaglavlje H1 nivoa na stranici trebalo da bude isto za sve web stranice, ali svoju ideju zaista ni na koji način nije opravdao. Međutim, ja koristim upravo njegovu šemu. Za interne podnaslove koristim oznake H3 i H4 (ponekad i H5).

Još jedna nijansa. Na glavnoj stranici naslovi mojih postova su linkovi koji vode do web stranica sa punim verzijama, ali na samim ovim stranicama sa punim tekstovima postova naslovi članaka prestaju biti linkovi. Negde sam pročitao da bi ovako bilo bolje.

Sada još uvijek moramo malo razgovarati o tome kako možete promijeniti nivo HTML oznaka naslova u WordPress-u, na primjer, za članke, ili dodati, kao što sam ja učinio, jedan zajednički nivo H1 za sve.

Da biste to učinili, morat ćete se povezati na hosting server na kojem se nalazi vaš blog putem FTP-a, na primjer. Sve datoteke koje nam mogu zatrebati nalaze se u folderu sa WordPress temom (šablonom) koju koristite, a koju možete pronaći na ovoj putanji:

/wp-content/themes/Naziv teme/

Kako biste jasnije razumjeli strukturu i svrhu datoteka WordPress tema (šablona), savjetujem vam da pročitate članak dat na samom početku ove publikacije (na listi).

Pogledajmo gdje možete promijeniti nivo glavnih naslova članaka koji se nalaze na glavnoj stranici (za njen izgled je zaslužna INDEX datoteka) i na stranicama sa punim verzijama članaka (JEDINA datoteka).

Prvo otvorimo INDEX za uređivanje. U njemu su naslovi WordPress članaka zatvoreni u HTML tag H2 (drugi nivo) i pored toga su linkovi, jer su zatvoreni u link tag A:

niti)

Ova tehnika će vam omogućiti da izbjegnete nepotrebne zagrade. Takođe, takav kod se dobro uklapa u HTML kontekst.

14. Proceduralni i objektno orijentisani pristupi

Objektno orijentirano programiranje će vam pomoći da se držite manje-više jasne strukture, ali to ne znači da biste trebali odstupiti od proceduralnih principa pisanja aplikacija.

Objekti su odlični za predstavljanje podataka. primjer:

Korisnik klase (javno $username; javno $first_name; javno $last_name; javna $e-pošta; javna funkcija __construct() ( // ... ) javna funkcija create() ( // ... ) javna funkcija save() ( / / ... ) javna funkcija delete() ( // ... ) )

Proceduralne metode imaju svoje specifične prednosti.

Funkcija kapitalize($string) ( $ret = strtoupper($string); $ret .= strtolower(substr($string,1)); return $ret; )

15. Pročitajte otvoreni izvorni kod

Projekte otvorenog koda obično piše veliki broj programera. Sa ove tačke gledišta, proučavanje pisanog koda u sličnim projektima može vam pomoći da steknete iskustvo. Zato ne gubite vrijeme na ovo.

16. Refaktoring

Refaktoring je promjena koda bez gubitka funkcionalnosti. Također se može koristiti za poboljšanje čitljivosti.Nema mjesta za ispravljanje grešaka ili dodavanje funkcionalnosti. Vi samo malo promijenite strukturu svog koda.

Nadam se da vam je ovaj članak bio od pomoći! Nedostaje mi nešto? Podijelite svoje iskustvo!

WordPress.com vam ne dozvoljava korištenje potencijalno opasnog koda na svom blogu, ali možete objaviti izvorni kod za pregled. Napravili smo oznaku koja čuva formatiranje izvornog koda i čak pruža isticanje sintakse za neke jezike. primjer:

#button (font-weight: bold; border: 2px solid #fff; )

Da biste dobili rezultat sličan gore navedenom isječku, umotajte svoj kod u ove oznake:

Vaš kod

Parametar “jezik” definira pravila za isticanje jezika i sintakse. Podržane su sljedeće vrijednosti:

• actionscript3
• coldfusion
• csharp
• delphi
• erlang
• fsharp
• groovy
• javascript
• javafx
• matlab
• powershell
• python
• scala

Ako vrijednost parametra "language" nije navedena, koristi se vrijednost "text" (bez isticanja sintakse).
Kod između oznaka "code" će biti automatski kodiran za prikaz, tako da ne morate brinuti o HTML elementima ili bilo čemu sličnom.

Opcije konfiguracije

Oznake također podržavaju mnoge opcije konfiguracije koje možete koristiti da prilagodite njihov izgled. Njihova upotreba je potpuno neobavezna.

• autolinkovi (tačno/netačno) - Svaki URL u kodu se prikazuje kao hiperveza. Zadana vrijednost: true.
• kolaps (tačno/netačno) - Ako je postavljeno na tačno, područje koda će se skupiti kada se stranica učita. Da biste ga proširili, morat ćete kliknuti na njega. Ovo je korisno za velike komade koda. Zadana vrijednost je lažna.
• prvi red (broj) — Određuje na kom počinje numerisanje brojevnih linija. Zadana vrijednost: 1.
• gutter (true/false) - Ako je postavljeno na false, brojevi linija će biti skriveni. Zadana vrijednost: true.
• highlight (brojevi razdvojeni zarezima) - brojevi redova koji će biti istaknuti, na primjer "4,7,19".
• hmtlscript (true/false) - Ako je postavljeno na true, ističe HTML/XML kod. Ovo je korisno kada se objavljuje mešoviti kod, kao što je PHP unutar HTML-a. Radi samo sa nekim jezicima. Zadana vrijednost: false.
• light (true/false) - Ako je postavljeno na true, brojevi linija i traka sa alatkama će biti skriveni. Ovo je korisno kada objavljujete isječak koda u jednom ili dva reda. Zadana vrijednost: false.
• padlinenumbers (true/false/integer) - Omogućava vam da kontrolišete popunjavanje brojeva linija nulama. Vrijednost true postavlja automatsko dovršavanje, vrijednost false onemogućuje dovršavanje, broj postavlja fiksni broj znakova za brojeve redova.
• traka sa alatkama (tačno/netačno) - Ako je postavljeno na netačno, traka sa alatkama sa dugmadima se neće pojaviti kada se lebdi iznad koda. Zadana vrijednost: true.
• wraplines (true/false) - Ako je postavljeno na false, prelamanje linija će biti onemogućeno. Ako postoje dugi redovi, pojavit će se horizontalna traka za pomicanje.
• title (string) – naslov za kod. Može biti korisno u kombinaciji s opcijom kolapsa.

Primjeri korištenja gornjih parametara:

Ova linija nije istaknuta. Ova linija je istaknuta. Ova linija je istaknuta. Ova linija nije istaknuta. Ovo je kratak dio koda s brojevima linija do 4 znaka ispunjenim nulom. //U ovom primjeru, prelamanje linija je onemogućeno. Da biste pročitali cijeli tekst, morat ćete koristiti traku za pomicanje. Osim toga, u ovom primjeru, numeriranje redova je onemogućeno i traka sa alatkama je skrivena.

A ovo je veći fragment koda. Ovdje je odabran PHP jezik i označen red broj 12.

Primjer koda WordPress.com Primjer koda WordPress.com Ova linija je istaknuta. Vrlo, vrlo, vrlo, vrlo, vrlo, vrlo, vrlo, vrlo, vrlo, vrlo, vrlo, vrlo, vrlo, vrlo, vrlo, vrlo, vrlo, vrlo, vrlo, vrlo, vrlo, vrlo, vrlo, vrlo, vrlo duga linija. Ovo je primjer pametnih kartica. WordPress.com

Priznanja
Za implementaciju ove funkcije koristi se projekat SyntaxHighlighter (autor Alex Gorbatchev). Korisnici mogu postaviti odgovarajuće