Kinh nghiệm lập trình website mã nguồn mở PHP

Khui hàng Themeforest free WordPress theme tháng 1/2018

Giới thiệu

Như đã lên kế hoạch trên fanpage, hôm nay mình sẽ cùng các bạn khám phá gói giao diện miễn phí trên trang Themeforest dịp năm mới 2018.
Đợt này có 4 free WordPress theme, mỗi cái là 1 loại khác nhau:

  1. Blog
  2. Store – cửa hàng đi chung với Woocommerce
  3. Business – quảng bá công ty, doanh nghiệp
  4. Store – cửa hàng cho em bé với giao diện phù hợp cho trẻ em

Tuy là miễn phí nhưng khá chất lượng, đa dạng mẫu mã, giá cao nhất lên tới $59 (gần 1 triệu rưỡi) chứ ít gì, rất đáng để trải nghiệm.

Link download nhanh google drive

Khui hàng Themeforest free WordPress theme tháng 1/2018

Boutique Kids Creative Free WordPress Theme

Gói giao diện mắc nhất ($59) – Boutique Kids một cửa hàng online với tất cả các mặt hàng dành cho em bé, ta có thể dùng gói giao diện này để xây dựng 1 trang web cạnh tranh với Con Cưng, Tuti Care, …
Thị phần thương mại điện tử dành cho trẻ em ở nước ta hiện nay vô cùng béo bở, các bậc phụ huynh lúc nào cũng sẵn sàng trút hầu bao, sắm cho con cái mình những thứ tốt nhất. Nghe thật hấp dẫn.
Hình ảnh
Khui hàng Themeforest free WordPress theme tháng 1/2018

Demo

Giao diện này mang hơi hướng “tuổi thơ hóa”, với radius, shadow… Phong cách này từ thời 2012, chăm chút các đường nét, sau này thì xu hướng người ta thích xài Flat và tối giản hơn.
Màu sắc thì thiếu tương phản, nhìn màu nền và chữ không có sự nổi bật, nhợt nhạt quá.
Mỗi người một gu thẩm mĩ khác nhau, hy vọng các bạn cùng chia sẻ quan điểm ở dưới comment nhé.

Sau khi giải nén:

Tôi chú ý ngay tới thư mục photoshop, thông thường 1 gói giao diện đem bán với giá cao phải có file PSD đi kèm, mục đích rất dễ tùy biến và thay đổi về sau, trong thư mục photoshop ghi dòng chữ sau đây:
“The photoshop files are quite large ( 300MB ) so if you would like a copy of them please visit this special URL and download from there.
http://dtbaker.net/files/envato/resources/
You will need to login using the secure Envato oAuth tool to verify your purchase before download.”

Vào link resource thì có tiếp dòng thông báo:
“Hello namluuduc. Thank you for purchasing items from dtbaker. The resources for your purchased items are listed below:
None. Please purchase an item from http://themeforest.net/user/dtbaker/portfolio”

Vào link portfolio thì chả có file nào cả? What the heck?
Tôi vào trang hỗ trợ cũng không thấy thông tin gì nên đành để lại 1 comment, sau này sẽ update tiếp cho ai quan tâm.

Thôi kệ, tiếp tục cái theme nào, đặc biệt tôi vớ được 1 link tài liệu cho cái theme này
http://dtbaker.github.io/themes/boutique-kids/documentation/index.html
Tài liệu trên github và rất hoành tráng nhé, không sợ “mò cua bắt ốc” khi gặp ca khó rồi.

Ngó sơ qua cái theme “boutique-kids” nào:
– Size: 13.3 MB (1 con số khủng với 1 cái theme WP, so với theme mặc định toàn ~ 1 MB)
– Code intend bằng tab size 4 (không vui lắm, là space 4 thì tốt hơn, why? Space là cái chuẩn, hết.)
– Code không theo chuẩn PSR if(strlen($icon)
– Plugins cài kèm (vấn đề nan giải nhất khi dùng các gói theme mua chính là cài quá nhiều plugin đi kèm)
– Có hỗ trợ LESS (tốt, gói theme mặc định Twenty Seventeen vẫn dùng CSS)

Tiến hành cái đặt…
– Dùng setup wizard, các bước step by step
– Cài Plugin đi kèm (14 cái) – có 1 cái lỗi WooCommerce ajax error
– Bước login để Update từ Envato, tôi skip vì gói theme free họ không hỗ trợ update mãi đâu.
– Cài dữ liệu mẫu (sample data)

* Phần cài plugin WooCommerce lỗi do gói plugin hơi nặng, dẫn đến việc download bị timeout, tôi sẽ tự upload gói theme lên thư mục của WordPress, sau đó cài đặt thủ công. Tiếp theo tôi vào lại Appearance > Setup Wizard để verify lại các bước cài đặt, đồng thời để Theme chạy setup content, post, product đầy đủ.

Phần cài đặt hoàn tất, menu, hình ảnh, bài post và sản phẩm đều được hiển thị đầy đủ

Khắc phục lỗi outdated

Tuy nhiên, có vẻ như theme đã bị outdated so với plugin woocommerce

Đừng lo, fix các lỗi này rất dễ, bên cạnh đó ta còn nắm được những cập nhật mới cùa Woo.
1. Xác định template file bị outdated (hết hạn), bạn vào Dashboard > Woocommerce > Status
Tại trang này, ta sẽ có cái nhìn toàn cục về hệ thống tích hợp Woocommerce.

2. Fix outdated files

boutique-kids/woocommerce/single-product/product-image.php version 3.0.2 is out of date. The core version is 3.1.0, 
boutique-kids/woocommerce/single-product/product-thumbnails.php version 3.0.2 is out of date. The core version is 3.1.0

Ta mở tâp tin themes/boutique-kids/woocommerce/single-product/product-image.php
Sửa version thành 3.1.0
Phiên bản mới Woo đã dùng biến $thumbnail_size thay vì set cứng là “full” như bản trước, ta copy đoạn code mẫu mới từ tập tin plugins/woocommerce/templates/single-product/product-image.php

 * @author  WooThemes
 * @package WooCommerce/Templates
 * @version 3.1.0
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

global $post, $product;
$columns           = apply_filters( 'woocommerce_product_thumbnails_columns', 4 );
$thumbnail_size    = apply_filters( 'woocommerce_product_thumbnails_large_size', 'full' );
$post_thumbnail_id = get_post_thumbnail_id( $post->ID );

Tương tự ta sửa tập tin themes/boutique-kids/woocommerce/single-product/product-thumbnails.php, version 3.1.0 gắn thêm thuộc tính vào tấm hình như data-caption, title lấy từ post_title thay vì post_excerpt như phiên bản trước đó.

Nivo Free WordPress Theme

Gói theme $45, giao diện khá hiện đại dùng làm trang quảng bá, thông tin công ty, doanh nghiệp, dịch vụ
Thông tin và demo


  • Review code theo chuẩn PSR
  • Các tập tin gọn gàng, dễ hiểu.

Theme này đơn giản hơn theme Boutique Kids, vì nó không bao gồm các plugins. Chủ yếu là bố cục, style và hình ảnh. Nên mình không đi chi tiết vào cách cài đặt và phân tích.

Cena Free WordPress Theme

Giao diện bán hàng online đến từ công ty Thembay, đây là 1 team của Việt Nam nên giao diện mang phong cách Việt, rất giống các trang TMDT lớn ở nước ta hiện nay demo
Code review
Việt style, format không theo chuẩn gì cả, cùng 1 file nhưng khúc trên viết 1 kiểu, khúc dưới viết 1 kiểu

<?php  if ( have_posts() ) :
while ( have_posts() ) : the_post();
<?php if(is_active_sidebar('sidebar-default')) : ?>

Có thể do tôi hơi khắc khe với ba cái format nhỏ nhặt này thật, nhưng từng khoảng trắng mà bạn không làm chủ được thì bạn chưa phải là 1 Professional Coder.
Điểm vớt vát lại là cấu trúc theme gọn gàng, không dư thừa, xài ít plugin kèm theo, dễ tùy chỉnh.

Kết luận
Nếu bạn muốn làm 1 trang bán hàng như Thế giới di động, FPT Shop… thì nên thử Cena

Baxel Free WordPress Theme

Gói theme cuối cùng dùng để làm blog, hoặc tin tức nhỏ.
Xem Demo thấy cũng sáng sủa và ưa nhìn đấy chứ, các bạn tự khám phá theme này nhé.

Link tải Free WordPress Theme

Hết tháng 1/2018, 4 gói Free WordPress Theme này sẽ hết cho download miễn phí, để các bạn đến sau sử dụng, mình đã upload themes lên google drive
Nhìn chung các gói theme này thuộc loại Starter Theme với child theme, nên việc đọc code và tùy chỉnh không quá khó, nếu là Framework Theme thì việc học và chỉnh sửa dành cho coder là 1 sự thử thách rất lớn.
Sự khác nhau Starter Theme và Framework Theme
Trong quá trình cài đặt và sử dụng các gói theme này, nếu có vấn đề gì thì mọi người cùng trao đổi trên này nhé, “mã nguồn chùa” nên hỏi tác giả chắc hiếm khi được hỗ trợ, nhưng cộng đồng thì lúc nào cũng sẵn sàng.

Khui hàng Themeforest free WordPress theme tháng 1/2018
Đánh giá bài viết

Gửi phản hồi

Your email address will not be published. Required fields are marked *