Bạn có muốn tạo một trang toàn chiều rộng trên WordPress không?

Nhiều Chủ đề WordPress đã đi kèm với một mẫu trang có chiều rộng đầy đủ được tích hợp sẵn mà bạn có thể sử dụng. Tuy nhiên, một số chủ đề WordPress không có tính năng này. trong này hướng dẫn, chúng tôi sẽ chỉ cho bạn cách dễ dàng tạo một trang toàn chiều rộng trên WordPress.

Nhưng trước đây, nếu bạn chưa bao giờ cài đặt WordPress khám phá Làm thế nào để cài đặt một bước 7 blog WordPress et Làm thế nào để tìm kiếm, cài đặt và kích hoạt một chủ đề WordPress trên blog của bạn 

Sau đó trở lại lý do tại sao chúng ta ở đây.

tạo một trang có chiều rộng đầy đủ trong WordPress

Phương pháp 1: Sử dụng mẫu chiều rộng tích hợp sẵn trên chủ đề WordPress của bạn

Phương pháp này được khuyến nghị nếu chủ đề WordPress của bạn đã được cung cấp với một mẫu trang có chiều rộng đầy đủ. Nếu bạn chưa có, hãy xem lựa chọn sau và nhận một.

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 Một trang mới.

Trên cửa sổ chỉnh sửa trang, hãy chọn Chiều rộng đầy đủ như một mẫu trong hộp kiểm thuộc tính trang.

Lựa chọn mẫu trang

Sau khi chọn mô hình Chiều rộng đầy đủbạn phải đăng ký trang của bạn. Bạn có thể tiếp tục tùy chỉnh trang để thêm nội dung hoặc nhấp vào nút xem trước để xem nó hoạt động.

Trang có chiều rộng đầy đủ

Nếu bạn không có tùy chọn mẫu Full Width - Full Width - trên màn hình chỉnh sửa trang của mình, điều đó có nghĩa là chủ đề WordPress của bạn không có. 

Nhưng đừng lo lắng, chú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.

Phương pháp 2: Cách tạo mẫu trang với chiều rộng đầy đủ

Phương pháp này yêu cầu bạn chỉnh sửa các tệp của chủ đề WordPress bạn đang sử dụng và có hiểu biết cơ bản về PHP, CSS và HTML.

Nhân tiện, chúng tôi cũng mời bạn tham khảo ý kiến Các plugin WordPress tốt nhất để dễ dàng tạo bố cục của bạn 

Tuy nhiên, trước khi đi xa hơn, bạn phải tạo bản sao lưu WordPress hoặc ít nhất là bản sao lưu chủ đề WordPress 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 mình nếu có điều gì xấu xảy ra. 

Trước tiên, bạn cần mở một trình soạn thảo văn bả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 thành " Full-width.php Trên máy tính của bạn.

Mã này chỉ cần đặt tên của một mẫu tệp và yêu cầu WordPress trích xuất mẫu tiêu đề.

Sau đó, 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 FTP (hoặc người quản lý tập tin trong cPanel) sau đó đi đến " / Wp-content / themes / bạn-theme-thư mục / '.

Sau đó, bạn phải xác định vị trí tệp " page.php ". Đây là tệp mẫu trang mặc định của chủ đề của bạn.

Sao chép mọi thứ sau hàm « get_header () Và dán nó vào một tập tin " Full-width.php Mà bạn đã tạo trên máy tính của bạn.

Bây giờ bạn phải xem nội dung của tệp "full-width.php" và xóa dòng mã này:

<?php get_sidebar(); ?>

Dòng này chỉ cần lấy thanh bên và hiển thị nó trong chủ đề WordPress của bạn. Bằng cách loại bỏ điều này, chủ đề của bạn sẽ không hiển thị thanh bên khi sử dụng mẫu Chiều rộng đầy đủ.

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

Trang web của bạn dường như đang tải chậm, khám phá Tại sao bạn cần bắt đầu tối ưu hóa blog WordPress của mình bằng hình ảnh

Nếu chủ đề của bạn không hiển thị thanh bên trên trang của bạn, 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 chúng tôi đảm nhận việc 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(); ?>

Sau đó, bạn phải tải tập tin Full-width.php »Trên thư mục chủ đề WordPress của bạn bằng cách sử dụng FTP client.

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

Đi đến bảng điều khiển của bạn 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, tìm hộp kiểm thuộc tính trang và nhấp vào menu thả xuống trong tùy chọn "Mẫu".

Lựa chọn mô hình trong ấn bản của các trang wordpress

Bạn sẽ có thể nhìn thấy mô hình của bạn. Đi trước, chọn nó và lưu hoặc 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 rằng 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 trang cột duy nhất. Nó có thể chưa đầy, nhưng bây giờ bạn đã sẵn sàng để phát nó theo cách khác.

Làm cho trang web của bạn trở nên phổ biến bằng cách khám phá Các plugin 7 WordPress để tối ưu hóa SEO hình ảnh của bạn

Bạn sẽ cần sử dụng công cụ Kiểm tra để khám phá các lớp CSS mà chủ đề của bạn sử dụng để 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 cách sử dụng CSS. Chúng tôi đã sử dụng mã CSS sau:

.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ó sẽ trông giống như Twenty Seventeen.

Trình bày demo theme wordpress

Đó là tất cả cho hướng dẫn này, tôi hy vọng nó sẽ cho phép bạn tạo các trang có chiều rộng đầy đủ.

Các phương pháp trên là miễn phí cho những người có đủ khả năng và muốn nhanh chóng tạo bố cục chiều rộng đầy đủ hoặc chiều rộng đầy đủ một cách dễ dàng.

Khám phá thêm một số plugin WordPress cao cấp  

Bạn có thể sử dụng cái khác plugin WordPress để tạo ra một giao diện hiện đại và để tối ưu hóa việc xử lý blog hoặc trang web của bạn.

Chúng tôi cung cấp cho bạn ở đây một số plugin WordPress cao cấp sẽ giúp bạn làm điều đó.

1. Người xây dựng Divi

Divi Builder là một người xây dựng trang chất lượng cao rất được đánh giá cao bởi Elegant Themes. Mặc dù nó thường được sử dụng như một phần của chủ đề Divi WordPress, nhưng Divi Builder cũng là một plugin độc lập mà bạn có thể sử dụng trên các chủ đề WordPress khác.

Divi e1544278044306

Divi Builder cho phép bạn chỉnh sửa nội dung của mình bằng giao diện trực quan ở front-end cũng như giao diện ở back-end, mặc dù hầu hết người dùng thích giao diện đầu tiên hơn.

Về cơ bản, thay vì các thanh bên, tất cả đều ở dạng cửa sổ bật lên và các nút nổi. Nó cho phép bạn truy cập vào 316 mẫu được thiết kế sẵn trải rộng trên 40 gói bản trình bày khác nhau, cũng như khả năng lưu thiết kế của riêng bạn dưới dạng mẫu.

Chúng tôi đề nghị bạn khám phá Cách tạo một blog chuyên nghiệp

Một trong những đặc điểm của Divi luôn là sự kiểm soát các phong cách anh ấy mang lại cho bạn. Trên ba tab khác nhau, bạn có thể định cấu hình các cài đặt khác nhau, bao gồm các điều khiển phản hồi, khoảng cách tùy chỉnh và hơn thế nữa.

Bạn thậm chí có thể thêm CSS tùy chỉnh, vì trình chỉnh sửa CSS của nó bao gồm xác thực cơ bản và tự động hoàn thành. Một trong những lời chỉ trích về Divi Builder luôn là nó dựa vào shortcodes. Điều đó có nghĩa là nếu bạn vô hiệu hóa nó một ngày, nó sẽ để lại một loạt các mã ngắn trong nội dung của bạn. Mặc dù điều này hơi thất vọng, nhưng bây giờ ít vấn đề hơn là các plugin như Shortcode Cleaner tồn tại.

Tải về | Bản demo | Web hosting

2. Người xây dựng theo chủ đề

Không ngạc nhiên khi Themify Builder là sản phẩm của nhóm Themify. Nó tích hợp nó vào một số chủ đề WordPress của họ để cung cấp cho khách hàng các tùy chọn tùy chỉnh đơn giản. Nhưng bạn cũng có thể mua nó như một plugin độc lập và sử dụng nó với bất kỳ chủ đề WordPress nào.

Màn hình hoạt ảnh của trình tạo Themify e1544277050530

Giống như Divi Builder và WPBakery Page Builder, Themify Builder cho phép bạn tạo bố cục ở front-end hoặc back-end. Một điều tốt nữa là plugin này cho phép bạn tùy chỉnh các điểm ngắt đáp ứng của mình (nhưng chỉ ở cấp toàn bộ trang web).

Khám phá Cách cài đặt và định cấu hình WooC Commercetạo một cửa hàng trực tuyến và dễ dàng bán sản phẩm của bạn trên Internet 

Một điều thú vị về Themify Builder là nó vẫn cho phép bạn sử dụng trình chỉnh sửa WordPress tiêu chuẩn, trong khi các trình tạo trang khác buộc bạn phải sử dụng giao diện WordPress. trình tạo trang cho tất cả.

Tải về | Bản demo | Web hosting

3. Elementor

Được ra mắt lần đầu vào năm 2016, plugin Elementor WordPress là một trong những trình tạo trang trẻ nhất trong danh sách này. Mặc dù khởi đầu muộn, Elementor nhanh chóng đạt được hơn 1 lượt cài đặt đang hoạt động trên WordPress.org, khiến nó trở thành một trong những trình tạo trang WordPress phổ biến nhất.

Elementor pro e1544277036401

Điều làm nên danh tiếng của nó là giao diện trực quan mượt mà, các tùy chọn phong cách khác nhau và các tính năng mạnh mẽ khác như tạo hoàn chỉnh các chủ đề WordPress.

Giao diện của nó được chia thành hai phần chính, với một khu vực thứ ba cho các tham số nhất định. Phiên bản miễn phí của Elementor cung cấp các widget miễn phí 28. Phiên bản Pro mang đến 30 các widget khác, tổng cộng các widget 58 trong phiên bản Pro. Phiên bản miễn phí bao gồm các mẫu miễn phí 40, trong khi phiên bản Pro mang đến hàng trăm mẫu bổ sung.

 Tải về | Bản demo | Web hosting

Các tài nguyên được đề xuất khác

Tìm hiểu về các tài nguyên được đề xuất khác để giúp bạn xây dựng và quản lý trang web của mình.

Kết luận

Đây là ! Đó là nó cho hướng dẫn này. Nếu bạn có một chủ đề WordPress không cung cấp trang Chiều rộng đầy đủ làm mẫu, thì chúng tôi hy vọng hướng dẫn này đã giúp bạn giải quyết vấn đề đó. Đừng ngần ngại chia sẻ với bạn bè của bạn trên các mạng xã hội yêu thích của bạn

Tuy nhiên, bạn cũng sẽ có thể tham khảo ý kiến ​​của chúng tôi ressources, nếu bạn cần thêm các yếu tố để thực hiện các dự án tạo trang Internet của mình, bằng cách tham khảo hướng dẫn của chúng tôi về Tạo blog WordPress.

Nếu bạn có đề xuất hoặc nhận xét, hãy để lại trong phần của chúng tôi ý kiến.

...