Hướng dẫn cài đặt và tùy chỉnh giao diện wordpress

9015 lượt xem
Mẹo nhỏ: Để tìm kiếm chính xác các ấn phẩm của GiuseArt.com, hãy search trên Google với cú pháp: "Từ khóa" + "giuseart". (Ví dụ: thiệp tân linh mục giuseart). Tìm kiếm ngay

Chào các bạn, bài viết trước chúng ta đã tiến hành các thao tác tùy chỉnh cơ bản cho trang web wordpress của bạn rồi. Trong bài này, mình sẽ hướng dẫn các bạn các bước cài đặt và tùy chỉnh giao diện cho wordpress. Bắt đầu từ bài này, kiến thức bắt đầu rộng hơn. Và nhiều thuật ngữ chuyên môn hơn, các bạn bỏ chút thời gian nghiên cứu kỹ hơn chút nhé!

Cài đặt giao diện

Có vô vàn giao diện miễn phí và trả phí trên mạng. Bạn hãy tìm cho mình một mẫu giao diện (theme) ưng ý nhất. Nó phù hợp với nhu cầu và mục đích làm website của bạn.

Theo như mục đích ban đầu. Mình sẽ hướng dẫn các bạn làm một website porfolio cá nhân với chi phí bằng 0. Do đó, chúng ta sẽ tìm một theme free phù hợp với nhu cầu làm portfolio các bạn nhé!

Có 3 cách để tải một theme cho website wordpress! Nếu bạn chưa biết, có thể đọc lại hướng dẫn tại đây.

Hôm nay, mình sẽ hướng dẫn các bạn tìm và tải theme trên chính kho giao diện của wordpress.org luôn. Hàng free nhưng được lưu trên kho giao diện của wordpress nên mình thường an tâm sử dụng hơn những theme free download trên mạng (hay bị dính mã độc lắm).

Bạn đăng nhập trang quản trị của WordPress (Xem thêm hướng dẫn đăng nhập trang quản trị tại đây).

Sau đó, vào tab Giao diện (theme) > Giao diện để cài đặt giao diện wordpress:

giao-dien wordpressgiao-dien wordpress

Mặc định, wordpress trang bị sẵn cho mỗi website 3 giao diện miễn phí. Đây là 3 giao diện gốc của wordpress – rất đơn giản, chưa có tính năng gì đặc sắc và chưa bao giờ tùy biến lại. Trong một số trường hợp sửa giao diện bị lỗi. Người ta thường kích hoạt lại một trong ba giao diện gốc này.

Bước tiếp theo, nhấn nút Thêm mới (add) để tiến hành tải giao diện lên hoặc tìm trong kho giao diện của wordpress.org

add-theme

 

Ở khung bên dưới, có nhiều giao diện (theme) được wordpress.org được gợi ý sẵn cho bạn. Nhấn chọn “Phổ biến – popular” để xem những mẫu giao diện được ưa chuộng nhất. Hoặc không, bạn gõ “portfolio theme” vào khung tìm kiếm để tìm thử xem.Xem qua một vòng, mình thấy ứng ý giao diện Total có sẵn nên tiến hành Cài đặt và Kích hoạt luôn!

chon-giao-dien

Sau khi kích hoạt giao diện. Thử ra ngoài trang chủ xem giao diện đã có sự thay đổi gì chưa?

visit-site

Như vậy, website của mình đã thay đổi hoàn toàn rồi. Bây giờ, trang của mình có giao diện màu vàng và xám. Tuy nhiên, website chưa rõ bố cục, trong khi font chữ lại bị lỗi hiển thị tiếng Việt.

giao-dien-trang-chu

Vấn đề tiếp theo là gì? Phải cấu hình và chỉnh sửa giao diện để có một website ưng ý?

Tùy chỉnh giao diện WordPress

Vào Tùy chỉnh ngay trên  Admin bar hoặc Giao diện > Tùy chỉnh trong Trang quản trị.

tuy-chinh-giao-dien-wordpress-2

Mặc dù mỗi giao diện sẽ có các tính năng tùy chỉnh khác nhau, tuy nhiên, phần đa các giao diện đều cho phép tùy chỉnh những tính năng cơ bản sau:

General settings (cài đặt tổng quan):

Generanal settings (cài đặt tổng quan) có một số tùy chọn liên quan đến tiêu đề trang web, tagline, header, màu sắc và hình nền… Mình sẽ giải thích lần lượt từng tùy chọn một như sau:

tuy-chinh-tong-quan

  • Static Front Page (tùy chỉnh trang chủ): cho phép bạn lựa chọn một trang bất kỳ làm trang chủ thay cho kiểu hiển thị bài viết mới nhất mặc định của giao diện.
  • Site Logo/ Title/ Tagline (tùy chỉnh logo, tiêu đề và tagline): cho phép bạn sử tên web, sửa dòng mô tả, tải logo cũng như cài đặt favicon cho website. Logo thường được hiển thị bên trái của header, logo nên có bố cục tròn hoặc ngang chứ đừng làm logo bố cục đứng vì hiển thị rất nhỏ và xấu. Logo là ảnh được xuất dưới định dạng .png. Có thể tải logo lên thay cho 2 dòng tiêu đề và tagline.
  • Background Image (hình ảnh nền): cho phép bạn đặt hình nền cho website. Mình khuyên bạn không nên đặt hình nền làm gì, website tốn thêm dung lượng và khiến cho thời gian tải trang lâu hơn nhiều.
  • Color (hình ảnh): cho phép bạn thay đổi các thuộc tính màu sắc của website, trong đó có tùy chọn màu nền và màu chủ đạo (primary color). Mình sẽ đổi màu sắc chủ đạo của trang web từ vàng sang màu tím nhạt.
  • Header settings: có thêm tùy chọn cho phép bạn lựa đặt menu luôn luôn nổi ở góc trên cùng của màn hình (sticker menu).

Sau mỗi thay đổi trong tùy chỉnh, bạn nhấn “Lưu lại” để thay đổi được thiết lập nhé!

Tạo Menu cho WordPress (trình đơn):

Mình sẽ làm một thanh menu với 5 tab chính là : Giới thiệu, Kiến thức đồ họa, Kiến thức WordPress, Chuyện cá nhân Liên hệ. Vậy, mình cần phải thực hiện các thao tác sau:

Tạo trang Giới thiệu

Trang Giới thiệu là một trang gồm những thông tin về bản thân, gia đình, quá trình học tập và công tác…

tao-trang-moi

  • Bước 1: Nhấn nút Mới > Trang và nhập tiêu đề cho trang.
  • Bước 2: Nhập nội dung cho trang giới thiệu trong khung soạn thảo bài viết  bên dưới tiêu đề. Nội dung ghi rõ ràng, khoa học, nên sử dụng các công cụ định dạng đoạn để trình bày văn bản.
  • Bước 3: Đăng bài viết

Tạo trang liên hệ

Trang Liên hệ là một trang chứa những thông tin cơ bản để liên hệ như: Họ tên, SĐT, địa chỉ, email… Làm tương tự như tạo trang Giới thiệu đã được hướng dẫn bên trên.

Tạo các chuyên mục cần thiết

Chuyên mục là tập hợp những bài viết khác nhau về cùng một lĩnh vực hay chủ đề nào đó. Mình cần viết các kiến thức liên quan đến Đồ họa, WordPress và một chút chuyện linh tinh trong cuộc sống. Như vậy, mình cần phải tạo 3 chuyên mục khác nhau là : Kiến thức Đồ họa, Kiến thức WordPress và Chuyện cuộc sống.

tao-chuyen-muc-moi

 

  • Bước 1: Trong trang quản trị webstie, chọn Bài viết > Chuyên mục. 
  • Bước 2: Điền tiêu đề và mô tả cho danh mục, sau đó nhấn “Thêm chuyên mục”
  • Bước 3: Trong trường hợp muốn tạo chuyên mục A là chuyên mục con nằm trong một chuyên mục B nào đó. Bạn tìm trong mục “Cha” để chọn B.

thu-muc-cha

Tạo trình đơn mới (menu)

Sau khi đã tạo các trang và các chuyên mục cần thiết cho menu, chúng ta tiến hành tạo thanh Menu như sau:

  • Bước 1: Vào Giao diện > Menu hoặc Tùy chỉnh > Menu
  • Bước 2: Điền tên của thanh Menu (thường là main-menu), tạo trình đơn mới. Dấu tích chọn vào Primary Menu để nó hiện lên trên phần Header.

tao-trinh-don-menu-moi

  • Bước 3: Chọn trang Giới thiệu và trang Liên hệ bên cột trái > Thêm vào Menu. Chọn các chuyên mục cần thiết >Thêm vào Menu
  • Bước 4: Sắp xếp thứ tự hiển thị các tab trên thanh Menu. Thứ tự các thực đơn từ trên xuống sẽ xuất hiện theo thứ tự từ trái sang phải ngoài trang chủ.
  • Bước 5: Lưu trình đơn

menu

Sau khi tạo trình đơn menu mới, truy cập trang chủ và chúng ta đã có một menu hiển thị theo chiều ngang trên header khá là gọn gàng và vừa ý rồi.

Lời kết

Như vậy, tạm thời trong bài hôm nay, mình đã hướng dẫn các bạn các tùy chỉnh cơ bản và tạo thanh menu cho giao diện website wordpress rồi phải không các bạn. Tuy nhiên, thanh menu của mình vẫn bị lỗi font chữ, mình sẽ hướng dẫn các bạn cách khắc phục sau! Trong những bài tiếp theo, mình sẽ hướng dẫn chi tiết cho các bạn hoàn thiện trang chủ và tạo nội dung để hiển thị trên trang chủ được đẹp mắt và ấn tượng nhất. Chúc các bạn học tốt và làm tốt.

[Bạn đang xem phần 07 trong bộ “Giúp các bạn Graphic Designer tạo website hoàn chỉnh với WordPress“]

Bài trước: Những tùy chỉnh đầu tiên cho website WordPress của bạn

Bài tiếp: Tạo trang Portfolio cực chuyên nghiệp cho Graphic Designer

5/5 - (1 bình chọn)
Chia sẻ bài viết:

Thông báo chính thức: Ninh Bình Web (thuộc GiuseArt) không hợp tác với bất kỳ ai để bán giao diện Wordpress và cũng không bán ở bất kỳ kênh nào ngoại trừ Facebookzalo chính thức.

Chúng tôi chỉ support cho những khách hàng mua source code chính chủ. Tiền nào của nấy, khách hàng cân nhắc không nên ham rẻ để mua phải source code không rõ nguồn gốc và không có support về sau! Xin cám ơn!

Bài viết mới cập nhật:

4 những suy nghĩ trên “Hướng dẫn cài đặt và tùy chỉnh giao diện wordpress

  1. Tuan Bui nói:

    Anh Thiện ơi, mấy theme trên WordPress cài toàn không có dữ liệu sẵn không à, không biết có cái nào có sẵn dữ liệu, plugin đính kèm, hoàn chỉnh và mình chỉ cần đổi nội dung là chạy không? Mình hỏi bên Hostinger thì họ nói họ không có thiết kế web

    • Lê Văn Thiện nói:

      Gọi là chia sẻ theme nghĩa là chỉ có giao diện thôi, còn plugin và các nội dung khác thường không có. Tuỳ một số theme sẽ có tuỳ chọn import demo cho mình chỉ việc sửa nội dung thôi, ví dụ như newspaper

  2. IMTA nói:

    Bài viết này hướng dẫn chỉnh sửa trang chủ trong WordPress khá chi tiết và dễ hiểu. Cảm ơn bạn Thiện với những bài viết rất bổ ích đến cộng đồng website wordpress.

Để lại một bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *