Phần này mình sẽ hướng dẫn bạn cách chỉnh sửa giao diện wordpress, hay còn gọi là tùy biến giao diện demo theo chủ đề Website của bạn. Bao gồm chỉnh sửa tên Website, thay đổi Logo, thiết kế Menu, màu sắc của giao diện, hình ảnh đầu trang Web…

Khuyến cáo trước khi đọc: Phần chỉnh sửa giao diện WordPress tương đối dài, nhiều hình ảnh và hướng dẫn. Bạn nên thực hành song song thì sẽ hiệu quả hơn.

Đầu tiên, để vào phần chỉnh sửa giao diện, từ trang quản trị WordPress (wp-admin), bạn vào Giao diện  Tùy biến

Chỉnh sửa giao diện WordPress theo chủ đề Website của bạnGiao diện trang tùy biến theme

Ngoài cách đặt tên Website ở trong phần thiết lập, bạn có thể chỉnh sửa tên Website và khẩu hiệu ngay ở trong mục tùy chỉnh giao diện.
Cách làm như sau, bạn vào phần Site title/tagline/logo

Chỉnh sửa giao diện WordPress 1Bạn lưu ý 2 phần: logo và biểu tượng site. Khi bạn tải logo lên thì tên Website và khẩu hiệu sẽ được thay thế bằng Logo. Logo sẽ có dạng như sau

Biểu tượng site là icon sẽ xuất hiện ở thanh trình duyệt web. Ví dụ Google.com có chữ G ở trên thanh.

Đây cũng là thương hiệu website của bạn.

Nếu chưa có hình thì bạn có thể làm theo các bước tìm kiếm hình ảnh làm icon trên Google như sau:

Vào Google.com chọn hình ảnh

Bạn lưu ý chọn đúng kích thước đề nghị để hình hiển thị đẹp hơn, đỡ phải cắt. Ví dụ biểu tượng site có kích thước yêu cầu là 512 x 512.

Bạn chọn mục công cụ kích thước

Chọn chính xác: 512 x 512

Lúc này Google sẽ lọc ra kích thước mà bạn cần. Bạn có thể tìm kiếm tên kí tự đầu của Website của bạn làm biểu tượng Site.

Ví dụ Facebook dùng chữ F chẳng hạn

Chỉnh sửa giao diện WordPress 2Bạn click chuột phải Lưu hình ảnh về máy, để ở chỗ dễ tìm như ngoài desktop.

Quay trở lại trang sửa Logo Mục biểu tượng site Chọn ảnh

Chọn hình ảnh bạn tải về lúc nãy.

Ấn chọn cắt ảnh hay bỏ cắt thì tùy theo kích thước hình ảnh hồi nãy. Nếu lớn hơn 515×515 thì bạn phải cắt ảnh

Hiện lên như thế này là được:

Oke vậy là xong phần logo và tên Website.

Lưu ý quan trọng: Khi bạn lấy logo, icon hoặc hình ảnh bất kì trong Google thì thường hình ảnh đó đã có bản quyền. Nếu bạn sử dụng cho. Website của mình sẽ có thể bị vi phạm bản quyền rất rắc rối về sau. Bạn nên nhờ ai đó thiết kế Logo cho mình hoặc có thể học cách tự tạo free logo trong Google hay Blog của mình.

Một số trang Website chia sẻ hình ảnh miễn phí mà bạn nên lưu lại:

  • Unplash.com
  • picjumbo.com
  • lifeofpix.com
  • Pixabay.com

Quay trở lại, bạn chọn lưu thay đổi và ấn nút quay lại để tiếp tục nhé.

Header (Phần đầu trang)

Header là những nội dung gồm hình ảnh, video hay bài viết xuất hiện ở đầu trang. Ở đây sẽ có 4 mục bạn có thể chỉnh sửa. Bạn vào Header Area:

Header Type: kiểu thiết kế phần đầu trang chủ và toàn bộ trang Web. Bạn để mặc định là được

Header Slider: trình chiếu hình ảnh phần đầu Website theo Slide. Nghĩa là sau khoảng thời gian bạn chọn, hình ảnh phần Header sẽ đổi.

Trong phần này gồm có:

Slider speed: Tốc độ đổi hình ảnh. Bạn có thể để mặc định là 4000 hoặc giảm xuống để hình ảnh đổi nhanh hơn.

First Slide: Slide đầu tiên, bao gồm hình ảnh, câu chủ đề và nội dung kèm theo. Dùng để gửi lời chào và giới thiệu sơ qua về Website của bạn

Ấn vào Thay đổi ảnh để up ảnh mới của bạn. Và sửa nội dung câu chào

Hình ảnh sẽ xuất hiện như sau:

Chỉnh sửa giao diện WordPress 3Bạn có thể thêm nhiều Slide tùy bạn.

Cũng ở mục này, bạn kéo xuống dưới để sửa dòng CLICK TO BEGIN trong mục Call to Action Button (Nút bấm)

Đổi thành “Ấn để bắt đầu” chẳng hạn

Kết quả:

Nhớ ấn nút Đăng ở phần đầu để lưu lại thay đổi nhé.

Header Media: là hình ảnh hoặc video xuất hiện ở đầu trang Blog. Bạn có thể thay đổi hoặc thêm một số hình ảnh vào để mỗi lần vào trang Blog nó sẽ hiện ảnh mới. (Lưu ý: ảnh có tỉ lệ 16:9)

Bạn cũng có thể tùy chỉnh chiều cao hình ảnh đầu trang Blog bằng cách kéo xuống và chỉnh sửa trong mục Header height

Menu Style: Sửa định dạng thanh menu. Bao gồm:

  • Sticky menu: Dạng menu “dính”, khi bạn lăn chuột xuống dưới thì thanh menu cũng đi theo.
  • Static menu: Dạng menu đứng yên. Chỉ xuất hiện ở đầu trang, bạn kéo xuống cỡ nào có cũng không có đi theo
  • Menu style: Inline – Theo dòng. Centered: cả Logo và menu sẽ ở giữa.

Tất cả những mục này bạn tự thiết kế theo ý thích của mình nhé!

Blog Option (Tùy chọn Blog)

Đây là giao diện Blog hay bài viết của bạn. Bao gồm các tùy chọn:

  • Classic: Cổ điển – sẽ gồm bài Blog và Sidebar bên cạnh
  • Classic (alternative): Mặc định của Sydney
  • Full Width: Không có các mục lục hay Sidebar bên cạnh
  • Masonry: chia thành từng ô bài viết khác nhau.

Đây là giao diện bài viết mặc định. Mình có chú thích một số thuật ngữ trong đây

Bạn có thể để mặc định. Nếu Website của bạn là về du lịch, hay hướng dẫn, nhật ký cá nhân … thì bạn có thể chọn Full Width (toàn màn hình).

Để biết thiết kế nào hợp với mình. Bạn bấm vào Blog và tùy chỉnh các mục bên cạnh để thử nghiệm. WordPress sẽ hiển thị những thay đổi sau khi bạn chọn.

Cũng trong tùy chỉnh Blog, kéo xuống dưới bạn thấy:

Trong đó bạn cần quan tâm:

  • Excerpt length: số chữ sẽ xuất hiện dưới tiêu đề bài viết trong chuyên mục
  • Meta: bao gồm ngày giờ đăng bài viết và người đăng
  • Featured Images: Hình ảnh đầu bài viết hay hình ảnh đại diện bài viết

Những mục này bạn để mặc định. Có thể sửa lại độ dài chữ nếu bạn muốn ngắn lại.

Font

Font là nơi bạn tùy chỉnh các Font chữ cho trang Website của bạn. Font mặc định của Sydney tương đối xấu và không phù hợp với tiếng việt.

Cách chọn font trong Sydney hơi lạ. Phần này tương đối khó nên bạn có thể học theo cách làm của mình. Hoặc đọc tham khảo cũng được, mình sẽ hướng dẫn bạn cách đổi font đơn giản hơn ở phần sau.

Đầu tiên bạn vào https://fonts.google.com/

Chọn font bạn thích. Một số font bạn có thể sử dụng như San serif, Roboto, Nunito, Noto Serif (giống Zing.vn)…Ấn Ctrl+F để tìm cho nhanh

Ấn vào dấu + ở font bạn thích Bấm vào Family Selected.

Chọn Customize để được nhiều định dạng chữ

Chọn các kiểu chữ như hình. Sau đó vào Embed

Bạn tô đen rồi click chuột phải copy dòng chữ mình tô màu vàng: Encode+Sans+Condensed:400,500,700

Quay lại WordPress, bạn click chuột phải dán vào ô Font

Tiếp tục Copy dòng Encode Sans Condensed trong Specify in CSS vào ô Font Family bên dưới.

Oke. Vậy là thành công. Bạn sẽ thấy font chữ thay đổi.

Chỉnh sửa giao diện WordPress 1Tương tự bạn có thể áp dụng để tạo Font riêng cho mục Heading. Font size phía dưới là nơi bạn quy định kích thước cho chữ theo từng tiêu đề. Bạn có thể để mặc định.

Ok. Giờ ấn Đăng và ấn mũi tên quay lại. Tiếp tục

Footer

Footer là phần chân của Website. Dùng để giới thiệu về Website của bạn, địa chỉ liên lạc, bản đồ website… Bạn kéo thanh Website bên cạnh xuống dưới sẽ thấy nội dung Footer mẫu.

Mặc định thì Sydney bao gồm 3 cột footer. Và tất cả đều sử dụng Widgets. Bạn chỉ cần chỉnh sửa những Widget này theo ý thích của mình là được. Mục này mình sẽ sửa sau bạn nhé, vì liên quan tới Widget.

Colors (Màu)

Mục tùy chọn các màu trong Website của bạn được phân chia thành

General: Tổng quát. Bạn có thay thế màu đỏ mặc định của Sydney thành màu bạn thích. Ngoài ra còn có màu chữ văn bản – Body textHeader: Phần đầu trang

Sidebar: Mầu phần thanh sidebar ở bên

Footer: Phần chân trang Web

Bạn có thể chọn tùy ý. Tất cả màu thay đổi sẽ xuất hiện bên cạnh nên bạn có thể phối màu tự do sao cho hợp ý bạn.

Phần này mình giới thiệu bạn một cách để che dòng chữ ở dưới trang web với cách phối màu ở Footer:

Bạn chọn Color > Footer. Bạn đổi màu của Footer BackgroundFooter color giống nhau. Sẽ che được dòng chữ phía dưới. Ví dụ mình chọn màu tím có mã #4b138e.

Kết quả:

Thế là mất được dòng chữ rồi. Bạn nên để màu xám đen để cùng tông màu với màu footer phía trên. Lưu ý là phải cùng mã màu nhé

Ảnh nền

Hình ảnh sẽ xuất hiện trong toàn bộ trang Web dạng hình nền thay cho màu trắng. Thường mình sẽ bỏ qua vì xấu.

Menu

Menu là thanh ở đầu trang website, cho phép người dùng tìm kiếm các mục lục bên trong trang Web:

Có 2 cách chỉnh sửa Menu. Một là trực tiếp ở đây, hai là bạn vào mục Menu trong giao diện ở trang WordPress để sửa.

Mình sẽ hướng dẫn bạn cách chỉnh sửa đơn giản trong đây trước nhé:

Mục này bao gồm các menu của Website và vị trí bạn đặt chúng. Hiện tại trang Web đang dùng Menu 1

Bạn nhấp vào Menu 1 để chỉnh sửa:

Một trang Website cần có

  • Menu chính bao gồm: Trang chủ (Home), trang bài viết (Blog), chuyên mục
  • Menu phụ: Gồm trang giới thiệu và chính sách bảo mật.

Cách chỉnh sửa menu chính như sau, bạn bấm vào mũi tên home

Bạn sẽ thấy

Trong đó bạn chú ý mục sau:

  • Nhãn điều hướng: Tên tiêu đề
  • Thuộc tính tiêu đề: Tên thuộc tính, thường để trống.

Chỉ cần sửa từ “Home” thành “trang chủ” là được

Tiếp bạn sửa mục Blog thành trang bài viết của bạn hoặc giữ nguyên

Khi bạn sửa Menu Service nó hơi khác với 2 mục trên:

Bạn có thể thấy 2 mục trên bản chất là “Trang”. Còn mục Service và Team là Link tùy chọn. Cột URL sẽ điều hướng thanh này tới địa chỉ bạn yêu cầu. Khi bạn bấm vào Services trên thanh menu, nó sẽ không đưa bạn tới trang nào mà đẩy xuống mục Services (Dịch vụ) ở phía dưới.

Nếu bạn điền URL là một địa chỉ bài viết hoặc trang Website nào đó như https://www.google.com/ thì khi ấn vào, nó sẽ điều hướng bạn tới địa chỉ đó.

Tạm thời bạn xóa bỏ menu demo này đi, mình sẽ chỉ bạn cách tạo nó

Tương tự xóa bỏ Menu Team

Cách tạo thêm menu cho trang website của bạn:

OK. Giờ mình sẽ add thêm 2 menu mẫu là Giới thiệu và Thông tin liên lạc

Trong đó:

Liên kết tùy chỉnh: dạng menu tự do, bạn tự đặt tên và lấy đường link cho menu này. Ví dụ như menu Services ở trên

Trang: là menu tạo từ trang trong WordPress. Nó sẽ mặc định điều hướng tới trang đó. Bạn chỉ có thể sửa tên giống như Home > trang chủ.

Menu từ bài viết, chuyên mục, thẻ: tương tự như trang.

Lưu ý: Ở đây có thể bạn lẫn lộn giữa trang, bài viết, chuyên mục và thẻ. Nhưng bạn đừng lo. Cứ thực hành rồi hiểu sau. Đó là cách nắm bắt kiên thức nhanh nhất. Mình cũng sẽ giới thiệu về 4 thành phần này sau.

Tiếp tục, lấy Liên kết tùy chỉnh làm menu. Liên kết tùy chỉnh giúp cho bạn có thể thoải mái tạo menu tự do và điều hướng dễ hơn.

Bạn làm như hình:

Bây giờ menu của bạn có:

Ok. Sửa lại Menu 1 thành Menu chính cho dễ nhận biết.

Như vậy là xong. Ấn nút đăng để nhận kết quả:

Chỉnh sửa giao diện WordPress 5Bạn có thể tham khảo các trang Blog hay Website lớn như Facebook.com, Cnn.com, zing.vn, Kenh14.vn … để học hỏi cách đặt menu.

Trong theme này chỉ có 1 menu nên bạn không cần tạo Menu con. Việc sử dụng thêm Menu cũng không cần thiết lắm. Giờ chuyển qua mục tiếp theo nhé

Widgets

Trước hết mình sẽ giải thích cho các bạn hiểu Widgets là gì!

Widget là tiện ích quan trọng trong WordPress, tổng hợp các chức năng để chèn vào thanh Sidebar (màu đỏ hình dưới) hoặc Footer như xuất thông tin bài viết mới, bình luận mới, số bài viết của từng chuyên mục …

Chỉnh sửa ở đây bạn sẽ thấy 3 Widgets của footer

Bạn có thể sửa hay đổi Widgets ở chân trang Website theo ý của bạn. ví dụ như bấm vào Footer 1, bạn thấy đang để là Video:

Bạn có thể thêm Widget hoặc thay video bằng cách thay đường dẫn link youtube bạn mong muốn:

Copy link Youtube qua ví dụ như thế này:

Ấn thêm vào Widget. Kết quả:

Đơn giản phải không nào. Nếu bạn muốn Đổi thành widget khác thì làm như sau

Bấm vào + Thêm một Widget

Một list danh sách các Widget sẽ xuất hiện. Bạn tùy chọn theo ý mình nhé. Xóa bỏ nếu như bạn không muốn sử dụng.

Ở Footer 2: đang là Widget văn bản, bạn có thể chỉnh sửa lại câu trong đây

Tương tự bạn vào Footer 3 để chỉnh sửa thông tin liệc lạc, hoàn thành mục Widget:

Chỉnh sửa giao diện WordPress 7Nhớ ấn đăng để lưu và tiếp tục phần tiếp theo bạn nhé.

Cài đặt trang chủ

Chỉnh sửa giao diện WordPress 9Bạn có thể thay đổi trang chủ ở mục này. Ví dụ bạn có trang là Trò chơi, bạn chọn nó làm trang chủ thì khi nhập vào website của bạn sẽ hiện trang trò chơi đầu tiên.

Ở đây mình để mặc định vì đã nhập giao diện demo sẵn rồi.

Mục cuối là CSS bổ sung sẽ liên quan tới chỉnh sửa Code. Mình không đề cập tới phần này vì nó hơi phức tạp.

OK! Vậy là bạn đã chỉnh sửa hoàn thành cơ bản trang Website của bạn rồi. Có thể chiêm ngưỡng lại thành quả bằng cách mở Tab kế bên và nhập trang website của bạn vào. Bạn ấn đăng và nút X bên cạnh để kết thúc phần này nhé.

Duy Pham

Duy Pham

Tôi là Duy. Là một kĩ sư nhiệt lạnh, đam mê công nghệ và MMO. Chúc bạn tìm được bí quyết xây dựng hệ thống MMO bền vững ở trong Blog này.

Để lại bình luận

avatar
  Theo dõi  
Thông báo của