TUAN DC

Các loại “Add Theme Support” trong WordPress



Trong bài viết này, mình sẽ chia sẻ một số khai báo tính năng hỗ trợ cho theme bằng hàm add_theme_support().

add_theme_support() là một hàm để khai báo tính năng mà theme có hỗ trợ. Nó được khai báo trong file functions.php của theme. Nó có thể được khai báo bên ngoài hoặc gắn vào hook after_setup_theme. Trong bài viết này, mình sẽ chia sẻ một số khai báo tính năng hỗ trợ cho theme bằng hàm add_theme_support().

Cú pháp hàm add_theme_support()

Cú pháp: add_theme_support ( chuỗi tính năng );

Cách sử dụng với hook after_setup_theme:

function theme_setup() {
   add_theme_support( 'Tính năng 1' );
   add_theme_support( 'Tính năng 2' );
   add_theme_support( 'Tính năng n' );
}
add_action( 'after_setup_theme', 'theme_setup' );

*Ngoài add_theme_support() bạn cũng có thể sử dụng các hàm khác như: load_theme_textdomain()set_post_thumbnail_size()add_editor_style(),…

Dưới đây là một số tính năng hỗ trợ phổ biến để thêm vào theme.

Theme hỗ trợ Post Formats

Khung định dạng "Post Formats" xuất hiện trong bài viết khi thêm

Khung định dạng “Post Formats” xuất hiện trong bài viết khi thêm

Cú phápadd_theme_support( 'post-formats' );

Chức năng: Khai báo theme hỗ trợ nhiều loại định dạng bài viết khác nhau.

Ví dụadd_theme_support( 'post-formats', array( 'aside', 'gallery' ) );

WordPress hỗ trợ các loại Post Formats như sau:

  • aside: Bài viết đứng riêng, thường dùng cho những bài viết đơn không cần có tiêu đề (như một bài đăng trên facebook),
  • gallery: Bài viết dành cho việc hiển thị nhiều hình ảnh, có thể sử dụng bộ sưu tập trong thư viện media để hiển thị.
  • link: Một bài đăng với liên kết như là trang chia sẻ link.
  • image: Một bài đăng chia sẻ một hình ảnh duy nhất.
  • quote: Một bài đăng chứa một câu trích dẫn, có tên tác giả,….
  • status: Một bài đăng hiển thị một đoạn trạng thái như kiểu Twitter.
  • video: Một bài đăng chứa một video.
  • audio: Một bài đăng chứa một audio.
  • chat: Một mẫu trò chuyện.

Kiểm tra định dạng bài viết trong theme

Để kiểm tra xem bài viết thuộc định dạng nào bạn sử dụng hàm has_post_format(), ví dụ như sau:

if ( has_post_format( 'aside' ) ) {
   echo 'Đây là một bài viết đứng riêng.';
}

Thật ra tính năng này không tạo ra những vùng để nhập dữ liệu tương ứng với định dạng, nó chỉ giúp cho người viết bài chọn định dạng với mục đích trước và việc hiển thị như thế nào phụ thuộc vào người lập trình theme.

Theme hỗ trợ Post Thumbnails

Ảnh đại diện của một bài viết rất quan trọng, nó sẽ hiển thị trên trang chủ, trong archive hay ở nhiều nơi khác trong theme

Ảnh đại diện của một bài viết rất quan trọng, nó sẽ hiển thị trên trang chủ, trong archive hay ở nhiều nơi khác trong theme

Cú pháp: add_theme_support( 'post-thumbnails' );

Chức năng: Khai báo theme hỗ trợ hì ảnh đại diện của bài viết.

Ví dụ: add_theme_support( 'post-thumbnails', array( 'post') );

Nếu chỉ sử dụng cú pháp thông thường thì tất cả loại bài đăng nhứ post, page, hay custom post type đều sẽ được hỗ trợ, nhưng nếu chỉ muốn hỗ trợ cho một số bài đăng thì có thể sử dụng thêm các tham số phía sau, ví dụ như:

add_theme_support('post-thumbnails', array('post')); // Chỉ hỗ trợ cho loại bài đăng là post
add_theme_support('post-thumbnails', array('page')); //Chỉ hỗ trợ cho loại bài đăng là page
add_theme_support('post-thumbnails', array('post','image'));//Chỉ hỗ trợ bài đăng là post định dạng image.

Để hiển thị hình ảnh đại diện trong theme, sử dụng hàm the_post_thumbnail();

Theme hỗ trợ Custom Background

Hỗ trợ thay đổi hình nền giúp người đùng dễ dàng tùy biến

Hỗ trợ thay đổi hình nền giúp người đùng dễ dàng tùy biến

Cú pháp: add_theme_support( 'custom-background' );

Chức năng: Hỗ trợ thay đổi hình nền cho website bằng cách chèn vào một đoạn CSS..

Ví dụ:

$args = array('default-image' => 'images/background.jpg',); 
add_theme_support( 'custom-background', $args );

Để sử dụng, chỉ cần truy cập vào phần “tùy biến” của thêm và chọn phần “Ảnh nền” để cài đặt hình nền cho giao diện.

Lưu ý, để tính năng này hoạt động, cần thêm <?php wp_head();?> vào phần <head> của file header.php và <?php wp_footer();?> của file footer.php.

Theme hỗ trợ Custom Header

Ảnh phần đầu trang giúp bạn thay đổi hình ảnh đầu trang, đồ thời nó có thể hiển thị các hình ảnh ngẫu nhiên nữa

Ảnh phần đầu trang giúp bạn thay đổi hình ảnh đầu trang, đồ thời nó có thể hiển thị các hình ảnh ngẫu nhiên nữa

Cú pháp: add_theme_support( 'custom-header');

Chức năng: Hỗ trợ thay đổi ảnh phần đầu trang cho website..

Ví dụ:

$args = array(
   'width' => 980,
   'height' => 60,
   'default-image' => get_template_directory_uri() . '/images/header.jpg',
);
add_theme_support( 'custom-header', $args );

*Với width là chiều rộng cố định và height là chiều cao cố định mà theme bạn mong muốn. Khi tải hình lên nó sẽ được yêu cầu cắt chính xác kích thước đó.

Để hiển thị lên theme bạn sử dụng hàm <?php header_image(); ?> để lấy URL hình ảnh, sử dụng <?php echo get_custom_header()->height; ?> để lấy chiều cao và <?php echo get_custom_header()->width; ?> để lấy chiều rộng,

ví dụ: <img src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>"/>

Theme hỗ trợ Custom Logo

Hỗ trợ thay đổi logo trong theme ở phần tùy biến

Hỗ trợ thay đổi logo trong theme ở phần tùy biến

Cú pháp: add_theme_support( 'custom-logo' );

Chức năng: Hỗ trợ thay đổi ảnh logo cho website..

Ví dụ:

add_theme_support( 'custom-logo', array(
    'height'      => 100,
    'width'       => 400,
    'flex-height' => true,
    'flex-width'  => true,
    'header-text' => array( 'site-title', 'site-description' ),
) );

Để hiển thị logo trong theme sử dụng cách sau:

$custom_logo_id = get_theme_mod( 'custom_logo' );
$image = wp_get_attachment_image_src( $custom_logo_id , 'full' );
echo $image[0];

Tags: lập trình theme wordpress theme support wordpress theme


Nội dung liên quan