Bạn muốn tạo một trang WordPress toàn chiều rộng? Nhiều chủ đề WordPress đã đi kèm với một mẫu trang có chiều rộng đầy đủ tích hợp mà bạn có thể sử dụng. Tuy nhiên, một số chủ đề không có đặc điểm đó. 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 có chiều rộng đầy đủ trong WordPress.
phương pháp 1: sử dụng một mẫu có chiều rộng đầy đủ được tích hợp trong chủ đề 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 có chiều rộng đầy đủ.
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ới trang.
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 toàn chiều rộng, bạn nê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 toàn chiều rộng trên màn hình chỉnh sửa trang của mình, điều này có nghĩa là chủ đề của bạn không có mẫu trang toàn chiều rộng.
Đừng lo lắng, 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 mà không thay đổi chủ đề WordPress của bạn.
phương pháp 2: Tự tạo một mẫu trang có 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 chủ đề WordPress và có 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 hướng dẫn của chúng tôi về cách sao chép / dán mã trong WordPress.
Trước khi tiếp tục, bạn phải 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:
Bây giờ bạn cần lưu tệp này dưới dạng full-width.php trên máy tính của bạn.
Mã này chỉ đơn giản là xác định tên của tệp mẫu và yêu cầu WordPress tìm kiếm mẫu tiêu đề.
Tiếp theo, bạn sẽ cần một 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 / your-theme-thư mục /.
Bây giờ bạn cần xác định vị trí tệp có tên page.php. Đây là tệp mẫu trang mặc định cho chủ đề 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 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:
Dòng này chỉ đơn giản là tìm kiếm thanh bên và hiển thị nó trong chủ đề của bạn. Khi bị xóa, chủ đề sẽ không được hiển thị trong 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 hơn một lần trong chủ đề của bạn. Nếu chủ đề của bạn có nhiều barras bên (khu vực widget chân trang cũng được gọi là barras ), 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 cái gì barras bên bạn muốn giữ
Nếu chủ đề của bạn không hiển thị barras trên các trang, bạn có thể không tìm thấy mã này trong tệp của mình.
Đây là mã full-width.php của chúng tôi trông như thế nào sau khi thực hiện 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.
Tiếp theo, bạn cần tải lên 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 và tải thành công mẫu trang toàn chiều rộng 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 một trang có chiều rộng đầy đủ.
Chuyển đến 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, định vị hộp meta thuộc tính trang và nhấp vào tùy chọn “Mẫu” trên menu thả xuống.
Bạn sẽ có thể thấy mẫu chiều rộng đầy đủ của bạn ở đó. Đi trước và chọn nó và lưu / làm mới trang.
Bây giờ bạn có thể truy cập trang web của họ và bạn sẽ thấy rằng barras Lối đi đã 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ụ Kiểm tra để khám phá 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. Chúng tôi sử dụng mã CSS sau trên 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à giao diện trên trang demo của chúng tôi bằng chủ đề Twenty Sixteen.
phương pháp 3: Tạo trang toàn chiều rộng với plugin Trình tạo trang
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 trang chiều rộng đầy đủ của bạn và tạo bố cục trang khác nhau cho trang web của bạn.
Đối với phương pháp 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 trang kéo và thả tốt nhất và cho phép bạn dễ dàng tạo bố cục trang mà không cần viết bất kỳ mã nào.
Điều đầu tiê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 phải 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 chiều rộng đầy đủ được cung cấp bởi chủ đề WordPress của bạn.
Nếu chủ đề của bạn không có mẫu toàn chiều rộng, 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 phương pháp 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 Dự thảo để 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 thiết kế của mình. Bạn sẽ bắt đầu bằng cách nhấp vào tab trình tạo trang trên trình chỉnh sửa trang.
Điều này sẽ mở giao diện trình tạo trang, nơi bạn 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 được thiết kế chuyên nghiệp, sẵn sàng sử dụng 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 chuẩn bị và tạo thiết kế của riêng bạn.
Bố trí Beaver Builder được tạo với các hàng và mô-đun. 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 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 vật phẩm 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 thiết kế 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ể 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. Thao tác này sẽ hiển thị cửa sổ bật lên trong đó bạn phải 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 họ để xem nó trong hành động.
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 WordPress toàn chiều rộng. Bạn cũng có thể xem hướng dẫn của chúng tôi về cách thêm hình nền toàn màn hình trong WordPress.
Nếu bạn thích bài viết này, đăng ký kênh của chúng tôi YouTube để xem video hướng dẫn WordPress. Bạn cũng có thể tìm thấy chúng tôi tại Twitter và Facebook.
