Bạn có muốn tạo một trang full width trong WordPress hay không? Nhiều theme WordPress cung cấp sẵn cho bạn template trang full width và một số theme khác thì không. Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách dễ dàng tạo một trang full width trong WordPress.
Phương pháp 1: Sử dụng template full width có sẵn trong theme WordPress của bạn
Nếu theme của bạn đi kèm với template trang full width thì tại sao bạn lại không tận dụng tính năng này.
Trước tiên, bạn cần truy cập Pages » Add New chỉnh sửa một trang hoặc tạo một trang mới.
Trên màn hình chỉnh sửa trang, chọn Full width dưới mục Template của bạn trong hộp Page Attributes
Sau đó, bạn chỉ cần lưu lại trang của mình, tiếp tục chỉnh sửa trang để thêm nội dung hoặc nhấp vào nút Preview để xem thử trang của bạn.
Nếu bạn không nhìn thấy tùy chọn template full width trên màn hình chỉnh sửa trang của mình, nghĩa là theme của bạn không có sẵn template full width.
Đừng lo lắng, chúng tôi sẽ chỉ cho bạn cách dễ dàng tạo một trang full width mà không cần phải thay đổi theme WordPresse yêu thích của bạn.
Phương pháp 2: Tạo template trang full width thủ công
Phương pháp này yêu cầu phải chỉnh sửa một số file theme WordPress vì thế bạn cần có một số hiểu biết cơ bản về PHP, CSS và HTML. Nếu bạn chưa từng làm điều này trước đây, hãy xem thêm hướng dẫn của chúng tôi về cách sao chép và dán code trong WordPress .
Trước khi tiếp tục, bạn nên tạo bản sao lưu WordPress hoặc ít nhất là bản sao lưu theme hiện tại của bạn. Điều này sẽ giúp bạn dễ dàng khôi phục trang web của bạn nếu có sự cố.
Trước tiên, bạn cần mở một trình soạn thảo văn bản đơn giản như Notepad và dán đoạn code sau vào một file trống:
|
1
2
3
4
5
6
|
<?php/**Template Name: Full-Width*/get_header(); ?> |
Bây giờ bạn cần lưu file này trên máy tính của bạn với tên full-width.php. Code này chỉ đơn giản là xác định tên của file template. Bạn sẽ cần bổ sung thêm phần nội dung của code.
Hãy kết nối với trang web của bạn bằng FTP client (hoặc trình quản lý file trong cPanel) và sau đó truy cập /wp-content/themes/your-theme-folder/.
Bây giờ bạn cần xác định vị trí file có tên page.php. Đây là file template mặc định của theme của bạn.
Sao chép mọi thứ sau dòng get_header() và dán nó vào file full-width.php mà bạn vừa tạo ở bước trên. Sau đó, kiểm tra file full-width.php của bạn, tìm và xóa dòng code sau đây:
|
1
|
<?php get_sidebar(); ?> |
Dòng code này có tác dụng tải sidebar (thanh bên) và hiển thị nó trên trang của bạn. Xóa nó sẽ làm cho theme của bạn dừng tải sidebar và hiển thị ở chế độ full width.
Bạn có thể thấy dòng này xuất hiện nhiều hơn một lần trong theme của bạn. Nếu theme của bạn có nhiều sidebar (khu vực widget chân trang cũng được gọi là sidebar), bạn sẽ thấy mỗi sidebar được tham chiếu một lần trong đoạn code này. Bạn cần phải quyết định những sidebar nào bạn muốn giữ lại.
Nếu theme của bạn không hiển thị sidebar trên các trang, bạn có thể không tìm thấy đoạn mã đó trong file của mình.
Dưới đây là code của tập tin full-width.php sau khi chỉnh sửa. Code của bạn có thể sẽ hơi khác một chút tùy thuộc vào Theme WordPress của bạn.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<?php/**Template Name: Full-Width*/get_header(); ?><div id="primary" class="content-area"> <main id="main" class="site-main" role="main"> <?php // Start the loop. while ( have_posts() ) : the_post(); // Include the page content template. get_template_part( 'template-parts/content', 'page' ); // If comments are open or we have at least one comment, load up the comment template. if ( comments_open() || get_comments_number() ) { comments_template(); } // End of the loop. endwhile; ?> </main><!-- .site-main --></div><!-- .content-area --><?php get_footer(); ?> |
|
|
Tiếp theo, bạn cần tải lên file full-width.php vào thư mục theme của mình bằng FTP client.
Vậy là, bạn đã tạo thành công và tải lên một template full width tùy chỉnh vào theme của bạn. Bước tiếp theo là sử dụng template này để tạo một trang full width.
Chuyển đến khu vực admin WordPress, tiến hành chỉnh sửa hoặc tạo một trang mới.
Trên màn hình chỉnh sửa trang, hãy tìm Page attributes trong mega box và nhấp vào menu thả xuống bên dưới tùy chọn ‘Template‘.
Bạn sẽ thấy template Full-Width của bạn. Hãy chọn nó và lưu trang của bạn.
Bây giờ bạn có thể truy cập trang web của mình để xem thể, các sidebar đã biến mất, bố cục trang của bạn lúc này chỉ có một cột. Mặc dù nó có thể chưa phủ hết toàn bộ chiều rộng của màn hình, nhưng bạn có thể dễ dàng điều chỉnh lại.
Bạn cần sử dụng các công cụ Inspect để tìm kiếm class quy định bố cục của nội dung trong Theme của mình.
Sau khi tìm thấy, bạn hãy sử dụng CSS để điều chỉnh độ rộng của trang thành 100%. Chúng tôi đã sử dụng mã CSS sau trong trang web thử nghiệm của mình:
|
1
2
3
4
5
6
7
8
9
10
|
.page-template-full-width .content-area { width: 100%; margin: 0px; border: 0px; padding: 0px;}.page-template-full-width .site {margin:0px;} |
Đây là giao diện trên trang demo của chúng tôi với theme Twenty Sixteen.
Phương pháp 3: Tạo trang full width bằng cách sử dụng plugin Page Builder
Phương pháp này dễ dàng hơn và được khuyến nghị cho tất cả người dùng. Đây là phương pháp giúp bạn dễ dàng chỉnh sửa trang full width cũng như tạo được nhiều bố cục khác nhau cho trang web của bạn.
Với phương pháp này, bạn sẽ cần một plugin page builder WordPress. Chúng tôi sẽ sử dụng Beaver Builder để minh họa cho hướng dẫn này. Đây là một trong những plugin page builder kéo và thả tốt nhất, giúp bạn dễ dàng tạo bố cục trang mà không cần viết bất kỳ đoạn code nào.
Đầu tiên bạn cần cài đặt và kích hoạt plugin Beaver Builder. Để biết thêm chi tiết, hãy xem hướng dẫn từng bước của chúng tôi về cách cài đặt plugin WordPress .
Sau khi kích hoạt, bạn có thể bắt đầu chỉnh sửa trang hiện có hoặc tạo trang mới.
Trên màn hình chỉnh sửa trang, trong phần thuộc tính trang Page attributes, bạn cần chọn template full width.
Nếu theme của bạn không có template full width, bạn có thể tạo một template bằng cách làm theo các hướng dẫn được đề cập trong phương pháp thứ hai.
Sau khi chọn template, bạn click vào Save draft để lưu trang của bạn.
Lúc này, bạn có thể sử dụng plugin page builder để tạo bố cục của mình. Hãy click vào tab Page builder phía trên page editor.
Thao tác này sẽ khởi chạy giao diện page builder. Trong gia điện này, bạn có thể xem bản xem trước trang của mình với các tùy chọn trong page builder.
Bạn có thể bắt đầu bằng cách click vào nút Templates ở phía trên. Beaver Builder cung cấp cho bạn một số template được thiết kế chuyên nghiệp, giúp bạn có thể bắt đầu một cách nhanh chóng.
Bạn có thể click chọn bất kỳ template nào mà bạn thích và page builder sẽ tải nó cho bạn, bao gồm cả bố cục, hình ảnh và nội dung. Bạn cũng có thể click vào template trống để bắt đầu tạo một bố cục mới theo ý thích của mình.
Beaver Builder xây dựng bố cục gồm các hàng và mô-đun. Mỗi hàng có thể có nhiều cột và bên trong mỗi hàng bạn có thể thêm các mô-đun nội dung và widget.
Để chỉnh sửa một hàng hoặc một mô-đun trong bố cục của nó, bạn chỉ cần trỏ và click vào đó.
Beaver Builder sẽ bật lên một cửa sổ, tại đó, bạn có thể tiến hành chỉnh sửa cài đặt. Bạn có thể thay đổi màu sắc, phông chữ, thêm ảnh nền, thay đổi văn bản,…
Bạn có thể thêm các mô-đun và widget bất cứ lúc nào tùy thích vào bố cục của bạn. Beaver Builder đi kèm với nhiều mô-đun nội dung cơ bản và nâng cao mà bạn chỉ cần kéo và thả vào trang của mình.
Sau khi chỉnh sửa xong, bạn có thể nhấp vào nút ‘Done‘ ở trên cùng. Một cửa sổ khác bật lên, bạn cần chọn lưu hoặc xuất bản trang của bạn.
Bây giờ bạn có thể truy cập trang của mình để xem bố cục trang của bạn.
Chúng tôi hy vọng bài viết này đã giúp bạn tìm hiểu cách dễ dàng tạo một trang full width trong WordPress. Bạn cũng có thể muốn xem hướng dẫn của chúng tôi về cách thêm background toàn màn hình trong WordPress.
Nếu bạn thích bài viết này, vui lòng đăng ký YouTube Channel của chúng tôi để xem thêm các hướng dẫn về WordPress. Bạn cũng có thể tìm thấy chúng tôi trên Twitter và Facebook.