[Lập trình theme WordPress] Viết code cho file functions.php
Một trong những file quan trọng nhất của một theme WordPress đó là file functions.php. Đây là một file bắt buộc trong theme và nó sẽ chứa các đoạn code nguồn mà bạn muốn nó luôn được load mỗi khi tải website, tóm lại là toàn bộ code PHP cần thiết trong một theme (ngoại trừ các code hiển thị nội dung) thì sẽ đều được viết vào file này.Trong bài này, chúng ta sẽ tiến hành khai báo các đoạn code cần thiết trong file functions.php này, cũng như thiết lập một số hằng dữ liệu (constrant) để thiết lập một số dữ liệu quan trọng mà chúng ta sẽ cần sử dụng lại nhiều.
Thiết lập các hằng dữ liệu quan trọng
Trong khi viết code trong file functions.php, chúng ta sẽ dùng đi dùng lại một số đoạn code như get_stylesheet_directory_uri, hoặc khai báo các đường dẫn. Do vậy, chúng ta nên thiết lập trước một số hằng dữ liệu chứa cố định các giá trị đó để có viết thì chỉ cần viết tên hằng ra thôi.
Chúng ta có code ban đầu như sau:
/** @ Thiết lập các hằng dữ liệu quan trọng @ THEME_URL = get_stylesheet_directory() - đường dẫn tới thư mục theme @ CORE = thư mục /core của theme, chứa các file nguồn quan trọng. **/
define( ‘THEME_URL’, get_stylesheet_directory() );
define( ‘CORE’, THEME_URL . ‘/core’ );
Rồi sau này khi bạn làm theme khác, hoặc cải tiến theme thì có thể thêm một số hằng dữ liệu vào để cho phù hợp với nhu cầu của mình, cái quan trọng là mình muốn tạo thói quen này cho các bạn ngay từ bây giờ.
Bây giờ bạn hãy tạo thêm một thư mục trong theme tên là core và tạo một file tên là init.php trong thư mục đó. Tại sao lại tạo thư mục này và file này làm cái gì? Bởi vì như mình đã nói ở đầu bài, là trong bài này mình sẽ hướng các bạn đến việc làm framework theme cho riêng mình luôn, nên thư mục /core sẽ chứa các file code PHP quan trọng trong theme của bạn mà bạn không muốn thay đổi nhiều nếu có nhu cầu tạo child theme. File init.php sẽ có ý nghĩa là load các file PHP đặc thù trong theme mình mà chúng ta sẽ tạo, ví dụ như load các file tạo widget của theme vào, bước này chúng ta sẽ làm sau.
Bạn viết tiếp vào file functions.php như sau để load file init.php.
/** @ Load file /core/init.php @ Đây là file cấu hình ban đầu của theme mà sẽ không nên được thay đổi sau này. **/
require_once( CORE . ‘/init.php’ );
Thiết lập chiều rộng nội dung ($content_width)
Bây giờ, bạn hãy đặt đoạn code này vào file functions.php nhé:
/** @ Thiết lập $content_width để khai báo kích thước chiều rộng của nội dung **/
if ( ! isset( $content_width ) ) {
/*
* Nếu biến $content_width chưa có dữ liệu thì gán giá trị cho nó
*/
$content_width = 620;
}
Biến $content_width nghĩa là chúng ta sẽ thiết lập chiều rộng tối đa mà phần hiển thị nội dung (không tính sidebar) mà theme được phép sử dụng, đây là một tính năng của theme WordPress. Khi thiết lập biến này, điều đó không có nghĩa là theme của bạn đã có chiều rộng vì ta phải viết CSS nữa. Nhưng việc khai báo như vậy sẽ giúp cho các thành phần hiển thị trong nội dung như các mã nhúng oEmbed, hình ảnh,….sẽ không bị tràn ra ngoài khung nội dung vì nó sẽ dựa theo giá trị $content_width mà hiển thị tối đa.
Hàm thiết lập chức năng của theme
Tiếp tục, chúng ta sẽ tạo một hàm tên gì đó và sẽ có chức năng móc vào cái hook init của WordPress để khởi tạo các chức năng sẽ được theme hỗ trợ, như post format, customizer,…Hãy chèn đoạn sau vào:
/** @ Thiết lập các chức năng sẽ được theme hỗ trợ **/
if ( ! function_exists( ‘cddos_theme_setup’ ) ) {
/*
* Nếu chưa có hàm cddos_theme_setup() thì sẽ tạo mới hàm đó
*/
function cddos_theme_setup() {
}
add_action ( ‘init’, ‘cddos_theme_setup’ );
}
Điều này có nghĩa là, hàm cddos_theme_setup() sẽ được tạo mới nếu máy chủ kiểm tra chưa có hàm đó tồn tại. Sau đó, hàm này sẽ được móc vào action hook init của WordPress để nó sẽ được thực thi sau khi WordPress đã load xong trang.
Bây giờ, chúng ta sẽ tiến hành viết code vào trong hàm cddos_theme_setup() để thiết lập một số tính năng.
Thiết lập theme có thể dịch được sang nhiều ngôn ngữ
Chức năng này có nghĩa là chúng ta sẽ khai báo thư mục chứa ngôn ngữ trong theme, và khai báo textdomain để load các chuỗi ngôn ngữ có trong theme nhằm mục đích cho theme có thể đọc được các file ngôn ngữ và người dùng có thể dịch ra nhiều ngôn ngữ khác nhau bằng việc sửa/tạo file .po.
Chúng ta có code như sau:
/* * Thiết lập theme có thể dịch được */ $language_folder = THEME_URL . '/languages'; load_theme_textdomain( 'cddos', $language_folder );
Cái textdomain nghĩa là một cái tên nhận diện các chuỗi mà chúng ta sẽ cho phép dịch trong theme. Cách viết chuỗi chứa textdomain mình sẽ nói về sau.
Tự chèn liên kết RSS Feed trong mã nguồn
Đây là một chức năng nhỏ trong WordPress, nó sẽ tự thêm một liên kết RSS Feed chèn trong cặp thẻ <head> trong mã nguồn website để các trình đọc RSS Feed có thể hiểu trực tiếp địa chỉ RSS Feed trong website của bạn mà không cần khai báo chính xác địa chỉ RSS Feed, tạo sự thuận tiện cho người đọc.
/* * Tự chèn RSS Feed links trong <head> */ add_theme_support( 'automatic-feed-links' );
Thêm chức năng thumbnail cho post
Chức năng thumbnail ở đây nghĩa là chức năng Featured Image mà khi chúng ta soạn post. Để cho cái đó có thể hiển thị ra thì chúng ta phải khai báo sử dụng chức năng này trong theme:
/* * Thêm chức năng post thumbnail */ add_theme_support( 'post-thumbnails' );
Thêm chức năng title-tag
Đây là một chức năng mới có trong WordPress 4.1 trở đi. Chức năng title-tag nghĩa là sẽ giúp cho theme tự thêm thẻ <title> trên tài liệu HTML được xuất ra và nó sẽ có cấu trúc khá thông minh như:
- Hiển thị kiểu Tên website | Mô tả website ở trang chủ
- Hiển thị kiểu Tên post/page | Tên website ở trang nội dung post type
Điều này có nghĩa là sau này chúng ta code file header.php thì sẽ không cần thêm hàm wp_title() nữa. Hãy cứ yên tâm là các plugin hỗ trợ SEO như WordPress SEO by Yoast đều tương thích với chức năng này.
/* * Thêm chức năng title-tag để tự thêm <title> */ add_theme_support( 'title-tag' );
Thêm chức năng Post Format
Chức năng Post Format nghĩa là chúng ta có thể tùy biến việc hiển thị post theo các định dạng như Video, Image, Gallery, Quote,…Ở đây chúng ta sẽ chỉ sử dụng vài post format mà thôi.</pre>
/* * Thêm chức năng post format */ add_theme_support( 'post-formats', array(
‘image’,
‘video’,
‘gallery’,
‘quote’,
‘link’
) );
Bây giờ bạn có thể thử vào tạo post mới sẽ thấy có khung chọn Post Format rồi.
Thêm chức năng custom background
Chức năng này sẽ giúp cho người dùng có thể đổi lại màu nền hoặc thêm ảnh nền cho website dễ dàng thông qua Customize.
/* * Thêm chức năng custom background */ $default_background = array( 'default-color' => '#e8e8e8', ); add_theme_support( 'custom-background', $default_background );
Tạo menu location
Trong cái theme mà chúng ta sẽ làm sẽ có một menu hiển thị ra bên ngoài. Do vậy chúng ta sẽ tiến hành viết code để WordPress tạo một Menu Location để chúng ta có thể thêm menu vào đó.
/* * Tạo menu cho theme */
register_nav_menu ( 'primary-menu', __('Primary Menu', 'cddos') );Ở đoạn trên, mình sẽ tạo một menu có slug tên là primary-menu, và sẽ đặt tên menu này là Primary Menu. Thế cái đoạn __('Primary Menu', 'cddos') có ý nghĩa gì? Đó chính là một đoạn text mà mình muốn những người sử dụng theme sau này có thể tự dịch được sang ngôn ngữ khác bằng các phần mềm dịch, và cddos chính là textdomain để nhận diện. Tất cả các đoạn text mà bạn muốn có thể dịch được sẽ đều phải viết có cấu trúc là __('Text', 'textdomain') thay vì chỉ viết thông thường.
Tạo sidebar
Theme này sẽ có một sidebar nên chúng ta sẽ cần tạo ra một sidebar để chút nữa chúng ta có thể viết code hiển thị vào file sidebar.php nhé.
/* * Tạo sidebar cho theme */
$sidebar = array(
'name' => __('Main Sidebar', 'cddos'),
'id' => 'main-sidebar',
'description' => 'Main sidebar for Thachpham theme',
'class' => 'main-sidebar',
'before_title' => '<h3 class="widgettitle">',
'after_title' => '</h3>' );
register_sidebar( $sidebar );Bây giờ bạn có thể sẽ thấy sidebar đã xuất hiện trong Appearance -> Widgets rồi đó.
Toàn bộ nội dung functions.php trong bài này
<?php /** @ Thiết lập các hằng dữ liệu quan trọng @ THEME_URL = get_stylesheet_directory() - đường dẫn tới thư mục theme @ CORE = thư mục /core của theme, chứa các file nguồn quan trọng. **/
define( ‘THEME_URL’, get_stylesheet_directory() );
define( ‘CORE’, THEME_URL . ‘/core’ );
/**
@ Load file /core/init.php
@ Đây là file cấu hình ban đầu của theme mà sẽ không nên được thay đổi sau này.
**/
require_once( CORE . ‘/init.php’ );
/**
@ Thiết lập $content_width để khai báo kích thước chiều rộng của nội dung
**/
if ( ! isset( $content_width ) ) {
/*
* Nếu biến $content_width chưa có dữ liệu thì gán giá trị cho nó
*/
$content_width = 620;
}
/**
@ Thiết lập các chức năng sẽ được theme hỗ trợ
**/
if ( ! function_exists( ‘cddos_theme_setup’ ) ) {
/*
* Nếu chưa có hàm cddos_theme_setup() thì sẽ tạo mới hàm đó
*/
function cddos_theme_setup() {
/*
* Thiết lập theme có thể dịch được
*/
$language_folder = THEME_URL . ‘/languages’;
load_theme_textdomain( ‘cddos’, $language_folder );
/*
* Tự chèn RSS Feed links trong <head>
*/
add_theme_support( ‘automatic-feed-links’ );
/*
* Thêm chức năng post thumbnail
*/
add_theme_support( ‘post-thumbnails’ );
/*
* Thêm chức năng title-tag để tự thêm <title>
*/
add_theme_support( ‘title-tag’ );
/*
* Thêm chức năng post format
*/
add_theme_support( ‘post-formats’,
array(
‘video’,
‘image’,
‘audio’,
‘gallery’
)
);
/*
* Thêm chức năng custom background
*/
$default_background = array(
‘default-color’ => ‘#e8e8e8’,
);
add_theme_support( ‘custom-background’, $default_background );
/*
* Tạo menu cho theme
*/
register_nav_menu ( ‘primary-menu’, __(‘Primary Menu’, ‘cddos’) );
/*
* Tạo sidebar cho theme
*/
$sidebar = array(
‘name’ => __(‘Main Sidebar’, ‘cddos’),
‘id’ => ‘main-sidebar’,
‘description’ => ‘Main sidebar for Thachpham theme’,
‘class’ => ‘main-sidebar’,
‘before_title’ => ‘<h3 class=”widgettitle”>’,
‘after_sidebar’ => ‘</h3>’
);
register_sidebar( $sidebar );
}
add_action ( ‘init’, ‘cddos_theme_setup’ );
}
Lời kết
Vậy là trong bài này chúng ta đã có một file functions.php khá đầy đủ các tính năng cần thiết trong theme rồi. Thêm vào đó, cũng ta đã có thêm thư mục /core trong theme và file init.php trong đó nhưng chưa có nội dung.
Ở bài sau, chúng ta sẽ đi qua việc viết thẳng đến nội dung của file header.php của theme nhé.