Cara Menambahkan Custom CSS dan Javascript pada Wordpress Block Theme

mrfdn author
Rafi

Pasang script function ini untuk menambahkan custom CSS dan JS pada wordpress block theme


JagoTekno.com - Saya sedang membuat wordpress custom theme.

Theme dasarnya adalah Twenty Twenty Three. Yang mana pada theme ini merupakan implementasi dari fitur wordpress block.

Wordpress block theme ini model pengembangannya beda sekali dengan pengembangan theme wordpress secara classic yang mana semuanya dibuat menggunakan php.

Pada wordpress block theme kita menggunakan file .json untuk menulis konfigurasi sekaligus styling.

Nah, karena saya tidak familiar dengan penulisan ini, saya ingin menyematkan konfigurasi css dan js saya sendiri.

Jadi pada file function.php yang disematkannya saya hanya menambahkan baris ini :

// activate style style.css file
function mytheme_enqueue_scripts(){
  wp_enqueue_style(
    'mytheme-styles',
    get_template_directory_uri() . '/style.css',
    array(),
    wp_get_theme()->get( 'Version' )
  );
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_scripts' );

// activate stylesheet for editor
function mytheme_theme_setup() {
  add_editor_style('style.css');
}
add_action( 'after_setup_theme', 'mytheme_theme_setup');


// custom javascript code
function mytheme_enqueue_custom_js() {
    wp_enqueue_script('custom', get_stylesheet_directory_uri().'/script.js');
}
add_action('wp_enqueue_scripts', 'mytheme_enqueue_custom_js');

Kemudian saya bisa dengan gampang menuliskan custom css dan js secara terpisah pada file tersendiri (style.css dan script.js)

Sekian.

Semoga bermanfaat.

Download Folder Uploads Wordpress dari VPS Menggunakan Rsync
mrfdn author

Rafi

  • 15 year+ of Linux user.
  • 5 years+ blogger and web developer.

Jika artikel yang dibuatnya ternyata bermanfaat, support dengan cara

    Share:

Baca juga


comments powered by Disqus