Посещая наш сайт, вы соглашаетесь с нашей политикой конфиденциальности в отношении файлов cookie, статистики отслеживания и т. д.

Главная » Вопросы и ответы » Wordpress

Модификация заголовка дочерней темы

На чтение 11 мин Опубликовано
Содержание
  1. Вопрос или проблема
  2. Ответ или решение
  3. 1. Создание дочерней темы
  4. 2. Структура папок и файлов
  5. 3. Убедитесь, что jQuery доступен
  6. 4. Проверка работы
  7. Заключение

Вопрос или проблема

Я новичок.

Я скопировал header.php из родительской темы, добавил несколько фрагментов кода, и это работает. Тем не менее, я хочу иметь возможность добавлять те же фрагменты либо с помощью плагина, либо через functions.php, чтобы, когда/если тема будет обновлена, не нужно было все переделывать. Я пробовал много вещей, но ни одна из них не работает. Интересно, может быть, проблема в том, где фрагменты размещаются при использовании плагина, или HTML элемент, который я пытаюсь изменить, должен быть записан по-другому… Я совершенно потерян.

Я добавил это внутри элемента head:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="wp-content/themes/block-lite_child/js/jquery.backstretch.js"></script>

а затем это для запуска скрипта:

    <script>$(".wp-custom-header").backstretch([  // Укажите ваш HTML элемент
                    '/wp-content/themes/block-lite_child/images/01.jpg',  // Добавьте свои изображения
                    '/wp-content/themes/block-lite_child/images/02.jpg',
                    '/wp-content/themes/block-lite_child/images/03.jpg',
                    '/wp-content/themes/block-lite_child/images/04.jpg',
                    '/wp-content/themes/block-lite_child/images/05.jpg',
                ],{
                duration:4000, // Время между переходами
                fade:1000, // Эффект перехода
                });</script>

Наконец, вот полный header.php 

<?php
/**
 * Заголовок для нашей темы.
 * Отображает все <head> и все до <div id="wrap">
 *
 * @package Block Lite
 * @since Block Lite 1.0
 */

?><!DOCTYPE html>

<html class="no-js" <?php language_attributes(); ?>>

<head>

    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="profile" href="http://gmpg.org/xfn/11">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="wp-content/themes/block-lite_child/js/jquery.backstretch.js"></script>

    <?php wp_head(); ?>

</head>

<body <?php body_class(); ?>>

<!-- НАЧАЛО #wrapper -->
<div id="wrapper">

    <!-- НАЧАЛО #header -->
    <header id="header">

        <!-- НАЧАЛО #nav-bar -->
        <div id="nav-bar">

        <?php if ( is_front_page() ) { ?>
            <h1 class="site-title">
                <a href="<?php echo esc_url( home_url( "https://wordpress.stackexchange.com/" ) ); ?>" rel="home"><?php echo wp_kses_post( get_bloginfo( 'name' ) ); ?></a>
            </h1>
        <?php } else { ?>
            <p class="site-title">
                <a href="<?php echo esc_url( home_url( "https://wordpress.stackexchange.com/" ) ); ?>" rel="home"><?php echo wp_kses_post( get_bloginfo( 'name' ) ); ?></a>
            </p>
        <?php } ?>

        <?php if ( has_nav_menu( 'main-menu' ) ) { ?>

            <!-- НАЧАЛО #navigation -->
            <nav id="navigation" class="navigation-main" role="navigation" aria-label="<?php esc_html_e( 'Основная навигация', 'block-lite' ); ?>">

                <?php
                wp_nav_menu( array(
                    'theme_location' => 'main-menu',
                    'title_li'       => '',
                    'depth'          => 4,
                    'fallback_cb'    => 'wp_page_menu',
                    'container'      => false,
                    'menu_class'     => 'menu',
                    'walker'         => new Aria_Walker_Nav_Menu(),
                    'items_wrap'     => '<ul id="%1$s" class="%2$s" role="menubar">%3$s</ul>',
                    'link_before'    => '<span>',
                    'link_after'     => '</span>',
                ) );
                ?>

            <!-- КОНЕЦ #navigation -->
            </nav>

            <button type="button" id="menu-toggle" class="menu-toggle" href="#sidr">
                <svg class="icon-menu-open" version="1.1" id="icon-open" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                    width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
                    <rect y="2" width="24" height="2"/>
                    <rect y="11" width="24" height="2"/>
                    <rect y="20" width="24" height="2"/>
                </svg>
                <svg class="icon-menu-close" version="1.1" id="icon-close" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
                    <rect x="0" y="11" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 12 28.9706)" width="24" height="2"/>
                    <rect x="0" y="11" transform="matrix(-0.7071 0.7071 -0.7071 -0.7071 28.9706 12)" width="24" height="2"/>
                </svg>
            </button>

        <?php } ?>

        <!-- КОНЕЦ #nav-bar -->
        </div>

        <?php if ( has_custom_header() || has_custom_logo() ) { ?>

            <?php if ( is_home() || is_archive() || is_search() || is_attachment() ) { ?>

            <!-- НАЧАЛО #custom-header -->
            <div id="custom-header">

                <!-- НАЧАЛО #masthead-->
                <div id="masthead">

                    <div class="header-content">

                        <?php the_custom_logo(); ?>

                        <?php if ( is_front_page() && is_home() ) { ?>
                            <h2 class="site-description"><?php echo html_entity_decode( get_bloginfo( 'description' ) ); ?></h2>
                        <?php } else { ?>
                            <p class="site-description"><?php echo html_entity_decode( get_bloginfo( 'description' ) ); ?></p>
                        <?php } ?>

                        <?php if ( have_posts() && is_category() ) { ?>
                            <h1 class="text-center"><?php the_archive_title(); ?></h1>
                            <?php the_archive_description( '<p class="archive-description">', '</p>' ); ?>
                        <?php } ?>

                    </div>

                <!-- КОНЕЦ #masthead-->
                </div>

                <?php if ( is_front_page() && is_home() ) { ?>
                    <a href="#blog-posts" class="scroll-down scroll"><i class="fa fa-angle-down" aria-hidden="true"></i></a>
                <?php } ?>

                <?php the_custom_header_markup(); ?>

                <script>$(".wp-custom-header").backstretch([  // Укажите ваш HTML элемент
                    '/wp-content/themes/block-lite_child/images/01.jpg',  // Добавьте свои изображения
                    '/wp-content/themes/block-lite_child/images/02.jpg',
                    '/wp-content/themes/block-lite_child/images/03.jpg',
                    '/wp-content/themes/block-lite_child/images/04.jpg',
                    '/wp-content/themes/block-lite_child/images/05.jpg',
                ],{
                duration:4000, // Время между переходами
                fade:1000, // Эффект перехода
                });</script>                

            <!-- КОНЕЦ #custom-header -->
            </div>

            <?php } ?>

        <?php } ?>

    <!-- КОНЕЦ #header -->
    </header>

    <!-- НАЧАЛО .container -->
    <main class="container" role="main">

Хорошей практикой является использование:

  • правильного метода WordPress с помощью wp_enqueue_scripts для добавления ваших скриптов и стилей;
  • хука wp_head для добавления дополнительного кода в ваш заголовок. Читать далее.

Вы можете использовать и вставить это в ваш functions.php. Дайте мне знать, если это то, что вы искали.

Я скопировал header.php из родительской темы, добавил несколько фрагментов кода, и это работает. Тем не менее, я хочу иметь возможность добавлять те же фрагменты либо с помощью плагина, либо через functions.php, чтобы, когда/если тема будет обновлена, не нужно было все переделывать.

Если вы скопировали header.php в свою дочернюю тему и изменили его в дочерней теме, то вы не потеряете никакие изменения при обновлении родительской темы. Это вся суть добавления дочерней темы изначально.

Также изменения, внесенные в functions.php родительской темы, будут потеряны, если родительская тема будет обновлена. Поэтому вам нужно использовать дочернюю тему или плагин, независимо от того, как именно изменения вносятся.

Что касается вашей конкретной проблемы, добавление скрипта не должно делаться путем редактирования header.php. Правильный способ загрузки скриптов в WordPress — через functions.php с wp_enqueue_script(). Кроме того, вам не следует загружать свою собственную версию jQuery. Загружая свой скрипт с помощью wp_enqueue_scripts(), вы можете сообщить WordPress, что вам нужен jQuery.

Таким образом, что вам нужно сделать, это создать дочернюю тему, без header.php, но с файлом functions.php. Внутри этого файла functions.php у вас должно быть:

/**
 * Создайте функцию для загрузки ваших скриптов.
 */
function wpse_344148_custom_scripts() {
    /**
     * Подключите ваш скрипт.
     */
    wp_enqueue_script(
        'jquery-backstretch', // Название скрипта.
        get_theme_file_uri( 'js/jquery.backstretch.js' ), // Используйте get_theme_file_uri, чтобы получить полный URL до скрипта.
        [ 'jquery' ], // Ваш скрипт зависит от jQuery.
        '2.1.17', // Версия скрипта.
        true // Загружать в нижнем колонтитуле.
    );

    /**
     * Вам нужно получить правильные URL для изображений с помощью get_theme_file_uri()
     * и передать их в скрипт. Используйте wp_localize_script() для этого.
     */
    wp_localize_script(
        'jquery-backstretch', // Название оригинального скрипта.
        'wpse344148', // Название JS переменной, в которой будет ваши данные.
        [ // Данные для передачи.
            get_theme_file_uri( 'images/01.jpg' ),
            get_theme_file_uri( 'images/02.jpg' ),
            get_theme_file_uri( 'images/03.jpg' ),
            get_theme_file_uri( 'images/04.jpg' ),
            get_theme_file_uri( 'images/05.jpg' ),
        ]
    );

    /**
     * Затем используйте wp_add_inline_script(), чтобы добавить часть инлайнового скрипта. Используйте
     * jQuery вместо $ в WordPress, и используйте wpse344148 для получения массива изображений.
     */
    wp_add_inline_script(
        'jquery-backstretch',  // Название оригинального скрипта.
        'jQuery(".wp-custom-header").backstretch(
            wpse344148,
            {
                duration:4000,
                fade:1000,
            }
        );'
    );
}
/**
 * Сообщите WordPress, когда выполнять вашу функцию. Если ваша функция загружает скрипты или
 * стили, вам нужно использовать wp_enqueue_scripts.
 */
add_action( 'wp_enqueue_scripts', 'wpse_344148_backstretch' );

Ответ или решение

Для того чтобы корректно модифицировать заголовок (header) темы WordPress, не теряя изменения при обновлении родительской темы, лучше следовать стандартам WordPress и использовать файл functions.php. Это позволяет избежать редактирования файла header.php в дочерней теме, так как изменения внесенные в этот файл могут быть потеряны, если вы решите обновить родительскую тему.

Вот пошаговый процесс, как правильно реализовать ваши изменения:

1. Создание дочерней темы

Если у вас еще нет дочерней темы, создайте ее. В корне вашей темы создайте папку, например block-lite-child, и добавьте туда файл style.css и functions.php.

style.css:

/*
 Theme Name:   Block Lite Child
 Template:     block-lite
*/

functions.php:

<?php
/**
 * Функции темы дочерней темы.
 */

function block_lite_child_scripts() {
    // Подключаем jQuery (уже подключен в WordPress, поэтому мы не можем заново загрузить).
    // Если вы хотите использовать собственную версию, вы можете отключить ее загрузку.

    // Подключаем ваш скрипт backstretch
    wp_enqueue_script(
        'jquery-backstretch',
        get_stylesheet_directory_uri() . '/js/jquery.backstretch.js',
        array('jquery'),
        null,
        true // Загрузить в подвале
    );

    // Локализуем скрипт для передачи путей к изображениям
    wp_localize_script(
        'jquery-backstretch',
        'bgImages',
        array(
            get_stylesheet_directory_uri() . '/images/01.jpg',
            get_stylesheet_directory_uri() . '/images/02.jpg',
            get_stylesheet_directory_uri() . '/images/03.jpg',
            get_stylesheet_directory_uri() . '/images/04.jpg',
            get_stylesheet_directory_uri() . '/images/05.jpg'
        )
    );

    // Добавляем встроенный скрипт, который использует jQuery
    wp_add_inline_script(
        'jquery-backstretch',
        'jQuery(".wp-custom-header").backstretch(bgImages, {
            duration: 4000,
            fade: 1000
        });'
    );
}
add_action('wp_enqueue_scripts', 'block_lite_child_scripts');
?>

2. Структура папок и файлов

Убедитесь, что у вас есть следующая структура папок:

block-lite-child/
├── functions.php
├── style.css
└── js/
    └── jquery.backstretch.js (Поместите туда ваш JS файл)
└── images/
    ├── 01.jpg
    ├── 02.jpg
    ├── 03.jpg
    ├── 04.jpg
    └── 05.jpg

3. Убедитесь, что jQuery доступен

WordPress по умолчанию подключает jQuery. Убедитесь, что ваш скрипт jquery.backstretch.js не вызывает другие библиотеки, которые могут конфликтовать с jQuery.

4. Проверка работы

После выполнения всех действий, зайдите на ваш сайт и проверьте, стал ли работать слайдер на вашем заголовке. Откройте консоль браузера (F12) и поищите возможные ошибки. Если скрипты еще не работают, возможно, вам следует дополнительно проверить класс элемента .wp-custom-header, чтобы убедиться, что он имеет правильное название и доступен на странице.

Заключение

Использование функции wp_enqueue_scripts в файле functions.php позволяет безопасно добавлять скрипты и стили в вашу тему, избегая потери изменений во время обновления. Таким образом, вы можете сохранять все ваши индивидуальные настройки в дочерней теме и просто обновлять родительскую по мере необходимости.

child-theme headers javascript php
Оцените материал
Добавить комментарий

Капча загружается...

© 2024 IZ6.RU
*В материалах сайта упоминаются социальные сети Фейсбук / Инстаграм, принадлежащие Meta Platforms Inc., деятельность которой запрещена на территории РФ в части реализации данных социальных сетей на основании осуществления ею экстремистской деятельности