将 Css、JS 插件和自定义脚本文件加载到 wordpress

Question

Been having a hard time getting this to work... I'm trying to use animation for some transitions on a website I'm working on but when I include the files the average way it breaks the theme... A lot of reading has brought me knowing I need to use functions.php to enqueue the scripts and CSS but I tried and no dice.

I am using a child theme

The CSS I need to load is located in a folder my child-theme's directory called "css", the custom js and plugin js I need to load is located in a folder in my child-themes directory called "js".

1-The CSS needs to be in the header

2-jQuery needs to load

3-The plugin then needs to load

4-My scripts.js file needs to load, it manipulates the plugin's settings.

If you still don't understand this then basically I want to use http://git.blivesta.com/animsition/ within a wordpress child-theme. Thanks.

Answer 1

Try reading https://codex.wordpress.org/Child_Themes , it will help you a lot.

Regarding your question, you have to place the following code in your child's theme functions.php file:

function animsition_enqueue_styles_and_styles() {

    $parent_style = 'parent-style';

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );

    wp_enqueue_style( 'child-style', 
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style )
    );

    wp_enqueue_style( 'animsition-style', get_stylesheet_directory_uri() . '/css/animsition.min.css' );

    wp_enqueue_script( 'animsition-js', get_stylesheet_directory_uri() . '/js/jquery.animsition.min.js',  array('jquery'), '20150628', false );     

    wp_enqueue_script( 'custom-animsition-js', get_stylesheet_directory_uri() . '/js/scripts.js',  array('animsition-js','jquery'), '20150628', false ); 

}
add_action( 'wp_enqueue_scripts', 'animsition_enqueue_styles_and_styles' );