VPS 3.5$/tháng - 512MB Ram, 20GB SSD, 0.5TB băng thông, IP riêng. Xem ngay

Thiết kế web tin tức từ số 0 với MH Magazine Lite Theme

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ã AZDG10 để đượ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

mh-magazine-lite-theme1-min

Sau đó bấm Activate

mh-magazine-lite-theme2-min

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.

mh-magazine-lite-theme-logo1-min

Chọn Select Logo > Select Files > Select > Skip Cropping

mh-magazine-lite-theme-logo3-min

Và Publish

mh-magazine-lite-theme-logo4-min

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.

create-contact-page1-min

create-contact-page2-min

create-category-2-min

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ủ)

mh-magazine-lite-theme-create-home1-min

Sau đó chọn Template là Homepage

mh-magazine-lite-theme-create-home2-min

Tiếp tục thiết lập nó là Trang chủ của website

mh-magazine-lite-theme-create-home3-min

Bước 7. Slider

mh-magazine-lite-theme-slide-1-min

Đi tới Appearance > Widgets > Kéo MH Slider Widget [lite] qua Home 2 – 2/3 Width

mh-magazine-lite-theme-slider-2-min

và sửa rồi lưu

mh-magazine-lite-theme-slider-3-min

Bước 8. Khối tin tức (Dưới slider)

mh-magazine-lite-theme-custom-posts1-min

Appearance > Widgets > Kéo MH Custom Posts [lite] > Thả vào Home 3 – 1/3 Width & Home 4 – 1/3 Width

mh-magazine-lite-theme-custom-posts2-min

và sửa

mh-magazine-lite-theme-custom-posts3-min

Bước 9. Khối tin tức 2

mh-magazine-lite-theme-custom-posts4-min

Appearance > Widgets > Kéo MH Custom Posts [lite] > Thả to Home 3 – 1/3 Width & Home 4 – 1/3 Width

mh-magazine-lite-theme-custom-posts5-min

Sửa và lưu

mh-magazine-lite-theme-custom-posts6-min

Làm tương tự với khối tin tức 3

Bước 10. Khối ảnh quảng cáo

mh-magazine-lite-theme-upgrade-to-1-min

Appearance > Widgets > Kéo Text Widget > Thả vào Home 5 – 2/3 Width

mh-magazine-lite-theme-upgrade-to-2-min

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.

mh-magazine-lite-theme-upgrade-to-3-min

Bước 11. Footer

mh-magazine-lite-theme-footer1-min

Appearance > Widgets > Kéo Widget: Text, Categories, Recent Posts > Thả vào Footer 1, Footer 2, Footer 3 and Footer 4

mh-magazine-lite-theme-footer2-min

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.

mh-magazine-lite-theme-footer3-min

Sửa Text Widget ở Footer 2 – 1/4 Width (cần tiêu đề)

mh-magazine-lite-theme-footer4-min

Sửa Categories Widget ở Footer 3 – 1/4 Width

mh-magazine-lite-theme-footer5-min

Sửa Text Widget ở Home 4 – 1/4 Width (cần tiêu đề)

mh-magazine-lite-theme-footer6-min

Bước 12. Copyright

mh-magazine-lite-copyright1-min

Ẩn Copyright

Nếu bạn chỉ muốn ẩn cái dòng chữ Copyright, thì có thể:

appearance-customize1-min

mh-magazine-lite-copyright2-min

Và chèn từ dòng 01-04

rồi Publish

mh-magazine-lite-copyright3-min

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

mh-magazine-lite-copyright4-min

bạn sẽ thấy

mh-magazine-lite-copyright5-min

Đổi theo cách bạn muốn và Lưu

mh-magazine-lite-copyright6-min

và kết quả

mh-magazine-lite-copyright7-min

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

mh-magazine-lite-theme-sidebar-search-min

Ả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.

mh-magazine-lite-theme-sidebar-image-ads1-min

Khối “You may also like…”

Appearance > Widgets > Kéo MH Custom Posts [lite] > Thả vào Home 6 – 1/3 Width

mh-magazine-lite-theme-sidebar-post1-min

Sửa

mh-magazine-lite-theme-sidebar-post2-min

và kết quả

mh-magazine-lite-theme-sidebar-2-min

Ảnh 2 và Tag Cloud

Appearance > Widgets > Kéo Image và Tag Cloud Widget > Thả vào Home 6 – 1/3 Width

mh-magazine-lite-theme-sidebar-tag-cloud1-min

Hoàn thành

mh-magazine-lite-theme-sidebar-tag-cloud2-min

Bước 14. Sidebar phải (trừ trang chủ)

Làm tương tự Bước 13, nhưng là thả Widget đến Sidebar

mh-magazine-lite-theme-global-sidebar1-min

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

2 bình luận về “Thiết kế web tin tức từ số 0 với MH Magazine Lite Theme”

Viết một bình luận