Hướng dẫn tạo Custom Page Template trong WordPress

Custom Page Template là một giải pháp mạnh mẽ giúp bạn tạo các mẫu trang tùy chỉnh trong WordPress, đặc biệt hữu ích khi bạn muốn thiết kế các trang độc đáo phù hợp với nhu cầu cụ thể. Bài viết này sẽ hướng dẫn chi tiết cách tạo một Custom Page Template từ việc tạo file mới đến tích hợp công cụ UX Builder của Flatsome.

Chuẩn bị

Mở quản lý file trong Hosting: Đăng nhập vào bảng điều khiển Hosting của bạn (cPanel, Plesk, hoặc SFTP).
Truy cập thư mục Theme đang sử dụng: Vào đường dẫn: /wp-content/themes/[tên-theme-của-bạn]
Tạo một file PHP mới: Trong thư mục theme, tạo một file mới với định dạng .php, ví dụ: custom-template.php
Đặt tên dễ nhớ: Tên file nên liên quan đến mục đích sử dụng, như “landing-template.php” cho trang Landing Page.

Thêm Cú Pháp Để WordPress Nhận Diện Template

Mở file vừa tạo bằng trình soạn thảo (Notepad++, VSCode, hoặc công cụ khác), thêm đoạn mã sau vào đầu file:

<?php
/**
 * Template name: Custom Template - Full Width
 *
 * @package          FlatsomeTemplates
 * @flatsome-version 3.18.0
 */
?>

Tạo file custom template và thêm cú pháp nhận diện

Thêm Nội Dung Cho Custom Page Template

Sau khi WordPress nhận diện file, bạn cần thêm nội dung vào template.

Thêm Nội Dung Tĩnh Bằng HTML

Bạn có thể thêm các đoạn mã HTML để xây dựng nội dung cho template:

    <h1>Đây là trang Custom Page Template</h1>
    <p>Chào mừng bạn đến với trang Da I Kin của chúng tôi!</p>

Sử Dụng Các Hàm Sẵn Có Của Theme

Nếu theme bạn sử dụng đã tích hợp các hàm dựng sẵn, bạn có thể tận dụng để hiển thị nội dung động:

<?php
get_header();
?>
<div class="container">
    <h1><?php the_title(); ?></h1>
    <div class="content">
        <?php the_content(); ?>
    </div>
</div>
<?php
get_footer();
?>

Thêm nội dung bằng cách kết hợp các hàm php và HTML

Tích Hợp UX Builder Trong Custom Page Template

Flatsome cung cấp công cụ UX Builder mạnh mẽ giúp bạn dễ dàng xây dựng giao diện trang bằng thao tác kéo thả. Để sử dụng UX Builder trong Custom Page Template, bạn cần thêm đoạn mã sau:

Chèn đoạn mã sau vào file template:

Đoạn mã này giúp kích hoạt UX Builder cho trang sử dụng template. Bạn chỉ cần vào trang, bật UX Builder và bắt đầu chỉnh sửa trực quan.

Kiểm tra vào hoàn tất

Truy cập vào Trang > Thêm Trang, Tại mục Thuộc tính trang > Mẫu trang sau đó chọn Custom Template – Full Width > Lưu và kiểm tra kết quả.

Video hướng dẫn tạo Custom Page Template trong WordPress

Hướng dẫn tạo Custom Page Template trong WordPress