Hướng dẫn tạo full width page WordPress

4 tháng ago, WordPress Themes, Views

Giới Thiệu Về Trang Full Width Trong WordPress

Trong thế giới thiết kế website hiện đại, trang full width (toàn chiều rộng) trở nên ngày càng phổ biến. Trang full width cho phép nội dung của bạn trải dài trên toàn bộ chiều rộng của trình duyệt, loại bỏ các lề (sidebar) mặc định. Điều này đặc biệt hữu ích khi bạn muốn hiển thị hình ảnh lớn, video, bảng giá, hoặc bất kỳ nội dung nào cần chiếm nhiều không gian.

WordPress, với sự linh hoạt và dễ sử dụng của nó, cung cấp nhiều cách để tạo ra các trang full width. Trong bài viết này, chúng ta sẽ khám phá các phương pháp khác nhau để đạt được điều này, từ việc sử dụng các template có sẵn, tùy chỉnh theme, cho đến sử dụng các plugin mạnh mẽ.

Tại Sao Nên Sử Dụng Trang Full Width?

Việc sử dụng trang full width mang lại nhiều lợi ích cho website của bạn, bao gồm:

Tối ưu hóa hiển thị nội dung: Trang full width cho phép bạn trình bày nội dung một cách ấn tượng và dễ nhìn hơn, đặc biệt là đối với hình ảnh và video có độ phân giải cao.
Cải thiện trải nghiệm người dùng: Loại bỏ các yếu tố gây xao nhãng như sidebar giúp người dùng tập trung hơn vào nội dung chính của trang.
Thiết kế hiện đại và chuyên nghiệp: Trang full width thường mang lại cảm giác hiện đại và chuyên nghiệp hơn cho website của bạn.
Phù hợp với nhiều loại nội dung: Từ trang giới thiệu sản phẩm đến trang portfolio, trang full width đều có thể được áp dụng một cách hiệu quả.

Các Phương Pháp Tạo Trang Full Width WordPress

Có nhiều cách khác nhau để tạo một trang full width trong WordPress. Dưới đây là một số phương pháp phổ biến nhất:

1. Sử Dụng Template Full Width Có Sẵn Của Theme

Nhiều theme WordPress đã tích hợp sẵn template full width. Đây là cách đơn giản nhất và nhanh nhất để tạo một trang full width. Để kiểm tra xem theme của bạn có hỗ trợ template này hay không, hãy làm theo các bước sau:

Đăng nhập vào trang quản trị WordPress của bạn.
Đi đến Trang > Tạo trang mới (Pages > Add New).
Trong phần Thuộc tính trang (Page Attributes) ở bên phải màn hình, tìm mục Template.
Nếu có template nào có tên là “Full Width,” “Full Width Page,” hoặc tương tự, hãy chọn template đó.
Nhập nội dung cho trang của bạn và nhấn Đăng (Publish).

Sau khi đăng trang, hãy xem trước để đảm bảo rằng nó hiển thị đúng như mong muốn.

Ví dụ về một trang full width sử dụng template có sẵn:

Lưu ý: Hình ảnh này chỉ mang tính chất minh họa.

2. Tùy Chỉnh Theme WordPress (Sử Dụng Child Theme)

Nếu theme của bạn không có template full width hoặc bạn muốn tùy chỉnh giao diện của trang full width hơn nữa, bạn có thể chỉnh sửa file template của theme. Tuy nhiên, điều quan trọng là phải sử dụng child theme để tránh mất các thay đổi khi cập nhật theme chính.

2.1. Tạo Child Theme

Nếu bạn chưa có child theme, hãy tạo một child theme bằng cách làm theo các bước sau:

Tạo một thư mục mới trong thư mục wp-content/themes/. Tên thư mục nên tuân theo quy tắc: tên-theme-parent-child (ví dụ: twentytwentyone-child).
Tạo một file style.css trong thư mục child theme.
Thêm đoạn code sau vào file style.css:


/*
Theme Name:   Twenty Twenty-One Child
Theme URI:    http://example.com/twenty-twenty-one-child/
Description:  Twenty Twenty-One Child Theme
Author:       Your Name
Author URI:   http://example.com
Template:     twentytwentyone
Version:      1.0.0
*/

@import url("../twentytwentyone/style.css");

/*
   Add your own styles here
*/

Thay thế các thông tin như “Theme Name,” “Author,” “Template” bằng thông tin phù hợp với theme của bạn. Đặc biệt, đảm bảo rằng giá trị của Template trùng khớp với tên thư mục của theme parent.
Đăng nhập vào trang quản trị WordPress của bạn và đi đến Giao diện > Themes (Appearance > Themes).
Kích hoạt child theme của bạn.

2.2. Tạo Template Full Width

Sau khi đã kích hoạt child theme, bạn có thể tạo template full width bằng cách:

Sao chép file page.php từ theme parent sang theme child.
Đổi tên file thành page-fullwidth.php (hoặc bất kỳ tên nào bạn thích).
Mở file page-fullwidth.php bằng trình soạn thảo code.
Thêm đoạn code sau vào đầu file:


<?php
/*
Template Name: Full Width
*/
get_header();
?>

Tìm và loại bỏ các phần tử HTML liên quan đến sidebar (ví dụ: <aside>, <div id="sidebar">).
Chỉnh sửa CSS để đảm bảo rằng nội dung của trang trải dài trên toàn bộ chiều rộng. Bạn có thể cần phải thêm hoặc sửa đổi các thuộc tính như width: 100%;, max-width: none;, và margin-left: 0;, margin-right: 0;.
Lưu file page-fullwidth.php.

Bây giờ, khi bạn tạo một trang mới trong WordPress, bạn sẽ thấy template “Full Width” trong phần Thuộc tính trang (Page Attributes). Chọn template này và trang của bạn sẽ hiển thị ở chế độ full width.

Lưu ý quan trọng: Việc chỉnh sửa trực tiếp file template của theme (không sử dụng child theme) có thể gây ra mất các thay đổi khi bạn cập nhật theme. Luôn luôn sử dụng child theme để bảo vệ các tùy chỉnh của bạn.

3. Sử Dụng Plugin WordPress

Nếu bạn không muốn chỉnh sửa code hoặc theme, bạn có thể sử dụng plugin để tạo trang full width. Có rất nhiều plugin WordPress miễn phí và trả phí có thể giúp bạn thực hiện việc này. Một số plugin phổ biến bao gồm:

Fullwidth Templates: Plugin này đơn giản và dễ sử dụng, cho phép bạn tạo các trang full width chỉ với vài cú nhấp chuột.
Page Builder Plugins (Ví dụ: Elementor, Beaver Builder, Divi): Các plugin page builder không chỉ cho phép bạn tạo trang full width mà còn cung cấp nhiều công cụ mạnh mẽ để thiết kế trang web một cách trực quan và linh hoạt.
CSS Igniter’s Hider: Cho phép ẩn sidebar trên các trang bạn muốn, tạo hiệu ứng full width.

Để sử dụng plugin:

Đi đến Plugins > Thêm mới (Plugins > Add New) trong trang quản trị WordPress của bạn.
Tìm kiếm plugin bạn muốn sử dụng.
Nhấn Cài đặt (Install) và sau đó Kích hoạt (Activate).
Làm theo hướng dẫn của plugin để tạo trang full width.

Ví Dụ Cụ Thể Về Chỉnh Sửa CSS Để Tạo Trang Full Width

Giả sử theme của bạn sử dụng một container với class .container để bao bọc nội dung. Để tạo trang full width, bạn có thể cần phải chỉnh sửa CSS như sau:


.page-template-page-fullwidth .container {
    width: 100%;
    max-width: none; /* Loại bỏ giới hạn chiều rộng */
    padding-left: 0;
    padding-right: 0;
}

.page-template-page-fullwidth #content {
    margin-left: 0;
    margin-right: 0;
}

Đoạn CSS trên sẽ áp dụng cho các trang sử dụng template “Full Width” (page-template-page-fullwidth là một class được thêm tự động vào thẻ <body> của trang khi bạn chọn template full width). Nó loại bỏ giới hạn chiều rộng của container và xóa các margin xung quanh khu vực nội dung.

Lời Kết

Tạo trang full width trong WordPress không khó, và có nhiều phương pháp khác nhau để bạn lựa chọn. Bắt đầu với việc kiểm tra xem theme của bạn có hỗ trợ template full width hay không. Nếu không, hãy thử sử dụng child theme để tùy chỉnh theme của bạn, hoặc sử dụng một plugin để giúp bạn. Chúc bạn thành công!

admin

#ezw_tco-2 .ez-toc-widget-container ul.ez-toc-list li.active::before { background-color: #ededed; } aa