Xây-dựng-Blog-chuyên-nghiệp-trong-1-giờ-Case-Study-Ngocdenroi.com-phần-3---Home-Page

Phần tiếp theo của Series Xây dựng Blog chuyên nghiệp trong 1 giờ chúng ta sẽ cài đặt và hoàn thiện các tính năng cao cấp như Case Study ngocdenroi.com để  sẵn sàng cho chiến dịch xây dựng và quảng bá nội dung .

Hãy xem lại 2 phần trước đó của Series:

Phần 1 – Overview Case Study ngocdenroi.com

Phần 2 – Cài đặt MTS SteadyIncome và các Plugins cần thiết

WP Academy
Khóa học WordPress chuyên nghiệp

Sau khi đã cài SteadyIncome và Import Demo, giờ là lúc chúng ta cài đặt các tính năng của ngocdenroi.com như đã giới thiệu ở phần 1, đây là các tính năng mà hầu như mọi Blog chuyên nghiệp đều phải có để thu hút người đọc, xây dựng mailing list và tham gia kiếm tiền từ tiếp thị liên kết.

Ta sẽ lần lượt cài đặt và thiết lập từng tính năng đã mô tả trong phần 1, đầu tiên là setting up trong Home Page.

Lần lượt chúng ta sẽ cài đặt, thiết lập các phần đánh số trong giao diện Home Page phần 1 đã đề cập:

1- Tạo Notification Bar

Xây dựng Blog chuyên nghiệp trong 1 giờ Case Study Ngocdenroi.comĐể có thanh thông báo rất hữu dụng này, ta phải cài plugins MTS WP Notification Bars, có thể dùng phiên bản free tại đây.

Hoặc dùng version Pro nếu bạn có (nếu tham gian Group Buy của VHW, hãy email cho Quỳnh để được hỗ trợ cài đặt nếu cần).

Đăng nhập, vào Plugins –> Add New –> gõ từ khóa WP Notification Bars, khi kết quả tìm kiếm hiện ra hãy chọn plugin có tác giả là MyThemeShop và nhấn Install để cài đặt –> Xong nhấn nút Activate để kích hoạt.

Tìm và cài đặt MTS Notification Bars

Sau khi Activate, ngay trong menu của DashBoard sẽ có mục Notification Bars, chọn Add New để tạo một bar mới và nhập thông tin cần thiết trong từng Tab. Bạn có thể tự làm bước này vì nó khá dễ dàng, VHW cũng sẽ có một mini tuts để hướng dẫn cụ thể sau.

Cài đặt và thiết lập MTS Notification Bars

Sau khi hoàn thành , bạn nhấn Publish để post nó lên blog.

2- Thêm Icons vào Menu

Xây dựng Blog chuyên nghiệp trong 1 giờ Case Study Ngocdenroi.com

MTS Steady Income tích hợp sẵn tính năng thêm icon cho Menu Item nên bạn chỉ cần vào Appearance -> Menus, nhấp vào Item muốn thêm icon, chọn icon bạn thích, có thể thêm màu sắc cho nó xong nhấp Save Menu để lưu lại là xong!

them-icon-cho-menu-item

Tips: Bạn có thể chọn nhanh icon bằng cách gõ từ khóa, ví dụ muốn chọn Icon cho Home thì gõ home để xem các icons liên quan tới từ khóa này.

3- Tạo Home Banner

Xây dựng Blog chuyên nghiệp trong 1 giờ Case Study Ngocdenroi.com

Home Banner là phần Featured rất nổi bật ở trang chủ, bạn có thể cung cấp các thông tin giới thiệu dịch vụ hay sản phẩm mình cung cấp.

Và nó cũng có 1 chỗ cho Home Widget, nơi bạn có thể kéo thả các widgets vào, trong trường hợp ngocdenroi.com thì vị trí này được dùng cho Subscribe Form.

Cũng nói thêm mọi thứ trong Homepage đa phần được tạo trong Theme Options Panel, nó khác so với việc bạn dùng Visual Composer để tạo Home Page như đa phần các theme có trên ThemeForest.

Hãy vào Appearance -> Theme Options -> chọn Tab Homepage ở Menu dọc bên trái và nhập các thông tin, upload ảnh cho banner và cho Form đăng ký tương tự hình dưới:

Xây dụng home banner

Xong hãy nhấn nút Save Changes để lưu lại!

Tips: Ảnh up lên nên cùng tỉ lệ kích thước với các ảnh Demo (1170p *520px) để cho chất lượng hiển thị tốt nhất.

Sau này chúng ta có thể dùng plugin OTF Regenerate Thumbnails để resize các ảnh đúng tỉ lệ khuyên dùng như Demo, tuy nhiên nếu ảnh gốc của bạn không có tỉ lệ phù hợp, có thể làm cho Home Banner xấu đi.

Đây là khu vực Featured, chúng ta cần nó đẹp nên hãy cố gắng upload ảnh theo tỉ lệ của Demo.

4- WP Subscribe Form

Xây dựng Blog chuyên nghiệp trong 1 giờ Case Study Ngocdenroi.com

Như đã biết, Home Banner có một khu vực dành cho Home Widget, đây là nơi ta sẽ kéo Form đăng ký vào. Như demo, thì Form này sẽ hiển thị khi người dùng nhấn Button.

Khi bạn import demo thì Home Widget cũng được Import, và tất nhiên nó có sẵn WP Subscribe Form, công việc của ta là cài đặt lại Form này, vì hiện tại nó dùng các thông tin demo của SteadyIncome. Vào Appearance –> Widgets -> Chọn Home Subscribe Widgets để Edit WP Subscribe Widget trong đó:

Cài đặt Home Subscirbe Form

Note: WP Subcribe chỉ hỗ trợ 3 dịch vụ là Mailchimp, Aweber và FeedBurner. VHW khuyên bạn mới bắt đầu hãy dùng Mailchimp, dịch vụ Email Marketing miễn phí rất tuyệt vời.

Hãy tham khảo bài hướng dẫn của anh Trung Đức, một chuyên gia Marketing Online có tiếng hiện nay. VHW cũng có kế hoạch cho bài viết Hướng dẫn đăng ký và sử dụng Mailchimp, nhưng hiện tại bạn cố gắng tự làm nhé! Sau khi đăng ký và tạo List & Form, cái bạn cần là lấy API key và List ID để điền vào Widget trên, sau đó Save lại.

Note: Để tránh bị Spam và Mailchimp Suspended tài khoản, hãy tích vào Send double op-tin notification để mỗi người phải xác nhận đăng ký trong email trước khi được nhận vào List trong Mailchimp.

5- Social Icons $ Books Sections

Xây dựng Blog chuyên nghiệp trong 1 giờ Case Study Ngocdenroi.com

Đây là phần nằn ngay dưới Home Banner, để bạn nhập các links tài khoản mạng xã hội. Bên phải là mục Books Setions, như ngocdenroi.com dùng để giới thiệu các cuốn sách của anh Ngọc, còn bạn có thể giới thiệu sản phầm, dịch vụ của mình ở đây.

Phần này cũng được xây dựng trong Theme Options Panel, ở Tab Homepage, ngay bên dưới Home Banner hãy nhập các thông tin và ảnh thumnails, links cần thiết:

Xây dụng Social Links và Books Sections

Sau khi nhập thông tin và upload ảnh xong. Nhấn Save Changes để lưu lại!

Note: Như đã đề cập, bạn nên chọn tỉ lệ ảnh như ảnh demo (133px*75px) để có chất lượng hiển thị tốt nhất. Hoặc sau này chúng ta sẽ resize hàng loạt bằng plugins OTF Regenerate Thumbnails.

6- Featured Post và Latest Post

Xây dựng Blog chuyên nghiệp trong 1 giờ Case Study Ngocdenroi.com

Đây là tùy chọn ngay phía dưới phần Social Icons & Books Sections trong Option Panel. Bạn có thể tắt đi nếu muốn. Khi xây dựng nội dung, bạn nên tạo một Category tên Featured và bỏ các bài viết nổi bật vào đó. Cũng chú ý tùy chọn chống lặp lại (Duplicate) để tránh có 2 post giống nhau ở 2 phần Featured và Latest Post.

Cài đặt Featured post và Latest post

Xong nhớ Save Changes để lưu lại!

7- Footer Carousel Slider

Xây dựng Blog chuyên nghiệp trong 1 giờ Case Study Ngocdenroi.com

Đây là khu vực nằm trong Footer, dạng Slider bao gồm các item ảnh + link. Bạn có thể dùng nó để giới thiệu các khách hàng của mình, hoặc dùng để hiển thị các dịch vụ, sản phẩm khuyên dùng như trường hợp của ngocdenroi.com.

Cũng lưu ý là trừ Home Banner và Posts on Homepage (6) thì mọi thứ ở trang chủ gồm Notificaton Bars, Header (Primary Menu) và Footer sẽ như nhau ở mọi trang khác như Blog, Archieve Pages (Category Page)…

Hãy vào Theme Options –> Footer -> chọn phần Footer Carousel để nhập links và ảnh cho các item tương ứng:

tao-footer-carousel-slider

Bạn có thể thêm bớt tùy ý. Xong nhấn Save Changes để lưu lại!

8- Footer Widgets

Xây dựng Blog chuyên nghiệp trong 1 giờ Case Study Ngocdenroi.com

Phần này bạn có thể chọn hiển thị hoặc không, có 2 style là 3 cột (3 widgets) và 4 cột. Như ngocdenroi.com chọn 4 cột.

Lưu ý là bạn bậc tính năng này trong Option Panel –> Footer, nhưng nội dung của các cột bạn phải kéo thả trong Widgets vào.

Trong Theme Options –> Footer –> phần Footer Widgets chọn như hình dưới:bat-footer-widgets

Sau đó vào Appearance –> Widgets . Kéo thả các nội dung bạn muốn vào 4 Footer Widgets. VHW khuyên bạn cứ để nguyên style như của SteadyIncome và chỉ chỉnh sửa các thông tin Demo thành các thông tin của bạn:

xay-dung-footer-widgets

Khi sửa thông tin trong Widgets xong nhớ Save lại!

9- Footer Information & Footer Menu

Xây dựng Blog chuyên nghiệp trong 1 giờ Case Study Ngocdenroi.com

Footer Menu tích hợp sẵn, bạn vào Appearance –> Menus –> Menu Settings đánh dấu vào ô Secondary ở phần Locations để Footer Menus hiển thị tốt ( không dropdown như Header Menu).Xây đựng blog chuyên nghiệp trong 1 giờ - Case Study Ngocdenroi.com

Còn Footer Information (thông tin Copyright) bạn thay đổi trong Theme Options –> Footer tại phần Copyright Text ở dưới cùng:Xây đựng blog chuyên nghiệp trong 1 giờ - Case Study Ngocdenroi.com

Nhập thông tin xong nhớ Save changes!

10- Push Notification

Xây dựng Blog chuyên nghiệp trong 1 giờ Case Study Ngocdenroi.com

Như đã nói, Push Notification là tính năng đăng ký nhận thông báo qua trình duyệt, mặc dù hỗ trợ chưa đầy đủ và chỉ hoạt động nếu người dùng giữ cookies trình duyệt nhưng nó đang trở thành xu hướng thời thượng nên bạn cũng cân nhắc thêm vào blog của mình.

Hãy đọc bài hướng dẫn chi tiết của anh Thạch Phạm và tích hợp miễn phí nó cho blog của mình. Xem tại đây!

XONG PHẦN 3!

Chúng ta sẽ tiếp tục sang phần 4 để xây dựng Blog Page như ngocdenroi.com:

Phần 4 – Xây dựng Blog chuyên nghiệp Phần 4 : Blog Page

17279

Khóa học Pro WordPress Web Design 2022

Bạn có thể tự xây dựng Website chuẩn SEO chuyên nghiệp với tài nguyên WP bản quyền trị giá $1000

(*) Vui lòng kiểm tra email để xác thực hoàn tất đăng ký. Nếu không thấy email bạn nên kiểm tra tab Quảng cáo và Spam và kéo email vào tab Chính (Primary) nhé!

7 COMMENTS

  1. Cho anh hỏi chút
    Nếu mình làm 2 wp-subcribe ở home và blog thì API liên kết với mailchimp là 1 key hay là phải 2 key khác nhau.

LEAVE A REPLY

Please enter your comment!
Please enter your name here