admin管理员组文章数量:1122833
I'm a noob.
I have copied the header.php from the parent theme, I have added some snippets and things work. However, I would like to be able to add those same snippets either using a plugin or via functions.php so when/if the theme is updated, I don't need to redo everything. I've tried many things but none of them work. I wonder if the problem is where the snippets are placed by using a plugin or that the HTML element that I'm trying to modify should be written in a different way... I'm quite lost.
I have added these inside the head element:
<script src="//ajax.googleapis/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="wp-content/themes/block-lite_child/js/jquery.backstretch.js"></script>
and then this to run the 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>
Finally, here is the full header.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="">
<script src="//ajax.googleapis/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="" xmlns: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="" xmlns: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">
I'm a noob.
I have copied the header.php from the parent theme, I have added some snippets and things work. However, I would like to be able to add those same snippets either using a plugin or via functions.php so when/if the theme is updated, I don't need to redo everything. I've tried many things but none of them work. I wonder if the problem is where the snippets are placed by using a plugin or that the HTML element that I'm trying to modify should be written in a different way... I'm quite lost.
I have added these inside the head element:
<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>
and then this to run the 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>
Finally, here is the full header.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 Answers
Reset to default 0It's good practice to use:
- the proper Wordpress way of
wp_enqueue_scriptsto add your scripts and styles; - the
wp_headhook to add more code into your head section. Read more.
Either you can use and place into your functions.php. Let me know if it's what you were looking for.
I have copied the header.php from the parent theme, I have added some snippets and things work. However, I would like to be able to add those same snippets either using a plugin or via functions.php so when/if the theme is updated, I don't need to redo everything.
If you copied header.php to your child theme, and edited it in the child theme, then you won't lose any of the changes if the parent theme updates. That is the whole point of adding a child theme in the first place.
Also, changes made to a parent theme's functions.php will also be lost if the parent theme is updated. So you need to use a child theme or plugin regardless of how exactly the changes are made.
As to your specific problem, adding a script should not be done by editing header.php. The proper way to load scripts in WordPress is via functions.php with wp_enqueue_script(). Also, you should not be loading your own version of jQuery. When loading your script with wp_enqueue_scripts() you can tell WordPress that you need jQuery.
So what you need to do is create a child theme, without header.php, but with a functions.php file. Inside that functions.php file you should have:
/**
* 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' );
本文标签： phpModifying child theme39s header
版权声明：本文标题：php - Modifying child theme's header 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1736281889a1926466.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论