Tạo Full Width Page trong WordPress

Bạn có muốn tạo một trang tích hợp toàn trang Full Page trong WordPress không? Nhiều chủ đề WordPress đã đi kèm với một mẫu tích hợp toàn trang mà bạn có thể sử dụng. Tuy nhiên một số chủ đề không có tính nă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 tích hợp toàn trang trong WordPress.

Cách 1: Sử dụng Mẫu tích hợp sẵn trong Themes WordPress của bạn

Phương pháp này được khuyến nghị nếu chủ đề của bạn đã đi kèm với mẫu trang tích hợp mẫu toàn trang.

Trước tiên, bạn cần chỉnh sửa một trang hoặc tạo một trang mới bằng cách truy cập Trang » Thêm trang mới .

Trên màn hình chỉnh sửa trang, chọn toàn bộ chiều rộng làm mẫu của bạn trong hộp meta thuộc tính trang.

Sau khi chọn mẫu Full Width, bạn cần lưu trang của mình. Bạn có thể tiếp tục chỉnh sửa trang để thêm nội dung hoặc nhấp vào nút xem trước để xem nó hoạt động.

Nếu bạn không có tùy chọn mẫu full width đầy đủ trên màn hình chỉnh sửa trang của mình, thì điều này có nghĩa là chủ đề của bạn không có mẫu toàn trang rồi đó.

Đừng lo lắng, tôi sẽ chỉ cho bạn cách dễ dàng tạo một trang có chiều rộng đầy đủ mà không thay đổi chủ đề WordPress của bạn.

Cách 2: Tạo mẫu trang Full Width bằng tay

Phương pháp này yêu cầu bạn chỉnh sửa các tệp giao diện WordPress và phải có một số hiểu biết cơ bản về PHP , CSS và HTML.

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 chủ đề 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 mã sau vào một tệp trống:

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

Bây giờ bạn cần lưu tệp này như full-width.phptrên máy tính của bạn.

Đoan mã này chỉ đơn giản là xác định tên của mẫu tệp và yêu cầu WordPress tìm nạp mẫu Header.

Tiếp theo, bạn sẽ cần phần nội dung của mã. Kết nối với trang web của bạn bằng ứng dụng khách FTP (hoặc trình quản lý tệp trong cPanel) và sau đó truy cập / wp-content / Themes / Tên-Themes /.

Bây giờ bạn cần xác định vị trí tệp có tên page.php. Đây là mẫu tệp trang mặc định của giao diện website của bạn.

Sao chép mọi thứ sau dòng get_header()và dán nó vào tệp full-width.php đã lưu trước đó trên máy tính của bạn.

Bây giờ bạn cần xem tệp full-width.php và xóa dòng mã này:

<?php get_sidebar(); ?> 

Dòng này chỉ cần tìm nạp thanh bên (sidebar) và hiển thị nó trong chủ đề của bạn. Xóa nó sẽ ngăn chủ đề của bạn hiển thị thanh bên khi sử dụng mẫu toàn trang.

Bạn có thể thấy dòng này xuất hiện nhiều hơn một lần trong chủ đề của bạn. Nếu chủ đề của bạn có nhiều thanh bên (khu vực tiện ích chân trang còn được gọi là thanh bên), thì bạn sẽ thấy mỗi thanh bên được tham chiếu một lần trong mã. Bạn cần phải quyết định những sidebars nào bạn muốn giữ.

Nếu chủ đề của bạn không hiển thị thanh bên trên các trang, thì bạn có thể không tìm thấy mã này trong tệp của mình.

Đây là cách mã full-width.php của tôi trông sau khi thực hiện các thay đổi. Mã của bạn có thể trông hơi khác nhau tùy thuộc vào chủ đề của bạn.

<?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 tệp full-width.php vào thư mục chủ đề của mình bằng ứng dụng khách FTP.

Bạn đã tạo thành công và tải lên một mẫu trang toàn trang tùy chỉnh vào chủ đề của bạn. Bước tiếp theo là sử dụng mẫu này để tạo một trang có chiều rộng đầy đủ (Full Width).

Vào khu vực quản trị WordPress và 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 hộp meta thuộc tính trang và nhấp vào menu thả xuống bên dưới tùy chọn ‘Mẫu’.

Bạn sẽ có thể thấy mẫu toàn trang của bạn ở đó. Lên đầu trang và chọn lưu / cập nhật trang.

Bây giờ bạn có thể truy cập trang web của mình và bạn sẽ thấy các thanh bên đã biến mất và trang của bạn xuất hiện dưới dạng một cột. Nó có thể chưa đầy đủ chiều rộng, nhưng bây giờ bạn đã sẵn sàng để tạo kiểu khác.

Bạn sẽ cần sử dụng công cụ Inspect để tìm ra các lớp CSS được sử dụng bởi chủ đề của bạn để xác định vùng nội dung.

Sau đó, bạn có thể điều chỉnh độ rộng của nó thành 100% bằng CSS. Tôi đã sử dụng mã CSS sau trong trang web thử nghiệm của mình:

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

Đây là cách nó hiển thị trên trang web demo của tôi bằng chủ đề Twenty Sixteen.

Cách 3: Tạo full trang bằng cách sử dụng Plugin

Phương pháp này dễ dàng hơn và được khuyến nghị cho tất cả người dùng. Nó cho phép bạn dễ dàng chỉnh sửa kiểu trang và tạo các bố cục trang khác nhau cho trang web của bạn thêm thú vị.

Đối với cách này, bạn sẽ cần một plugin xây dựng trang WordPress . Vì mục đích của hướng dẫn này, chúng tôi sẽ sử dụng Beaver Builder . Đây là một trong những plugin xây dựng dạng kéo và thả tốt nhất và nó cho phép bạn dễ dàng tạo bố cục trang mà không cần biết về lập trình.

Điều đầu tiên bạn cần làm là 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 .

Khi kích hoạt, bạn cần chỉnh sửa một trang hiện có hoặc tạo một trang mới.

Trên màn hình chỉnh sửa trang, trong phần thuộc tính trang, bạn cần chọn mẫu toàn trang được cung cấp bởi chủ đề WordPress của bạn.

Nếu chủ đề của bạn không có mẫu full width template, thì bạn có thể tạo một mẫu bằng cách làm theo các hướng dẫn được đề cập trong cách thứ hai.

Sau khi chọn mẫu trang của bạn, bạn cần nhấp vào nút lưu bản nháp để lưu trữ trang của bạn.

Bây giờ bạn đã sẵn sàng sử dụng plugin xây dựng trang để tạo bố cục của mình. Bạn sẽ bắt đầu bằng cách nhấp vào tab trình tạo trang phía trên trình chỉnh sửa trang.

Điều này sẽ khởi chạy giao diện trình tạo trang, nơi bạn sẽ có thể xem bản xem trước trực tiếp của trang của mình với các tùy chọn trình tạo trang.

Bạn có thể bắt đầu bằng cách nhấp vào nút Mẫu ở trên cùng. Beaver Builder đi kèm với một số mẫu sẵn sàng sử dụng và được thiết kế chuyên nghiệp mà bạn có thể sử dụng làm điểm bắt đầu.

Bạn có thể chỉ cần nhấp vào một mẫu để chọn nó và trình tạo trang sẽ tải nó cho bạn bao gồm bố cục, hình ảnh và nội dung. Bạn cũng có thể nhấp vào mẫu trống để bắt đầu mà không cần mẫu có sẵn và tạo bố cục của riêng bạn.

Bố trí Beaver Builder được xây dựng với 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, bạn chỉ cần trỏ và nhấp vào nó.

Beaver Builder sẽ mở chi tiết các đối tượng trong cửa sổ bật lên nơi bạn có thể chỉnh sửa cài đặt của nó. Bạn có thể thay đổi màu sắc, phông chữ, thêm ảnh nền, thay đổi văn bản, v.v.

Bạn có thể thêm các mô-đun và widget bất cứ lúc nào 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 có thể 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 ‘Xong’ ở trên cùng. Điều này sẽ cho bạn thấy một cửa sổ bật lên nơi bạn cần nhấp vào nút lưu hoặc xuất bản.

Bây giờ bạn có thể truy cập trang của bạn để xem nó trong hành độ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 đầy đủ trong WordPress. 


Post Comment