XÂY DỰNG BLOG SIÊU TỐC BẰNG SIMPLY PRO GENESIS

CASE STUDY

Hướng dẫn tạo blog tốc độ đỉnh bằng GENESIS child-themes

Genesis luôn là cái tên đẳng cấp nhất trong thế giới WordPress theme: cực nhẹ, chuẩn SEO và thiết kế tinh tế!

Những blog WordPress nổi tiếng nhất thế giới đều lựa chọn Genesis Framework, như Wpbeginner.com, Shoutmeloud.com hay WPkube.com,…

Dù không có nhiều thay đổi trong ngôn ngữ thiết kế 10 năm qua, mặc cho trào lưu thiết kế web biến đổi từng ngày, nào là flat design, material design, responsive, adaptive…mobile first!

Đến nay, giá trị bất biến của Web Design vẫn chẳng có gì thay đổi: Content First!

Genesis ngay từ đầu đã đi theo ngôn ngữ thiết kế Tinh tế – Tối giản để đảm bảo tốc độ load nhanh – và biểu đạt tốt nhất nội dung của Websites.

Họ không cần thay đổi nhiều suốt hơn 10 năm qua, giờ đây các nhà thiết kế theme WordPress sau bao năm chạy theo trào lưu, lại có xu hướng qua trở về với giá trị cốt lõi của Web Design: Content First.

Nhưng:

Genesis không dễ dùng, sự thật là công đoạn cài đặt, cấu hình như demo đã khá mất thời gian, khi cần mở rộng thiết kế nào đó, … ta cũng phải chơi theo luật của Genesis.

Đó là nguyên nhân dù ai cũng thấy WPbeginner hay WPkube, ChrisLema.com … rất đẹp, load cực nhanh nhưng vẫn không chọn Genesis:

Lý do đơn giản là Làm được như các blog đó không phải việc đơn giản

WPBQ cũng khuyên các bạn mới làm dự án WordPress không nên chọn Genesis (bộ StudioPress) nếu không có được các bài hướng dẫn chi tiết.
Ngay cả khi có tài liệu của tác giả, mọi thứ cũng chưa hẳn dễ dàng.

Rất nhiều theme hiện nay hỗ trợ One-click Setup – một cú click là mọi thứ được cài đặt – cấu hình theo mẫu demo bạn thích!

Thời đại này ai rãnh mà chơi theo cách của Genesis nữa?

Nhưng:

Phần thưởng dành cho người kiên nhẫn rất lớn:

Một Website đẹp – thiết kế tinh tế – không tan vào hằng hà sa số thiết kế na ná nhau của các trang web khác và trên hết: Cực nhanh & Chuẩn SEO!

GIỚI THIỆU SIMPLY PRO

—-*—-

Hướng dẫn Xây dựng Blog bằng Simple Pro Genesis Theme — Simple Pro nằm trong bộ StudioPress – VIP CLUB DRIVE

Simply Pro không phải là cái tên nổi bật trong bộ StudioPress – nếu có thì cũng là cách đây gần 4 năm.
Thực sự nó không được tác giả update từ năm 2015.

Nếu là một themes ở Themeforest, chỉ cần 1 năm không update thì người dùng đã nghĩ đến việc chuyển sang theme khác.

Thế giới WordPress thay đổi chóng mặc, mỗi tháng trôi qua vô số tính năng mới được bổ sung, các nhà phát triển theme phải cập nhật, ít nhất là để theme tương thích với các plugins đính kèm, như Visual Composer, Revolution Slider, WooCommerce….

Nhưng Genesis thì khác, họ không có ý định tích hợp các plugin hoành tráng nhưng nặng nề như Visual Composer, Revolutions Slider, ngay cả WooCommerce cũng được giữ ở mức tối giản!

Cái Genesis quan tâm chỉ là tương thích với WordPress Core, nên các bản update của Genesis Framework không diễn ra thường xuyên, thường vài tháng họ update một lần.

Còn child-themes – như Simple Ply hoạt động dựa trên cỗ máy mẹ là Genesis Framework nên nó thực sự chẳng cần update để tương thích – thế giới bên ngoài đã có GF lo rồi!

Nhắc lại để chúng ta hiểu rằng Simply Pro không update suốt 3 năm qua, nhưng nó vẫn tương thích với WordPress và các plugins cần thiết nhất cho WordPress hiện nay.

Tại sao có Case Study Simply Pro?

Vì Simply Pro không nổi bật, lại khá cũ nên WPBQ chưa từng có ý định làm bài hướng dẫn cho theme này!

Một thành viên của VIP CLUB là bạn Minh Hùng lại muốn dùng, nên Team WPBQ đã upload vào VIP Drive kèm theo lời khuyên “không nên dùng”.

Nếu ai cũng ‘nghe lời’ thì có lẽ thế giới sẽ bình yên lắm!

Nhưng bạn Minh Hùng sau khi thử Simply Pro – nó vẫn hoạt động mượt – mà thành quả là một blog cực tinh tế – tốc độ load siêu khủng!

nguyenminhhung-blog — Blog siêu tốc của bạn Nguyễn Minh Hùng

Và bạn ấy quyết định chia sẻ thành quả của mình cho các Members khác qua một bài hướng dẫn ‘cực chi tiết’!

Đấy:
Là lý do có Case Study Simple Pro

Case Study

XÂY DỰNG BLOG BẰNG SIMPLY PRO

—–*—–

Bài viết này được chia sẻ bởi VIP CLUB Member – bạn Nguyễn Minh Hùng!

Các bạn có thể xem rất nhiều hướng dẫn WordPress vô cùng chất lượng trên blog của bạn Minh Hùng.
Đặt biệt là hướng dẫn tăng tốc WordPress, hướng dẫn sử dụng dịch vụ VPS đỉnh Amazon Lightsail – dịch vụ này được VHW Team đánh giá nhanh và ổn định ấn tượng hơn cả Vultr!

PRIVATE: SIMPLY PRO THEME – (TUỲ CHỈNH & TỐI ƯU)

DECEMBER 11, 2018

Simply Pro – thiết kế bởi Kelsey Grauke của Bloom Team, xây dựng trên Genesis Framework do Studio Press phát triển.

Simply Pro là một theme rất hiện đại với phong cách tối giản đến tận cùng, mang lại cảm giác thanh thoát nhẹ nhàng, hệt như nàng thơ tinh khiết bước ra từ trong truyện.

Simply Pro phù hợp với:

Blogger hướng đến cái đẹp của sự giản đơn. Như cái tên của nó. Rất simply.
Blogger đam mô tốc độ. Đây là 1 trong những theme nhanh nhất trong bộ theme được phân phối bởi Studio Press đã vốn nổi tiếng bởi tốc độ. Như cái tên của nó. Rất Pro.

Nhưng khoan…

Có 1 thông tin bạn cần biết, Simply Pro đã không cập nhật phiên bản từ cuối năm 2015. Mình đã khá e ngại nên đã mail hỏi tác giả luôn. Và họ trả lời thế này, mình lược dịch:

Tôi rất mừng vì bạn yêu thích theme Simply Pro.
Nhiều theme của chúng tôi không cập nhật trong 1 số năm đơn giản chỉ vì chúng tôi không thấy bất kì vấn đề nào với chúng.
Nếu chúng tôi thấy có gì không ổn hoặc nếu có lý do để cập nhật, chúng tôi sẽ làm, nhưng bây giờ, có lẽ nó đã hoạt động đủ trơn tru mà không cần phải làm gì nữa.
Chúng tôi vẫn sẽ giúp bạn thông qua hỗ trợ và làm việc với bạn với bất kỳ vấn đề công nghệ hoặc trục trặc nào mà bạn gặp phải, vì vậy đừng lo lắng về điều đó!
Nếu Simply Pro là chủ đề bạn yêu thích, quất nó đi.

Và bạn biết rồi đấy, khi bạn đọc bài viết này, tức là mình đã sử dụng và hài lòng với nó ngay trên cả phiên bản wordpress 5.0 mới toanh.

Và cũng bởi, Simply Pro là 1 child theme của Genesis. Hầu như chỉ cần theme mẹ cập nhật là mọi sự đã yên ổn.

Bài viết này sẽ giúp bạn?

Cài và cấu hình theme hoàn chỉnh giống Demo. Bloom cũng xuất bản 1 cái documentation, nhưng không đủ để bạn mãn nguyện đâu, tin mình đi.
Tuỳ chỉnh theme hơi nâng cao 1 tẹo. Để Simply được pro hơn.
Tối ưu hiệu suất và tốc độ dành riêng cho nó.

Nếu bạn thay đổi theme, đây là quy trình bạn nên làm để tránh thời gian chết.

(1) Ngưng kích hoạt các plugin tạo cache
(2) Dùng Plugin UpdraftPlus để thực hiện Backup và tải về máy (toàn bộ 5 file riêng lẻ). Xem hướng dẫn.
(3) Qua 1 hosting dự phòng đã cài sẵn wordpress.
(4) Cài plugin UpdraftPlus ở site dự phòng và thực hiện Restore bằng 5 file đó.
(5) Tiến hành thực hiện đổi theme trên site mới.
(6) Làm xong mọi thứ, di chuyển website về lại hosting chính cũng bằng UpdraftPlus.

Mục số 5 của quy trình trên là nội dung chính của bài này. Bắt đầu thôi.

1. Cài đặt Genesis Framework

Giống như cài 1 theme bình thường, chỉ là không Kích hoạt nó:

Đến Appearance > Themes trong menu WordPress
Click “Add New”
Click “Choose File”. tìm và chọn file zip của Genesis Framwork trên máy tính
Click “Install Now”
Không Active

Sau khi cài đặt Genesis Framework, bây giờ bạn có thể cài đặt chủ đề con (Simply Pro) được rồi.

2. Cài đặt Simply Pro

Tương tự như trên, nhưng lần này bạn sẽ Nhấn “Activace” để kích hoạt nó.

3. Cài Plugin hỗ trợ

Đi tới Plugins > Add New
Tìm kiếm tên các plugin bên dưới và klick “Install Now”. Sau đó, klick “Activace”

Genesis Responsive Slider
Genesis Simple Share
Instagram Slider Widget
Simple Social Icons

4. Cấu hình theme

4.1. Cài đặt bài viết ở trang chủ

Đầu tiên, vào Settings > Reading, chọn như hình.

Tiếp tục, đến Genesis > Theme Setting > Content Archive

4.2. Cài đặt logo

Đến Appearance > Header > Header Image. Click “Add new image” và chọn ảnh logo của bạn. Nhấn “Skip Cropping” để giữ nguyên logo.

Bạn nên chuẩn bị 1 logo với kích thước chiều cao < 60px. Hình ảnh có kích thước lớn hơn đều sẽ tự động resize về 60px. Nhưng

Nếu bạn muốn hiển thị logo có chiều cao > 60px. Ví dụ như logo của VHW có kích thước: 320x100px chẳng hạn. Ta sẽ thêm đoạn css bên dưới vào
Appearance > Customize > Additional CSS:

.header-image .site-title {width: 320px;height: 100px;}

.header-image .title-area {max-width: 320px;height: 100px;}

4.3. Thêm slide bài viết nổi bật

Chuẩn bị bài viết để hiển thị

Để tiện nhất, bạn nên tạo 1 Category mới, rồi thêm ít nhất 4 post bạn muốn hiện lên slide vào Category này.

Kích thước ảnh trên slide theo Demo là: 1000x500px. NÊN:

Bạn PHẢI resize lại Featured Image của tất cả các bài viết nổi bật thành đúng kích thước bạn chọn.

Sở dĩ phải làm điều này là để, slide không tự cắt ảnh của bạn đi, và trên mobile sẽ không bị lỗi hiển thị. Đây là kinh nghiệm bản thân sau khi đau đầu mấy tiếng với nó.

Cài đặt Slider

Đến Genesis > Slider Settings và chọn như hình. Những tuỳ chọn không được nhắc tới, bạn có thể để mặc định.

Hiển thị Slider lên đầu trang chủ

Khi đã cài đặt và chuẩn bị bài viết xong, bạn chỉ cần đem Slider lên đầu trang chủ bằng cách:

Đến Appearance > Widgets

Thêm Widget “Genesis – Reponsive Slider” vào khu vực “Featured”

Ra trang chủ để xem sự thay đổi.

Rất đẹp.

4.4. Thêm nút share mạng xã hội

Vào Genesis > Simple Share, cài đặt như hình

4.5. Thêm icon mạng xã hội cá nhân

Các Icon MXH này nằm dọc bên trái của theme Simply Pro rất đẹp, nhưng chỉ khi bạn làm theo hướng dẫn bên dưới.

Vào Appearance > Widget, thêm Widget “Simple Social Icons” vào khu vực “Primary Sidebar”, sau đó chọn màu sắc như hình dưới.

4.6. Thêm nội dung vào Sidebar

Nút Search

Thêm Widget “Search” vào “Primary Sidebar” là được rồi.

Bạn nên thêm 1 tí css vào Appearance > Customize > Additional CSS để giảm nhỏ chữ trong ô search lại, đẹp hơn.

.search-form input[type="search"] {
font-size: 11px;
}

Ảnh giới thiệu About me

Chỉ cần thêm Widget “Image” vào. Để hiện chữ bên dưới bức ảnh, bạn chỉ cần nhấn vào bức ảnh và thêm Caption.

Bài viết nổi bật

Bạn có thể thêm 1 số bài viết khác vào sidebar thông qua Widget “Genesis – Featured Post”

4.7. Thêm nội dung vào Footer

Cũng trong Appearance > Widget, bạn hoàn toàn có thể thêm nội dung vào khu vực có tên “Footer 1”.

Thêm ảnh Instagram

Chỉnh sửa Copyright

Khá đơn giản. Bạn hãy đến Appearance > Editor (1) > Chọn theme Simply Pro (2) > Chọn file Function.php (3)

Thay thế dòng bên dưới thành nội dung của bạn. (4)

footer_copyright before="Copyright "] · Simply Pro Theme by Bloom Blog Shop.

4.8. Chỉnh sửa Breadcrums

Simply Pro hỗ trợ Breadcrums, nhưng phải rằng nó quá cùi.

Để bật Breadcrum cho bài viết, bạn vào Genesis > Theme settings > Breadcrums, tick vào “Single Posts”
Để trang điểm cho Breadcrum, bạn cần css 1 tí. Bên dưới gợi ý

.breadcrumb {padding:4px;margin-bottom:11px; border-top: 1px solid #ddd;border-bottom: 1px solid #ddd;}

4.9. Làm đẹp Quote Block

Phần trích dẫn trong bài viết của Simply khá xấu. Bạn nên css cho nó. Bên dưới là 1 gợi ý từ mình.

blockquote {

font-size:16px;
color: #a5a4a4;
font-style: italic;
margin: 30px;
padding: 30px;
text-align: center;
background:
url(link-anh-1) top center no-repeat,
url(link-anh-2) bottom center no-repeat;
}

Hãy tải ảnh 2 bức ảnh này và upload lên site của bạn, sau đó thay link ảnh vào đoạn css trên.

Download Ảnh 1

Download Ảnh 2

4.10. Phóng to font chữ

Font chữ 16px là tối thiểu theo báo cáo của Google Light house cho trải nghiệm người dùng tốt.

p {font-size: 16px;}

Tới đây, website của bạn hầu như hoàn tất về phần giao diện rồi.

Chúng ta sẽ qua 1 công đoạn hấp dẫn hơn.

5. Tối ưu tốc độ Simply Pro

Như bạn cảm nhận, Simply Pro đã rất nhanh rồi. Nhưng điều đó càng làm chúng ta ham muốn thêm nữa. Hãy thắt dây an toàn vào.

Vì website của bạn sẽ chạy nhanh xé gió.

0,25s, chỉ bằng cái chớp mắt. Ảnh bên là kết quả load trang lần thứ 2 trở đi, đo bằng tiện ích “Page load time” của Chrome. (Kết quả này còn bị thuộc vào đường truyền internet và trình duyệt của bạn.)

gtmetrix test — Gtmetrix test từ Hong Kong.

pingdom test — tool.pingdom check từ Tokyo

test my site think with google — Công cụ Test my site think with Google, đo trên slow 3G mobile

Nhưng, đừng quên rằng:

Điều kiện đầu tiên cho 1 website chạy nhanh đó là Hosting/Vps chất lượng.

Điểm số của các công cụ đo lường không phải là thứ bạn nên theo đuổi. Thứ bạn cần quan tâm thật sự là thời gian tải.

Lưu ý, nếu bạn đang dùng Hosting từ các nhà cung cấp ở Việt Nam, check tốc độ trên gtmetrix hoặc pingdom sẽ không chính xác, vì truy cập quốc tế đi tới vào máy chủ VN rất chậm.

5.1. Cache cho website

Việc lựa chọn hình thức cache nào cho website phụ thuộc rất nhiều từ phía máy chủ của bạn.

Ngoài việc sử dụng cache được cài thẳng trong sever, bạn cũng có thể áp dụng thêm các hình thức tạo cache khác thông qua plugin.

Hãy nhấn vào liên kết bên dưới để đọc bài review chi tiết nhất cho các plugin tạo cache phổ biến. (bằng tiếng Anh). Lựa chọn là của bạn.

BEST WORDPRESS CACHE PLUGINS REVIEW – UPDATED 2018

Tác giả bài viết trên là 1 thành viên nổi bật của group WordPress Speed up, hài lòng với Plugin Swift Performance.

Riêng mình (người thực hiện bài viết này), đang hài lòng với Combo Cache từ VPS dùng máy chủ web Nginx: Nginx Fastcgi cache + Redis Object cache.

Lưu ý, các plugin cache thường kèm theo chức năng gộp nén css và js, có thể giúp bạn tăng điểm ở các bài test, nhưng tỉ lệ cao bạn sẽ bị phản dame vì tốc độ thật sự lại chậm hơn.

Riêng với Simply Pro, sau các thử nghiệm để sống ảo với điểm số Pagespeed insight (mà không làm chậm website đi), mình đã dùng…

5.2. Fast Velocity Minify

Bạn hãy chọn theo cấu hình bên dưới. Nếu hosting bạn tốt, hình ảnh trên website đã tối ưu kích thước và dung lượng, thì điểm số Google Pagespeed Insight sẽ màu xanh 90~95.

Vào Settings > Fast Velocity Minify > Settings