修改子主题的标题

时间:2019-08-01 作者:David Esteban

我是个傻瓜。

我已经复制了标题。php从父主题开始,我添加了一些代码片段和有用的东西。然而,我希望能够使用插件或通过函数添加这些相同的代码片段。因此,当/如果主题更新,我不需要重做任何事情。我试过很多东西,但都不管用。我想知道问题是使用插件将代码片段放在哪里,还是我试图修改的HTML元素应该以不同的方式编写。。。我完全迷路了。

我在head元素中添加了以下内容:

    <script src="//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([  // Target your HTML element
                    \'/wp-content/themes/block-lite_child/images/01.jpg\',  // Add in your images
                    \'/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, // Time between transitions
                fade:1000, // Transition effect
                });</script>
最后,这里是完整的标题。php

<?php
/**
 * The Header for our theme.
 * Displays all of the <head> section and everything up till <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="//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(); ?>>

<!-- BEGIN #wrapper -->
<div id="wrapper">

    <!-- BEGIN #header -->
    <header id="header">

        <!-- BEGIN #nav-bar -->
        <div id="nav-bar">

        <?php if ( is_front_page() ) { ?>
            <h1 class="site-title">
                <a href="<?php echo esc_url( home_url( \'/\' ) ); ?>" 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( \'/\' ) ); ?>" rel="home"><?php echo wp_kses_post( get_bloginfo( \'name\' ) ); ?></a>
            </p>
        <?php } ?>

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

            <!-- BEGIN #navigation -->
            <nav id="navigation" class="navigation-main" role="navigation" aria-label="<?php esc_html_e( \'Primary Navigation\', \'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>\',
                ) );
                ?>

            <!-- END #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 } ?>

        <!-- END #nav-bar -->
        </div>

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

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

            <!-- BEGIN #custom-header -->
            <div id="custom-header">

                <!-- BEGIN #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>

                <!-- END #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([  // Target your HTML element
                    \'/wp-content/themes/block-lite_child/images/01.jpg\',  // Add in your images
                    \'/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, // Time between transitions
                fade:1000, // Transition effect
                });</script>                

            <!-- END #custom-header -->
            </div>

            <?php } ?>

        <?php } ?>

    <!-- END #header -->
    </header>

    <!-- BEGIN .container -->
    <main class="container" role="main">

2 个回复
SO网友:middlelady

最好使用:

proper Wordpress way 属于wp_enqueue_scripts 添加脚本和样式

  • wp_head 钩子可以在头部添加更多代码。Read more.
  • 您可以使用functions.php. 如果这是你想要的,请告诉我。

    SO网友:Jacob Peattie

    我已经复制了标题。php从父主题开始,我添加了一些代码片段和有用的东西。然而,我希望能够使用插件或通过函数添加这些相同的代码片段。因此,当/如果主题更新,我不需要重做任何事情。

    如果复制了标题。php到您的子主题,并在子主题中对其进行编辑,如果父主题更新,则不会丢失任何更改。这就是首先添加儿童主题的要点。

    此外,对父主题的功能所做的更改。如果父主题被更新,php也将丢失。所以你需要使用一个子主题或插件,而不管更改是如何进行的。

    至于您的具体问题,添加脚本不应该通过编辑标题来完成。php。在WordPress中加载脚本的正确方法是通过函数。php与wp_enqueue_script(). 此外,您不应该加载自己版本的jQuery。加载脚本时wp_enqueue_scripts() 您可以告诉WordPress您需要jQuery。

    所以你需要做的是创建一个子主题,没有标题。php,但带有函数。php文件。内部功能。您应该具有的php文件:

    /**
     * Create a function to load your scripts.
     */
    function wpse_344148_custom_scripts() {
        /**
         * Enqueue your script.
         */
        wp_enqueue_script(
            \'jquery-backstretch\', // The name of the script.
            get_theme_file_uri( \'js/jquery.backstretch.js\' ), // Use get_theme_file_uri to get the full URL to the script.
            [ \'jquery\' ], // Your script depends on jQuery.
            \'2.1.17\', // The version of the script.
            true // Load it in the footer.
        );
    
        /**
         * You need to get the proper URLs to the images using get_theme_file_uri()
         * and pass them to the script. Use wp_localize_script() for this.
         */
        wp_localize_script(
            \'jquery-backstretch\', // The name of the original script.
            \'wpse344148\', // Name of the JS variable to put your data in.
            [ // The data to pass.
                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\' ),
            ]
        );
    
        /**
         * Then use wp_add_inline_script() to add the inline script portion. Use
         * jQuery instead of $ in WordPress, and use wpse344148 from wp_localize_script()
         * to get the array of images.
         */
        wp_add_inline_script(
            \'jquery-backstretch\',  // The name of the original script.
            \'jQuery(".wp-custom-header").backstretch(
                wpse344148,
                {
                    duration:4000,
                    fade:1000,
                }
            );\'
        );
    }
    /**
     * Tell WordPress when to run your function. If you function loads scripts or
     * styles you need to use wp_enqueue_scripts.
     */
    add_action( \'wp_enqueue_scripts\', \'wpse_344148_backstretch\' );