我是个傻瓜。
我已经复制了标题。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">
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\' );
