Cách tùy biến theme WordPress bằng Customizer

Tùy chỉnh một theme WordPress là việc làm tất yếu nếu bạn muốn đưa vào sử dụng bất kỳ một theme nào. Bằng việc dùng Theme Customizer, công việc này trở nên dễ dàng hơn bao giờ hết. Nhưng nếu bạn mới bắt đầu và đang loay hoay làm quen với công cụ này, hãy đọc luôn và ngay bài viết của chúng mình.

Sau khi chọn một theme WordPresscài đặt theme, việc bạn cần và nên làm là dùng công cụ Customizer để tùy chỉnh giao diện sao cho phù hợp với trang web của mình hoặc giống với bản demo. Ưu điểm của Customizer là chế độ live preview giúp bạn có thể xem trực tiếp kết quả hiển thị trong khi tùy chỉnh. Điều này giúp bạn tiết kiệm thời gian và dễ dàng thao tác hơn so với việc chỉnh sửa trong backend ở Dashboard.

Sau đây là các bước cơ bản để tùy biến một theme WordPress bằng Customizer để tạo được một trang web giống với theme demo nhất, hoặc để điều chỉnh theo ý bạn.

Mở công cụ Customizer

Đầu tiên, bạn vào Customizer ở trên thanh Admin trên cùng của trang, hoặc vào Dashboard > Appearance > Customize để mở công cụ này ra.

Mở công cụ Customizer trong website WordPress

Giao diện Customizer gồm hai phần chính: cột bên trái gồm các tùy chọn để tùy biến và màn hình bên phải hiển thị giao diện live preview. Sau đây là giao diện phổ biến nhất của Customizer.

Giao diện phổ biến nhất của Customizer.

Cột công cụ tùy biến bên trái gồm:

  1. Nút Publish sẽ lưu các kết quả sau khi bạn tùy biến. Nếu thoát ra mà không click vào đây thì trang web của bạn sẽ không thay đổi gì sau khi tùy chỉnh. Vậy nên sau mỗi thao tác, đừng quên nhấn nút này nhé.
  2. Khu vực hiển thị theme bạn đang dùng. Ví dụ như theme mình đang dùng tên là Memory. Các bạn có thể tải theme này tại đây.
  3. Các tùy chọn tùy biến của theme. Lưu ý là với các theme khác nhau thì số lượng các tùy chọn này sẽ khác nhau.
  4. Click vào Hide Controls để ẩn cột công cụ tùy biến. Còn nếu bạn muốn xem giao diện sau khi tùy biến hiển thị như nào ở các thiết bị khác, bạn chỉ cần click vào biểu tượng thiết bị tương ứng ở đây.

Sau khi làm quen với giao diện Customizer, chúng ta sẽ đi vào từng lựa chọn tùy biến cơ bản để xây được giao diện gần giống với demo nhất, hoặc xây dựng giao diện theo ý mình. Tuy nhiên, hãy đọc kỹ hướng dẫn sử dụng của theme bạn đang dùng trước vì có thể theme của bạn có yêu cầu tùy biến khác đấy.

Tùy biến theme bằng Customizer

Thường thì sau khi kích hoạt theme, trang web của bạn chưa giống với demo ngay được. Trừ trường hợp theme bạn dùng hỗ trợ import demo, nếu không bạn phải tự tùy biến theme một cách thủ công. Các phần tùy biến thông thường bao gồm:

Homepage Settings

Đây là phần quan trọng nhất quyết định việc hiển thị trang chủ của website.

Tùy biến hiển thị trang chủ của website.

Trong Homepage Settings, bạn có hai lựa chọn là hiển thị bài viết mới nhất (latest posts) hoặc chọn một trang cố định (static page) làm trang chủ. Tùy vào yêu cầu của từng theme mà bạn chọn một phương án phù hợp.

Thường thì với các trang đọc như trang blog, bạn nên chọn Your latest posts.

Chọn Your latest posts đối với các website chuyên để đọc như trang blog

Còn với các trang business thì bạn nên chọn A static page, sau đó chọn một trang làm trang chủ ở phần Homepage, một trang tổng hợp các bài viết ở phần Posts page. Bạn chỉ cần click vào biểu tượng menu thả xuống ở mỗi phần để chọn các post, page có sẵn, hoặc click Add New Page để tạo trang mới cho hai mục này.

Tuy nhiên, nếu trang homepage bạn chọn chưa được tùy biến và cài đặt, nó có thể thiếu các phần đặt biệt như slider, call to action, hero image, … và bạn sẽ cần tùy chỉnh thêm. Tốt nhất là bạn nên đọc hướng dẫn của theme về phần này.

Nên chọn static page đối với các website business.

Site Identity

Mục này giúp bạn thay đổi thông tin về trang như logo, title, tagline.

Mục Site Identity trong Customizer giúp bạn thay đổi thông tin về trang như logo, title, tagline.

Bạn hãy chọn logo, viết title và tagline cho trang. Ngoài ra có thể có các lựa chọn để tùy chỉnh logo, title, hay ẩn, hiện các mục này nữa.

Bạn hãy chọn logo, viết title và tagline cho trang trong phần Site Identity của Customizer.

Color, Background Image và Font

Hầu hết các theme sau khi được kích hoạt sẽ thiết lập màu sắc, ảnh nền và font chữ giống với demo cho trang của người dùng. Tuy nhiên, trong trường hợp chưa có sẵn các yếu tố trên, bạn cần cài đặt chúng.

Tùy biến Color, Background Image và Font với Customizer.

Color – Màu sắc

Các theme hầu hết hỗ trợ phần Color, nhưng có theme cho phép bạn thay đổi màu của nhiều yếu tố, có theme thì giới hạn trong một vài yếu tố thôi.

Đầu tiên, click vào phần yếu tố màu muốn thay (1) (ví dụ như main color, heading color, hay text color). Bạn có thể chọn trực tiếp một màu trên bảng màu (2), hoặc nhập mã màu vào đây (3).

Tùy biến màu sắc với Customizer.

Font chữ

Phần Font hoặc Typography cho phép các bạn thay đổi kiểu font, family font, cỡ chữ, … tùy theo từng theme.

Cách chọn family font cũng tùy theo yêu cầu của theme. Đơn giản nhất là như ảnh dưới, bạn chỉ cần chọn một font trong số font có sẵn từ menu thả xuống. Các theme như này thường chỉ hỗ trợ một số font cơ bản thôi.

Tùy biến font chữ với Customizer.

Nhưng với các các theme hỗ trợ dùng Google font, có thể bạn cần lấy mã font, tên font, hoặc link từ trang fonts.google.com và điền vào các ô trong Customizer như này.

Đối với các các theme WordPress hỗ trợ dùng Google font, có thể bạn cần lấy mã font.

Ưu điểm của cách thứ 2 là bạn có rất nhiều lựa chọn font từ trang Google Fonts để sử dụng cho trang của mình.

Background Image – ảnh nền

Hầu hết các theme đều cho phép bạn chọn một bức ảnh làm ảnh nền. Trong phần Background Images, chọn Select image và chọn ảnh từ thư viện hoặc tải ảnh lên.

Hầu hết các theme WordPress đều cho phép bạn chọn một bức ảnh làm ảnh nền.

Sau đó, bạn được quyền chỉnh sửa kiểu cách, vị trí ảnh hiển thị, kích cỡ ảnh sao cho khớp với giao diện, …

Chỉnh sửa kiểu cách, vị trí ảnh hiển thị, kích cỡ ảnh sao cho khớp với giao diện của website WordPress

Để thay ảnh nền, click vào nút Change Image. Còn nếu muốn xóa ảnh nền, bạn click vào nút Remove.

Lưu ý là nếu bạn chọn Repeat Background Image, ảnh nền sẽ được lặp lại từ đầu tới cuối trang. Còn chọn Scroll with page thì ảnh sẽ được di chuyển cùng với trang khi bạn cuộn trang như sau.

Tùy biến để ảnh nền được lặp lại từ đầu tới cuối trang

Menu

Phần Menu liệt kê tất cả các menu được tạo và vị trí hiện tại của chúng. Thường thì một theme sẽ hiển thị menu chính ở phần header. Một số khác sẽ cho phép bạn hiển thị menu nhiều hơn một vị trí như là footer, topbar, menu trượt ngang, … Để biết được liệu theme bạn dùng có bao nhiêu vị trí để đặt menu, bạn nhìn vào dòng chữ ở dưới phần Menu Location.

Dòng chữ ở dưới phần Menu Location cho biết theme WordPress có thể hiển thị bao nhiêu menu.

Ví dụ theme Memory mình đang dùng chỉ có một vị trí cho menu thôi. Để xem cụ thể vị trí đó là gì thì bạn click vào View Location nhé. Sau đó bạn click vào một vị trí menu rồi chọn một menu có sẵn để hiển thị ở vị trí đó. Nếu muốn chỉnh sửa menu đó thì bạn click vào Edit Menu. Còn nếu muốn tạo một menu khác để hiển thị thì bạn click vào Create New Menu.

Các tùy chọn để tùy biến menu của theme WordPress.

Còn cụ thể cách tạo, chỉnh sửa một menu như thế nào, chúng mình đã có một bài viết cụ thể tại đây.

Widget

Widget là các phần nội dung, tiện ích được thêm vào các khu vực widget như sidebar hay footer. Có đến 15 widget mặc định của WordPress để giúp bạn thêm vào như video, ảnh, gallery, bài viết mới nhất, danh sách trang, … Ngoài ra thì một số theme cung cấp những widget đặc biệt của riêng theme đó, nên bạn cần tìm hiểu kỹ xem widget mình cần là gì để thêm cho giống với demo nhé.

Tại phần Widget, bạn sẽ thấy các khu vực hiển thị widget ở trang hiện tại. Số lượng và các khu vực này cũng khác nhau tùy theo từng theme.

Số lượng và các khu vực hiển thị widget khác nhau tùy theo từng theme WordPress.

Để thêm một widget, bạn click vào vị trí cần đặt widget, ví dụ như Footer, và click vào nút Add a Widget. Một danh sách các widget được liệt kê ở đây và bạn chỉ cần chọn một widget mình muốn hoặc dùng nút search để tìm tên widget.

Thêm một widget trong WordPress

Khi đã click chọn widget rồi, một số widget như hình ảnh, gallery, video, audio, page, … cần phải cài đặt thêm để hiển thị theo ý muốn. Khi đó bạn nên đọc kỹ yêu cầu của widget và làm theo. Các thao tác rất đơn giản thôi.

Muốn xóa widget nào, bạn vào widget đó và click vào nút Remove.

Xóa một widget bằng Customizer

Còn nút Reorder sẽ giúp bạn di chuyển widget tới một khu vực widget khác của theme. Cụ thể, bạn click vào (1), chọn khu vực widget mới (2), rồi ấn nút Move (3) để chuyển. Ngoài ra, nút mũi tên lên xuống (4) sẽ giúp di chuyển các widget trong một khu vực. Sau khi hoàn thành các thao tác, bạn chọn Done (5) để kết thúc.

Di chuyển widget tới vị trí mới bằng Customizer

Vậy là đã xong phần tùy chỉnh widget rồi.

Lời cuối

Tùy chỉnh Homepage Setting, Site Identity, Color, Background Image, Font, Menu, và Widget bằng Customizer là các bước chung, cơ bản để tùy biến theme sao cho khớp với demo hoặc theo ý tưởng của bạn nhất. Bên cạnh đó còn có nhiều phần riêng cho từng theme nữa. Nếu gặp khó khăn trong quá trình tùy biến, bạn nên đọc kỹ tài liệu hướng dẫn sử dụng hoặc liên hệ với tác giả theme ngay nhé.

Chúc các bạn có được một giao diện website đẹp mắt.

Để lại 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 *