Products
GG网络技术分享 2025-03-18 16:12 5
I am attempting to enqueue two stylesheets in Wordpress child theme.
I have written front-page.php for which I wish to apply exclusively front-page-style.css.
In addition, I have written header.php to override the parent theme\'s header. I have written style.css override the parent\'s stylesheet if it is in conflict.
For neither front-page.php nor all other pages, neither the parent or the child stylesheet is being applied.
+-- oceanwp+-- oceanwp-child-theme-master
| +-- functions.php
| +-- style.css
| +-- front-page-style.css
| +-- front-page.php
| +-- header.php
function oceanwp_child_enqueue_parent_style() {// Dynamically get version number of the parent stylesheet (lets browsers re-cache your stylesheet when you update your theme)
$theme = wp_get_theme( \'OceanWP\' );
$version = $theme->get( \'Version\' );
// Load the stylesheet
wp_enqueue_style( \'child-style\', get_stylesheet_directory_uri() . \'/style.css\', array( \'oceanwp-style\' ), $version );
}
function my_theme_enqueue_styles() {
$parent_style = \'oceanwp-style\';
// if the page is front-page.php, apply front-page-style.css
if ( is_front_page() ) {
wp_enqueue_style( $parent_style, get_template_directory_uri() . \'/style.css\' , \'/style-rtl.css\' );
wp_enqueue_style( \'child-style\',
get_stylesheet_directory_uri() . \'/front-page-style.css\',
array( $parent_style ),
wp_get_theme(\'\')->get(\'Version\')
);
}
// if the page is not front-page.php, apply style.css (CHILD) first and style.css (PARENT) second
if (!is_front_page() ) {
wp_enqueue_style( $parent_style, get_template_directory_uri() . \'/style.css\' , \'/style-rtl.css\' );
wp_enqueue_style( \'child-style\',
get_stylesheet_directory_uri() . \'/style.css\',
array( $parent_style ),
wp_get_theme(\'\')->get(\'Version\')
);
}
}
add_action( \'wp_enqueue_scripts\', \'my_theme_enqueue_styles\', \'my_custom_scripts\' );
?>
You can use this function. Insert this code in functions.php
add_action( \'wp_enqueue_scripts\', \'styles_custom\');function styles_custom() {
global $post;
$post_slug=$post->post_name;
if ( is_front_page() ) { //only homepage
wp_enqueue_style( $parent_style, get_template_directory_uri() . \'/style.css\' , \'/style-home.css\' );
}
if (!is_front_page() ) { //all page, not homepage
wp_enqueue_style( $parent_style, get_template_directory_uri() . \'/style.css\' , \'/style-all.css\' );
}
if($post_slug == \'contact\'){ //only page contact
wp_enqueue_style( $parent_style, get_template_directory_uri() . \'/style.css\' , \'/style-contact.css\' );
}
if($post_slug == \'[.....]\'){
wp_enqueue_style( $parent_style, get_template_directory_uri() . \'/style.css\' , \'/style.css\' );
}
}
You can use post_slug, (e.g. Contact Us -> contact-us)
###
You need to add a do_action() hook for each of your function.
function oceanwp_child_enqueue_parent_style() {$theme = wp_get_theme( \'OceanWP\' );
$version = $theme->get( \'Version\' );
wp_enqueue_style( \'child-style\', get_stylesheet_directory_uri() . \'/style.css\',array( \'oceanwp-style\' ), $version );
}
// ADD THIS
add_action( \'wp_enqueue_scripts\', \'oceanwp_child_enqueue_parent_style\');
function my_theme_enqueue_styles() {
$parent_style = \'oceanwp-style\';
if ( is_front_page() ) {
wp_enqueue_style( $parent_style, get_template_directory_uri() . \'/style.css\' , \'/style-rtl.css\' );
wp_enqueue_style( \'child-style\',
get_stylesheet_directory_uri() . \'/front-page-style.css\',
array( $parent_style ),
wp_get_theme(\'\')->get(\'Version\')
);
}else{
wp_enqueue_style( $parent_style, get_template_directory_uri() . \'/style.css\' , \'/style-rtl.css\' );
wp_enqueue_style( \'child-style\',
get_stylesheet_directory_uri() . \'/style.css\',
array( $parent_style ),
wp_get_theme(\'\')->get(\'Version\'));
}
}
// UPDATE THIS
add_action( \'wp_enqueue_scripts\', \'my_theme_enqueue_styles\');
###
simply you need to assign the style file to a page template in wordpress you can check template by it\'s name using
<?php if(is_page_template( <your template name> ) ){} ?>inside functions.php you can use this example
function register_foundation_style() {if ( is_page_template( <tamplate file name> ) ) {
wp_enqueue_style( \'foundation\', get_stylesheet_directory_uri() . \'/foundation/css/foundation.min.css\' );
}
}
add_action( \'wp_enqueue_scripts\', \'register_foundation_style\' );
?>
Solution by https://dobsondev.com/2015/06/05/conditionally-enqueue-stylesheet-into-wordpress-for-certain-page/
Demand feedback