CSS dan Javascript pada WordPress

Ketika mengembangkan atau menggunakan theme WordPress pasti ada CSS dan Javascript yang digunakan oleh theme WordPress tersebut. Di sisi lain bahwa WordPress kita juga sangat mungkin menggunakan plugin yang juga memiliki CSS dan Javascript sendiri.  Dengan demikian perlu suatu keteraturan agar CSS dan Javascript pada theme kita tersebut dapat berjalan harmonis dengan CSS dan Javascript yang digunakan dalam situs WordPress kita.

Supaya penambahan CSS dan Javascript ini bisa teratur dan berjalan harmonis maka kita perlu mengikuti aturan yang sudah ditetapkan oleh WordPress. Dengan mengikuti aturan WordPress ini maka situs tetap efisien dan juga mencegah isu incompatibilty.

Cara memasukkan style dan script adalah dengan membuat function yang akan melakukan enqueue. Cara yang baik memasukkan script dan style adalah melakukan enqueue di file functions.php . Untuk melakukan enqueue, kita dapat menggunakan function wp_enqueue_script() atau wp_enqueue_style() .

Contoh dalam functions.php adalah

function twentyseventeen_scripts() {
    // Add custom fonts, used in the main stylesheet.
    wp_enqueue_style( ‘twentyseventeen-fonts’, twentyseventeen_fonts_url(), array(), null );

    // Theme stylesheet.
    wp_enqueue_style( ‘twentyseventeen-style’, get_stylesheet_uri() );

    // Load the dark colorscheme.
    if ( ‘dark’ === get_theme_mod( ‘colorscheme’, ‘light’ ) || is_customize_preview() ) {
        wp_enqueue_style( ‘twentyseventeen-colors-dark’, get_theme_file_uri( ‘/assets/css/colors-dark.css’ ), array( ‘twentyseventeen-style’ ), ‘1.0’ );
    }

    // Load the Internet Explorer 9 specific stylesheet, to fix display issues in the Customizer.
    if ( is_customize_preview() ) {
        wp_enqueue_style( ‘twentyseventeen-ie9’, get_theme_file_uri( ‘/assets/css/ie9.css’ ), array( ‘twentyseventeen-style’ ), ‘1.0’ );
        wp_style_add_data( ‘twentyseventeen-ie9’, ‘conditional’, ‘IE 9’ );
    }

    // Load the Internet Explorer 8 specific stylesheet.
    wp_enqueue_style( ‘twentyseventeen-ie8’, get_theme_file_uri( ‘/assets/css/ie8.css’ ), array( ‘twentyseventeen-style’ ), ‘1.0’ );
    wp_style_add_data( ‘twentyseventeen-ie8’, ‘conditional’, ‘lt IE 9’ );

    // Load the html5 shiv.
    wp_enqueue_script( ‘html5’, get_theme_file_uri( ‘/assets/js/html5.js’ ), array(), ‘3.7.3’ );
    wp_script_add_data( ‘html5’, ‘conditional’, ‘lt IE 9’ );

    wp_enqueue_script( ‘twentyseventeen-skip-link-focus-fix’, get_theme_file_uri( ‘/assets/js/skip-link-focus-fix.js’ ), array(), ‘1.0’, true );

    $twentyseventeen_l10n = array(
        ‘quote’          => twentyseventeen_get_svg( array( ‘icon’ => ‘quote-right’ ) ),
    );

    if ( has_nav_menu( ‘top’ ) ) {
        wp_enqueue_script( ‘twentyseventeen-navigation’, get_theme_file_uri( ‘/assets/js/navigation.js’ ), array( ‘jquery’ ), ‘1.0’, true );
        $twentyseventeen_l10n[‘expand’]         = __( ‘Expand child menu’, ‘twentyseventeen’ );
        $twentyseventeen_l10n[‘collapse’]       = __( ‘Collapse child menu’, ‘twentyseventeen’ );
        $twentyseventeen_l10n[‘icon’]           = twentyseventeen_get_svg( array( ‘icon’ => ‘angle-down’, ‘fallback’ => true ) );
    }

    wp_enqueue_script( ‘twentyseventeen-global’, get_theme_file_uri( ‘/assets/js/global.js’ ), array( ‘jquery’ ), ‘1.0’, true );

    wp_enqueue_script( ‘jquery-scrollto’, get_theme_file_uri( ‘/assets/js/jquery.scrollTo.js’ ), array( ‘jquery’ ), ‘2.1.2’, true );

    wp_localize_script( ‘twentyseventeen-skip-link-focus-fix’, ‘twentyseventeenScreenReaderText’, $twentyseventeen_l10n );

    if ( is_singular() && comments_open() && get_option( ‘thread_comments’ ) ) {
        wp_enqueue_script( ‘comment-reply’ );
    }
}
add_action( ‘wp_enqueue_scripts’, ‘twentyseventeen_scripts’ );

Pada contoh di atas kita membuat function twentyseventeen_scripts() dan kemudian nanti akan dijalankan pada saat wp_enqueue_scripts() dijalankan.

Kemudian kalau kita perhatikan pada themes, script dan style tersebut diload melalui function wp_head() yang ada di header.php seperti pada potongan source code di bawah ini:

<html <?php language_attributes(); ?> class=”no-js no-svg”>
<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″>

<?php wp_head(); ?>
</head>

Informasi lebih lanjut silahkan mengunjungi:
1. https://developer.wordpress.org/themes/basics/including-css-javascript/ .
2. https://developer.wordpress.org/reference/functions/add_action/ .
3. https://developer.wordpress.org/reference/functions/wp_enqueue_script/ .
4. https://codex.wordpress.org/Plugin_API/Action_Reference/wp_enqueue_scripts .
5. https://developer.wordpress.org/reference/functions/wp_head/ .
6. https://codex.wordpress.org/Function_Reference/wp_head .

Kunjungi www.proweb.co.id untuk menambah wawasan anda.