Trong bài này chúng ta đi tìm hiểu xem theme WordPress là gì? Tiếp theo mình sẽ hướng dẫn bạn cách cài đặt theme cho website đã tạo và chọn một theme thống nhất để chúng ta dễ thực hành và tìm hiểu trong các bài tiếp theo. 

Một vài điều trước khi đi vào nội dung chi tiết:

Ở bài trước, bạn đã cài được website WordPress và cũng đang rất nóng lòng để tìm hiểu về trang Dashboard đó đúng không nào? Bạn yên tâm, chúng ta sẽ bắt đầu tìm hiểu nó trong những bài kế tiếp. Điều quan trọng cần làm lúc này là đổi cái giao diện mặc định thành một giao diện (theme) dễ học, dễ sử dụng hơn. Sau đó là tìm hiểu về các thành phần cơ bản có trên giao diện website.

Hơn nữa, mỗi năm giao diện (theme) mặc định lại thay đổi sang một mẫu khác, tức không có năm nào giống năm nào, điều này dẫn đến không có sự đồng nhất giữa bài hướng dẫn và cái theme mặc định tại thời điểm mà bạn cài WordPress. Chính vì vậy, chúng ta cần thống nhất dùng chung một giao diện. Điều này giúp cho việc học và thực hành lúc này cũng như khi xem lại vào năm sau, hay năm sau nữa.

Theme WordPress là gì ?

Theme WordPress là một hay nhiều giao diện mẫu được thiết kế sẵn, có những đặc trưng riêng về cách trình bày, sắp xếp nội dung của một website (hay còn gọi là bố cục/ giao diện đồ họa của website). Có thể ví theme là bộ trang phục bạn đang khoác lên người, khi bạn đổi theme tức là bạn đang dùng một bộ trang phục khác.

Ví dụ về theme WordPress
Theme WordPress và cách cài

Lưu ý: Khi bạn thay đổi theme, không chỉ là bạn đang thay đổi về hình thức bên ngoài của webiste, cũng có thể bao gồm cả tính năng và thể loại của website đó. Ví dụ: khi giao diện website bạn đang là shop bán hàng, bạn chuyển sang giao diện tạp chí thì lúc này nó lại biến thành website tạp chí.

Xét về phương diện mã nguồn: Theme WordPress được cấu thành bởi một tập hợp các tệp có mối liên hệ chặt chẽ với nhau, cùng phối hợp nhằm tạo ra giao diện đồ họa với thiết kế thống nhất cho website. Theme sẽ làm thay đổi cách mà trang web hiển thị trên trình duyệt (tức sẽ thay đổi hình thức) nhưng không làm thay đổi hay can thiệp vào mã nguồn gốc của website.

Bạn hãy hình dung mã nguồn như là hệ điều hành Android, còn theme gì anh SamSung sẽ thiết kế lại hình ảnh, icon so với anh Oppo. Nếu bạn có kiến thực về fontend và backend thì dễ hiểu hơn rất nhiều.

Lợi ích khi website có dùng theme: Đối với WordPress, bạn dễ dàng chuyển qua chuyển lại hàng nghìn giao diện (theme) bằng một vài thao tác click chuột mà không cần phải sửa mã nguồn gốc WordPress. Nhưng nếu một website không thể chuyển đổi giữa các theme như WordPress, khi cần thay đổi hình thức của nó chúng ta đều phải can thiệp, chỉnh sửa mã nguồn gốc, điều này chắc chắn tốn nhiều thời gian hơn và cần phải biết lập trình website thì mới làm được.

Hướng dẫn cài đặt theme WordPress

Trên kho WordPress.org hiện tại có hơn 7.800 mẫu theme mà bạn có thể tải về và sử dụng miễn phí. Mỗi một theme là bạn đã có một sự lựa chọn về hình thức mà website của bạn hiển thị trên trình duyệt.

Theme mặc định của WordPres mỗi năm thường không quá tệ, tuy nhiên có lẽ nó không phù hợp với gu thẩm mỹ cũng như nhu cầu của số đông và cũng không thích hợp cho người mới lắm (theo đánh giá của mình là khó làm quen). Chính vì vậy, hầu như sau khi cài web, mọi người đều chuyển sang dùng giao diện khác.

Giao diện mặc định của WordPress ở phiên bản 5.5.1
Giao diện mặc định của WordPress ở phiên bản 5.5.1

Dưới đây mình sẽ hướng dẫn bạn 02 cách để cài đặt theme WorPress, tùy trường hợp mà bạn sẽ sử dụng cách tương ứng.

Cách một – cài đặt theme có sẵn trong kho giao diện WordPress

Như ở trên mình có nói, số theme WordPress miễn phí hiện tại (tháng 10/2020) đã hơn 7.800 mẫu, bạn có thể tha hồ mà lựa chọn. Việc tìm và cài một theme WordPress nó giống như lúc bạn tìm và cài một ứng dụng (app) trên kho ứng dụng của Google Play hoặc App Store vậy.

Trước khi cài đặt 1 theme mới bạn cũng nên xem thử bản demo của website như thế nào, theme này có phục vụ bạn làm đúng mục tiêu không. Bởi vì chỉ có những bạn muốn làm website để viết bài, có những bạn làm giới thiệu sản phẩm, có những bạn làm để kinh doanh online. Do đó chọn lựa theme đúng sẽ tiết kiệm thời gian cho bạn sau này, nếu bạn chuyên làm marketing online thì bạn hãy đầu tư có bản quyền nhé.

Bước 01: Trên trang chủ Dashboard bạn rê chuột xuống mục Apperance sau đó chọn vào mục Themes như hình bên dưới để mở kho theme lên.

Chọn mục Themes để mở kho giao diện
Mở kho theme WordPress

Bước 02: Lúc này trong danh sách theme đã có sẵn 03 mẫu, trong đó có một mẫu đang sử dụng (mẫu này sẽ có ghi chú bên cạnh tên theme là chữ Activate). Bây giờ bạn rê chuột vào các mẫu chưa kích hoạt sẽ xuất hiện nút Activate (kích hoạt) và nút Live Preview (xem trước khi kích hoạt). Muốn kích hoạt theme nào thì bạn nhấn vào chữ Activate ở theme đó như hình bên dưới.

Kích hoạt một mẫu theme có sẵn
Kích hoạt mẫu theme có sẵn

Và sau này, khi bạn cài thêm các theme khác thì chúng sẽ được hiển thị ở đây, muốn sử dụng mẫu nào bạn chỉ cần nhấn vào nút Activate của theme đó là được.

Bước 03: Mở kho giao diện miễn phí (hơn 7.800 theme) của WordPress bằng cách nhấn vào nút Add New như hình bên dưới.

Mở kho theme miễn phí của WordPress
Mở kho theme miễn phí của WordPress

Bước 04: Cài đặt một mẫu theme bất kỳ trong danh sách bằng cách rê chuột vào theme đó nhấn vào nút Install tương tự như hình bên dưới.

Cài đặt một theme WordPress bất kỳ trong danh sách
Chọn và cài đặt một theme trong danh sách

Bước 05: Nhấn vào Activate để kích hoạt mẫu theme vừa cài đặt hoặc nhấn vào Live Preview để xem trước những thay đổi nếu như kích hoạt mẫu đó mà không cần phải kích hoạt.

Kích hoạt theme vừa cài đặt
Kích hoạt theme vừa cài đặt

Bước 06: Xem kết quả sau khi cài đặt và kích hoạt theme WordPress bằng cách rê chuột vào chỗ tên website (DEMO), tiếp theo là nhấn vào Visit Site như hình bên dưới.

Xem kết quả sau khi cài đặt và kích hoạt theme WordPress
Xem kết quả sau khi kích hoạt theme

Đây là giao diện website sau khi kích hoạt theme vừa cài, như trong hình là mình đã cài theme Astra. Bạn cũng có thể cài đặt và kích hoạt theme đó hoặc theme nào đó trong danh sách.

Đây là giao diện của website sau khi kích hoạt theme Astra
Sau khi kích hoạt theme Astra

Bước 07: Tìm hiểu tính năng của của một số mục trong kho theme của WordPress theo hình và chú thích bên dưới:

Một số mục tính năng và chú thích trong kho theme WordPress
Tính năng trong kho theme WordPress
  1. Mẫu nào đã được cài đặt rồi thì sẽ hiện chữ Installed, bạn có thể nhấn vào Activate để kích và nút Customize để tùy chỉnh lại giao diện. Mẫu nào đang sử dụng nó sẽ có chữ Activated được làm mờ đi như hình trên.
  2. Mục Featured để hiển thị các mẫu được WordPress liệt kê vào dạng đặc sắc, đây là mục mặc định khi chúng ta mở kho theme lên.
  3. Popular để hiển thị các mẫu theme được dùng nhiều.
  4. Latest sẽ hiển thị những mẫu theme được đăng tải lên kho gần đây nhất, chúng được sắp xếp theo trình tự thời gian. 
  5. Mục Feature Filter giúp bạn lọc ra danh sách các theme phù hợp với ý muốn, theo các tiêu chí như: thể loại theme (tin tức, blog, shop,..), theo tính năng (có thể tùy chọn màu nền, có thể tùy chọn logo,…) và theo dạng bố cục (giao diện dạng lưới, dạng một cột, hai cột,..).
  6. Search Theme: Đây là  ô tìm kiếm theme, được ứng dụng để tìm những mẫu theme phù hợp bằng từ khóa hoặc tên theme. Ví dụ: bạn muốn tìm các mẫu phù hợp với website giáo dục, thì có thể nhập từ khóa “education”. Bạn muốn tìm các mẫu theme tin tức thì nhập từ khóa “News” chẳng hạn.

Còn một mục nữa là Favorites, là danh sách những theme mà bạn yêu thích. Tuy nhiên, để sử dụng được bạn cần phải đăng ký tài khoản WordPress.org (hoàn toàn miễn phí nhưng chưa cần thực hiện lúc này), vậy nên mục này để tìm hiểu sau nhé!

Cách hai – cài đặt theme WordPress từ một file .zip

Mặc dù theme trong kho của WordPress rất nhiều nhưng nguồn bên ngoài còn nhiều hơn thế. Chúng bao gồm cả mẫu trả phí (tức là phải mua) lẫn miễn phí. Mỗi mẫu theme như vậy được đóng gói thành một tập tin có định dạng .zip.

Những nguồn để có được file theme có định dạng .zip này thì rất nhiều, tuy nhiên vì bạn là người mới học WordPresss nên mình chỉ đưa ra một số nguồn miễn phí, phổ biến và chất lượng như bên dưới thôi:

  • Tải về file .zip của một theme nào đó trên kho theme của WordPress bằng cách nhấn vào liên kết WordPress.org;
  • Chọn một mẫu nào đó từ kho theme của Themezee.
  • Trên kho của Theme Junkie cũng rất nhiều mẫu miễn phí.
  • Bạn có thể mua theme trên website https://themeforest.net/ cũng khá nổi tiếng. Các theme trên nay giá thường 50-60$, chất lượng bạn hãy kiểm tra kỹ đánh giá và số lượt người dùng mua theme. Lưu ý hãy chọn theme nhiều người dùng vì còn ảnh hưởng đến quá trình bạn SEO website. Trong khóa học SEO tại IMTA bên mình sẽ hướng dẫn và chia sẻ các theme chuẩn SEO.

Bước 01: Để tiện việc thực hành, bạn không cần đi tìm theme nữa, hãy nhấn vào liên kết Theme Harrison và chọn vào Download Theme để tải về file .zip của theme này.

Bước 02: Trong trang cài đặt theme WordPress mà lúc nãy bạn thực hành cách một, bạn nhấn Upload Theme. Hoặc nếu bạn đang ở ngoài trang này thì lần lược nhấn vào: Appearance >> Themes >> Add New >> Upload Theme.

Chọn vào nút Upload Theme
Chọn vào Upload theme

Bước 03: Bạn nhấn vào nút chọn tệp và tìm đến nơi lưu file theme đã tải về ở trên.

Nhấn vào chọn tệp
Nhấn vào chọn tệp

Bước 4: Chọn file theme bằng cách nhấn chuột phải chọn vào Select như hình bên dưới hoặc, nhấn double click vào nó là được.

Chọn vào file theme đã tải về
Chọn file theme đã tải về

Bước 5: Nhấn vào nút Install Now để tiến hành cài đặt theme như hình bên dưới.

Nhấn vào Install Now để cài đặt theme
Nhấn vào Install Now để cài đặt theme

Bước 6: Nhấn vào nút Activate như hình bên dưới để kích hoạt theme vừa cài đặt.

Nhấn vào Activate để kích hoạt theme vừa cài đặt
Nhấn Activate để kích hoạt theme

Để xem giao diện vừa kích hoạt như thế nào thì bạn thực hiện tương tự như mình đã hướng dẫn ở trên nhé! Phần hướng dẫn cài đặt theme WordPress từ file .zip đến đây là hoàn tất, kết quả được như hình bên dưới.

Đây là giao diện của website sau khi kích hoạt theme Harrison
Giao diện website sau khi kích hoạt theme Harrison

Cài đặt và kích hoạt theme Smartline để chuẩn bị cho các bài học tiếp theo

Ưu điểm theme Smartline

  • Đây là một theme rất chất lượng và có sẵn trên kho theme của Wordress, được tác giả theme đầu tư bài bản;
  • Theme có bố cục đơn giản, đầy đủ các thành phần cơ bản của một website tiêu chuẩn;
  • Dễ dàng tùy chỉnh website dù bạn là người mới;
  • Theme hiển thị đẹp trên thiết bị di động;
  • Đáp ứng được nhiều mục đích làm website của bạn như: Làm blog cá nhân, shop bán hàng, website tin tức – tạp chí,..

Hướng dẫn cách cài đặt và kích hoạt theme Smartline

Bước 01: Bạn tìm trong kho theme từ khóa “Smartline” như hình bên dưới.

Tìm theme Smartline trong kho theme của WordPress
Tìm theme Smartline trong kho

Bước 02: Bạn rê chuột vào theme đó >> chọn Install để cài đặt, sau khi cài đặt xong thì nhấn Activate để kích hoạt. Thao tác này mình đã hướng dẫn ở phần trên rồi, bạn cứ làm tương tự như vậy thôi, không để hình minh họa cho bước này.

Bước 03: Tải về file “làm đẹp” cho theme này tại liên kết: Smartline Additional CSS . Khi đó, bạn được một tập tin định dạng .txt như hình bên dưới.

Đây là file Smartline Additional CSS .txt mà bạn đã tải về
File Additonal CSS đã tải

Bước 04: Bạn mở file Smartline Additional CSS.txt, sau đó chọn tất cả nội dung trong đó bằng cách nhấn tổ hợp phím Ctrl + A . Tiếp đến, nhấn chuột phải và chọn Copy như hình bên dưới.

Copy toàn bộ nội dung trong file Smartline Additional CSS.txt
Copy nội dung trong file Additonal CSS

Bước 05: chọn vào Customize như hình bên dưới để mở phần tùy chỉnh giao diện website.

Chọn vào Customize để mở phần tùy chỉnh giao diện website
Mở phần tùy chỉnh giao diện

Bước 06: Trong trang Customize bạn chọn vào mục Additional CSS như hình bên dưới.

Chọn vào mục Additional CSS
Chọn mục Additional CSS

Bước 07: Dán (paste) toàn bộ code đã copy ở bước 04 vào trong khung Additional CSS như hình bên dưới. Tiếp theo nhấn vào Publish để lưu lại, tiếp theo là đóng dấu X để thoát trang tùy chỉnh giao diện.

Dán toàn bộ code đã copy vào trong khung Additional CSS
Dán code vào Additional CSS

Bây giờ bạn có thể mở website lên để xem giao diện hiện tại trông như thế nào rồi đấy. Dưới đây là kết quả.

Đây là giao diện website sau khi được “làm đẹp”
Giao diện web sau khi làm đẹp

Lưu ý: Thao tác “làm đẹp” giao diện mà bạn vừa thực hiện đối với theme Smartline. Nó là một phần trong bài tùy chỉnh giao diện webiste. Tuy nhiên, mình để bạn thực hành trước nhằm chỉnh lại giao diện cho nó đẹp hơn, sẽ làm bạn hứng thú hơn trong những bài tiếp theo.

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

TỔNG KẾT

Qua bài này bạn cần hiểu được Theme WordPress là gì? và biết được cách cài đặt, kích hoạt theme WordPress theo 02 cách mà mình đã hướng dẫn ở trên. Trong các bài kế tiếp chúng ta sẽ đi vào tìm hiểu từng phần trong Dashboard của Website WordPress. Hẹn gặp lại bạn ở bài sau nhé !

Với những bạn làm website để kinh doanh online hoặc làm digital marketing thì cần phải chọn lựa được website phù hợp có giỏ hàng hay không có giỏ hàng. Ví dụ bạn cần làm landing page thì chỉ cần các theme hỗ trợ landing page như Divi, Avada là đủ. Còn những bạn làm website để bán hàng online có thể cân nhắc Flatsome Theme.

Bạn hãy cố gắng chỉnh chu website để sau này thực hiện SEO website hay chạy quảng cáo Google Ads thì chi phí cho marketing cũng giảm bớt khi có 1 website tốt.

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

Chúc bạn thành công và luôn hạnh phúc.

WordPressTheme Là Gì? Hướng dẫn cách cài đặt giao diện WordPress