Salom, aziz blog o'quvchilari. Men bugungi nashrni WordPress HTML muharririda () maqolalar yozish masalasiga bag'ishlashga qaror qildim.

Gap shundaki, ba'zida administrator panelida vizual muharrirdan foydalanishning iloji yo'q (ko'pincha bu hosting muammolari bilan bog'liq) va busiz yangi boshlanuvchilar uchun to'g'ri va chiroyli tarzda yaratilgan maqolalarni yozish juda qiyin bo'ladi, chunki istisnosiz hamma uchun ishlaydigan oddiy muharrir kamida talab qiladi.

Men ushbu blogni yozishni va dvigatel bilan tanishishni boshlaganimda, men shunchaki vizual muharrirdan foydalana olmadim. Turli xil versiyalari bo'lgan qo'shimcha plaginlar ham, boshqa "daf ​​bilan raqslar" ham yordam bermadi. Shuning uchun, ixtiyoriy ravishda, men mavjud asosiy muharrirni o'zlashtirishim kerak edi, xayriyatki, o'sha paytda men gipermatnni belgilash tili bilan yaxshi tanish edim.

WordPress-da faqat HTML muharriridan foydalanish

Lekin gap hatto HTMLda ham emas, balki kundalik va tez-tez sodir bo'ladigan harakatlarni bajarish qulayligida edi. Ha, standart WordPress muharriri qalin (STRONG teg) va kursiv (EM) teglarni qo'shish, havolalar, tirnoqlar, rasmlar, raqamlangan va markirovka qilingan ro'yxatlarni kiritish, turli kodlarni ajratib ko'rsatish va .

Ammo bu men uchun etarli emas edi, chunki ... Maqolalar matnida men turli darajadagi (H2 dan H5 gacha) ichki sarlavhalardan faol foydalandim, kodni (PHP, CSS va boshqalar) maxsus teglar bilan ajratib ko'rsatdim va yana ko'p narsalarni qildim.

Shunday qilib, asosiy WordPress muharririning standart vositalari to'plamiga kiritilmagan barcha narsalarni klaviaturadan qo'lda kiritish kerak edi va bu postlar yaratish ishini umuman osonlashtirmadi va juda zerikarli edi.

Ammo bu muammo ajoyib WP plaginining Post muharriri tugmalari tufayli muvaffaqiyatli hal qilindi, uning yordamida siz HTML muharriri asboblar paneliga xohlaganingizcha qo'shimcha tugmachalarni qo'shishingiz va ularni muayyan harakatlar uchun dasturlashingiz mumkin.

Bugun biz WP-da postlar yozishni boshidan oxirigacha batafsil ko'rib chiqamiz, mening fikrimcha, blog saytiga yordam bergan nuanslar va usullarni e'tiborsiz qoldirmasdan (siz hozir uni o'qiyapsiz, agar bu maqola o'g'irlangan bo'lsa va o'g'irlanmagan bo'lsa). boshqa saytga joylashtirilgan) bir necha ming noyob tashrif buyuruvchilar darajasiga etadi.

Ya'ni, ushbu nashr maqolaning batafsil ilovasi bo'ladi (bu asl sarlavha emas, balki olingan o'quvchilardan birining retvitidan, lekin, mening fikrimcha, bu mening asl ismimdan ham muvaffaqiyatli).

Ushbu maqolada men, mening fikrimcha, qidiruv tizimlaridan trafik (tashrif buyuruvchilar) oqimiga ta'sir qilgan nuanslarni aytib o'tdim va ushbu postda men ko'pincha juda muhim va birinchi qarashda aniq bo'lmagan tafsilotlarni o'rganishga harakat qilaman. .

Bundan tashqari, menimcha, boshlang'ich blogger yoki o'z loyihasini yaratish va amalga oshirish haqida o'ylayotganlar uchun WordPress-da hamma narsa qanchalik oson ekanligini bilish qiziq bo'lmaydi, agar siz kerakli natijaga erishish uchun nima va qaerda qilishni bilsangiz. Xo'sh, kirish kechiktirildi, to'g'ridan-to'g'ri material taqdimotiga o'tish vaqti keldi.

Hali o'zining WP blogiga ega bo'lmagan, lekin blogger bo'lishni xohlaydiganlar yoki boshqa bloglash mexanizmidan yoki bepul platformadan WordPress-ga o'tmoqchi bo'lganlar uchun men uni o'rnatish va dastlabki konfiguratsiya bo'yicha materiallarga havolalar beraman. :

Keling, WordPress HTML muharririda maqola yozishni boshlaylik

Shunday qilib, yangi maqola yozish uchun siz administrator paneliga o'tishingiz kerak (http://sait.ru/wp-admin/) va chap menyudan (agar siz standart WP boshqaruv paneli dizaynidan foydalansangiz) " "Yozuvlar" maydoniga yangi" element qo'shing "

Natijada maqola (post) qo'shish uchun standart sahifa ochiladi, unda uning sarlavhasini kiritish maydoni va xabar matnini kiritish uchun katta maydon bo'ladi.

Buning uchun mo'ljallangan maydonga sarlavha matnini kiritishda hech qanday hiyla-nayranglar yo'q, lekin eng muhimi, uni qanday kiritishingiz emas, balki unda kalit so'zlardan foydalanishingiz kerakligi. Siz postingiz uchun sarlavhani qanchalik to'g'ri tanlasangiz (), ma'lum so'rovlar bo'yicha sizning postingiz qidiruv natijalarida shunchalik yuqori ko'tariladi.

Shu bilan birga, WordPress-dagi maqolaning sarlavhasi uning matni bilan yaxshi mos kelishi kerak (xabar matniga tegishli bo'lishi kerak). Bundan tashqari, u qidiruv natijalarida ko'rsatiladi va nashringizning kelajakdagi taqdiri uning qanchalik jozibali ekanligiga bog'liq bo'ladi (agar ular ustiga bosmasa, xatti-harakatlar omillari yomonlashadi va u Yuqoridan chiqib ketadi).

Odatda maqolaning o'zini yozganimdan keyin sarlavhaning yakuniy versiyasini tuzaman. Ba'zan men barcha oraliq sarlavhalarni alohida matn fayliga ko'chiraman va ularning barchasini ko'zim oldida ushlab, unda aytilganlarning barchasini hisobga olishga harakat qilaman.

Shuning uchun bo'lsa kerak, unvonlarim juda uzun, ammo amaliyot shuni ko'rsatadiki, buning hech qanday yomon joyi yo'q. Qidiruv tizimlari mening sarlavhalarim bilan juda yaxshi ishlaydi va qidiruv natijalari TITLE ning qidiruv so'rovidagi so'zlar paydo bo'lgan qismini ko'rsatadi.

Nima uchun sarlavha qidiruv tizimlarida sahifani targ'ib qilish uchun juda muhim? Ha, chunki ular uchun bu sizning maqolangizning ma'lum bir qidiruv so'roviga muvofiqligini (muvofiqlik darajasi - va boshqa murakkab so'zlar) aniqlashning asosiy mezonidir.

Garchi yo'q, unchalik emas. Maqolaning sarlavhasi emas, balki sahifa sarlavhasi TITLE qidiruv tizimlari uchun ma'lum bir qidiruv so'rovi uchun pozitsiyani aniqlashda eng muhim mezondir (to'liq ma'lumotga qarang).

WP-dagi post sarlavhasining bunga qanday aloqasi bor? Va to'g'ri TITLE maqola sarlavhasidan va butun blog sarlavhasidan va shu tartibda tuzilishi kerakligiga qaramay. Aytgancha, siz WordPress-da TITLE-ning to'g'ri shakllanishini sozlashingiz mumkin. Plagin shunchaki ajoyib va ​​shu bilan birga ichki optimallashtirish bilan bog'liq ko'plab muammolarni hal qilishga imkon beradi.

Men sizning e'tiboringizni HTML mantiqiy ajratib ko'rsatish yorlig'i "STRONG" va boshqa qalin ta'kidlash "B" tegi, shuningdek, "EM" va "I" o'rtasidagi farqga qaratmoqchiman. Ushbu teglarning birinchisi (STRONG va EM) nafaqat o'quvchilar e'tiborini matndagi muhim nuqtalarga jalb qilish uchun ishlatilishi kerak.

Qidiruv tizimlari ushbu urg'u teglari (STRONG va EM) bilan ta'kidlangan so'z va iboralarni matndagi oddiy, ta'kidlanmagan so'zlarga nisbatan kattaroq og'irlikda hisobga oladi. Biroq, endi juda uzoqqa bormaslik va ketmaslik uchun bu bilan juda ehtiyot bo'lishingiz kerak.

H1-H6 darajalarida sarlavhalarning optimal tuzilishini tanlash

Endi, kerakli so'z va iboralarga urg'u berish uchun blog maqolalarida ham ishlatilishi mumkin bo'lgan H1-H6 sarlavha teglariga kelsak.

Ushbu ichki sarlavhalar, xuddi TITLE kabi, siz qidiruv tizimlarida tartiblashtirmoqchi bo'lgan kalit so'z va iboralarni o'z ichiga olishi kerak. Qidiruv ularni oddiylarga qaraganda kattaroq og'irlik bilan hisobga oladi. Ammo yana, hech qanday holatda siz kalitlarni spam qilmasligingiz kerak, chunki siz zamonaviy reklama sharoitida buning uchun azob chekishingiz mumkin.

Bundan tashqari, ichki sarlavhalar (odatda H2, H3 darajasidan boshlab) matnni tuzish uchun qo'shimcha imkoniyat yaratadi, bu esa ularni o'quvchilar tomonidan idrok etishni yaxshilaydi.
Ammo WordPress blog sahifalarida ishlatiladigan sarlavha darajalari (H1 dan H6 gacha) bilan bog'liq bo'lgan yana bir sahifani optimallashtirish muammosi mavjud.

Veb-sahifada sarlavha darajalarini taqsimlashning asosiy usuli shundan iboratki, butun maqola nomi H1 yorlig'iga (eng yuqori daraja) qo'yilishi va sahifada bitta bo'lishi kerak va matndagi barcha ichki sarlavhalar bilan boshlanishi kerak. H2.

Aytgancha, men sizga WordPress-da ma'lum bir saytda sarlavhalar qayerda va qanday darajada ishlatilishini aniq ko'rish imkonini beruvchi juda qulay usulni tavsiya qilmoqchiman. Bu FireFox() uchun plagin deb nomlangan.

Shunday qilib, agar siz ushbu plaginning menyusidan (uning menyusi brauzerning yuqori qismiga qo'shilgan) "Outlines" - "Sarlavha konturlari" bandlarini tanlasangiz, u holda brauzerda hozirda ochilgan veb-sahifada topilgan barcha narsalar aylana bo'ladi. ko'p rangli to'rtburchaklar bilan, ularning yonida ularning darajasi H1 -H6 yozuvi bo'ladi.

Yuqoridagi rasmdan ko'rinib turibdiki, men maqolaning sarlavhasi darajasini H1 ga emas, balki H2 ga qo'ydim, H1 esa butun loyihaning tavsifini qo'shish uchun ishlatiladi, ya'ni. biron bir maxsus maqolaga emas, balki butun blogga.

Ushbu Maul o'z maqolalaridan birida saytdagi H1 darajasidagi sarlavha barcha veb-sahifalar uchun bir xil bo'lishi kerakligini ta'kidladi, lekin u haqiqatan ham o'z fikrini hech qanday tarzda oqlamadi. Biroq, men uning sxemasidan aniq foydalanaman. Ichki sarlavhalar uchun men H3 va H4 (ba'zan H5) teglaridan foydalanaman.

Yana bir nuance. Asosiy sahifada mening xabarlarimning sarlavhalari to'liq versiyalari bo'lgan veb-sahifalarga olib boradigan havolalardir, ammo bu sahifalarning o'zida xabarlarning to'liq matnlari bilan maqolalar sarlavhalari havola bo'lishni to'xtatadi. Men bir joyda o'qigandim, bu yaxshi bo'lar edi.

Endi biz WordPress-da, masalan, maqolalar uchun HTML sarlavha teglari darajasini qanday o'zgartirishingiz yoki men qilganimdek, hamma uchun bitta umumiy H1 darajasini qo'shishingiz mumkinligi haqida bir oz gapirishimiz kerak.

Buning uchun, masalan, FTP orqali blogingiz joylashgan xosting serveriga ulanishingiz kerak bo'ladi. Bizga kerak bo'lishi mumkin bo'lgan barcha fayllar siz foydalanayotgan WordPress mavzusi (shablon) bilan papkada joylashgan bo'lib, ularni ushbu yo'lda topishingiz mumkin:

/wp-content/themes/Mavzu nomi/

WordPress mavzu fayllari (shablonlari) tuzilishi va maqsadini aniqroq tushunish uchun men sizga ushbu nashrning boshida (ro'yxatda) berilgan maqolani o'qishni maslahat beraman.

Keling, asosiy sahifada (INDEX fayli uning ko'rinishi uchun mas'ul) va maqolalarning to'liq versiyalari (SINGLE fayl) sahifalarida joylashgan maqolalarning asosiy sarlavhalari darajasini qayerda o'zgartirishingiz mumkinligini ko'rib chiqaylik.

Avval tahrirlash uchun INDEX ni ochamiz. Unda WordPress maqolalarining sarlavhalari HTML tegiga H2 (ikkinchi daraja) kiritilgan va qo'shimcha ravishda ular havolalardir, chunki ular A havola tegiga kiritilgan:

iplar)

Ushbu uslub sizga keraksiz qavslardan qochish imkonini beradi. Bundan tashqari, bunday kod HTML kontekstiga yaxshi mos keladi.

14. Protsessual va ob'ektga yo'naltirilgan yondashuvlar

Ob'ektga yo'naltirilgan dasturlash sizga ko'proq yoki kamroq aniq tuzilishga yopishib olishga yordam beradi, ammo bu siz ilovalarni yozishning protsessual tamoyillaridan chetga chiqishingiz kerak degani emas.

Ob'ektlar ma'lumotlarni ifodalash uchun juda yaxshi. Misol:

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

Protsessual usullarning o'ziga xos afzalliklari bor.

Funktsiya kapitali ($string) ( $ret = strtoupper($string); $ret .= strtolower(substr($string,1)); return $ret; )

15. Ochiq kodli kodni o'qing

Odatda, Open Source loyihalari ko'p sonli ishlab chiquvchilar tomonidan yoziladi. Shu nuqtai nazardan qaraganda, shunga o'xshash loyihalarda yozma kodni o'rganish sizga tajriba orttirishga yordam beradi. Shuning uchun vaqtingizni bunga sarflamang.

16. Refaktoring

Refaktoring - bu funksiyani yo'qotmasdan kodni o'zgartirish. Undan o‘qishni yaxshilash uchun ham foydalanish mumkin.Xatolarni tuzatish yoki funksiya qo‘shish uchun joy yo‘q. Siz shunchaki kodingiz tuzilishini biroz o'zgartirasiz.

Umid qilamanki, siz ushbu maqolani foydali deb topdingiz! Menga nimadir etishmayaptimi? Tajribangizni baham ko'ring!

WordPress.com sizning blogingizda potentsial xavfli koddan foydalanishga ruxsat bermaydi, lekin siz ko'rish uchun manba kodini nashr qilishingiz mumkin. Biz manba kodini formatlashni saqlaydigan va hatto ba'zi tillar uchun sintaksisni ajratib ko'rsatishni ta'minlaydigan teg yaratdik. Misol:

#tugmachasi (shrift vazni: qalin; chegara: 2px qattiq #fff; )

Yuqoridagi parchaga o'xshash natijaga erishish uchun kodingizni quyidagi teglarga o'rang:

Sizning kodingiz

"Til" parametri til va sintaksisni ta'kidlash qoidalarini belgilaydi. Quyidagi qiymatlar qo'llab-quvvatlanadi:

• harakat skripti 3
• sovuq termoyadroviy
• csharp
• delphi
• erlang
• fsharp
• go'zal
• javascript
• javafx
• matlab
• powershell
• piton
• skala

Agar "til" parametrining qiymati ko'rsatilmagan bo'lsa, "matn" qiymati ishlatiladi (sintaksisni ajratib ko'rsatmasdan).
"Kod" teglari orasidagi kod ko'rsatish uchun avtomatik ravishda kodlanadi, shuning uchun HTML elementlari yoki shunga o'xshash narsalar haqida tashvishlanishingiz shart emas.

Konfiguratsiya imkoniyatlari

Teglar tashqi ko'rinishini sozlash uchun foydalanishingiz mumkin bo'lgan ko'plab konfiguratsiya variantlarini ham qo'llab-quvvatlaydi. Ulardan foydalanish butunlay ixtiyoriydir.

• avtomatik havolalar (to'g'ri/noto'g'ri) - koddagi har bir URL giperhavola sifatida ko'rsatiladi. Standart qiymat: true.
• yig'ish (to'g'ri/noto'g'ri) - Agar rost bo'lsa, sahifa yuklanganda kod maydoni yopiladi. Uni kengaytirish uchun siz uni bosishingiz kerak. Bu katta kod qismlari uchun foydalidir. Standart noto'g'ri.
• birinchi qator (raqam) — raqamlash qaysi qatordan boshlanishini aniqlaydi. Standart qiymat: 1.
• gutter (to'g'ri/noto'g'ri) - Agar noto'g'ri o'rnatilgan bo'lsa, qator raqamlari yashirin bo'ladi. Standart qiymat: true.
• ta'kidlash (vergul bilan ajratilgan raqamlar) - ajratib ko'rsatiladigan qator raqamlari, masalan, "4,7,19".
• hmtlscript (to'g'ri/noto'g'ri) - Agar rost bo'lsa, HTML/XML kodini ajratib ko'rsatadi. Bu aralash kodni nashr qilishda foydalidir, masalan, HTML ichidagi PHP. Faqat ba'zi tillar bilan ishlaydi. Standart qiymat: false.
• yorug'lik (to'g'ri/noto'g'ri) - Agar rost bo'lsa, qator raqamlari va asboblar paneli yashirin bo'ladi. Bu bir yoki ikki qatorli kod parchasini joylashtirishda foydalidir. Standart qiymat: false.
• padlinenumbers (true/false/integer) - qator raqamlarini nol bilan to'ldirishni boshqarish imkonini beradi. true qiymati avtoto‘ldirishni o‘rnatadi, false qiymati yakunlashni o‘chiradi, raqam satr raqamlari uchun belgilangan belgilar sonini o‘rnatadi.
• asboblar paneli (to'g'ri/noto'g'ri) - Agar noto'g'ri o'rnatilgan bo'lsa, kod ustiga sichqonchani olib kelganda tugmalari bo'lgan asboblar paneli paydo bo'lmaydi. Standart qiymat: true.
• wraplines (to'g'ri/noto'g'ri) - Agar noto'g'ri o'rnatilgan bo'lsa, chiziqni o'rash o'chirib qo'yiladi. Agar uzun chiziqlar bo'lsa, gorizontal aylantirish paneli paydo bo'ladi.
• sarlavha (string) - kod uchun sarlavha. Yiqilish varianti bilan birgalikda foydali bo'lishi mumkin.

Yuqoridagi parametrlardan foydalanishga misollar:

Bu qator belgilanmagan. Ushbu qator ta'kidlangan. Ushbu qator ta'kidlangan. Bu qator belgilanmagan. Bu 4 ta belgigacha bo'lgan nol to'ldirilgan qator raqamlari bo'lgan qisqa kod qismidir. //Ushbu misolda qatorni o'rash o'chirilgan. Butun matnni o'qish uchun aylantirish panelidan foydalanishingiz kerak bo'ladi. Bundan tashqari, ushbu misolda qatorlarni raqamlash o'chirilgan va asboblar paneli yashiringan.

Va bu kattaroq kod qismidir. Bu yerda PHP tili tanlanadi va 12-satr ajratiladi.

WordPress.com kodi misoli WordPress.com kodiga misol Bu qator ajratilgan. Juda, juda, juda, juda, juda, juda, juda, juda, juda, juda, juda, juda, juda, juda, juda, juda, juda, juda, juda, juda, juda, juda, juda, juda, juda, juda, juda, juda, juda, juda, juda, juda uzun qator. Bu aqlli yorliqlarga misol. WordPress.com

Minnatdorchilik
Ushbu xususiyatni amalga oshirish uchun SyntaxHighlighter loyihasi (muallif Aleks Gorbatchev) ishlatiladi. Foydalanuvchilar mos keladigan narsani o'rnatishlari mumkin