WordPress-ке теңшелетін JavaScript қалай қосуға болады (3 әдіс)

Веб-сайтыңыздың функционалдығын жақсартудың ең жақсы тәсілдерінің бірі WordPress теңшелетін JavaScript қосу болып табылады. Дегенмен, мұны қалай жасау керектігін анықтау қиын болуы мүмкін, әсіресе егер сіз теңшелетін CSS кірістіру үшін Customizer-мен жұмыс істеуге дағдыланған болсаңыз.

Бақытымызға орай, тәжірибе деңгейіңізге және қол жеткізгіңіз келетін нәрсеге байланысты бірнеше түрлі стратегияларды пайдалана аласыз. Опцияларыңыздың не екенін білгеннен кейін сіз үшін ең мағыналы болатын реттелетін JavaScript шешімін таңдай аласыз.

Бұл мақалада біз сізге WordPress сайтыңызға теңшелетін JavaScript қосудың үш әдісін көрсетеміз, сондай-ақ әрбір опцияның артықшылықтары мен кемшіліктерін талқылаймыз. Міне, біз қарастыратын үш әдіс – нақты әдіске тікелей өту үшін басыңыз:

1. Head & Footer Code плагинін пайдаланыңыз (техникалық емес пайдаланушылар үшін ең қарапайым нұсқа)
2. functions.php файлына код қосыңыз
3. Тақырыпқа код қосыңыз (wp_enqueue_script функциясын немесе wp_head ілгегін пайдалану)

Кірейік!

1. Head & Footer Code сияқты плагинді орнатыңыз

Плагинді пайдалану – веб-сайтыңызға WordPress теңшелетін JavaScript қосудың ең оңай жолдарының бірі. Мысалы, Head & Footer коды жақсы құрал болып табылады:

Бұл тегін плагин кодты әртүрлі жолдармен енгізуге мүмкіндік береді. Сіз оны Facebook Pixel, Google Analytics, пайдаланушы CSS және т.б. үшін пайдалана аласыз.

Бастау үшін плагинді шарлау арқылы сайтыңызға қосыңыз Плагиндер → Жаңа қосу әкімші бақылау тақтасынан, содан кейін «Бас және төменгі колонтитул кодын» іздеңіз.

түймесін басқаннан кейін Қазір орнату және Іске қосу түймелерінен өту арқылы плагин параметрлерін табуға болады Құралдар → Бас және төменгі колонтитул коды. Бұл экранда үстіңгі деректеме, төменгі деректеме және негізгі бөлімдер үшін үш жолақ бар:

Осы өрістердің кез келгеніне WordPress теңшелетін JavaScript енгізуіңізге болады. Аяқтаған кезде таңдаңыз Өзгерістерді сақтау экранның төменгі жағындағы түймені басыңыз. Содан кейін код сіздің сайтыңыздың әрбір бетіне жүктеледі.

Плагинді пайдаланудың артықшылықтары мен кемшіліктері

Плагинді пайдаланудың басты артықшылығы – бұл жаңадан бастаушыға ыңғайлы нұсқа. Тақырып файлдарын өңдеу туралы алаңдамаудың қажеті жоқ. Head & Footer Code плагині кодтың басқа түрлерін және реттелетін CSS-ті қосудың біркелкі жолын іздесеңіз де пайдалы болуы мүмкін.

Дегенмен, бұл әдістің кемшілігі – бұл үшінші тарап плагинін орнатуды қамтиды, кейбір сайт иелері оны болдырмауға тырысады. Кеңейтімдерді барынша азайтқыңыз келсе, басқа әдістердің бірін қолданған дұрыс. Сонымен қатар, плагин нақты беттерге немесе жазбаларға емес, жалпы сайттағы JavaScript өзгерістеріне арналған.

2. functions.php файлын пайдаланыңыз

Веб-сайтыңызға WordPress теңшелетін JavaScript қосудың тағы бір әдісі – өңдеу үшін кірістірілген функциялар мен ілмектерді пайдалану. functions.php файл. Бұл тәсіл сценарийлерді серверге қолмен жүктеп салуды қамтиды.

Бастамас бұрын біз балалар тақырыбын жасауды ұсынамыз. Бұл қадам негізгі тақырыпты әлі де қауіпсіз жаңарта алатыныңызға көз жеткізуге көмектеседі. Сондай-ақ бірдеңе дұрыс болмаса, сайттың сақтық көшірмесін жасау керек.

Бұл әдіс қолдануды қамтиды IS_PAGE функциясы. Бір жазбаға немесе бетке теңшелетін JavaScript қолдану үшін шартты логиканы қосуға болады.

Бастау үшін өзіңізді тауып, ашыңыз functions.php файлды таңдаңыз, содан кейін келесі код үзіндісін көшіріп, қойыңыз:

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

Бұл код тақырыпқа JavaScript қосады. Оны бір постқа қолдану үшін келесіні пайдалануға болады:

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');

ауыстыру қажет екенін ескеріңіз 3 жоғарыдағы мысалда код қосқыңыз келетін пошта идентификаторы нөмірі бар. Бұл нөмірді табу үшін әкімші бақылау тақтасынан жазбаға өтіп, түймесін басыңыз Өңдеу. Браузер жолағының URL мекенжайында идентификатор нөмірі «post=» жанындағы сан болып табылады:

Идентификатор нөмірін ауыстырғаннан кейін файлыңызды сақтаңыз және белгіленген аймаққа реттелетін JavaScript қосыңыз. Сондай-ақ, осы процесті бір WordPress беті үшін қайталауға болады.

functions.php файлын өңдеудің артықшылықтары мен кемшіліктері

Өзіңізді өңдеудің артықшылығы functions.php файл басқа плагинді орнатудың қажеті жоқ. Сондай-ақ бұл әдісті тақырыпқа және WordPress-тің өзіне мүмкіндіктер мен функционалдылықты қосу үшін пайдалануға болады. Мысалы, бұл әдіс JavaScript-ті бір жазбаға немесе бетке немесе барлық беттерге кірістіре алады.

Бұл әдістің жалғыз кемшілігі – ол кодпен жұмыс істеуді және сайттың файлдарын өңдеуді қамтиды. Сондықтан, бұл бөлімде тәжірибеңіз болмаса, бұл ең жақсы нұсқа болмауы мүмкін.

кірістіру арқылы реттелетін WordPress JavaScript қосудың жолы бар <script> Тікелей өзіңізді белгілеңіз header.php файл. Дегенмен, бұл әдіс ұсынылмайды. Ол WordPress жүктеу ретіне кедергі келтіруі және басқа тақырыптар мен плагиндермен қайшылық тудыруы мүмкін.

Сайттың тақырыбы арқылы барлық беттерге теңшелетін JavaScript қосқыңыз келсе, мұны істеудің екі жолы бар. өңдеуге болады functions.php файлды алып, пайдаланыңыз wp_enqueue_script жалпы функцияны жасайтын функция. Балама ретінде пайдалана аласыз wp_head әрекет ілгегі.

Екі нұсқаны да қарастырайық …

wp_enqueue_script функциясын пайдаланып тақырыпқа JavaScript қосыңыз

Алдымен, үлгі каталогына реттелетін JavaScript файлын жүктеп салғыңыз келеді. Мұны File Transfer Protocol (FTP) клиенті немесе File Manager арқылы жасауға болады.

Сайтыңыздың үлгі қалтасына өтіңіз (wp_content → тақырыптар → [yourtheme]). Содан кейін таңдаңыз Жүктеп салу:

Бұл файлдың нақты файл жолын ескеріңіз. Мысалы, бұл «

Әрі қарай, өзіңізді тауып, ашыңыз functions.php файлды таңдаңыз, содан кейін келесі код үзіндісін көшіріп, қойыңыз:

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

Үлгі URL мекенжайын өзіңіздікімен ауыстыруды ұмытпаңыз. Соңында, файлыңызды сақтаңыз.

wp_head ілгегі арқылы реттелетін JavaScript қосыңыз

Сіз сондай-ақ пайдалана аласыз wp_head әрекет ілгегі кірістірілген сценарий арқылы тақырыпқа теңшелетін JavaScript қосу үшін. Тағы да, бұл әдіс артықшылықты емес, себебі ол тым көп сценарийлер жасай алады. Дегенмен, сценарийлерді тікелей кірістіруден гөрі жақсы header.php файл.

Төменгі деректеме үшін де пайдалануға болатын бұл әдіс сайтыңызға кірістірілген сценарийлерді қосу үшін әрекет ілмектерін пайдаланады. Әзірге wp_enqueue_script функция реттелетін сценарийлерді кезекке қояды wp_head көзқарас үстіңгі деректеме үлгісіндегі сценарийлерді басып шығарады (және егер сіз қолдансаңыз wp_footer ілмек).

Бастау үшін өзіңіздің тармағына өтіңіз functions.php файлын, содан кейін келесіні көшіріп, қойыңыз:

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

Назар аударыңыз, wp_head веб-сайтыңыздың алдыңғы жағында ғана өрттерді қосыңыз. Бұл осы әдісті пайдаланып қосқан кез келген теңшелетін JavaScript әкімші немесе кіру аймақтарында пайда болмайтынын білдіреді. Дегенмен, егер сіз осы аймақтарға JavaScript қосқыңыз келсе, пайдалана аласыз admin_head және login_head тиісінше әрекет ілмектері.

Тақырыпқа JavaScript қосудың артықшылықтары мен кемшіліктері

The wp_enqueue_script Бұл функция әзірлеушілер арасында жақсырақ, себебі ол сценарийлерге тікелей қосу сияқты басқа опциялармен туындауы мүмкін қайшылықтардың алдын алады. header.php файл. Бұған қоса, бұл әдісті пайдалану тәуелді сценарийлерді жасамайды.

Сайтыңыздың тақырыбына арнаулы WordPress JavaScript қосудың негізгі мәселесі – бұл өз сценарийлерін жүктейтін басқа плагиндермен ақауларды тудыруы мүмкін. Бұл орнату сонымен қатар бірнеше сценарийлердің бірнеше рет жүктелуіне себеп болуы мүмкін, бұл веб-сайтыңыздың жалпы жылдамдығы мен өнімділігіне кедергі келтіруі мүмкін.

WordPress реттелетін JavaScript-пен жұмысты бастаңыз

Осы мақалада талқылағанымыздай, веб-сайтыңызға WordPress теңшелетін JavaScript қосудың үш жолы бар:

1. Head & Footer Code сияқты плагинді орнатыңыз.
2. Өзіңізді пайдаланыңыз functions.php бір бетке немесе жазбаға теңшелетін JavaScript қосу үшін файл.
3. Тақырыпқа JavaScript қосыңыз wp_enqueue_script функциясы немесе wp_head ілмек.

Енді сіз WordPress-ке теңшелетін JavaScript-ті қалай қосу керектігін білетін болсаңыз, WordPress-ке реттелетін CSS-ті қосу бойынша басқа нұсқаулықымыз сізді қызықтыруы мүмкін.