WordPress JavaScript қалай дұрыс енгізеді?JS және CSS файлдарының реттелетін жүктелуі

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

• Әдетте адамдар HTML үшін сілтеме, сценарий тегтерін пайдаланады.
• Шын мәнінде, WordPress-те сценарийлерге сілтеме жасау үшін кіріктірілген күрделі функциялар мен әдістер бар.
• Сонымен, WordPress-тің кірістірілген әдіс сілтемелерін пайдалану анағұрлым кәсіби және кеңейтілген.

Дұрыс емес дәйексөз әдісі

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

1 түрі:сілтеме тегтері CSS файлдарына сілтеме жасайды

• Сценарий тегтері JS файлдарын қолданады.Мұнда егжей-тегжейлі айтылмаған.

2 түрі:wp_head функциясын пайдаланыңыз

• wp_head функциясы кейбір реттелетін немесе жүйе анықтаған мазмұнды шығару үшін пайдаланылады.
• Біз кейде осы файлға сілтеме жасау үшін келесі кодты пайдаланамыз:

<?php
add_action('wp_head', 'wpcwl_normal_script');
function wpcwl_normal_script() {
echo '资源文件的链接';
}
?>

• Сәйкес файлдарға сілтеме жасау үшін жоғарыдағы кодты functions.php файлына көшіріңіз.

WordPress Enqueue сценарийлерінің ресурс механизмі

Барлығымыз білетіндей, WordPress-те көптеген плагиндер бар:

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

wp_enqueue_script функциясын пайдаланыңыз

• WordPress-те ресурсқа сілтеме жасау үшін пайдалану керекwp_enqueue_scriptКезекке қойылған немесе сұрыпталған функцияның атауында кезек сөзі бар функция.
• WordPress ресурстарын кезекке қою әдісімен (Enqueue Scripts) сілтемелер сәйкес файлдар мен негізгі кодтан бөлінеді.
• Егер пайдаланушы ресурсты өшіргісі келсе, оны негізгі кодтан өзгертпей жоя алады, өзгерте алады және түсініктеме бере алады.

Сондай-ақ, jQuery, jQuery UI және т.б. сияқты жиі қолданылатын кейбір кітапханалар WordPress жүйесіне енгізілген.

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

Бұл функцияны жеке JS және CSS файлдарына сілтеме жасау үшін пайдалансаңыз, пайдалануыңыз керекwp_register_scriptФункция идентификаторды (тұтқа) тіркейді, содан кейін пайдаланадыwp_enqueue_scriptФункция осы жалаушаға сәйкес ресурсты шақырады.

WordPress-те JS және CSS файлдарын қалай дұрыс импорттау керек?

WordPress JS және CSS әдістері үшін маңызды импорттау әдістерін ұсынады.

plugin.css файлын плагинге ▼ импорттау үшін келесі кодты пайдалануға болады

<?php
function wpcwl_add_styles() {
wp_register_script('plugin_stylesheet', plugins_url('plugin.css', __FILE__));
wp_enqueue_script('plugin_stylesheet');
}

add_action( 'wp_enqueue_scripts', 'wpcwl_add_styles' ); 
?>

Жоғарыда идентификатор plugin_stylesheet бар ресурс жасау үшін wp_register_script функциясы пайдаланылады.

Содан кейін оның кезектегі сұрауларын қосыңызwp_enqueue_scriptsәрекеттер орындалуда.

Функция атауы сценарий болса да, оның ресурс файлының түріне еш қатысы жоқ және CSS және JS үшін де жарамды.

wp_register_script функциясы шынымен де қарапайым емес, оның бес параметрі болуы мүмкін:

1) $handle:Ресурс идентификаторы.

• 由wp_enqueue_scriptаудару.

2) $src:Ресурстың орналасуы.

• Салыстырмалы немесе абсолютті мекенжайлар мекенжайларды алу үшін WordPress ендірілген функцияларын пайдаланады, т.б.
• ЖалпыОрналасуфункциясы барplugins_url,get_template_directory_uriКүте тұрыңыз.

3) $deps:сену.

• Егер сіз jQuery плагиніне сілтеме жасап жатсаңыз және құрастыру үшін jQuery-ге сену қажет болса, jQuery-ді толтыруыңыз керек.
• Оның массив ретінде берілгенін ескеріңіз.

4) $ver:Ресурс нұсқасы, қосымша.

5) $in_footer:Сіз оны түбіне қоясыз ба?

• Әдетте, JS файлдары беттің төменгі жағында орналастырылуы керек, бұл параметрді True мәніне орнатуға болады, оны бос қалдыруға немесе жоғарғы жағына шығару үшін False күйіне қоюға болады.

Толығырақ JavaScript файлының анықтамалық мысалын қарастырайық ▼

<?php
function wpcwl_add_scripts() {
wp_register_script('plugin_script', plugins_url('plugin_script.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('plugin_script');
}

add_action( 'wp_enqueue_scripts', 'wpcwl_add_scripts' ); 
?>

WordPress тақырыптары ресурстарды импорттау үшін wp_enqueue_script пайдаланады

WordPress тақырыбын әзірлеудегі бағдарламашылар, пайдалануwp_enqueue_scriptИмпорттық ресурстар.

• Жоғарыда келтірілген мысалдар WordPress плагиндерін әзірлеуге арналған сілтеме ресурстарының мысалдары болып табылады.
• Тақырыпта көрсетілген әдіс ұқсас.

Негізгі айырмашылық - тақырып астындағы ресурс файлының мекенжайын алу үшін тақырып каталогын алу үшін сәйкес функцияны пайдалану.

пайдалана аласызget_template_directory_uriағымдағы тақырып каталогын алу функциясы.

Егер сіз бала тақырыбын пайдалансаңыз, оны пайдалануыңыз керекget_stylesheet_directory_uriФункция сәйкес ресурстарды алу үшін негізгі тақырып каталогын алады.