在Wordpress上为每个页面自定义CSS和JS

Question

I'm doing a website using wordpress. It's my first project using it. I'm looking for a way to create custom css for each page of my website because my pages are extremely different. I don't want to put all in the styles.css of my theme. I know I can do something like:

function initScriptsAndStyles()
{
    if ( is_post( 'home' ) )
    {
        wp_enqueue_style( 'style', get_template_directory_uri() . '/css/home.css');
    }
}
add_action( 'wp_enqueue_scripts', 'initScriptsAndStyles' );

But I don't want to do this for each post also, you will always be worried that no body changes the name or something... I found people that says it can be inserted dynamically, but i don't know the way to do that, didn't found any tutorial that explain step by step.

Anyone can help me?

Cheers!

Answer 1

You can create different headers, different footers and totally different style and JS files and include them just wherever you need it. You can create templates for each page if they look different.

In your theme directory, create an empty php page , page-home.php.

In the beginning of the page, write the following:

<?php
/**
 * Template Name: My Custom Home Pgae
 */

 get_header();
?>

Then write all your code in HTML / PHP

In the end, include footer like this:

<?php get_footer(); ?>

Now go to your wordpress dashboard and click on Pages. Add a new page and on the right hand side, (near the publish button), you will see an option to assign page a template. You will see "Test" there because you assigned that template name to your page-home.php

Assign you page that template and your page will reflect the code you assigned.

For CSS, you can even get rid of entire style.css

You can create a file or folder to keep your css files in your theme folder and include it in the header.php file that comes with wordpress.