Hướng dẫn thiết kế website cơ bản bằng WordPress từ A-Z – Phần 1

Sau Series tối ưu tốc độ website WordPress thì mở đầu bài viết cho đầu năm 2021 mình sẽ hướng dẫn các bạn thiết kế một website cơ bản bằng WordPress từ A-Z dành cho các bạn mong muốn tự làm cho mình một website hoặc tự quản lý website mà không cần thuê quản trị viên.

Trước khi bắt đầu mình muốn sơ bộ một chút về các phần chúng ta sẽ học qua như sau:

1. Cài đặt môi trường WordPress trên máy chủ ảo (localhost)
2. Lựa chọn theme (giao diện) website tối ưu
3. Lựa chọn các plugin cần thiết để tạo nên một website hoàn chỉnh
4. Dựng bố cục website phù hợp với nhu cầu
5. Tối ưu SEO cho website
6. Lựa chọn domain (tên miền) và hosting (lưu trữ dữ liệu) tốt và phù hợp với nhu cầu
7. Tải website từ localhost lên hosting
8. Tối ưu tốc độ website WordPress

Đối với những phần học trên, các bạn cần chuẩn bị những hạng mục cần thiết như sau:

1. Thời gian học và thực hành ít nhất 1h / ngày
2. Có mục tiêu trong thiết kế website như: Làm web để quảng cáo dịch vụ, bán hàng, quản trị web cho công ty,… hay thậm chí là làm dịch vụ thiết kế website khi đủ khả năng.
3. Có máy tính và trang thiết bị cần thiết (chắc chắn rồi).

Được rồi, sau khi các bạn đã chuẩn bị xong thì chúng ta tiến tới series

Hướng dẫn thiết kế website bằng WordPress từ A-Z

Đầu tiên mình sẽ hướng dẫn các bạn cách để tạo ra một môi trường để làm việc với WordPress.

Cài đặt môi trường WordPress trên Localhost

Đối với cài đặt localhost, mình sẽ giới thiệu cho các bạn 2 phần mềm mà mình rất hay dùng đó là Wamp và Xampp. 2 phần mềm này không khác nhau là mấy, cùng là chức năng tạo ra môi trường localhost cho website.

Hướng dẫn cài đặt Wamp Server

Để cài đặt Wamp Server, các bạn truy cập vào liên kết chính chủ https://www.wampserver.com/en/ và lựa chọn tải phiên bản phù hợp với cấu hình máy tính của bạn.

 

Click liên kết màu vàng có chữ “you can download it directly”

Click tiếp Download Latest Version

Sau khi tải xuống hoàn tất, bạn tiến hành mở phần mềm lên và cài đặt. Quá trình cài đặt khá đơn giản, bạn chỉ cần click Next…

Sau khi cài đặt xong, thư mục Wamp64 sẽ xuất hiện trong ổ đĩa hệ thống (C) hoặc ổ đĩa khác tùy vào lựa chọn của bạn trong khi cài đặt. Thư mục wamp64/www là nơi chứa các gói website của bạn sau này.

Bây giờ, để kích hoạt wamp thì bạn mở phần mềm wamp ngoài màn hình desktop lên, hoặc vào start gõ Wamp server và bật nó lên.

Khi Wamp được kích hoạt thành công, bạn sẽ thấy có icon W màu xanh lá cây dưới thanh taskbar.

Ok, vậy là chúng ta đã hoàn thành cài đặt localhost cho WordPress bằng Wamp Server. Trước khi bắt đầu tạo môi trường WordPress trên localhost thì mình sẽ hướng dẫn cài đặt Xampp luôn cho các bạn không thích dùng Wamp thì dùng Xampp nhé!

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

Để cài đặt Xampp, các bạn truy cập liên kết: https://www.apachefriends.org/download.html và lựa chọn phiên bản phù hợp với hệ điều hành các bạn đang sử dụng. Ở đây mình đang xài hệ điều hành Windows, các bạn click nút download để tải về phần mềm Xampp.

Tương tự với Wamp Server, việc cài đặt rất đơn giản chỉ cần nhấn Next…

Sau khi cài đặt xong, bạn sẽ có thư mục xampp trong ổ đĩa hệ thống (C) hoặc bất kì ổ đĩa khác theo lựa chọn của bạn.

Sau khi cài đặt hoàn tất Xampp thì bạn mở phần mềm lên và start lần lượt 2 mục đầu tiên là Apache và MySQL

Cho đến khi 2 mục Apache và MySQL chuyển sang màu xanh lá thì bạn đã kích hoạt Xampp thành công.

Các website của bạn khi sử dụng Xampp sẽ đặt ở đường dẫn thư mục như sau: C:\xampp\htdocs

Vậy là chúng ta đã cài đặt xong localhost với Xampp hoặc Wamp Server. Ngay bây giờ mình sẽ hướng dẫn các bạn cài đặt WordPress trên localhost sử dụng Wamp Server hoặc Xampp.

Cài đặt WordPress trên localhost với Wamp / Xampp

Trước khi thực hiện công việc của thiết kế website sau khi cài đặt localhost thì chúng ta cần có bộ file nguồn WordPress, để có được bộ file nguồn này, bạn truy cập liên kết : https://vi.wordpress.org/download/ và tải về bộ nguồn bằng cách click vào nút Tải về WordPress 5.5.4 (có thể bên bạn sẽ là số phiên bản khác tùy theo từng giai đoạn cập nhật của WordPress nhé)

Sau khi tải về hoàn tất, các bạn giải nén file wordpress và copy vào thư mục website (C:\wamp64\www đối với Wamp Server và C:\xampp\htdocs đối với Xampp)

Sau khi copy thư mục WordPress vào localhost, các bạn truy cập http://localhost/wordpress. Nếu ra màn hình như bên dưới thì bạn đã thành công đưa thư mục wordpress vào localhost.

Tiếp theo, các bạn click vào nút thực hiện ngay! và nhập tên Database (viết liền không dấu), tên người dùng (tên đăng nhập phpmyadmin – mặc định: root), mật khẩu bỏ trống và giữ nguyên Database Host và Tiền tố bảng dữ liệu (bạn có thể thay đổi mục này nhưng không khuyến kích đối với những bạn mới tiếp cận WordPress). Nhấn Gửi để hoàn tất quá trình cài đặt WordPress.

Đối với một số máy tính sẽ gặp phải lỗi dưới đây. Đây là lỗi chưa tạo Database thủ công, một số máy tính thì tự động tạo mới database và thiết lập luôn ở bước này.

Để tạo Database cho WordPress thủ công, các bạn truy cập liên kết: http://localhost/phpmyadmin/ xuất hiện giao diện đăng nhập dưới đây

Các bạn nhập như sau:

• Username: root
• Password: (bỏ trống)

Click Go để đăng nhập vào hệ thống quản lý Database của website. Tại đây bạn chọn New để tiến hành tạo mới Database

Tại đây, bạn nhập tên Database và chọn định dạng cho nó. Mình sẽ nhập với cái tên như bước thiết lập WordPress ở trên là wpdatatest và chọn định dạng là utf8_unicode_ci. Sau đó click Create.

Sau khi tạo xong Database thì bạn sẽ nhận được kết quả với màn hình bên dưới. Tại đây, bạn sẽ chưa thấy dữ liệu gì cả vì nó vẫn chưa được kết nối với WordPress và khởi tạo dữ liệu trong WordPress.

Tiếp theo, bạn truy cập vào thư mục C:\wamp64\www\wordpress (dành cho Wamp Server) hoặc C:\xampp\htdocs\wordpress (dành cho Xampp) và mở file wp-config-sample.php bằng Notepad và sửa ở các thông tin bên dưới:

Sửa xong bạn lưu lại file và tắt file này đi. Sau đó bạn đổi tên file wp-config-sample.php thành wp-config.php.

Bây giờ bạn hãy thử truy cập vào http://localhost/wordpress và kết quả bạn nhận được như sau:

Ngay bây giờ, bạn nhập các thông tin cho website của bạn:

• Tên website: Tên hiển thị trên Website
• Tên người dùng: Tên đăng nhập vào website
• Mật khẩu: Mật khẩu đăng nhập vào website
• Email của bạn: Nhập email quản trị website
• Search Engine Visibility: Bạn nên check vào mục này để tránh Google Index website khi website vẫn còn đang thiết kế. Chúng ta có thể mở lại index khi website đã sẵn sàng hoạt động.

Click Cài đặt WordPress để hoàn tất.

Yeah, bây giờ các bạn có thể đăng nhập vào WordPress để bắt đầu thiết kế website được rồi!

Đây là giao diện quản trị sau khi bạn đăng nhập thành công!

Đây là giao diện website vừa khởi tạo của bạn

Vậy là chúng ta đã hoàn thành bước đầu tiên là cài đặt môi trường WordPress trên máy chủ ảo (localhost).

Để tiếp tục series hướng dẫn thiết kế website bằng WordPress từ a-z thì tiếp theo, chúng ta sẽ bắt đầu thiết kế giao diện website nhé!

Lựa chọn theme (giao diện) website tối ưu

Theme tối ưu là như thế nào?

Để quyết định chọn một bộ theme nào đó áp dụng cho website thì theme phải đáp ứng các yêu cầu tối thiểu sau đây:

• Theme cần phù hợp với nhu cầu của bạn
• Theme nhẹ, ít hiệu ứng. Ít tệp tin JS
• Theme đáp ứng tối thiểu điểm về SEO
• Theme tùy chỉnh dễ dàng hoặc không quá phức tạp

Dưới đây là một số gợi ý tên bộ theme mình cung cấp cho các bạn:

Theme phù hợp với các website dạng thông tin, tin tức

Dưới đây là các theme được Web MTP mua bản quyền và hoàn toàn không có virus

• Newspaper – Tải theme phiên bản mới nhất tại đây
• Newsmag – Tải theme phiên bản mới nhất tại đây

Theme phù hợp với các website bán hàng, thương mại điện tử

• Flatsome – Tải theme phiên bản mới nhất tại đây

Trong series này mình sẽ hướng dẫn các bạn cách sử dụng theme Newspaper và Flatsome. Đối với theme Newsmag thì các thao tác giống hoàn toàn với Newspaper nên mình sẽ không hướng dẫn thêm đối với theme này.

Cài đặt và sử dụng theme Newspaper

Cài đặt theme Newspaper

Sau khi các bạn tải theme Newspaper về thì tại giao diện quản trị WordPress, các bạn chọn Giao diện > Add New (thêm mới)

Chọn tiếp Tải giao diện lên, click vào chọn tệp và chọn đến Newspaper.zip đã tải về. Sau đó click Cài đặt

Sau khi cài đặt xong, bạn click kích hoạt để theme bắt đầu hoạt động

Kích hoạt xong bạn sẽ nhận được màn hình như bên dưới. Ngay đây, bạn click vào Install / Activate Plugin để cài đặt các Plugin mà theme Newspaper yêu cầu. Quá trình diễn ra khoảng 60 giây.

Sau khi cài đặt xong các plugin mà Newspaper yêu cầu, thì chúng ta bước đến công việc lựa chọn giao diện mẫu mà Newspaper hiện có.

Khi bạn đã nhắm được mẫu yêu thích thì di chuột vào mẫu đó và click INSTALL để tiến hành cài đặt mẫu web. Nếu hiện ra bảng thông báo nào thì bạn chỉ cần nhấn Yes.

Quá trình cài đặt có thể chiếm 60 giây, lúc này bạn có thể đứng dậy rót một ly nước để giải lao một chút trước khi chúng ta nhận được thành quả.

Ok, sau khi đã cài đặt xong mẫu thì bây giờ bạn truy cập http://localhost/wordpress/ để xem mẫu giao diện đã cài đặt nhé!

Tiếp theo, ở trang quản trị chúng ta sẽ tiếp tục cài đặt thêm các plugin hỗ trợ trong việc quản trị website của chúng ta sau này bao gồm:

• Contact Form 7 : Plugin dùng để tạo biểu mẫu (form) liên hệ. Plugin này giúp bạn lấy thông tin khách hàng dễ dàng và thông tin khách hàng được gửi về email của bạn.
• Easy SMTP : Plugin dùng để cấu hình gửi nhận thông tin liên hệ từ Contact Form 7 sang Gmail của bạn.
• TinyMCE : Plugin này giúp bạn có một môi trường viết bài hoàn chỉnh tương tự như Microsoft Word mà bạn hay dùng.
• WMTP Call Button : Plugin giúp bạn tạo các nút gọi, chat Facebook, chat Zalo, Whatsapp, Viber,… dễ dàng và tối ưu. Plugin này đang được bán với giá $19 (~ 450.000đ) trên Codecanyon với liên kết sau: https://codecanyon.net/item/create-custom-call-buttons-and-social-networks/25635277. Hoặc bạn có thể mua trực tiếp tại người lập trình plugin này ( Tung Nguyen ) với giá 200.000đ.

Lựa chọn các plugin cần thiết

Để cài đặt lần lượt cách plugin trên, các bạn truy cập Plugins > Add New (Cài mới)

Bạn nhập tên các plugin và click nút cài đặt, sau đó click luôn nút kích hoạt. Lần lượt làm lại bước này cho đến khi cài đặt xong các plugin trên.

Và đây là các plugin sau khi đã được cài đặt:

Vậy là bạn đã hoàn thành bước đầu tiên trước khi tiến hành thiết kế website, cũng như đã hoàn thành phần 1 của series hướng dẫn thiết kế website bằng WordPress từ A-Z. Bài sau mình sẽ tiếp tục với hạng mục dựng bố cục website phù hợp với nhu cầu.

Cảm ơn các bạn đã theo dõi các bài viết tại Web MTP. Và trong thời gian chờ đợi bài viết tiếp theo, các bạn có thể tham khảo các bài viết liên quan hấp dẫn khác tại website này nhé!

Dịch vụ thiết kế website chuyên nghiệp tại Web MTP

Liên hệ ngay với chúng tôi nếu bạn đang gặp khó khăn trong việc thiết kế web nhé!

Website: https://webmtp.com/

Hotline: 0931 912 379

Tip: Hướng dẫn cách loại bỏ Javascript ở các trang không cần dùng đến