Bạn có đang cố gắng hiểu ý nghĩa của các thuật ngữ layout WordPress không?
Nhiều người mới bắt đầu gặp phải các thuật ngữ và từ vựng về layout WordPress khi làm việc trên website của họ. Đây là những từ được các nhà thiết kế và developer sử dụng và người dùng trung bình có thể thấy chúng khó hiểu.
Trong hướng dẫn này, WPBeginner Việt Nam sẽ giải thích một số thuật ngữ layout WordPress được sử dụng phổ biến nhất. Điều này sẽ giúp bạn hiểu được thuật ngữ được sử dụng cho layout website WordPress và làm việc trên website của bạn như một chuyên gia thực thụ.
Tại sao phải học thuật ngữ về layout WordPress?
Chủ đề WordPress kiểm soát giao diện website của bạn. Tùy thuộc vào theme bạn đang sử dụng, bạn có thể custom theo nhiều cách.
Đối với các theme hỗ trợ trình chỉnh sửa website đầy đủ, bạn có thể custom chúng bằng cách truy cập Xuất hiện » Biên tập viên trang.
Nếu bạn sử dụng theme cổ điển (theme hiện không hỗ trợ trình chỉnh sửa website đầy đủ), thì bạn có thể custom theme đó bằng cách truy cập Giao diện » Tùy chỉnh trang.
Thao tác này sẽ khởi chạy trình custom theme, trông như thế này:
Tất cả các theme WordPress hàng đầu đều có option để sửa đổi thiết kế website của bạn bằng cách sử dụng trình custom theme hoặc trình chỉnh sửa website đầy đủ, nhưng option của bạn bị hạn chế tùy thuộc vào theme.
Bạn có thể sử dụng plugin xây dựng trang WordPress như Hạt giống để linh hoạt hơn nữa.
SeedProd cho phép bạn dễ dàng tạo layout custom bằng các công cụ kéo và thả đơn giản mà không cần viết bất kỳ code nào.
Nó cũng có hàng chục mẫu bạn có thể sử dụng làm điểm khởi đầu. Thêm vào đó, SeedProd hỗ trợ WooCommerce, giúp bạn tạo layout cho cửa hàng trực tuyến của mình.
Tuy nhiên, khi bạn tạo layout cho website của mình, bạn có thể gặp phải các thuật ngữ thiết kế web mà bạn không quen thuộc.
Tìm hiểu các thuật ngữ về layout website này sẽ giúp bạn hiểu được các thành phần cơ bản của thiết kế website WordPress để bạn có thể dễ dàng tạo ra bất kỳ thiết kế nào bạn có thể tưởng tượng.
Hãy cùng giải code những thuật ngữ layout WordPress phổ biến này để tìm hiểu ý nghĩa của chúng và cách sử dụng chúng. Sau đây là danh sách nhanh các khái niệm và thuật ngữ mà WPBeginner Việt Nam sẽ giải thích trong bài viết này:
Hiểu về một layout WordPress điển hình
Hầu hết các website đều sử dụng một layout rất quen thuộc. Nó trông giống như thế này:
Phần trên cùng của một website được gọi là header trang, tiếp theo là phần content và footer trang ở cuối trang.
Bố cục có thể khác nhau tùy thuộc vào trang người dùng xem.
Ví dụ, trang blog WordPress có thể bao gồm sidebar cạnh khu vực content.
Bố cục cơ bản này còn chứa nhiều thành phần khác mà chúng ta sẽ thảo luận sau trong bài viết này.
Trước tiên chúng ta hãy nói chi tiết hơn về từng phần chính này.
Tiêu đề trong layout WordPress là phần trên cùng của bất kỳ trang nào. Nó thường chứa logo website, tiêu đề, menu điều hướng, form tìm kiếm và các yếu tố quan trọng khác mà bạn muốn người dùng nhìn thấy đầu tiên.
Phần tiêu đề trông như thế này trên WPBeginner.
Nhiều theme WordPress phổ biến đi kèm với các tính năng bổ sung để custom vùng tiêu đề của layout WordPress của bạn. Tính năng này đôi khi được gọi là tiêu đề custom.
Nếu bạn sử dụng theme block có hỗ trợ trình chỉnh sửa website, thì bạn có thể thay đổi tiêu đề bằng cách nhấp vào vùng tiêu đề trong trình chỉnh sửa website.
Từ đây, bạn có thể custom tiêu đề theo ý thích. Bạn có thể thay đổi màu sắc và menu điều hướng và thêm các block như tìm kiếm, logo website, nút và nhiều hơn nữa.
Đối với các theme cổ điển, bạn có thể tìm thấy cài đặt tiêu đề custom trong tab ‘Tùy chọn tiêu đề’.
Tùy thuộc vào theme WordPress của bạn, bạn có thể thêm hình ảnh toàn chiều rộng vào tiêu đề với dòng khẩu hiệu hoặc nút kêu gọi hành động.
Một số theme WordPress có thể cho phép bạn thay đổi vị trí logo, menu điều hướng và hình ảnh tiêu đề.
Nền custom trong WordPress
Một số theme WordPress cũng cho phép bạn dễ dàng thay đổi màu nền hoặc sử dụng hình ảnh nền cho website của mình.
Nếu bạn sử dụng theme có hỗ trợ trình chỉnh sửa website, bạn có thể thay đổi màu nền bằng cách vào mục ‘Kiểu’ trong trình chỉnh sửa website đầy đủ.
Chỉ cần chọn option ‘Màu sắc’ từ bảng Kiểu.
Sau đó, bạn có thể nhấp vào ‘Nền’ để chọn màu nền cho website của mình.
Đối với các theme cổ điển, cài đặt sẽ phụ thuộc vào tính năng theme của bạn.
Nhiều theme cổ điển đi kèm với hỗ trợ nền custom. Bạn có thể tìm thấy các thiết lập này trong option ‘Màu sắc’ hoặc ‘Hình nền’ trong trình custom theme.
Thông thường, các option này nằm bên trong các tab khác và bạn sẽ phải tìm kiếm xung quanh để tìm chúng.
Để biết thêm chi tiết, bạn có thể xem hướng dẫn của WPBeginner Việt Nam về cách thêm hình nền vào WordPress hoặc thay đổi màu nền trong WordPress.
Khu vực content trong WordPress
Khu vực content nằm ngay sau phần tiêu đề của layout website. Đây là nơi hiển thị content chính của trang.
Đối với layout trang chủ custom, phần content có thể bao gồm lời kêu gọi hành động theo sau là các dịch vụ hoặc sản phẩm, lời chứng thực và thông tin quan trọng khác.
Các cửa hàng trực tuyến thường sử dụng khu vực này để quảng bá các chương trình khuyến codei đang diễn ra, sản phẩm nổi bật, mặt hàng bán chạy nhất, v.v.
Mặt khác, một website có nhiều content như blog hoặc tạp chí có thể sử dụng layout tập trung nhiều vào content.
Nó sẽ hiển thị các bài viết mới nhất với các trích đoạn và hình ảnh, có thể hiển thị form đăng ký nhận bản tin để xây dựng danh sách email hoặc sử dụng các khu vực khám phá content để giúp người dùng tìm ra nhiều cách hơn để dành thời gian trên website.
Sau đây là giao diện trang blog của WPBeginner.
Nó giới thiệu content phổ biến nhất của WPBeginner Việt Nam với lời kêu gọi hành động để người dùng tham gia danh sách email của WPBeginner Việt Nam. (Xem: các phương pháp khác mà WPBeginner Việt Nam sử dụng để phát triển danh sách email của mình)
Theo mặc định, WordPress sử dụng layout blog hiển thị các bài đăng gần đây nhất của bạn làm trang chủ của website.
Tuy nhiên, bạn có thể thay đổi cài đặt đó và sử dụng bất kỳ trang nào làm trang chủ của website của bạn.
Chỉ cần đi đến Cài đặt » Đọc và chọn ‘Trang tĩnh’ bên dưới option ‘Trang chủ của bạn hiển thị’.
Sau đó, bạn có thể chọn một trang bạn muốn sử dụng làm trang chủ và một trang khác làm trang blog của mình.
Để biết thêm chi tiết, hãy xem hướng dẫn của WPBeginner Việt Nam về cách tạo trang riêng cho bài đăng trên blog của bạn trên WordPress.
Đừng quên nhấp vào nút ‘Lưu thay đổi’ để lưu cài đặt của bạn.
Bây giờ, bạn có thể chỉnh sửa trang bạn đã chọn làm trang chủ và tạo layout trang chủ custom.
Đúng như tên gọi, sidebar thường xuất hiện ở bên phải hoặc bên trái của vùng content.
Trong WordPress, sidebar cũng là khu vực sẵn sàng cho tiện ích. Điều này có nghĩa là bạn có thể thêm tiện ích vào khu vực này và hiển thị các thành phần như lưu trữ, form đăng ký bản tin, category, content phổ biến, v.v.
Để chỉnh sửa sidebar của bạn, bạn cần phải đi đến Giao diện » Tiện ích trang. Từ đây, bạn có thể thêm các block vào sidebar và chỉnh sửa chúng theo ý thích.
Tuy nhiên, không phải tất cả các giao diện WordPress đều có khu vực hoặc sidebar có sẵn tiện ích.
Nếu bạn không thể nhìn thấy menu Tiện ích bên dưới Vẻ bề ngoàithì theme của bạn không hỗ trợ sidebar hoặc không có bất kỳ vùng nào có sẵn tiện ích.
Phần chân trang xuất hiện bên dưới phần content ở cuối layout trang.
Nếu bạn sử dụng theme WordPress có hỗ trợ trình chỉnh sửa website, bạn có thể chỉnh sửa footer trang bằng cách nhấp vào đó.
Bạn cũng có thể chỉnh sửa vùng chân trang bằng cách nhấp vào ‘Mẫu’ trong điều hướng trình chỉnh sửa website. Vùng chân trang sẽ xuất hiện bên dưới mục menu ‘Phần mẫu’.
Khi chỉnh sửa footer trang trong trình chỉnh sửa website, bạn có thể thêm bất kỳ block nào để hiển thị các thành phần khác nhau.
Ví dụ, bạn có thể thêm danh sách các trang quan trọng nhất, hiển thị menu điều hướng, thêm form liên hệ, v.v.
Nếu bạn đang sử dụng một theme cổ điển, thì rất có thể theme của bạn sẽ có một khu vực tiện ích ở chân trang.
Chỉ cần đi đến Giao diện » Tiện ích trang và tìm kiếm khu vực tiện ích chân trang.
Giống như trình chỉnh sửa website, bạn có thể sử dụng các block để thêm các thành phần khác nhau vào tiện ích chân trang trong theme của mình.
Bạn đang tự hỏi nên đưa gì vào footer trang của website? Hãy xem danh sách kiểm tra những thứ cần thêm vào footer trang của website WordPress của bạn.
Các thành phần khác của một layout WordPress
Tiếp theo, chúng ta sẽ xem xét một số thành phần của layout WordPress mà bạn có thể thêm vào phần tiêu đề, content, sidebar hoặc chân trang. Đây là những block xây dựng giúp bạn tạo ra một layout hoạt động.
Menu điều hướng hoặc menu là danh sách link theo chiều ngang hoặc chiều dọc. Hầu hết các website đều có ít nhất một menu điều hướng chính trong vùng tiêu đề.
Tuy nhiên, một số website sử dụng nhiều menu điều hướng ở vùng tiêu đề.
WordPress cũng cho phép bạn hiển thị menu điều hướng dưới dạng tiện ích. Các menu này xuất hiện dưới dạng danh sách link theo chiều dọc và bạn có thể đặt chúng trong sidebar hoặc khu vực tiện ích chân trang.
Để biết thêm chi tiết, hãy xem hướng dẫn của WPBeginner Việt Nam về cách thêm menu điều hướng vào WordPress.
Sử dụng Widget trong Bố cục WordPress
Nếu theme WordPress của bạn hỗ trợ tiện ích, thì bạn có thể sử dụng chúng để sắp xếp lại layout website của mình. Thêm vào đó, với tiện ích block, theme của bạn hiện cũng có thể sử dụng các block trong các khu vực tiện ích.
Bạn có thể thêm tiện ích vào các khu vực hoặc sidebar sẵn sàng cho tiện ích của website WordPress. Một số theme WordPress có nhiều khu vực sẵn sàng cho tiện ích để thêm tiện ích hoặc block.
WordPress có một số tiện ích và block tích hợp mà bạn có thể sử dụng. Nhiều plugin WordPress phổ biến cũng cung cấp các tiện ích và block riêng của chúng.
Ví dụ, bạn có thể sử dụng tiện ích/block để thêm danh sách bài đăng phổ biến, form liên hệ, quảng cáo biểu ngữ, nguồn cấp dữ liệu mạng xã hội, v.v.
Bạn có thể xem tất cả các tiện ích này bằng cách truy cập Giao diện » Tiện ích trang trong khu vực quản trị WordPress.
Ghi chú: Bạn có thể không thấy trang ‘Tiện ích’ trong khu vực quản trị WordPress nếu theme của bạn không có khu vực tiện ích.
Để biết thêm chi tiết, hãy xem hướng dẫn của WPBeginner Việt Nam về cách thêm và sử dụng tiện ích trong WordPress.
Sử dụng block trong layout WordPress
WordPress sử dụng trình chỉnh sửa block để viết content, quản lý các khu vực tiện ích hoặc chỉnh sửa website của bạn. Nó sử dụng các block cho tất cả các thành phần web phổ biến, đó là lý do tại sao nó được gọi là trình chỉnh sửa block.
Trình chỉnh sửa này được thiết kế để giúp bạn tạo layout đẹp mắt cho các bài đăng và trang WordPress của mình bằng các block.
Có nhiều loại block khác nhau cho các thành phần phổ biến nhất của bất kỳ loại content nào. Ví dụ, bạn có thể thêm đoạn văn, tiêu đề, hình ảnh, thư viện, nhúng video, cột, bảng, v.v.
Tính năng này cho phép bạn tạo nhiều layout khác nhau cho mỗi bài đăng hoặc trang trên website WordPress của mình mà không cần cài đặt plugin hoặc thay đổi theme.
Hình ảnh nổi bật trong Bố cục WordPress
Nếu bạn truy cập trang chủ của WPBeginner, bạn sẽ thấy hình ảnh thu nhỏ bên cạnh mỗi tiêu đề bài viết. Chúng được gọi là hình ảnh nổi bật.
WordPress cho phép bạn thiết lập hình ảnh nổi bật cho bài đăng và trang của mình. Sau đó, theme WordPress của bạn sẽ sử dụng những hình ảnh này ở các khu vực khác nhau trên website của bạn.
Để tìm hiểu thêm, hãy xem hướng dẫn của WPBeginner Việt Nam về cách thêm hình ảnh nổi bật vào WordPress.
Ảnh bìa trong WordPress
Ảnh bìa thường là ảnh rộng được dùng làm ảnh bìa cho phần mới trong bài đăng hoặc trang blog.
Bạn có thể thêm nó vào bài đăng hoặc trang của mình bằng block Cover. Khối Cover cũng cho phép bạn sử dụng màu nền thay vì hình ảnh.
Để tìm hiểu thêm, hãy xem hướng dẫn chi tiết của WPBeginner Việt Nam về sự khác biệt giữa ảnh bìa và ảnh nổi bật.
Sử dụng Patterns trong WordPress Editor
Các mẫu là tập hợp các block được sắp xếp sẵn mà bạn có thể sử dụng để nhanh chóng thêm các phần khác nhau vào layout của mình.
Bạn có thể sử dụng mẫu để viết content và chỉnh sửa bài đăng và trang.
Tương tự như vậy, bạn có thể sử dụng các mẫu trong trình chỉnh sửa toàn bộ website trong theme WordPress và layout website của mình.
Chỉ cần khởi chạy trình chỉnh sửa website và bạn sẽ thấy các mẫu trong option ‘Thiết kế’.
Mỗi mẫu là một tập hợp các block được sắp xếp theo thứ tự cụ thể cho các layout thường dùng.
Chủ đề WordPress của bạn có thể có nhiều mẫu. Bạn cũng có thể tìm thêm nhiều mẫu trong Thư viện mẫu WordPress.
Bạn muốn lưu các phần thiết kế của mình? Bạn lưu các sắp xếp block của riêng mình dưới dạng mẫu và sử dụng lại sau.
Đây là một tính năng tương đối mới, vì vậy chỉ có một số mẫu có sẵn. Tuy nhiên, nhiều option hơn sẽ khả dụng khi nhiều theme và plugin WordPress thêm mẫu của chúng vào trình chỉnh sửa block.
Để tìm hiểu thêm, bạn có thể xem hướng dẫn của WPBeginner Việt Nam về cách sử dụng mẫu block trong WordPress.
Thêm nút vào layout WordPress
Các nút đóng vai trò quan trọng trong thiết kế và layout website hiện đại. Chúng cung cấp cho người dùng lời kêu gọi hành động rõ ràng, giúp bạn phát triển doanh nghiệp và chuyển đổi.
Trình chỉnh sửa block mặc định đi kèm với block Nút mà bạn có thể sử dụng trong bất kỳ bài đăng hoặc trang WordPress nào hoặc bên trong trình chỉnh sửa website.
Chủ đề WordPress của bạn cũng có thể đi kèm với cài đặt nút kêu gọi hành động trong trình custom theme. Hầu hết các plugin xây dựng trang WordPress phổ biến cũng đi kèm với các nút theo nhiều kiểu khác nhau mà bạn có thể sử dụng.
Bạn thậm chí có thể thêm nút nhấp để gọi vào WordPress bằng plugin.
Để biết thêm chi tiết, hãy xem hướng dẫn của WPBeginner Việt Nam về cách thêm nút kêu gọi hành động trong WordPress.
Sử dụng CSS custom trong layout WordPress
CSS là ngôn ngữ định dạng được sử dụng để tạo website. Chủ đề và plugin WordPress của bạn có các quy tắc CSS riêng, nhưng thỉnh thoảng, bạn có thể muốn thay đổi những thứ nhỏ như màu chữ, cỡ chữ hoặc màu nền.
Đây chính là lúc CSS custom phát huy tác dụng. WordPress giúp bạn dễ dàng lưu các quy tắc CSS custom của riêng mình.
Nếu bạn sử dụng một theme có hỗ trợ trình chỉnh sửa website, thì chỉ cần đi tới Xuất hiện » Biên tập viên trang để khởi chạy trình chỉnh sửa website.
Nhấp vào bất kỳ mẫu nào để bắt đầu chỉnh sửa, sau đó nhấp vào nút ‘Kiểu’ ở góc trên bên phải màn hình.
Thao tác này sẽ hiển thị bảng ‘Styles’ ở cột bên phải. Từ đây, cuộn xuống và nhấp vào tab ‘Additional CSS’.
Thao tác này sẽ hiển thị hộp văn bản nơi bạn có thể thêm code CSS bổ sung.
Đừng quên nhấp vào nút ‘Lưu’ để lưu lại những thay đổi khi bạn hoàn tất.
Nếu bạn đang sử dụng theme WordPress cổ điển, bạn có thể thêm CSS custom vào trình custom theme.
Chỉ cần đi đến Giao diện » Tùy chỉnh và sau đó nhấp vào tab ‘CSS bổ sung’.
Từ đây, bạn có thể thêm các quy tắc CSS custom và có thể thấy chúng được áp dụng trong bản xem trước trực tiếp.
Thêm CSS custom vào WordPress bằng cách sử dụng Plugin
Thông thường, nếu bạn sử dụng các phương pháp mặc định, thì code CSS custom của bạn sẽ được lưu cùng với cài đặt theme của bạn. Việc thay đổi theme sẽ vô hiệu hóa code CSS custom của bạn.
Một cách tốt hơn để lưu trữ CSS custom của bạn trong WordPress là sử dụng Mã WP plugin. Đây là plugin đoạn code WordPress tốt nhất cho phép bạn dễ dàng thêm đoạn code custom mà không làm hỏng website của bạn.
Đầu tiên, bạn cần cài đặt và kích hoạt Mã WP plugin. Để biết chi tiết, hãy xem hướng dẫn của WPBeginner Việt Nam về cách cài đặt plugin WordPress.
Sau khi kích hoạt, hãy đi đến Đoạn code » + Thêm mới từ dashboard quản trị WordPress.
Sau đó, di chuột qua option ‘Thêm code custom của bạn (Đoạn code mới)’ trong thư viện đoạn code và nhấp vào nút ‘Sử dụng đoạn code’.
Tiếp theo, ở đầu trang, thêm tiêu đề cho đoạn code CSS custom của bạn. Đây có thể là bất kỳ thứ gì giúp bạn xác định code.
Sau đó, hãy viết hoặc dán code CSS custom của bạn vào hộp ‘Xem trước code’ và đặt ‘Kiểu code’ bằng cách chọn option ‘Đoạn code CSS’ từ dropdown menu.
Sau đó, cuộn xuống phần ‘Chèn’ và chọn phương pháp ‘Tự động chèn’ nếu bạn muốn thực thi code trên toàn bộ website WordPress của mình.
Bạn có thể chọn phương pháp ‘Shortcode’ nếu bạn chỉ muốn thực thi code trên các trang hoặc bài đăng cụ thể.
Cuối cùng, hãy quay lại đầu trang, bật công tắc thành ‘Hoạt động’ rồi nhấp vào nút ‘Lưu đoạn trích’.
Thao tác này sẽ lưu đoạn code CSS custom của bạn.
Để biết thêm về theme này, hãy xem hướng dẫn đầy đủ của WPBeginner Việt Nam về cách thêm CSS custom vào WordPress.
Thuật ngữ bố trí trong WordPress Page Builders
Cách dễ nhất để xây dựng layout WordPress custom cho các landing page của bạn là sử dụng page builder WordPress.
Chúng tôi khuyên bạn nên sử dụng Hạt giống. Đây là plugin xây dựng trang WordPress tối ưu với người mới bắt đầu nhất trên thị trường.
Các trình xây dựng trang khác sử dụng các thuật ngữ tương tự cho các công cụ và tính năng phổ biến.
Sử dụng mẫu trong WordPress Page Builders
Mẫu là cách nhanh nhất để tạo layout website. Tất cả các plugin xây dựng trang phổ biến đều có một loạt các mẫu sẵn sàng sử dụng mà bạn có thể sử dụng làm điểm khởi đầu.
Ví dụ, SeedProd có các mẫu cho nhiều loại trang khác nhau mà bạn có thể cần, bao gồm landing page, trang bán hàng, trang 404, trang sắp ra mắt, v.v.
Các mô-đun và block trong WordPress Page Builders
Giống như các block trong trình chỉnh sửa WordPress mặc định, các plugin xây dựng trang cũng sử dụng các block.
Một số trình xây dựng trang có thể gọi chúng là mô-đun hoặc phần tử, nhưng về cơ bản chúng là như nhau.
Tuy nhiên, các plugin xây dựng trang có nhiều block hơn trình chỉnh sửa mặc định. Ví dụ, SeedProd bao gồm các block cho lời chứng thực, block WooCommerce, Google Maps, form liên hệ, nhúng Facebook, v.v.
Bạn có thể sử dụng các block để tạo layout của riêng mình, di chuyển chúng và thử nghiệm để tìm ra layout phù hợp nhất cho doanh nghiệp của mình.
Sử dụng các phần trong layout WordPress của bạn
Tương tự như tính năng ‘Mẫu’ trong trình chỉnh sửa mặc định, Mục là một tập hợp các block được nhóm lại để tạo ngay lập tức các khu vực chung của một website.
Ví dụ, bạn thường có thể sử dụng phần tiêu đề, hình ảnh nổi bật, bảng giá, v.v.
Các plugin xây dựng trang WordPress khác nhau có thể sử dụng các thuật ngữ khác nhau cho chúng. Ví dụ, trong SeedProd, chúng được gọi là các phần và Beaver Builder gọi chúng là các hàng và cột đã lưu.
Chúng tôi hy vọng bài viết này giúp bạn tìm hiểu về các thuật ngữ được sử dụng trong layout WordPress. Bạn cũng có thể muốn xem hướng dẫn của WPBeginner Việt Nam về cách học WordPress miễn phí trong một tuần hoặc so sánh các công ty hosting WordPress tốt nhất của WPBeginner Việt Nam.
Nếu bạn thích bài viết này, vui lòng đăng ký theo dõi WPBeginner Việt Nam Kênh Youtube cho các video hướng dẫn về WordPress. Bạn cũng có thể tìm thấy WPBeginner Việt Nam trên Twitter Và Facebook.