Trong bài viết này chúng ta sẽ tự tay thiết kế website tin tức từ Theme MH Magazine Lite, tạo bởi MHThemes. Đây là website tin tức đầu tiên và là website thứ 2 trong chuỗi bài Hướng dẫn thiết kế web cho Newbie, không biết kĩ thuật.
Chúng ta cùng bắt đầu nhé!
Bước 1. Mua tên miền và Hosting
Tên miền là địa chỉ của website trên Internet, có dạng: themevi.com, vn-zoom.org, vnexpress.net, dantri.com.vn. Nó giống với địa chỉ của ngôi nhà.
Hosting là nơi lưu trữ toàn bộ dữ liệu của website bao gồm bài viết, hình ảnh, video, tài liệu…Nó giống như mảnh đất để xây ngôi nhà.
Mình khuyến khích mua tên miền tại Namesilo. Đây là đại lí chính thức của ICANN, và giá tên miền .COM ở đây gần như rẻ nhất thị trường luôn, chỉ khoảng 200k/năm (rẻ hơn chỗ khác 50-100k/năm).
Và hosting bạn nên chọn ở Azdigi Thạch Phạm (Việt Nam). Do Thạch Phạm, admin Thachpham.com lập ra, với giá từ 50k/tháng (đủ cho 1 web tin tức nhỏ rồi).
Sử dụng mã VNZOOM để được giảm 10% khi mua hosting tại Azdigi.
Và sau khi có tên miền, hosting, bạn cần trỏ tên miền về Hosting. Đọc hướng dẫn này để biết cách trỏ tên miền nhé!
Bước 2. Cài đặt WordPress
WordPress là mã nguồn mở được 28% website trên Internet sử dụng. Nó mang lại nhiều tính năng mạnh mẽ cho người dùng, mà không cần bất kỳ kiến thức kĩ thuật nào.
Trước khi đi vào thiết kế website bán hàng, bạn cần cài đặt WordPress. Nếu sử dụng hosting ở Azdigi, hãy cài đặt WordPress theo hướng dẫn này.
Bước 3. Cài đặt MH Magazine Lite Theme
Mình sẽ thực hiện trên giao diện WordPress bằng Tiếng Anh. Với web tiếng Việt, thứ tự các mục y hệt 🙂
Bấm vào Appearance > Themes > Add New
Gõ mh magazine lite vào ô tìm kiếm > Di chuột lên hình ảnh Theme > Bấm Install
Sau đó bấm Activate
Bước 4. Cài đặt Logo
Mặc định MH Magazine Lite sẽ hiển thị Tên và Slogan web. Bạn có thể ẩn nó đi và thay bằng Logo.
Chọn Select Logo > Select Files > Select > Skip Cropping
Và Publish
Bước 5. Menu
Bạn cần tạo các bài viết, trang hoặc chuyên mục bạn muốn.
Sau đó tạo một menu và thêm các mục vào menu theo hướng dẫn này
Bước 6. Cài đặt Trang chủ
Đầu tiên tạo một trang gọi là Home (Trang chủ)
Sau đó chọn Template là Homepage
Tiếp tục thiết lập nó là Trang chủ của website
Bước 7. Slider
Đi tới Appearance > Widgets > Kéo MH Slider Widget [lite] qua Home 2 – 2/3 Width
và sửa rồi lưu
Bước 8. Khối tin tức (Dưới slider)
Appearance > Widgets > Kéo MH Custom Posts [lite] > Thả vào Home 3 – 1/3 Width & Home 4 – 1/3 Width
và sửa
Bước 9. Khối tin tức 2
Appearance > Widgets > Kéo MH Custom Posts [lite] > Thả to Home 3 – 1/3 Width & Home 4 – 1/3 Width
Sửa và lưu
Làm tương tự với khối tin tức 3
Bước 10. Khối ảnh quảng cáo
Appearance > Widgets > Kéo Text Widget > Thả vào Home 5 – 2/3 Width
Sửa và Lưu. Để tạo nền bạn cần sử dụng chút CSS. Sẽ nói ở bước sau.
Bước 11. Footer
Appearance > Widgets > Kéo Widget: Text, Categories, Recent Posts > Thả vào Footer 1, Footer 2, Footer 3 and Footer 4
Sửa Recent Posts Widget ở Footer 1 – 1/4 Width rồi lưu. Phần tiêu đề nếu để trắng nó sẽ hiện lên tiêu đề mặc định.
Sửa Text Widget ở Footer 2 – 1/4 Width (cần tiêu đề)
Sửa Categories Widget ở Footer 3 – 1/4 Width
Sửa Text Widget ở Home 4 – 1/4 Width (cần tiêu đề)
Bước 12. Copyright
Ẩn Copyright
Nếu bạn chỉ muốn ẩn cái dòng chữ Copyright, thì có thể:
Và chèn từ dòng 01-04
rồi Publish
Tùy chỉnh Copyright
Nếu bạn không muốn ẩn mà muốn đổi chữ, đổi liên kết…
Appearance > Editor
bạn sẽ thấy
Đổi theo cách bạn muốn và Lưu
và kết quả
Bước 13. Sidebar bên phải ở Trang chủ
Thanh tìm kiếm
Appearance > Widgets >Kéo Search widget > Thả vào Home 6 – 1/3 Width
Ảnh 01
Appearance > Widgets > Kéo Image widget > Thả vào Home 6 – 1/3 Width (bên dưới Search Widget). Bấm Add Image để tải ảnh lên.
Khối “You may also like…”
Appearance > Widgets > Kéo MH Custom Posts [lite] > Thả vào Home 6 – 1/3 Width
Sửa
và kết quả
Ảnh 2 và Tag Cloud
Appearance > Widgets > Kéo Image và Tag Cloud Widget > Thả vào Home 6 – 1/3 Width
Hoàn thành
Bước 14. Sidebar phải (trừ trang chủ)
Làm tương tự Bước 13, nhưng là thả Widget đến Sidebar
Xong! Vậy là bạn đã tự tay tạo một website tin tức đơn giản, nhưng rất đẹp từ MH Magazine Lite Theme rồi!
Bước 15. Hoàn thiện website
- Cài đặt chứng chỉ SSL (https màu xanh trên trình duyệt)
- Cài đặt công cụ tối ưu SEO Yoast SEO
- Cài đặt công cụ bảo mật web iThemes Security
- Khai báo website với Google Search Console
- Cài đặt công cụ thống kê truy cập Google Analytics
- Tối ưu nhỏ khác (đường dẫn tĩnh, avatar người bình luận,..)
xin cảm ơn a!
Blog sẽ còn đăng nhiều hướng dẫn nữa 😉
Bài viết rất tốt và chi tiết.
Cho mình hỏi chỗ nào đề đổi cái màu đen thui trên thanh menu ko ạ,
Bạn chèn dòng code này vào Giao diện > Tùy chỉnh (Tùy biến) > CSS bổ sung
.mh-main-nav-wrap {
background: red;
}
muốn đổi thành màu gì thì sửa red thành tên màu đó trong tiếng anh là được.
Bạn có thể hướng dẫn Cài đặt chứng chỉ SSL (https màu xanh trên trình duyệt) không ạ ?
Cài cái đó gồm 2 bước
Bước 1. Cài chứng chỉ SSL trên Hosting
Cái này bạn chỉ cần liên hệ hosting, và bảo họ cài Let’s Encrypt trên Hosting cho bạn (hầu hết hosting hiện nay đều free Let’s Encrypt SSL, và cài free, vì chỉ mất 1-2 click thôi)
Bước 2. Cài đặt Plugin Really Simple SSL
Sau khi cài đặt, kích hoạt, nó sẽ hiện ra một bảng màu xanh…với nội dung đại loại là đã phát hiện ra SSL trên web
Lúc đó bấm Go ahead, SSl, F5 và đăng nhập lại thôi.
Bước 3.
Thi thoảng một số link trên web chưa được chuyển qua SSL hết, đặc biệt là link ở Slider, Banner, Ảnh nền. Cái này fix thủ công, hoặc thử cài thêm SSL Insercure Content Fixer, hoặc nhờ hosting thêm code chuyển hướng vào htaccess.