Я новичок в WordPress, в WordPress есть способ загрузить файл JS/CSS на определенную страницу при вызове страницы, а не загружать его на другую?
Вы можете добавить оператор if к вашему <head>
в header.php.
<?php if (is_page($id)) { ?>
#css or js here
<?php } ?>
Замените $id
идентификатором или ярлыком страницы, на которую вы хотите загрузить <script>
или <style>
.
Загрузка scripts
и stylesheet
из файла function.php
— лучший способ работы с Wordpress.
Добавление скриптов и стилей в WordPress — довольно простой процесс. По сути, вы создадите функцию, которая поставит в очередь все ваши скрипты и стили.
Источник @ https://developer.wordpress.org/themes/basics/включая-css-javascript/
В Wordpress вы можете зарегистрировать script
и stylesheet
, прежде чем поставить их в очередь. Мы используем несколько очень удобных функций, называемых wp_register_script
/ wp_register_style
для scripts
и wp_enqueue_script
/ wp_enqueue_style
для stylesheet
. Вы должны обратить внимание и прочитать об аргументах функций
Вместе с некоторыми условными тегами и функциями мы в конечном итоге создаем действительно сложное поведение для условной регистрации и постановки в очередь scripts
и stylesheet
в нашей теме и на страницах. Вы должны обратить внимание и прочитать об аргументах функций.
Условные теги можно использовать в файлах шаблонов для изменения того, что отображается контент и как этот контент отображается на конкретном страницу в зависимости от того, каким условиям соответствует эта страница.
Источник @https://codex.wordpress.org/Conditional_Tags
Например, is_home()
, is_search()
, is_single()
или is_page()
... можно использовать для условной регистрации и постановки в очередь scripts
и stylesheet
на наших разных страницах.
<?php
add_action( 'wp_enqueue_scripts', 'theme_scripts' );
function theme_scripts() {
if ( ! is_admin() ) {
/**
* Register then enqueue jquery_js
* @link https://developer.wordpress.org/reference/functions/wp_register_script/
* @link https://developer.wordpress.org/reference/functions/wp_enqueue_script/
*/
wp_register_script( 'jquery_js', trailingslashit( get_template_directory_uri() ) . 'assets/js/jquery-3.5.1.min.js', array(), '3.5.1', true );
wp_enqueue_script( 'jquery_js' );
};
}; ?>
В этом примере мы хотим поставить в очередь наш jquery-3.5.1.min.js
, только если мы находимся на странице, отличной от страницы администратора, используя if ( ! is_admin() )...
.
script
и stylesheet
могут размещаться локально или на другом сервере (например, CDN). При использовании CDN мы хотим убедиться, что источник доступен. Мы можем использовать @fopen();
, чтобы убедиться, что CDN доступен, а если нет, использовать запасной вариант:
<?php
add_action( 'wp_enqueue_scripts', 'theme_scripts' );
function theme_scripts() {
if ( ! is_admin() ) {
/**
* Register then enqueue jquery_js
* @link https://developer.wordpress.org/reference/functions/wp_register_script/
* @link https://developer.wordpress.org/reference/functions/wp_enqueue_script/
*
* Check if CDN's url is valid, if not return fallback
* @link https://www.php.net/manual/en/function.fopen.php
*/
$test_jquery_js = @fopen( 'https://code.jquery.com/jquery-3.5.1.min.js', 'r' );
if ( $test_jquery_js !== false ) {
wp_register_script( 'jquery_js', '//code.jquery.com/jquery-3.5.1.min.js', array(), '3.5.1', true );
} else {
wp_register_script( 'jquery_js', trailingslashit( get_template_directory_uri() ) . 'assets/js/jquery-3.5.1.min.js', array(), '3.5.1', true );
};
wp_enqueue_script( 'jquery_js' );
};
}; ?>
Иногда требуется добавить атрибуты к тегам script
и stylesheet
, чтобы правильно поставить их в очередь. Используя хук script_loader_tag
или style_loader_tag
, мы можем сделать это:
<?php
add_action( 'wp_enqueue_scripts', 'theme_scripts' );
function theme_scripts() {
if ( ! is_admin() ) {
/**
* Register then enqueue jquery_js
* @link https://developer.wordpress.org/reference/functions/wp_register_script/
* @link https://developer.wordpress.org/reference/functions/wp_enqueue_script/
*
* Check if CDN's url is valid, if not return fallback
* @link https://www.php.net/manual/en/function.fopen.php
*
* Add rel='preload' <link> and required attributes to jquery_js
* Filters the HTML link tag of an enqueued style & add required attributes
* @link https://developer.wordpress.org/reference/hooks/script_loader_tag/
*/
$test_jquery_js = @fopen( 'https://code.jquery.com/jquery-3.5.1.min.js', 'r' );
if ( $test_jquery_js !== false ) {
wp_register_script( 'jquery_js', '//code.jquery.com/jquery-3.5.1.min.js', array(), '3.5.1', true );
} else {
wp_register_script( 'jquery_js', trailingslashit( get_template_directory_uri() ) . 'assets/js/jquery-3.5.1.min.js', array(), '3.5.1', true );
};
wp_enqueue_script( 'jquery_js' );
add_filter( 'script_loader_tag', 'data_jquery_js', 10, 3 );
function data_jquery_js( $tag, $handle, $src ) {
if ( $handle === 'jquery_js' ) {
$integrity = 'sha256...';
$tag = str_replace(
array(
"<script",
"></script>",
),
array(
"<link rel='preload prefetch' href='" . esc_url( $src ) . "' as='script' integrity='" . $integrity . "' crossorigin='anonymous' />" . PHP_EOL . "<script",
"integrity='" . $integrity . "' crossorigin='anonymous' async></script>",
),
$tag
);
};
return $tag;
};
};
}; ?>
Здесь мы добавляем тег ссылки preload
, атрибут crossorigin
, integrity
и async
.
Если вам не нужно регистрировать script
или stylesheet
перед тем, как поставить его в очередь, вы можете его игнорировать. например:
wp_enqueue_script( 'jquery_js', trailingslashit( get_template_directory_uri() ) . 'assets/js/jquery-3.5.1.min.js', array(), '3.5.1', true );
Здесь мы не регистрируем наш скрипт и сразу переходим к очереди.
В Wordpress jQuery обычно предварительно зарегистрирован и поставляется с ядром. Если вы хотите поставить в очередь свою собственную версию, вы ДОЛЖНЫ отменить регистрацию основной версии jQuery.
<?php
add_action( 'wp_enqueue_scripts', 'theme_scripts' );
function theme_scripts() {
if ( ! is_admin() ) {
/**
* Deregister Wordpress jquery core version
* @link https://developer.wordpress.org/reference/functions/wp_deregister_script/
*/
wp_deregister_script( 'jquery' );
//...here goes the rest of your function...
};
}; ?>
script
или stylesheet
на стороне администратораИспользуя хук действия admin_enqueue_scripts, вы можете сделать именно это.
<?php
do_action( 'admin_enqueue_scripts', 'admin_scripts' );
function admin_scripts() {
//...here goes the rest of your function...
}; ?>
wp_register_script
@https://developer.wordpress.org/reference/functions/wp_register_script/.wp_register_style
@https://developer.wordpress.org/reference/functions/wp_register_style/.wp_enqueue_script
@https://developer.wordpress.org/reference/functions/wp_enqueue_script/.wp_enqueue_style
@https://developer.wordpress.org/reference/functions/wp_enqueue_style/.fopen()
@https://www.php.net/manual/en/function.fopen.php.script_loader_tag
@https://developer.wordpress.org/reference/hooks/script_loader_tag/