Bố Cục (Layout) của Website và Dashboard WordPress

Bố cục hay còn được gọi là Layout của một trang web đóng vai trò quan trọng để bạn sử dụng website lâu dài, Layout hợp lý tạo ra trải nghiệm người dùng tốt hơn. Ngoài ra, người sở hữu website tùy vạo mục tiêu kinh doanh của mình mà chọn layout phù hợp. Bạn hình dung website là một cái nhà, thì bố cục (layout) là việc bạn đang chi ngôi nhà ra thành các phòng làm sao có thể dùng thoải mái nhất.

Cùng một diện tích trên màn hình máy tính hoặc điện thoại, tùy mỗi nhà thiết kế mà chúng ta có được những giao diện khác nhau, có những giao diện rất đẹp. Có những giao diện sử dụng diện tích màn hình chưa hợp lý, đem đến trải nghiệm người dùng chưa tốt. Vậy người mới làm thế nào để có layout (bố cục) Wesbite hợp lý? Câu trả lời đơn giản là hãy dành thời gian cho thiết kế hoặc nếu dùng WordPress thì chọn theme (giao diện).

Trong bài này chúng ta sẽ tìm hiểu về bố cục (layout) của một trang web, tiếp theo là tổng quan các phần trong trang quản trị – Dashboard của website WordPress.

Tìm hiểu bố cục (layout) của một trang web

Bố cục (layout) của trang web là gì ?

Bố cục của  trang web là sự bố trí, tổ chức, sắp xếp các phần chính trên giao diện của nó theo ý đồ của người thiết kế website.

Trang web là một phần của website, một website có nhiều web page (trang web). Tùy theo người thiết kế mà những trang trên website có thể được tổ chức với bố cục khác nhau. 

Bố cục (layout) cơ bản của trang web

Một website có thể được hiển thị với nhiều dạng bố cục khác nhau trên các trang của nó. Tuy nhiên, nếu bạn là người mới thì chỉ nên tìm hiểu về dạng bố cục cơ bản để dễ hình dung hơn. Mẫu bố cục dưới đây là được sử dụng phổ biến, thường áp dụng cho trang chủ trên website (home page layout).

Website bạn đã tạo được trong các bài trước có bố cục tương tự như hình trên, dưới đây mình sẽ khoanh vùng các khu vực kèm theo vai trò của từng vùng để bạn hình dung.

• Header (phần đầu trang): Là khu vực trên cùng của trang web, ở đó chứa các phần nhỏ bên trong như: Tên website/ logo, câu khẩu hiệu slogan, banner quảng cáo, khung tìm kiếm,…
• Menu (hoặc gọi đầy đủ Navigation Menu): Là thanh chứa các trình đơn (menu items) để điều hướng người dùng đến những trang đã định sẵn. Các trình đơn ở đây có thể là: liên kết chuyên mục, liên kết trang,… Nếu bạn chưa hình dung ra thì xem hình bên dưới sẽ hiểu trình đơn là gì thôi.

• Content (nội dung): Đây là khu vực hiển thị nội dung của website, có thể là nội dung của một trang, của một bài viết hoặc danh sách các bài viết, một hình ảnh, video,…
• Sidebar (thanh bên): Là khu vực nằm bên trái hoặc phải của phần content, thường dùng để đặt các widget (tiện ích) như: Danh sách những bài mới đăng gần đây (Recent Posts), những bình luận gần đây ( Recent Comments),…
• Footer (chân trang): Là khu vực dưới cùng của một trang web, hiển thị ở đây thường là các thông tin ngắn gọn về: Quyền sở hữu, giấy phép website, địa chỉ doanh nghiệp, email, số điện thoại, các liên kết website,… Dưới đây là ví dụ về footer của website vtv.vn để các bạn dễ hình dung hơn.

Tổng quan về trang quản trị Dashboard của WordPress

Sau đây chúng ta sẽ tìm hiểu về trang quản trị Dashboard của WordPress, để biết được nó bao gồm những phần nào và vai trò tương ứng. Trước tiên bạn mở trang Dashboard của WordPress bằng các cách sau:

Cách 01: Sau khi đăng nhập website WordPress thì trang đầu tiên mở ra chính là Dashboard.

Cách 02: Nếu bạn đang ở một trang bất kỳ thì mở Dashboard lên bằng cách truy cập đường dẫn:

http://localhost:8888/tenwebsite/wp-admin/

Bạn nhớ thay thế đoạn tenwebsite thành tên website mà bạn đã tạo trước đó. Nếu từ đầu bạn làm giống như mình thì đường dẫn để mở Dashboard sẽ là:

http://localhost:8888/demo/wp-admin/

Nếu bạn đã cài đặt website lên hosting rồi thì bạn dùng tenmien/wp-admin nhé

Cách 03: Nếu bạn đang bên ngoài giao diện website thì có thể rê chuột vào chỗ tên website và nhấn vào Dashboard như hình bên dưới. Hoặc cứ nhấn vào tên website thì nó sẽ tự động chuyển qua lại giữa 02 giao diện này.

Dashboard của website WordPress là gì ?

Dashboard Screen còn gọi là trang quản trị của website WordPress, là nơi thực hiện việc quản lý, thiết đặt cũng như theo dõi tình hình hoạt động của website thông qua các báo cáo, thống kê trong đó.

• Quản lý website là: thêm/ chỉnh sửa/ cập nhật, xóa bài viết, hình ảnh, video, trang và cả theme, plugin.
• Thiết đặt ở đây là những việc như: Cài đặt ngày giờ, ngôn ngữ, giao diện, các chức năng bổ sung,…
• Xem các báo cáo, thống kê về: Số bài viết, bình luận, lượt truy cập, tình trạng bảo mật của website, các đơn đặt hàng – tình trạng đơn hàng (nếu dạng shop),…

Những công trên không phải mỗi website đều phải thực hiện như vậy, còn tùy thuộc vào loại website cũng như chủ ý của người quản trị web mà họ sẽ thêm vào những tính năng tương ứng. Website của bạn khi mới cài thì chưa có hết những cái nêu ra ở trên, chỉ khi nào bạn cần thì mới cài thêm tính năng đó. 

Bố cục (layout) Dashboard của website WordPress

Bố cục bên ngoài giao diện website được quyết định bởi người thiết kế web hoặc theme, còn trang Dashboard của các website WordPress đều giống nhau. Lưu ý là giống nhau về bố cục, còn tính năng cũng như cách sắp đặt các phần trong đó thì vẫn có thể khác nhau.

Dưới đây là bố cục trang Dashboard WordPress, trong đó bao gồm các khu vực được khoanh lại và những thành phần bên trong với vai trò tương ứng.

Thanh công cụ (toolbar): là nơi đặt các liên kết, nút nhấn truy cập nhanh các tính năng, tác vụ thường làm trên WordPress. Các thao tác nhanh này có thể là: chuyển đổi qua lại giữa trang quản trị và giao diện bên ngoài website, tạo bài viết mới, tạo trang mới, thêm người dùng mới, đăng một hình ảnh hoặc tập tin đa phương tiện (hình ảnh, video, file mp3,…), tùy chỉnh giao diện,…

Đây cũng là nơi hiển thị trạng trạng thái, thông báo và cảnh báo về website hoặc với trang mà bạn đang truy cập. Ví dụ:

• Khi website bạn có bản cập nhật mới về mã nguồn WordPress, theme, plugin thì nó sẽ hiện thông báo có cập nhật để người quản trị nhìn thấy được khi ở bên ngoài Dashboard.
• Nếu bạn có sử dụng công cụ hỗ trợ SEO (như Yoast SEO) nó sẽ hiển thị cảnh báo các vấn đề về SEO website ngay trên thanh này để bạn biết mà tiến hành khắc phục. 

Thanh điều hướng (navigation bar): Là khu vực hiển thị và điều hướng các mục thiết lập, các chức năng, công cụ của website (bao gồm những tính năng có sẵn và cài thêm). 

Vùng làm việc (work area): Là khu vực mà bạn thực hiện các thao tác: lựa chọn, kéo thả và nhập liệu tương ứng với từng mục mà bạn chọn ở bên thanh điều hướng. Dưới đây là ví dụ để bạn hình dung:

• Thao tác lựa chọn: khi bạn chọn vào mục Settings bên thanh điều hướng (navigation bar) thì bên trong vùng làm việc (work area) sẽ hiện ra các mục thiết lập. Như hình bên dưới đang trỏ tại mục định dạng thời gian hiển thị trên website. Và khi bạn chọn một định dạng thời gian trong đó được xem là thao tác lựa chọn.

• Thao tác nhập liệu: Cái này khá dễ hình dung, khi bạn điền thông tin vào các biểu mẫu hoặc soạn văn bản trong mục viết bài chính là đang nhập liệu.
• Thao tác kéo thả: Trong phần quản lý tiện ích của website WordPress, bạn có thể nhấn giữ vào một tiện ích (widget) trên sidebar, sau đó kéo thả vào một vị trí ở footer chẳng hạn. 

Trong vùng làm việc còn có một thanh công cụ nữa, nó có tên là Screen Options, thanh này thường khả dụng khi bạn nhấp vào một mục bên thanh thanh điều hướng (navigation bar) mà mục đó nó hiện ra dạng danh sách như: bài viết (posts), trang (pages), plugins, người dùng (users), bình luận (comments),.. Hoặc khi bạn mở trình soạn thảo bài viết (Posts), trang (Pages).

Thanh Screen Options cho phép ta chọn ẩn hoặc hiển thị những thuộc tính của danh sách bên dưới nó, nhằm thu gọn những thông tin không cần thiết hoặc hiển thị ra khi cần. Ví dụ khi bạn không muốn hiển thị thông tin tác giả bài viết trong danh sách (đơn giản là để nó gọn hơn) thì bỏ tick vào mục Author như hình bên dưới.

Trong Vùng làm việc (work area) khi ở trang chủ của Dashboard còn các mục con, dưới đây mình nêu tổng quan từng vùng để bạn hình dung:

• Welcome to WordPress! : Là những việc mà WordPress đề xuất cho người mới cài WordPress, tuy nhiên bạn đang học theo Series này thì không cần quan tâm các đề xuất đó.
• Site Health Status: Tình trạng “sức khỏe” website, các vấn đề bảo mật, cập nhật plugin, theme,..
• Quick Draft: Tạo nhanh một bài viết
• At a Glance: Thống kê nhanh về số bài viết, trang, bình luận, phiên bản WordPress hiện tại.
• Activity: Những hoạt động gần đây diễn ra trên website như: bài đăng gần đây, bình luận gần đây,..
• WordPress Events and News: Các tin tức và sự kiện liên quan đến WordPress.

Khu vực chân trang của Dashboard: Bạn cũng có thể không cần quan tâm khu vực này lắm, chỗ này đơn giản chỉ có dòng cảm ơn từ WordPress và phiên bản WordPress mà bạn đang sử dụng.

Những câu hỏi thường gặp

Sau đây là những câu hỏi thường gặp khi bạn thường hỏi về Layout trong WordPress.

TỔNG KẾT

Qua bài này bạn chỉ cần nắm được bố cục (layout) của một trang web gồm những thành phần nào và vai trò của từng phần trên đó. Tiếp theo là nắm được bố cục của trang dashboard và khu vực trong đó.

Nhìn chung bài này chỉ mang tính chất khái quát, cho cái nhìn tổng quan về giao diện bên trong và bên ngoài website WordPress để tiện cho việc theo dõi và thực hành ở các bài sau.

Nếu bạn muốn dùng dịch vụ thiết kế website của IMTA, chúng tôi có nhiều giao diện và sẽ tùy chỉnh giao diện theo yêu cầu của các bạn.

Cảm ơn bạn đã đọc bài viết!