Hướng dẫn tạo trang Full Width trong WordPress

Một số WordPress Theme tích hợp tính năng tạo trang toàn trang (full width). Tuy nhiên một số WordPress Theme không cung cấp tính năng này. Vậy nếu bạn muốn tạo ra một trang full width nhưng WordPress Theme mà bạn đang dùng không hỗ trợ thì phải làm thế nào? Đừng quá lo lắng vì bạn có thể dễ dàng chỉnh sửa bất kỳ một WordPress Theme nào để tạo trang mẫu đáp ứng cho nhu cầu của mình. Trong bài viết này tôi sẽ chỉ cho bạn cách tạo trang full width một cách dễ dàng trong WordPress.

Theo mặc định thì một số WordPress Theme không có template full width. Lý do cũng rất dễ hiểu vì rất nhiều website WordPress sử dụng Sidebar để hiển thị quảng cáo, điều hướng, đăng ký nhận tin…Nếu không có sidebar, nội dung sẽ trùng lặp với quảng cáo tạo nên bố cục lộn xộn khó kiểm soát.

Vì những lý do đó cho nên theo mặc định nhiều WordPress Theme không sử dụng trang full width. Tuy nhiên trong một số trường hợp bạn cần phải sử dụng trang full width trên trang của mình như khi muốn tạo landing page.

Nếu bạn muốn tạo trang full width, dưới đây là một số cách bạn có thể tham khảo

Cách 1: Sử dụng template full width tích hợp trong WordPress Theme

Bạn nên dùng cách này nếu WordPress Theme của bạn có tích hợp template full width. Có nhiều WordPress tích hợp template full width như theme Shapely chẳng hạn.

Đầu tiên bạn cần chỉnh sửa hoặc tạo mới một trang bằng cách nhấp vào liên kết Pages » Add New. 

Tại màn hình chỉnh sửa, thêm mới trang ở phía dưới hộp Page Attributes bạn chọn template cho trang là Full width.

add new full width page

Sau khi chọn template Full Width, bạn hãy lưu trang của mình lại. Bạn có thể tiếp tục chỉnh sửa, thêm nội dung cho trang của mình và nhấp vào nút Preview để xem thử.

full width page example

Nếu bạn không có tùy chọn template Full Width trong màn hình chỉnh sửa trang, điều này có nghĩa là WordPress theme của bạn không hỗ trợ tính năng Full Width.

Nhưng bạn cũng đừng quá lo lắng vì tôi sẽ chỉ cho bạn cách tạo trang Full Width một cách dễ dàng mà không cần phải thay đổi WordPress Theme đang sử dụng.

Cách 2: Tạo trang Full Width một cách thủ công

Cách này đòi hỏi bạn phải chỉnh sửa tập tin trong WordPress Theme và có một chút kiến thức về HTML, CSS, PHP. Nếu từ trước đến nay bạn chưa thực hiện việc này bạn có thể tìm hiểu cách sao chép và dán code trong WordPress.

Nhưng trước khi tiếp tục, để đảm bảo an toàn, giảm thiểu rủi ro bạn nên tạo một bản sao lưu cho WordPress hoặc tối thiểu là tạo một bản sao lưu cho WordPress Theme của mình. Điều này giúp bạn có thể dễ dàng phục hồi dữ liệu cho WordPress site nếu xảy ra sự cố.

Đầu tiên bạn cần sử dụng một trình soạn thảo đơn giản như Notepad để tạo một tập tin có tên là full-width.php và lưu nó trên máy tính của mình.

Sau đó mở tập tin vừa tạo lên nhập hoặc copy và paste đoạn code bên dưới vào và lưu lại.

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

Đoạn code này chỉ định nghĩa tên của tập tin template và đăng ký tiêu đề của template trong WordPress. Vì vậy bạn cần phải thêm nội dung cho tập tin full-width.php.

Kết nối đến website của bạn bằng cách dùng một trình máy khách FTP (hoặc sử dụng File Manager trong cPanel). Sau đó vào thư mục wp-content/themes/ten-theme-dang-dung.

Giờ bạn cần tìm đến tập tin có tên là page.php. Đây là page template mặc định trong WordPress Theme của bạn.

Copy tất cả nội dung nằm bên dưới dòng get_header(); và dán nó vào tập tin full-width.php mà bạn đã tạo trước đó.

Giờ bạn cần tìm đến dòng <?php get_sidebar(); ?> trong tập tin full-width.php và xóa nó đi.

Dòng code này có tác dụng tải sidebar 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 ở chế độ full width.

Bạn có thể thấy dòng code này xuất hiện nhiều lần trong WordPress theme của mình. Nếu website của bạn có nhiều sidebar (footer widget areas cũng được gọi là sidebars), thì bạn sẽ nhìn thấy mỗi sidebar được tham chiếu một lần trong đoạn code này. Bạn cần quyết định sẽ giữ lại sidebar nào.

Nếu WordPress Theme của bạn không hiển thị sidebar trên trang, bạn không cần tìm dòng code này trong tập tin full-width.php 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 theo bạn sử dụng WordPress Theme nào.

<?php
/*
Template Name: Full-Width
*/
get_header(); ?>
<div id="primary" class="content-area">
    <main id="main" class="site-main" role="main">
        <?php
        // Bắt đầu vòng lặp
        while ( have_posts() ) : the_post();
            // Include the page content template.
            get_template_part( 'template-parts/content', 'page' );
            // Nếu các bình luận được hiển thị hoặc có ít nhất một bình luận, tải template comment.
            if ( comments_open() || get_comments_number() ) {
                comments_template();
            }
// Kết thúc vòng lặp
        endwhile
        ?>
   </main><!– .site-main –>
</div><!– .content-area –>
<?php get_footer(); ?>

Tiếp theo bạn cần sử dụng trình máy khách FTP để upload tập tin full-width.php lên thư mục cài đặt WordPress Theme của mình.

Bạn vừa tạo và upload thành công template full-width.php lên thư mục cài đặt WordPress Theme của mình. Bước tiếp theo bạn cần làm là sử dụng template này để tạo trang full width.

Nhấp vào liên kết Pages » Add New trong khu vực quản trị WordPress để tạo một trang mới.

Trên màn hình chỉnh sửa trang, bạn hãy nhìn vào hộp Page Attributes và nhấp vào menu xổ xuống bên dưới tùy chọn Template.

Bạn sẽ nhìn thấy template Full Width của mình ở đây. Kích chọn nó và nhấp Save/Update để lưu hoặc cập nhật nội dung của trang.

Bây giờ bạn có thể truy cập vào trang web của mình và bạn có thể thấy sidebar đã biến mất. Bố cục trang của bạn lúc này chỉ có một cột. Lúc này có thể nó chưa toàn trang, bạn cần phải chỉnh sửa CSS để nó hiển thị full width.

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%. Trong quá trình thử nghiệm, tôi đã sử dụng đoạn code sau:

.page-template-full-width .content-area {
      width: 100%;
      margin: 0px;
      border: 0px;
      padding: 0px;
}

.page-template-full-width .site {
      margin: 0px;
}

Và đây là kết quả hiển thị trên demo site của tôi (Tôi dùng theme Twenty Sixteen).

full-width demo site

Cách 3: Tạo trang Full Width bằng cách sử dụng plugin Page Buider

Cách này đơn giản và được nhiều người sử dụng. Nó cho phép bạn tạo, chỉnh sửa trang full width của mình một cách dễ dàng và tạo các trang có bố cục khác nhau cho website của bạn.

Đầu tiên bạn cần cài đặt và kích hoạt plugin Beaver Builder. Đây là một plugin phổ biến với hơn 400.000 lượt cài đặt và kích hoạt. Nó là một trình tạo trang kéo thả vô cùng linh hoạt, hoạt động động trên giao diện người dùng của WordPress Site. Cho dù bạn là người mới hay đã có nhiều kinh nghiệm thì khi sử dụng plugin này bạn sẽ cảm thấy thích thú với việc kiểm soát bố cục trên trang web của mình. Với plugin Beaver Builder bạn có thể tạo cho mình các trang bắt mắt, chuyên nghiệp mà không cần phải đụng tới code.

Để cài đặt plugin Beaver Buider, bạn nhấp vào liên kết Plugins » Add New. Trang Add Plugin sẽ hiện ra, bạn nhập từ khóa Beaver Builder và ô tìm kiếm. Nhấp nút  Install Now để cài đặt, sau đó nhấp vào nút Activate để kích hoạt.

install plugin beaver builder

Sau khi kích hoạt plugin bạn cần tiến hành chỉnh sửa một trang đã có hoặc tạo trang mới. Trên màn hình chỉnh sửa trang, bạn tìm đến phần Page Attributes sau đó chọn template Full Width được cung cấp bởi WordPress Theme.

create new full width page in wordpress

Nếu WordPres Theme của bạn không có template Full Width, bạn có thể tạo theo hướng dẫn ở cách 2. Sau khi đã chọn template cho trang của mình, bạn hãy nhấp nút Save Draft để lưu trang của mình lại.

Giờ thì bạn có thể sử dụng trình tạo trang để tạo bố cục cho trang của mình. Bạn hãy nhấp vào thẻ Beaver Builder ở phía bên phải của thẻ Text Editor.

beaver builder tab in wordpress

Sau khi nhấp vào thể Beaver Builder, giao diện tạo trang sẽ hiện ra. Tại đây bạn sẽ có thể nhìn thấy trước trang của bạn trông sẽ như thế nào khi áp dụng các tuỳ chọn của trình tạo trang.

Bạn có thể bắt đầu bằng cách nhấp 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ế một cách chuyên nghiệp giúp bạn có thể bắt đầu một cách nhanh chóng.

beaver builder template

Bạn có thể nhấp để chọn một template mà mình cảm thấy ưng ý. Trình tạo trang sẽ tải trang cho bạn. Một trang gồm các thành phần: Nội dung, hình ảnh và bố cục. Bạn cũng có thể nhấp vào template trống để tạo một template có bố cục theo ý của mình.

Các bố cục của Beaver Builder được tạo nên bởi các hàng và các modules. Mỗi hàng có thể có nhiều cột và trong mỗi hàng bạn có thể thêm các module nội dung và widgets.

Để chỉnh sửa một hàng hoặc một modules, bạn hãy trỏ và nhấp vào nó. Beaver Builder sẽ hiện một cửa sổ pop-up cho phép bạn có thể chỉnh sửa các đối tượng. Bạn có thể thay đổi font chữ, màu chữ, hình nền…

point and click on content module

Bạn có thể thêm các module và widget bất cứ khi nào bạn muốn. Beaver Builder cung cấp cho bạn nhiều content module từ cơ bản đến nâng cao giúp bạn có thể kéo thả trên trang của mình.

beaver builder modules

Khi đã chỉnh sửa xong, bạn hãy nhấp vào nút “Done” ở phía trên. Bạn nhấp vào nút Save Draft để lưu nháp, nhấp vào nút Publish để xuất bản trang của mình.

save beaver builder page

Giờ bạn có thể truy cập vào trang của mình để xem nó hoạt động như thế nào.

Tôi hy vọng rằng bài viết này sẽ giúp bạn biết cách tạo trang width một cách dễ dàng trong WordPress.

Nếu bạn thấy thích bài viết đừng quên Like và Share. Nếu bạn có bất kỳ thắc mắc nào, hãy để lại comment phía bên dưới.

Hẹn gặp lại bạn trong các bài viết tiếp theo./.

Đăng ký nhận bài viết mới nhất

Hãy đăng ký nhận tin để nhận được những nội dung thú vị và tuyệt vời!

Để lại bình luận

Plugins Themes Thủ thuật
Hướng dẫn nhập hình ảnh bên ngoài trong WordPress
Hướng dẫn nhập hình ảnh bên ngoài trong WordPress
So sánh magento và WooCommerce
Magento và WooCommerce: Đâu mới là nền tảng thương mại điện tử tốt nhất?
Hướng dẫn chuyển từ http sang https cho wordpress site
Hướng dẫn chuyển từ HTTP sang HTTPS cho WordPress site
Keyword Research SEO Offpage SEO Onpage
Từ khoá và website của bạn
Xây dựng Website chuẩn SEO
Xây dựng Website chuẩn SEO
Hướng dẫn chi tiết WordPress SEO
Hướng dẫn chi tiết WordPress SEO cho người mới
Ajax Bootstrap HTML/CSS JavaScript Joomla jQuery PHP/MySQL
Cách đặt tên miền
Tên miền là gì? Cách chọn tên miền cho blog WordPress
Thay đổi tên miền cho website wordpress
Hướng dẫn thay đổi tên miền cho website WordPress
Sự khác nhau giữa tên miền và Web Hosting
Sự khác nhau giữa tên miền và Web Hosting
Amazon Nichesite Google Adsense Product Lauch Social Marketing Viết Blog Youtube Partner
Thêm Google Adsense vào trang web WordPress
Hướng dẫn thêm Google Adsense vào trang web WordPress
Hướng dẫn đăng ký tài khoảnClickbank khi bị chặn ở Việt Nam
Hướng dẫn đăng ký tài khoản Clickbank khi bị chặn tại Việt Nam
Kiếm tiền từ blog WordPress
Kiếm tiền từ blog WordPress như thế nào?