Ushbu kodni WordPress-ga qaerga kiritish kerak? Mavzular bo'yicha fayllarning umumiy tuzilmalari. Html tomoniga Html kodini qanday kiritish kerak

Trochning html kodini kiritish usuli uni o'zingiz kiritishingiz kerak bo'lgan joyga bog'liq. Vídpovídno to tsgogo, keling, turli xil variantlarni ko'rib chiqaylik.

Saytga html-kodni kiritish va maqola matnini saytning bir tomoniga qo'shish uchun admin paneliga o'ting, tahrirlash uchun maqolani tanlang va kiriting. Vizual muharrir rejimini hisobga olgan holda, tahrirlash rejimini o'zgartirish kerak. Rejimni o'zgartirish uchun CMS tizimi bilan bir soatlik ishlash uchun shunchaki bosing. Keyin html-kodni rejalashtirilgan maydonga nusxalash va joylashtirish.

Ko'pincha, kiritganingizdan so'ng, siz kodni biroz formatlashni xohlaysiz, masalan, matnni boshqa tomondan kod atrofida o'rnating. CSS quvvatini yutib olishning oddiy usulidan foydalaning.

Vicoristuchi yorlig'i

, kodingizni konteynerga joylashtiring. Jadval shaklida qo'shimcha teglarni so'rashingiz mumkin. I. Uslubning qo'shimcha kuchi uchun idishning o'rtasida, sumkaning barcha atributlarini o'rnating.

Shunday qilib, statistikani saqlashda vizual muharrir o'zgarmaydi, boshqa tomondan, html kod bilan kodni kiritishda uni yoqish osonroq bo'ladi. Tahrirlovchi tomonidan kiritilgan o'zgartirishlar mumkin bo'lgan yomon kodlar tahdididan himoya qilish uchun yaratilgan.

Vizual muharrirni qanday yoqish mumkin?

Administrator panelida "Sayt" - "Sarlavha" - "Sayt" tugmasini bosing va "Vizual tahrirlovchi" qatorida "Muharrir yo'q" ni tanlang. Endi HTML kodini tahrirlash va kiritish HTML kod rejimida amalga oshirilishi mumkin. Kodni kiritganingizdan so'ng, vizual muharrirni yana o'zgartirishingiz mumkin.

Agar siz maqolani qayta o'qishni istasangiz, html kodini ham qaytadan joylashtirishingiz kerak. Ba'zan html-kod saytning teri tomonida ko'rsatilishi kerak. Html-kodni vino saytning teri tomonida ko'rsatiladigan tarzda kiritish.

Qaysi birini ko'rishni xohlayotganingizni ko'rish uchun boshqa tahrirlovchining bloknotining orqasida saytning asosiy fayliga (index.php yoki qulflash uchun index.html). Tanlangan fayl uchun kodni kiritish joyini tanlang. Aniqlik uchun siz iborani hazilda so'rashingiz mumkin, men uni kodni kiritishingiz kerak bo'lgan joyga qo'yaman, shunda siz yaxshiroq bilib olasiz. Keyin kodni nusxalang va sumkaga joylashtiring. Agar kerak bo'lsa, kodni maqoladagi kodni formatlash uchun tavsiflangan tarzda formatlash mumkin.

Bundan tashqari, biz o'quvchilarimiz matnni yozishga bir soat vaqt sarflamasdan nusxa ko'chirishlari uchun kodni maqolaning o'ziga kiritishimiz mumkinligini tushuntirmoqchiman. Tim, biz o'zimiz resursimizning barqarorligini yana bir bor yaxshilaymiz. Bu ko'proq professional va tugaganga o'xshaydi - ikkalasi ham.

Yana shuni bilmoqchimanki, bu maqoladagi ma'lumotlar odamlarga tanish bo'ladi, agar u so'zni tarqatish uchun bo'lsa, saytda qanday boshqa usulda ishlash kerak yoki bu qisqa hikoya bo'lsa, agar u faqat sevish uchun bo'lsa. asosiy ma'lumotlarni almashish. Kod qanday ma'lumot bo'lishi muhim emas 🙂 Nutqgacha men sizga bir oz sirni aytaman, bu loyihada biz uni Wp-Syntex plaginining yordami uchun ko'rsatamiz.

Siz so'raysiz: "Nega biz yoga bilan shug'ullanamiz?" Javob oddiy - lazzat va rang uchun o'rtoq yo'q. Jart. Aslida, biz ushbu plaginni tanladik, chunki u g'alabalarda oddiy, chunki u mo''jizaviy tarzda turli xil dasturlash tillarining (css, html, java, javascript, perl, sql va boshqalar) vizual uslubini beradi, lekin unday emas. serverimizni bosib oling.

Xo'sh, men uni Wp-Syntex hisobiga o'tkazib yuborganim uchun, keling, WordPress maqolasiga kodni qanday kiritishni yoga ilovasida ko'rsatamiz.

Yangi boshlanuvchilar uchun ushbu plaginni o'rnatishingiz kerak. Menga aytganlar haqida . Buni men bu erda tasvirlamayman.

Natijada siz shunga o'xshash narsani ko'rasiz:

Kod, qaysi birini xohlasangiz, ko'rishingiz mumkin

Shuningdek, ushbu kodda php ni almashtiring, siz boshqa tilda dasturlashni kiritishingiz mumkin, masalan, css yoki java. Qaysi uslub bilan eski moda ko'rinishining dizayni o'zgaradi.

Wp-Syntex funksiyalari qo'shildi

Ko'rsatilgan "pre" tegidagi kabi, siz atributni qo'shasiz chiziq, keyin siz kiritishingiz kerak bo'lgan kod quyidagicha boshlanadi:

Kod, qaysi birini xohlasangiz, ko'rishingiz mumkin

Kechirasiz, narxini esladingizmi?

Sizga kerak bo'lishi mumkin bo'lgan yana bir kichik atribut mavjud qochib ketdi. Win sizga belgilarning html-kodlarini belgilarning o'zida vositachisiz qayta yozish imkonini beradi. Masalan, ">" ">" ga o'zgaradi. Berilgan funktsiyani talab qilish uchun ko'rsatilgan "pre" tegiga haqoratli atributni kiriting:

escaped = "to'g'ri"

Tegni quyidagicha boshlash kerak:

< pre lang= "php" line= "1" escaped= "true" >

Bundan tashqari, Internetda men bizning plaginimiz bilan bog'liq holda ishlaydigan va kodni kiritish uchun WP muharririga tugmani qo'shadigan yana bitta plaginni (WP-Syntax Button) o'rnatishingiz mumkinligi haqida ma'lumotni bilardim. Men qasam ichmadim va yoga e'tiroz bildirmadim.

Uni o'rnatishim bilanoq, meni uzoq vaqt davomida yangilamagan va WordPress versiyamiz bilan sinab ko'rmaganlar ogohlantirdilar. Xo'sh, nima deyman, mening jangim tugadi.

WP-Syntax tugmachasini faollashtirgandan so'ng, men maqolalarimizdan birini yuklab oldim va java skriptini kiritishga harakat qildim. Zrobiv hamma narsa, men ko'rsatmalar va tavsiyalar tog'larida tayinlangan edi. Maqolaga skriptni kiritgandan so'ng, Yogo-ni ko'ring va "kod" tugmasini bosing.

Shundan so'ng, dastur tilini kiritganingizdan so'ng, skriptni ko'rish mumkin bo'lgan qator raqami.

Ehtimol, siz so'rayapsizmi, nega men ushbu maqolada ushbu tajriba haqida yozyapman? Aytmoqchimanki, agar siz Internetda ma'lumot izlayotgan bo'lsangiz, nashr etilgan sanaga e'tibor bering. Bundan tashqari, eski maqoladagi ma'lumotlar bir muncha vaqt davomida tegishli bo'lgan, lekin ayni paytda u ishlamayapti, lekin bu juda qiyin, yoki reklama sizning loyihangizni eng yaxshi darajaga olib chiqishi mumkin. nomuvofiqlik nuqtasi.

Bizning blogimizda men hozirgi holatdagi barcha materiallarni yaxshilashga harakat qilaman, men doimiy ravishda yangilanishlarni kuzatib boraman va agar kerak bo'lsa, maqola yozishdan oldin tuzatishlar kiritaman.

Agar siz elektron pochta orqali o'zingizga dolzarb ma'lumotlarni olishni istasangiz, men tavsiya qilaman.

Video "Maqolaga HTML kodni qanday kiritish kerak"

Do'stlar, agar siz yaxshiroq ko'rinishni istasangiz, qanday qo'rqish kerak, unda men siz uchun video yozib oldim. O'ylaymanki, bizda youtube kanali ham bor, uni oldindan to'lashingiz mumkin.

Mavzu bo'yicha maqolalar:

O'ylaymanki, maqola bir-biriga mos kelmadi va men sizga HTML kodini saytga qanday qilib muammosiz kiritishingiz mumkinligi haqida gapirib berdim.

Blogingizning estetik ko'rinishiga aldanmang. Adzhe o'quvchimiz hayotdagidek, odoblarga ko'ra o'rganadi va aqldan uzoqlashadi.

Nega hammasi menda!

Boo!

Hurmat bilan, Anton Kalmikov

Salom aziz do'stlar. Bugun, kelajakda, blogga qiziqishning tezlashtirilgan tezligi bilan, plaginlarni "engil" skriptlar bilan almashtirish imkoniyati haqida gapiraylik. Plaginlarni boshqarish uchun skriptlar serverga sezilarli darajada kamroq trafik beradi va bu holda sayt xavfsizligi muhimroq bo'ladi. Bu kunda plaginlar boy, binoning badbo'y hidi, bloggerlarning vazifasi esa boy. Va eng muhimi, bu plaginlarni robotlashtirilgan skriptlar bilan almashtirish mumkin. Va ba'zida sizga kerak bo'lmagan plaginlarni yoqish uchun qo'ng'iroq qilaman. Agar uchinchi tomon plaginlari kamroq bo'lsa - bu sayt va blogning asosiy yo'nalishi.

Veb-saytingiz tezligini tahlil qilish uchun siz plaginlardan veb-saytingiz tezligini tahlil qilish uchun foydalanishingiz mumkin. Men yozgan qayta tekshirish uchun Yakí xizmatlar vikoristovuvat. Menimcha, eng muhimi, plagin kodning sintaksisiga qarab maqolalarga o'z kodingizni qo'yish imkonini beradi. Ushbu plagin SyntaxHighlighter deb ataladi.

Sinov natijasi sahifaning yon tomoniga joylashtirilmagan. Zrozumílo, garne yoyining pídsvíchuvannya kodi, ale, u o'stirilgan bo'lsa, keyin o'ngdagi vídsvíchuvanni yilda emas. Buyuk raxunok ortida kod amaliyoti muhim ahamiyatga ega. Va agar siz shunchaki kodni kiritsangiz, unda bu amaliyotning ko'lami juda katta.

Bugun men sizga SyntaxHighlighter plaginini eng yaxshi kod bilan qanday almashtirishni va tugmani blogingizning tahrirlash paneliga qanday kiritishni aytib beraman.

Maqolada kodni plaginsiz qanday kiritish mumkin

Ko'rinishidan, WordPress-da maqolaga chiqish kodini kiritish uchun vizual muharrirdan maqolani terayotganda testga o'tish va kerakli kodni tegga qo'yish kifoya.

Sizning kodingiz

Ammo bunday kod maqolangiz matnining aksariyat qismida zaif ko'rinadi. Buning uchun siz bir nechta uslublarni qo'shishingiz mumkin, masalan, erning rangi, shrift, ramka. Shunday qilib, sizning kodingiz bir qarashda eng ko'p vizual tasvirlarga ega bo'ladi.

Ko'rsatilgan kodga qarab qanday o'zgartirish mumkin

Zombi o'ldirish oson.

Variant 1

Siz teg belgilashingiz mumkin

Sinf, masalan, class="cod" va style.css faylida kerakli uslublarni o'rnating.

.cod (kenglik: avtomatik; fon rangi: oq tutun; hoshiya: 1px qattiq #C7C3C3; chegara radiusi: 5px; rang: #167dec; )

Variant 2

O'rnatish va uslublash uchun kodni to'g'ridan-to'g'ri kiritishingiz mumkin. Bu shunday ko'rinadi:

Sizning kodingiz

Í birinchi va boshqa dumba ustida, shuningdek, statistik ma'lumotlar o'rtasida tanlov kodini kiritish, toshib ketish uchun quvvat qo'shish yonida: avto; blok elementi bilan keruvatiga ruxsat berish.

Tsi yo'llari hamma uchun yaxshi, lekin men buni oddiyroq qilishni xohlayman. Zagalom, men yana eriyapman - taraqqiyotning dvigateli bu jarayonni osonlashtirish uchun nimadir o'ylashdir.

WordPress tahrirlash paneliga "Kodni kiritish" tugmasini qanday qo'shish mumkin

Va bu jarayonni osonlashtirish uchun WordPress tahrirlash panelida oddiy tugma mavjud. Men shunday qarayman.

Agar shunday tugmani sobi qo'ymoqchi bo'lsangiz, unda men uchun bir oz vaqt va bir oz fayl kerak. Otzhe, qilaylik.

Salom, yangi o'quvchilar!

Keling, saytdagi dastur kodi haqida gapiraylik. Ko'pincha veb-master saytning bir yoki boshqa tomoniga kod kiritish zarurligini ayblaydi. WordPress sizga php, java, html, css-ni ham aylantirish imkonini beradi. ikki usulda kodlash: sayt mexanizmi tomonidan talqin qilinadigan buyruqlarni qanday qilish va matnning nusxalarini o'qish uchun ochiq qilish. Ushbu maqolada biz WordPress tomonidagi kodni qanday kiritishni ko'rib chiqamiz, shunda sharob tomoshabinlar uchun to'g'ri va chiroyli ko'rinadi.

Matn ko'rinishidagi kod: bu zarur

Kengaytirilgan WordPress kodiga ehtiyoj yo'q. Ishonch bilan aytish mumkinki, tibbiy, kundalik oshpazlik bloglari va shunga o'xshash taomlarning Vlasniklari g'alaba qozonishlari dargumon. Veb-dizayn va dasturlashni yaratish, qo'shimchalar ishlab chiqish kabi mavzularga bag'ishlangan loyihalar mualliflari haqida nima deya olasiz.

Bir necha qator kodlarni nashr etish zarurati saytga kerakli fragmentni oddiy qo'shish bilan cheklanmaydi. Ushbu g'oyaga "chiroyli ishlash" hamrohi kod sintaksisi sintaksisini va amalga oshirishning boshqa usullarini tanlashga tayanadi. Binoning veb-saytiga kodni yuborish tahririyat tomonidan ma'lumotlarni qabul qilish juda oson, chunki ular tahririyat tomonidan tahririyatga eshitildi.

Maqolaga kodni kiritish kifoya, WordPress uni sharhlaydi va keyingi nashr soati uchun yaratadi. Shuning uchun, o'xshash turdagi ma'lumotlar abadiy obroblyatsya bo'lib aybdor. Vazifani boshqa yo'l bilan o'zgartirishingiz mumkin: yon tomonda kerakli teglarni qo'lda ro'yxatdan o'tkazish, tugmani WordPress muharririga qo'lda kiritish va qo'shimcha plaginlar uchun.

Plaginsiz maqolaga kodni qanday qo'shish mumkin

WordPress kontentni boshqarish tizimining bir qismi bo'lgan sayt administratorini amalga oshirish uchun kuchli vositani taklif qiladi.

Bir qator koddan iborat vizual muharrir tarkibiga qo'shilgan blok, WordPress matn rejimiga o'tishda teglardagi barcha belgilarni almashtiradi.< и >belgilar < і >

CMS-ga kodning qo'shiq qismi "yak ê" tomonida ko'rsatilishida aybdor ekanligini ko'rsatish uchun WordPress matn muharririda tegni ko'rish va "o'rash" kerak. asboblar panelidagi yordam tugmalari uchun:

Siz yon tomonga shunday qaraysiz:










ism 1 Ism 2
Qiymat 1 Qiymat 2

Kodni WordPress tomoniga ko'rsatilgan kirishlar bilan kiritish uchun vizual muharriridan matn muharririga o'tishda siz html tegini burishingiz mumkin.

Bosqichlarni shakllantirish vazifasini bajaradigan barcha qo'shimcha bo'shliqlarga e'tibor bering.  Vmíst elementlar 
І  reklama aktsiyalari uchun u brauzerlar tomonidan monospaced shriftda ko'rsatiladi.

WordPress yordam yorlig'i orqasida plaginlarsiz sahifaga html kodini qanday kiritishiga misol

ism 1 Ism 2
Qiymat 1 Qiymat 2

Belgidan oldin

Zastosovny universal atributlari, zokrema atributi uslub, CSS yordamida elementni teglash.  Xilovlangan pastki dumba atributning qiymatini ko'rsatadi uslub ko'rsatiladigan matnning rangi, blok fonining rangi, torso, blok orasidagi yaxlitlash rangi va radiusi o'rnatiladi:

Qo'shimcha atributlar uchun yon tomonda ko'rsatilgan bloklarni formatlash imkoniyati ularni kengroq qiladi, lekin chegaralarsiz emas. Wikoristannya teglarga haqiqatda qaradi, agar ular bir qatorlar yoki kodning kichik qismlarini qo'llagandek yon tomonga qo'shsa. Dizaynning garnasi haqida shu tarzda gapirmang, kiritish natijasi minimal, ammo etarlicha boy bo'ladi.

Yaxshilangan sintaksisni amalga oshirishga imkon beruvchi katlanadigan formatlash - plaginlarning ishlashi natijasi, quyida batafsilroq.

WordPress uchun kod kiritish plaginlari

Rasmiy WordPress omboridan istalgan kodni (php, java, html, css) chiroyli tarzda kiritish imkonini beruvchi plaginlarning nusxasini tanlash tavsiya etiladi:

SyntaxHighlighter ishlab chiqilgan

WordPress-ga kodni kiritish, surish va tortish uchun plagin kengaytmalari, ularning yon tomonida siz ettita dizayn mavzusidan birini qo'shishingiz mumkin va agar kerak bo'lsa, qatorlar va asboblar paneli raqamlarini ko'rsatishni tanlashingiz, bosiladigan URL-manzillarni tanlang, oching. kod maydonini tanlang va hokazo. Shuningdek, visnovkaning vizual ko'rib chiqilishi va vikorist atributlarining dekodlanishi mavjud.

Plagin SyntaxHighlighter ishlab chiqilgan agar kerak bo'lsa, bo'lishi mumkin bo'lgan hamma narsa uzatildi. Yordam uchun WordPress maqolasiga kodni kiritish yanada oson, buning uchun plagin sozlamalarida tegni qayta ishlashga ruxsat berishingiz kerak.

Abo vikoristati vidpovidny qisqa kodi:

dumba dumba

wp-sintaksisi

Yana bir plagin, bu veb-ustalar tomonidan tan olinishi uchun munosib soat. Rasmiy ma'lumotlar ombori statistikasining hech biri 10 000 dan ortiq faol o'rnatishlarni ko'rsatmaydi. Afsuski, plagin hali yangilanmagan, ammo prote e'lon qilingan funktsiyalarni to'g'ri bajarishda davom etmoqda.

wp-sintaksisi emas maê vlasnoí̈ storínki nalashtuvan. Ushbu WordPress plagini kodni tahrirlash, aniqrog'i, uni kiritish va teg yorlig'i sintaksisiga moslik turini o'zgartirish uchun.

Atribut bilan filmni tanlang:

dumba
dumba
dumba

Qo'llab-quvvatlanadigan filmlar ro'yxati plaginning yon tomonida ko'rsatiladi.

Xususiyat chiziq qatorlarni raqamlashni ko'rsatish uchun xizmat qiladigan tegga ega bo'ling, uning ma'nosi qator boshlangan qator raqamiga beriladi. Agar siz HTML obyektlarini tozalashni xohlasangiz, atributni buzish tavsiya etiladi qochib ketdi 3 qiymat rost variant sifatida:

dumba

Qo'shimcha plagin uchun CSS kodini ko'rish va moslashtirish misoli:

1 2 3 4 5 6 7 8 .block (chegara: 2px #8E0505; rang: #2D0000; /*matn rangi*/ toʻldirish: 2px; /*ichki qadamlar*/ matnni tekislash: chapga; /*matnni ko‘rish*/ shrift oilasi: arial; shrift o'lchami: 14px; )

Blok (chegara: 2px #8E0505; rang: #2D0000; /*matn rangi*/ toʻldirish: 2px; /*ichki chiziqlar*/ matnni tekislash: chapga; /*matn konturi*/ font-family: arial; font-size : 14px; )

Html muharriridan vizual rejimga o'tishda WordPress tegi tegni izohlaydi

I kodi to'g'ri ko'rsatilmagan.  Shuning uchun, blok kodli qo'shimchalar bilan maqolalarni tahrirlashda, html kabi kontent muharririni tahrirlash kerak.

Code Prettify

Tilni ko'rsatmasdan avtomatik almashish bilan WordPress saytiga kod kiritish imkonini beruvchi moslashtirishsiz engil plagin. Teglar uchun moslashtirishni amalga oshirish

І  yon tomonda.  Modulga asoslangan oddiy yechim Google Code Pretty kutubxonasi dastur kodi bilan saytda ko'rsatilgan blok sintaksisining o'ziga xos formatlashiga o'tishni istamaganlar uchun.

Visnovok

Maqolada plaginlarga asoslangan echimlar ko'rib chiqiladi - bu WordPress plaginlari hamjamiyatining targ'ib qilayotgan narsalarning kichik bir qismi. Konsol menyusi xabarlarini kuzatib boring "Plaginlar - yangisini qo'shish" hazil tomonida, kalit so'zlar uchun ta'kidlashі Sintaksis dastur kodini chiroyli loyihalash imkonini beruvchi o'nlab shunga o'xshash plaginlarni ko'rsatishingiz mumkin. Saytdagi bunday plaginni iloji boricha va kerak bo'lganda tushunish muhimdir. Mumkin, WordPress tomonidagi kodni o'z oynangizga qo'lda, teglar yordamida matn muharririga kiritish osonroq.

І  .

Saqlash