Dobrý deň, milí čitatelia blogu. Dnešnú publikáciu som sa rozhodol venovať problematike písania článkov v HTML editore WordPress ().

Faktom je, že niekedy nie je možné použiť vizuálny editor v admin paneli (najčastejšie je to kvôli problémom s hostingom) a bez neho bude pre začínajúcich blogerov dosť ťažké písať správne a krásne navrhnuté články, pretože jednoduchý editor, ktorý funguje pre každého bez výnimky vyžaduje minimálne .

Keď som prvýkrát začal písať tento blog a zoznamovať sa s motorom, jednoducho som nemohol používať vizuálny editor. Nepomohli ani ďalšie pluginy s ich rôznymi verziami, ani iné „tance s tamburínou“. Preto som, chtiac-nechtiac, musel zvládnuť existujúci základný editor, našťastie som v tom čase už ovládal hypertextový značkovací jazyk.

Používanie iba editora HTML vo WordPress

Ale pointa nebola ani v HTML, ale v pohodlí vykonávania každodenných a často sa vyskytujúcich akcií. Áno, predvolený editor WordPress vám umožňuje pomocou jedného tlačidla pridať tučné (značka STRONG) a kurzívu (EM) značky, vložiť odkazy, úvodzovky, obrázky, číslované zoznamy a zoznamy s odrážkami, zvýrazniť rôzne kódy a .

Ale toto mi nestačilo, pretože... V texte článkov som aktívne používal interné nadpisy rôznych úrovní (od H2 po H5), zvýrazňoval kód (PHP, CSS atď.) špeciálnymi značkami a robil oveľa viac.

Všetko, čo sa nenachádzalo v štandardnej sade nástrojov základného WordPress editora, sa teda muselo zadávať ručne z klávesnice, čo vôbec neuľahčovalo prácu pri vytváraní príspevkov a bolo to veľmi otravné.

Tento problém bol však úspešne vyriešený vďaka úžasnému doplnku WP Post Editor Buttons, pomocou ktorého môžete na panel nástrojov editora HTML pridať toľko ďalších tlačidiel, koľko chcete, a naprogramovať ich pre konkrétne akcie.

Dnes sa pozrieme na písanie príspevkov vo WP podrobne od začiatku do konca, bez toho, aby sme vynechali nuansy a techniky, ktoré podľa môjho názoru pomohli blogovej stránke (teraz to čítate, pokiaľ, samozrejme, tento článok nebol ukradnutý a nie zverejnené na inej stránke) dosahujú úroveň niekoľkých tisíc unikátnych návštevníkov.

To znamená, že táto publikácia bude podrobnou prílohou k článku (toto nie je pôvodný názov, ale prevzatý z retweetu od jedného z čitateľov, ale podľa mňa je ešte úspešnejší ako môj pôvodný názov).

V tom článku som načrtol nuansy, ktoré podľa mňa ovplyvnili prílev návštevnosti (návštevníkov) z vyhľadávačov a v tomto príspevku sa pokúsim preniknúť do detailov, ktoré sú často veľmi dôležité a na prvý pohľad nie sú zrejmé. .

Navyše si myslím, že pre začínajúceho blogera alebo pre tých, ktorí ešte len uvažujú nad vytvorením a spustením vlastného projektu, nebude nezaujímavé dozvedieť sa o tom, aké je všetko vo WordPresse jednoduché, ak viete, čo a kde robiť, aby ste dosiahli želaný výsledok. Dobre, úvod bol odložený, je čas prejsť priamo k prezentácii materiálu.

Pre tých, ktorí ešte nemajú vlastný WP blog, ale majú túžbu stať sa blogerom, alebo pre tých, ktorí chcú prejsť z iného blogovacieho enginu alebo bezplatnej platformy na WordPress, poskytnem odkazy na materiály o jeho inštalácii a prvotnej konfigurácii :

Začnime písať článok v HTML editore WordPress

Ak teda chcete napísať nový článok, budete musieť prejsť na panel správcu (http://sait.ru/wp-admin/) a vybrať z ľavého menu (ak používate štandardný dizajn panela správcu WP) „ Pridať novú“ položku v oblasti „Príspevky“

V dôsledku toho sa otvorí štandardná stránka na pridanie článku (príspevku), ktorá bude mať pole na zadanie jeho názvu a veľké pole na zadanie textu príspevku.

Pri zadávaní textu nadpisu do poľa na to určeného neexistujú žiadne triky, ale veľmi dôležité nie je to, ako ho zadáte, ale to, že v ňom musíte použiť kľúčové slová. Ako dobre si vyberiete názov pre svoj príspevok (), tým vyššie bude váš príspevok stúpať vo výsledkoch vyhľadávania pre určité dopyty.

Zároveň však musí názov článku vo WordPresse dobre korelovať s jeho textom (relevantný k textu príspevku). Okrem toho sa zobrazí vo výsledkoch vyhľadávania a budúci osud vašej publikácie bude závisieť od toho, aká bude atraktívna (ak na ňu nekliknú, zhoršia sa faktory správania a opustí Top).

Väčšinou finálnu verziu nadpisu formulujem až po napísaní samotného článku. Niekedy skopírujem všetky prechodné podnadpisy do samostatného textového súboru a držiac ich všetky pred očami vytvorím všeobecný, snažiac sa vziať do úvahy všetko, čo je v ňom uvedené.

Pravdepodobne preto sú moje tituly veľmi dlhé, ale ako ukazuje prax, nie je na tom nič zlé. Vyhľadávače odvádzajú skvelú prácu s mojimi názvami a výsledky vyhľadávania zobrazujú tú časť TITLE, v ktorej sa nachádzajú slová z vyhľadávacieho dopytu.

Prečo je nadpis taký dôležitý pre propagáciu stránky vo vyhľadávačoch? Áno, pretože je to pre nich hlavné kritérium na určenie relevantnosti (stupeň zhody – a ďalšie zložité slová) vášho článku pre konkrétny vyhľadávací dopyt.

Aj keď nie, nie celkom tak. Nie názov príspevku, ale názov stránky TITLE je pre vyhľadávače najdôležitejším kritériom pri určovaní pozície pre konkrétny vyhľadávací dopyt (pozrite si všetky podrobnosti).

Čo s tým má potom názov príspevku vo WP? A to aj napriek tomu, že správny NÁZOV by mal byť tvorený z nadpisu článku plus nadpisu celého blogu a v tomto poradí. Mimochodom, správne vytvorenie TITLE môžete nakonfigurovať vo WordPress. Doplnok je jednoducho úžasný a zároveň vám umožňuje vyriešiť veľa problémov týkajúcich sa internej optimalizácie.

Chcel by som upozorniť na rozdiel medzi HTML logickým zvýrazňujúcim tagom „STRONG“ a iným tučným zvýrazňujúcim tagom „B“, ako aj medzi „EM“ a „I“. Prvý z týchto tagov (STRONG a EM) by mal slúžiť nielen na upútanie pozornosti čitateľov na dôležité body v texte.

Vyhľadávače budú brať do úvahy slová a frázy zvýraznené týmito zvýraznenými značkami (STRONG a EM) s väčšou váhou v porovnaní s bežnými, nezvýraznenými slovami v texte. Teraz však musíte byť s tým veľmi opatrní, aby ste nezašli príliš ďaleko a nie.

Výber optimálnej štruktúry nadpisov na úrovniach H1-H6

Teraz, pokiaľ ide o značky nadpisov H1-H6, ktoré sa dajú použiť aj v článkoch na blogu, aby sa kládol dôraz na potrebné slová a frázy.

Tieto interné podnadpisy, rovnako ako TITLE, by mali obsahovať kľúčové slová a frázy, pre ktoré sa chcete umiestniť vo vyhľadávačoch. Vyhľadávanie ich zohľadní s väčšou váhou ako bežné. Ale opäť, za žiadnych okolností by ste nemali spamovať kľúče, pretože za to môžete v moderných podmienkach propagácie trpieť.

Okrem toho interné podnadpisy (zvyčajne od úrovne H2, H3) poskytujú dodatočnú príležitosť na štruktúrovanie textu, čo zlepšuje ich vnímanie čitateľmi.
Existuje však ďalší problém s optimalizáciou na stránke, ktorý súvisí s úrovňami nadpisov (H1 až H6) používanými na stránkach blogu WordPress.

Hlavným spôsobom distribúcie úrovní nadpisov na webovej stránke je, že názov celého článku by mal byť uzavretý v značke H1 (najvyššia úroveň) a mal by byť jeden na stránke a všetky interné podnadpisy v texte by mali začínať H2.

Mimochodom, rád by som vám odporučil veľmi pohodlný spôsob, ktorý vám umožní vo WordPress jasne vidieť, kde a na akej úrovni sa na konkrétnej stránke používajú hlavičky. Toto je doplnok pre FireFox() s názvom .

Ak teda vyberiete z ponuky tohto doplnku (jeho ponuka sa pridá do hornej časti prehliadača) položky „Outvy“ - „Obrysy hlavičky“, budú zakrúžkované všetky položky, ktoré sa nachádzajú na aktuálne otvorenej webovej stránke v prehliadači. s viacfarebnými obdĺžnikmi, vedľa ktorých bude nápis ich úroveň je H1 -H6.

Ako vidno z vyššie uvedeného obrázku, úroveň pre nadpis článku som nastavil nie na H1, ale na H2, pričom H1 slúži na priloženie popisu celého projektu, t.j. nie na konkrétny článok, ale na celý blog.

Tento Maul v jednom zo svojich článkov spomenul, že hlavička úrovne H1 na webe by mala byť rovnaká pre všetky webové stránky, ale v skutočnosti svoj nápad žiadnym spôsobom neodôvodnil. Ja však používam presne jeho schému. Pre interné podnadpisy používam značky H3 a H4 (niekedy aj H5).

Ešte jedna nuansa. Na hlavnej stránke sú nadpisy mojich príspevkov odkazy, ktoré vedú na webové stránky s plnými verziami, no na týchto stránkach samotných s úplnými textami príspevkov prestávajú byť nadpisy článkov odkazmi. Niekde som čítal, že takto by to bolo lepšie.

Teraz sa ešte musíme trochu porozprávať o tom, ako môžete zmeniť úroveň HTML tagov nadpisov vo WordPress, napríklad pre články, alebo pridať, ako som to urobil ja, jednu spoločnú úroveň H1 pre všetky.

Ak to chcete urobiť, budete sa musieť pripojiť k hostiteľskému serveru, na ktorom je váš blog umiestnený, napríklad cez FTP. Všetky súbory, ktoré môžeme potrebovať, sa nachádzajú v priečinku s vami používanou témou (šablónou) WordPress, ktorú nájdete na tejto ceste:

/wp-content/themes/Názov témy/

Aby ste lepšie pochopili štruktúru a účel súborov tém (šablón) WordPress, odporúčame vám prečítať si článok uvedený na samom začiatku tejto publikácie (v zozname).

Pozrime sa, kde môžete zmeniť úroveň hlavných nadpisov článkov umiestnených na hlavnej stránke (za jej vzhľad je zodpovedný súbor INDEX) a na stránkach s plnými verziami článkov (JEDINÝ súbor).

Najprv otvorme INDEX na úpravu. V ňom sú nadpisy WordPress článkov uzavreté v HTML tagu H2 (druhá úroveň) a navyše ide o odkazy, pretože sú uzavreté v link tagu A:

vlákna)

Táto technika vám umožní vyhnúť sa zbytočným zátvorkám. Takýto kód tiež dobre zapadá do kontextu HTML.

14. Procedurálne a objektovo orientované prístupy

Objektovo orientované programovanie vám pomôže držať sa viac-menej jasnej štruktúry, ale to neznamená, že by ste sa mali odchyľovať od procedurálnych princípov písania aplikácií.

Objekty sú skvelé na reprezentáciu údajov. Príklad:

Class User ( public $username; public $first_name; public $last_name; public $email; public function __construct() ( // ... ) public function create() ( // ... ) public function save() ( / / ... ) public function delete() ( // ... ) )

Procedurálne metódy majú svoje špecifické výhody.

Funkcia capitalize($string) ( $ret = strtoupper($string); $ret .= strtolower(substr($string,1)); return $ret; )

15. Prečítajte si otvorený zdrojový kód

Projekty Open Source zvyčajne píše veľké množstvo vývojárov. Z tohto hľadiska vám štúdium písaného kódu v podobných projektoch môže pomôcť získať skúsenosti. Tak na to nestrácajte čas.

16. Refaktoring

Refaktoring je zmena kódu bez straty funkčnosti. Dá sa použiť aj na zlepšenie čitateľnosti.Neexistuje priestor na opravu chýb alebo pridávanie funkcií. Stačí trochu zmeniť štruktúru kódu.

Dúfam, že vám tento článok pomohol! Uniká mi niečo? Podeľte sa o svoje skúsenosti!

WordPress.com vám neumožňuje používať potenciálne nebezpečný kód na vašom blogu, ale môžete zverejniť zdrojový kód na prezeranie. Vytvorili sme značku, ktorá zachováva formátovanie zdrojového kódu a dokonca poskytuje zvýraznenie syntaxe pre niektoré jazyky. Príklad:

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

Ak chcete získať výsledok podobný útržku vyššie, zabaľte kód do týchto značiek:

Váš kód

Parameter „language“ definuje pravidlá zvýraznenia jazyka a syntaxe. Podporované sú nasledujúce hodnoty:

• actionscript3
• coldfusion
• csharp
• delphi
• erlang
• fsharp
• groovy
• javascript
• javafx
• matlab
• powershell
• pytón
• scala

Ak nie je zadaná hodnota parametra „language“, použije sa hodnota „text“ (bez zvýraznenia syntaxe).
Kód medzi značkami „code“ bude automaticky zakódovaný pre zobrazenie, takže sa nemusíte obávať HTML prvkov alebo niečoho podobného.

Možnosti konfigurácie

Štítky tiež podporujú mnohé možnosti konfigurácie, ktoré môžete použiť na prispôsobenie ich vzhľadu. Ich použitie je úplne voliteľné.

• automatické odkazy (pravda/nepravda) – Každá adresa URL v kóde sa zobrazí ako hypertextový odkaz. Predvolená hodnota: true.
• zbaliť (true/false) – ak je nastavené na true, oblasť kódu sa pri načítaní stránky zbalí. Ak ho chcete rozbaliť, musíte naň kliknúť. To je užitočné pre veľké časti kódu. Predvolená hodnota je nepravda.
• prvý riadok (číslo) — Určuje, na ktorom číselnom riadku začína číslovanie. Predvolená hodnota: 1.
• gutter (true/false) – Ak je nastavené na false, čísla riadkov budú skryté. Predvolená hodnota: true.
• zvýraznenie (čísla oddelené čiarkou) – Čísla riadkov, ktoré sa majú zvýrazniť, napríklad „4,7,19“.
• hmtlscript (true/false) – ak je nastavené na true, zvýrazní HTML/XML kód. To je užitočné pri publikovaní zmiešaného kódu, ako napríklad PHP v HTML. Funguje len s niektorými jazykmi. Predvolená hodnota: false.
• light (true/false) – Ak je nastavené na true, čísla riadkov a panel s nástrojmi budú skryté. Je to užitočné pri odosielaní jednoriadkového alebo dvojriadkového útržku kódu. Predvolená hodnota: false.
• padlinenumbers (pravda/nepravda/celé číslo) – Umožňuje vám ovládať výplň čísel riadkov nulami. Hodnota true nastavuje automatické dopĺňanie, hodnota false zakazuje dokončenie, číslo nastavuje pevný počet znakov pre čísla riadkov.
• panel s nástrojmi (pravda/nepravda) – ak je nastavené na hodnotu false, pri umiestnení kurzora myši nad kód sa nezobrazí panel nástrojov s tlačidlami. Predvolená hodnota: true.
• wraplines (true/false) – ak je nastavené na false, zalamovanie riadkov bude zakázané. Ak sú tam dlhé riadky, zobrazí sa vodorovný posúvač.
• title (reťazec) – názov pre kód. Môže byť užitočné v kombinácii s možnosťou zbalenia.

Príklady použitia vyššie uvedených parametrov:

Tento riadok nie je zvýraznený. Tento riadok je zvýraznený. Tento riadok je zvýraznený. Tento riadok nie je zvýraznený. Toto je krátky útržok kódu s číslami riadkov s nulami do 4 znakov. //V tomto príklade je zalamovanie riadkov zakázané. Ak si chcete prečítať celý text, budete musieť použiť posúvač. Okrem toho je v tomto príklade zakázané číslovanie riadkov a panel nástrojov je skrytý.

A toto je väčší fragment kódu. Tu sa vyberie jazyk PHP a zvýrazní sa riadok číslo 12.

Príklad kódu WordPress.com Príklad kódu WordPress.com Tento riadok je zvýraznený. Veľmi, veľmi, veľmi, veľmi, veľmi, veľmi, veľmi, veľmi, veľmi, veľmi, veľmi, veľmi, veľmi, veľmi, veľmi, veľmi, veľmi, veľmi, veľmi, veľmi, veľmi, veľmi dlhý rad. Toto je príklad inteligentných kariet. WordPress.com

Poďakovanie
Na implementáciu tejto funkcie sa používa projekt SyntaxHighlighter (autor Alex Gorbatchev). Používatelia môžu nastaviť vhodné