WordPress-ga maxsus JavaScript-ni qanday qo’shish mumkin (3 usul)

Veb-saytingizning front-end funksiyalarini yaxshilashning eng yaxshi usullaridan biri bu WordPress maxsus JavaScript-ni qo’shishdir. Biroq, buni qanday qilishni tushunish qiyin bo’lishi mumkin, ayniqsa siz maxsus CSS-ni kiritish uchun Customizer bilan ishlashga odatlangan bo’lsangiz.

Yaxshiyamki, tajriba darajangizga va nimaga erishmoqchi ekanligingizga qarab bir nechta turli strategiyalardan foydalanishingiz mumkin. Variantlaringiz nima ekanligini bilib olgach, siz uchun eng mantiqiy bo’lgan maxsus JavaScript yechimini tanlashingiz mumkin bo’ladi.

Ushbu postda biz sizga WordPress saytingizga maxsus JavaScript-ni qo’shish uchun foydalanishingiz mumkin bo’lgan uchta usulni ko’rsatamiz, shuningdek, har bir variantning ijobiy va salbiy tomonlarini muhokama qilamiz. Mana, biz uchta usulni ko’rib chiqamiz – ma’lum bir usulga to’g’ridan-to’g’ri o’tish uchun bosing:

1. Head & Footer Code plaginidan foydalaning (texnik bo’lmagan foydalanuvchilar uchun eng oddiy variant)
2. functions.php fayliga kod qo’shing
3. Sarlavhaga kod qo’shing (wp_enqueue_script funksiyasi yoki wp_head kancasi yordamida)

Keling, kiraylik!

1. Head & Footer Code kabi plaginni o’rnating

Plagindan foydalanish veb-saytingizga WordPress maxsus JavaScript-ni qo’shishning eng oson usullaridan biridir. Masalan, Head & Footer Code yaxshi vositadir:

Ushbu bepul plagin sizga turli xil usullarda kod kiritish imkonini beradi. Siz uni Facebook Pixel, Google Analytics, maxsus CSS va boshqalar uchun ishlatishingiz mumkin.

Boshlash uchun navigatsiya qilish orqali plaginni saytingizga qo’shing Plaginlar → Yangisini qo‘shish administrator asboblar panelidan, so‘ng “Bosh va pastki kodi” ni qidiring.

Bir marta bosing Hozir oʻrnating va Faollashtirish tugmalaridan foydalanib, plagin sozlamalarini o’tish orqali topishingiz mumkin Asboblar → Head & Footer Code. Ushbu ekranda sarlavha, altbilgi va tana qismlari uchun uchta quti mavjud:

Siz o’zingizning WordPress maxsus JavaScript-ni ushbu qutilarning istalganiga kiritishingiz mumkin. Ishingiz tugagach, ni tanlang O’zgarishlarni saqlash ekranning pastki qismidagi tugmani bosing. Keyin kod saytingizning har bir sahifasiga yuklanadi.

Plagindan foydalanishning ijobiy va salbiy tomonlari

Plagindan foydalanishning asosiy afzalligi shundaki, u yangi boshlanuvchilar uchun qulay variantdir. Mavzu fayllarini tahrirlash haqida tashvishlanishingiz shart emas. Head & Footer Code plagini, agar siz boshqa turdagi kodlar va maxsus CSS qo’shishning muammosiz usulini izlayotgan bo’lsangiz, foydali bo’lishi mumkin.

Biroq, bu usulning salbiy tomoni shundaki, u uchinchi tomon plaginini o’rnatishni o’z ichiga oladi, ba’zi sayt egalari undan qochishga harakat qilishadi. Agar siz kengaytmalaringizni minimal darajada ushlab turishni istasangiz, boshqa usullardan birini qo’llaganingiz ma’qul. Bundan tashqari, plagin muayyan sahifalar yoki postlar uchun emas, balki sayt bo’ylab JavaScript-ni o’zgartirish uchun mo’ljallangan.

2. functions.php faylidan foydalaning

Veb-saytingizga WordPress maxsus JavaScript-ni qo’shishning yana bir usuli – o’rnatilgan funksiyalar va ilgaklardan foydalanish. functions.php fayl. Ushbu yondashuv skriptlarni serveringizga qo’lda yuklashni o’z ichiga oladi.

Boshlashdan oldin, biz bolalar mavzusini yaratishni tavsiya qilamiz. Bu qadam ota-ona mavzuni xavfsiz yangilash imkoniyatiga ega bo‘lishingizga yordam beradi. Agar biror narsa noto’g’ri bo’lsa, saytingizning zaxira nusxasini ham olishingiz kerak.

Ushbu usul foydalanishni o’z ichiga oladi IS_PAGE funktsiyasi. Shaxsiy JavaScript-ni bitta post yoki sahifaga qo’llash uchun shartli mantiqni qo’shishingiz mumkin.

Boshlash uchun o’zingizni toping va oching functions.php faylni oching, so’ngra quyidagi kod parchasini nusxalang va joylashtiring:

function ti_custom_javascript() {
    ?>
        <script>
          // your javscript code goes here
        </script>
    <?php
}
add_action('wp_head', 'ti_custom_javascript');

Ushbu kod sarlavhangizga JavaScript-ni qo’shadi. Uni bitta postga qo’llash uchun siz quyidagilardan foydalanishingiz mumkin:

function ti_custom_javascript() {
  if (is_single ('3')) { 
    ?>
        <script type="text/javascript">
          // your javscript code goes here
        </script>
    <?php
  }
}
add_action('wp_head', 'ti_custom_javascript');

ni almashtirishingiz kerakligini unutmang 3 yuqoridagi misolda kodni qo’shmoqchi bo’lgan pochta identifikatori raqami bilan. Bu raqamni topish uchun administrator boshqaruv panelidagi postga o‘ting va ustiga bosing Tahrirlash. Brauzer satrining URL manzilida ID raqami “post=” yonidagi raqamdir:

ID raqamini almashtirganingizdan so’ng faylingizni saqlang va belgilangan maydonga maxsus JavaScript qo’shing. Xuddi shu jarayonni bitta WordPress sahifasi uchun takrorlashingiz mumkin.

functions.php faylingizni tahrirlashning ijobiy va salbiy tomonlari

O’zingizni tahrirlashning afzalligi functions.php fayl, boshqa plaginni o’rnatishingiz shart emas. Siz ushbu texnikadan mavzuingizga ham, WordPressning o’ziga ham xususiyatlar va funksionallikni qo’shish uchun foydalanishingiz mumkin. Masalan, bu usul JavaScript-ni bitta post yoki sahifaga yoki barcha sahifalarga kiritishi mumkin.

Bu usulning birgina salbiy tomoni shundaki, u kod bilan ishlash va saytingiz fayllarini tahrirlashni o’z ichiga oladi. Shuning uchun, agar siz ushbu bo’limda tajribaga ega bo’lmasangiz, bu eng yaxshi variant bo’lmasligi mumkin.

ni kiritish orqali maxsus WordPress JavaScript-ni qo’shishning bir usuli bor <script> to’g’ridan-to’g’ri o’z ichiga teg header.php fayl. Biroq, bu usul tavsiya etilmaydi. Bu WordPress-ning yuklash ketma-ketligiga xalaqit berishi va boshqa mavzular va plaginlar bilan ziddiyatga olib kelishi mumkin.

Agar siz saytingiz sarlavhasi orqali barcha sahifalaringizga maxsus JavaScript-ni qo’shmoqchi bo’lsangiz, buning uchun ikkita usuldan foydalanishingiz mumkin. ni tahrirlashingiz mumkin functions.php fayl va foydalaning wp_enqueue_script umumiy funktsiyani yaratadigan funksiya. Shu bilan bir qatorda, siz foydalanishingiz mumkin wp_head harakat ilgagi.

Keling, ikkala variantni ham ko’rib chiqaylik …

wp_enqueue_script funktsiyasidan foydalanib sarlavhangizga JavaScript qo’shing

Birinchidan, siz o’zingizning shaxsiy JavaScript faylingizni shabloningiz katalogiga yuklashni xohlaysiz. Buni File Transfer Protocol (FTP) mijozi yoki File Manager orqali qilishingiz mumkin.

Saytingiz shablon jildiga o’ting (wp_content → mavzular → [yourtheme]). Keyin, tanlang Yuklash:

Ushbu faylning aniq fayl yo’liga e’tibor bering. Masalan, bu shunday bo’lishi kerak “

Keyin, o’zingizni toping va oching functions.php faylni oching, so’ngra quyidagi kod parchasini nusxalang va joylashtiring:

function ti_custom_javascript() {
wp_enqueue_script( 'example-script', get_template_directory_uri() . '/js/examplescript.js');
}
add_action('wp_enqueue_scripts', 'ti_custom_javascript');

Shablon URL manzilini o’zingiz bilan almashtirganingizga ishonch hosil qiling. Nihoyat, faylingizni saqlang.

Wp_head kancasi yordamida maxsus JavaScript-ni qo’shing

dan ham foydalanishingiz mumkin wp_head harakat ilgagi inline skript orqali sarlavhangizga maxsus JavaScript qo’shish uchun. Shunga qaramay, bu usul afzal emas, chunki u juda ko’p skriptlarni yaratishi mumkin. Biroq, skriptlarni to’g’ridan-to’g’ri o’zingizga kiritishdan ko’ra yaxshiroqdir header.php fayl.

Altbilgi uchun ham foydalanishingiz mumkin bo’lgan bu usul saytingizga inline skriptlarni qo’shish uchun harakat kanca(lar)idan foydalanadi. esa wp_enqueue_script funktsiya maxsus skriptlarni navbatga qo’yadi, the wp_head yondashuv sarlavha shabloningizdagi skriptlarni chop etadi (va agar siz wp_footer ilgak).

Boshlash uchun sahifangizga oʻting functions.php faylga o’ting, so’ngra quyidagini nusxalang va joylashtiring:

function ti_custom_javascript() {
?>
<script>
// your javascript code goes here
</script>
<?php
}
add_action('wp_head', 'ti_custom_javascript');

E’tibor bering, wp_head Hook faqat veb-saytingizning old tomonida yonadi. Bu shuni anglatadiki, ushbu usul yordamida qo’shilgan har qanday maxsus JavaScript administrator yoki login maydonlarida ko’rinmaydi. Biroq, agar siz ushbu hududlarga JavaScript-ni qo’shmoqchi bo’lsangiz, foydalanishingiz mumkin admin_head va login_head mos ravishda harakat ilgaklari.

Sarlavhangizga JavaScript qo’shishning ijobiy va salbiy tomonlari

The wp_enqueue_script Funktsiya ishlab chiquvchilar orasida afzal ko’riladi, chunki u boshqa variantlar bilan yuzaga kelishi mumkin bo’lgan nizolarni oldini oladi, masalan, skriptlarni to’g’ridan-to’g’ri qo’shish. header.php fayl. Bundan tashqari, ushbu usuldan foydalanish hech qanday bog’liq skriptlarni yaratmaydi.

Saytingiz sarlavhasiga maxsus WordPress JavaScript-ni qo’shish bilan bog’liq asosiy muammo shundaki, u o’z skriptlarini yuklaydigan boshqa plaginlar bilan bog’liq muammolarga olib kelishi mumkin. Ushbu sozlash bir nechta skriptlarning bir necha marta yuklanishiga olib kelishi mumkin, bu esa veb-saytingizning umumiy tezligi va ishlashiga xalaqit berishi mumkin.

WordPress maxsus JavaScript-ni ishga tushiring

Ushbu postda muhokama qilganimizdek, WordPress maxsus JavaScript-ni veb-saytingizga qo’shishning uchta usuli mavjud:

1. Head & Footer Code kabi plaginni o’rnating.
2. Sizning functions.php bitta sahifa yoki postga maxsus JavaScript qo’shish uchun fayl.
3. dan foydalanib sarlavhangizga JavaScript qo’shing wp_enqueue_script funktsiyasi yoki wp_head ilgak.

Endi siz WordPress-ga maxsus JavaScript-ni qanday qo’shishni bilganingizdan so’ng, WordPress-ga maxsus CSS qo’shish bo’yicha boshqa qo’llanmamiz sizni qiziqtirishi mumkin.