Cara Memasukan CSS & JS di WordPress dan Apa itu functions.php – Themes WordPress Sendiri (Pelajaran 3)

Pembahasan kali ini kita akan memabahas apa itu functions.php dan bagaimana cara menambahkan CSS & JS di dalamnya.

Functions.php sendiri, seperti namanya adalah file yang berguna untuk memanggil fungsi atau membuat fungsi baru (custom functions), bahkan meload file seperti css & js. Dan file ini, tugasnya mirip dengan plugins, tetapi sudah sepaket dengan themes. Oke langsung aja tanpa basa-basi kita mulai.

Caranya seperti pada pembahasan sebelumnya, buat terlebih dahulu file functions.php dan file sudah siap digunakan.

Untuk pelajaran kali ini, kita akan belajar bagaimana meload file CSS dan Javascript. Hal ini juga, untuk memastikan apakah file functions.php yang kita buat sudah berfungsi.

Load file CSS

Ada dua metode dalam memanggil file CSS. Diantaranya adalah memanggil file style.css dan file css custom buatan kamu.

Default / Style.css

Buka file functions.php, lalu masukan code berikut:

<?php 
function add_theme_scripts() {
wp_enqueue_style( 'style', get_stylesheet_uri() );
}

add_action( 'wp_enqueue_scripts', 'add_theme_scripts' ); 
?>

Penjelasan:

add_theme_scripts = nama fungsi, bebas mau kalian rubah seperti apa.

wp_enqueue_style = untuk meload file CSS

wp_enqueue_style( 'style', get_stylesheet_uri() );= meload file CSS default (style.css).

add_action( 'wp_enqueue_scripts', 'add_theme_scripts' ); = untuk memanggil fungsi style yang kita buat. sedangkan add_theme_scripts harus kita sesuaikan dengan nama fungsi yang sebelumnya kita buat.

Untuk memastikan apakah scriptsnya berhasil silahkan pergi ke file style.css. Lalu masukan code berikut (atau bebas):

h1 {color: red}

Jika sudah selesai, pastikan semua sudah disave dan cek website wordpress kalian apakah sudah berhasil. Contoh hasil:

Hasil CSS yang diload melalui functions.php

Custom CSS

<?php 
function add_theme_scripts() {
wp_enqueue_style( 'namastyle', get_template_directory_uri() . '/css/styleganteng.css',array(),'1.1','all');
}

add_action( 'wp_enqueue_scripts', 'add_theme_scripts' ); 
?>

Penjelasan:

namestyle = merupakan parameter nama stylesheet CSSnya (bebas dirubah)

get_template_directory_uri() . '/css/styleganteng.css' = lokasi file .css-nya. Yang diganti cukup /css/styleganten.css, tergantung kalian letak filenya dimana dan masih dalam satu folder themes.

1.1 = adalah versi berapa CSS yang kamu buat. (Tidak perlu dibuat juga tidak mengapa).

all = untuk menentukan style ini dimuat di tampilan layar apa. Parameternya ‘all’, ‘screen’, ‘print’ atau ‘handheld.’ (Tidak perlu disijuga tidak mengapa.

Untuk yang mau meringkas dan menjadikan fungsinya menjadi versi lite (gamau ribet):

wp_enqueue_style( 'slider', get_template_directory_uri() . '/css/styleganteng.css');

Untuk lihat hasilnya juga sama seperti yang diatas adalah mencoba file css yang telah kalian load di file functions.php.

Load file Javascripts

Untuk me-load javascripts ada sedikit code yang agak berbeda. Jika CSS wp_enqueue_style, maka untuk memanggil file Javascripts fungsinya adalah wp_enqueue_script , dan codenya seperti berikut ini:

<?php 
function add_theme_scripts() {
wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);
}

add_action( 'wp_enqueue_scripts', 'add_theme_scripts' ); 
?>

Penjelasan sama seperti yang bagian CSS sebenarnya, cuman ada beberapa yang berbeda terutama di array ('jqueary') harus diisi, kalau tidak file js-nya tidak bisa digunakan. Dan untuk true berguna meletakan file javascriptnya di bagian bawah (footer) struktur website (dan ini yang direkomendasikan). Jika di rubah false, file akan berada di bagian atas (header) (Tidak direkomendasikan, karena beberapa scripts javascript tidak berfungsi jika diletak dibagian header).

Apakah fungsi load CSS & Javascripts di gabung?

Jawaban: Bisa. Contoh scripts functions yang digabung.

<?php 
function add_theme_scripts() {
wp_enqueue_style( 'style', get_stylesheet_uri() );
 
wp_enqueue_style( 'slider', get_template_directory_uri() . '/css/slider.css', array(), '1.1', 'all');
 
wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);

// Fungsi untuk memanggil fitur Comment
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
 wp_enqueue_script( 'comment-reply' );
}
}
add_action( 'wp_enqueue_scripts', 'add_theme_scripts' ); 
?>

Nah segitu dulu pelajaran kita. Dan sebenarnya untuk functions.php masih banyak fitur yang bisa kita buat, tetapi pembahasan akan kita bahas di pertemuan selanjutnya. Bagi, kalian yang belum baca pelajaran sebelumnya, bisa klik link berikut ini.

Referensi: https://developer.wordpress.org/themes/basics/including-css-javascript/