Nhúng CSS/JS/Fonts vào theme WordPress

Ở bài trước chúng ta đã tạo một thành công một Theme WordPress. Trong bài viết này, chúng ta sẽ xây dựng layout cho theme bằng cách sử dụng template ở bài viết đầu tiên.

Nhúng CSS/JS/Fonts Vào Theme WordPress

Một website thông thường được kết hợp từ các file HTML/CSS/JS, Theme WordPress củng vậy. Công việc của chúng ta là chuyển template thành Theme WordPress.

Sau khi download template về, giải nén ra chúng ta copy 3 folder css, js, img vào theme, như vậy cấu cúc theme sẽ như thế này:

Nhúng CSS/JS

WordPress hỗ trợ việc quản lý CSS/JS thông qua hook wp_enqueue_scripts và hai hàm wp_enqueue_style() và wp_enqueue_script().

Nhúng CSS bằng hàm wp_enqueue_style()

Đây là hàm dùng để đăng ký Stylesheet, đầy đủ như sau:

wp_enqueue_style( string $handle, string $src = '', string[] $deps = array(), string|bool|null $ver = false, string $media = 'all' )

Với:

$handle:Tên của stylesheet, không được trùng.
$src: Full URL của file stylesheet.
$deps: Mảng chứa tên stylesheet phụ thuộc. Khi load WordPress sẽ đối được phụ thuộc trước. Mặc định là array()
$ver: Phiên bản của stylesheet, được thêm vào với mục đích chặn cache. Mặc định lấy theo phiên bản của WordPress.
$media: Media của stylesheet (Ví dụ: ‘all’, ‘print’, ‘screen’). Mặc định là 'all'

Bạn có thể tham khảo thêm tại đây.

Nhúng JS bằng hàm wp_enqueue_script()

Đây là hàm dùng để đăng ký Scripts, đầy đủ như sau:

wp_enqueue_script( string $handle, string $src = '', string[] $deps = array(), string|bool|null $ver = false, bool $in_footer = false )

Với:

$handle:Tên của script, không được trùng.
$src: Full URL của file script.
$deps: Mảng chứa tên script phụ thuộc. Khi load WordPress sẽ đối được phụ thuộc trước. Mặc định là array()
$ver: Phiên bản của script, được thêm vào với mục đích chặn cache. Mặc định lấy theo phiên bản của WordPress.
$in_footer: Nếu giá trị là true scripts sẽ được nhúng trước thẻ đóng body, còn nếu là false sẽ được nhúng trong thẻ head

Bạn có thể tham khảo thêm tại đây.

Nhúng CSS/JS/Fonts vào theme WordPress

Mở file index.html trong template mà chúng ta giải nén khi nãy, để xem cấu trúc và thứ tự các file.
Đối với CSS:

<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/slippry.css">
<link rel="stylesheet" type="text/css" href="css/fonts.css">
<link rel="stylesheet" type="text/css" href="css/style.css">

Đối với JS:

<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/slippry.js"></script>
<script src="js/main.js"></script>

Chuyển đổi sang WordPress, chúng ta sẽ viết trong file functions.php.
Đối với CSS, trong template có sử dụng Google Fonts nên chúng ta sẽ code như sau:

// Nhúng CSS, Fonts
add_action( 'wp_enqueue_scripts', 'my_styles' );
function my_styles() {
    // CSS
    wp_enqueue_style( 'bootstrap', get_theme_file_uri( '/css/bootstrap.css' ), array(), '3.3.5', 'all' );
    wp_enqueue_style( 'slippry', get_theme_file_uri( '/css/slippry.css' ), array(), '1.3.1', 'all' );
    wp_enqueue_style( 'fonts', get_theme_file_uri( '/css/slippry.css' ), array(), wp_get_theme()->get( 'Version' ), 'all' );
    wp_enqueue_style( 'style', get_theme_file_uri( '/css/style.css' ), array(), wp_get_theme()->get( 'Version' ), 'all' );
 
    //Google fonts
    wp_enqueue_style( 'source-sans-font', 'https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,200i,300,300i,400,400i,600,600i,700,700i,900,900i', array(), wp_get_theme()->get( 'Version' ), 'all' );
    wp_enqueue_style( 'playfair-display-font', 'https://fonts.googleapis.com/css?family=Playfair+Display:400,400italic,700,700italic', array(), wp_get_theme()->get( 'Version' ), 'all' );
    wp_enqueue_style( 'darck-script-font', 'https://fonts.googleapis.com/css?family=Marck+Script&subset=cyrillic,latin-ext', array(), wp_get_theme()->get( 'Version' ), 'all' );
}

Đối với JS, chúng ta không sử dụng Jquery của template mà thay vào đó là Jquery của WordPress và bổ sung thêm Comment reply JS:

// Nhúng JavaScript
add_action( 'wp_enqueue_scripts', 'my_scripts' );
function my_scripts() {
    // WordPress jquery
    wp_enqueue_script( 'jquery' );
 
    // JS comment, có tác dụng ở phần bình luận
    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }
 
    wp_enqueue_script( 'slippry', get_theme_file_uri( '/js/slippry.js' ), array( 'jquery' ), '1.3.1', true );
    wp_enqueue_script( 'main', get_theme_file_uri( '/js/main.js' ), array( 'jquery' ), wp_get_theme()->get( 'Version' ), true );
}

Hiển thị ra giao diện

Sau khi đã nhúng CSS/JS/Fonts vào theme, tiếp theo chúng ta sẽ gọi vào các template vào hiển thị lên giao diện.

header.php

Hàm wp_head() sẽ chạy action wp_head. WordPress core sử dụng hook này để thực hiện nhiều hành động ví dụ như: nhúng css, js, feed_links, favicon,…

<!doctype html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="profile" href="https://gmpg.org/xfn/11"/>
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
 
<?php
 
if ( function_exists( 'wp_body_open' ) ):
    wp_body_open();
endif;

footer.php

Hàm wp_footer() sẽ chạy action wp_footer.

<?php wp_footer(); ?>
</body>
</html>

index.php

Hàm get_header(); sẽ load file header.php, hàm đầy đủ như sau:

get_header( string $name = null, array $args = array() )

Mặc hình hàm get_header() sẽ load file header.php, nếu bạn có nhiều mẫu header thì sử dụng tham số truyền vào. Ví dụ get_header( 'home' ) sẽ load header-home.php.
Tương tự như hàm get_header(), hàm get_footer() củng vậy:

get_footer( string $name = null, array $args = array() )

File index.php sẽ có nội dung như sau:

<?php get_header(); ?>
 
    <section class="masterpb-container content-posts">
 
    </section>
 
<?php get_footer();

Nhựt (WordPress Developer)

Nhựt

Nhúng CSS/JS/Fonts vào theme WordPress