0987 353 298

Cách sử dụng theme Storefront – học làm website wordpress

Cách sử dụng theme Storefront-học làm website wordpress. Đối với những người mới bắt đầu và cần một giao diện bán hàng đơn giản hoàn toàn miễn phí nhưng hỗ trợ woocomerce tối đa thì mình khuyên các bạn nên dùng theme Storefront.

Xem thêm : http://blogloi.com/thiet-ke-website-wordpress-gia-re/

Ưu điểm của theme Storefront

Hiện nay có rất nhiều theme được sử dụng nhưng không phải theme nào mình cũng hướng dẫn chi tiết. Theme Storefront có rất nhiều ưu điểm nên mình giới thiệu cho các bạn trong bài viết này. Ưu điểm của theme như:

  • Mã nguồn mở và hoàn toàn miễn phí
  • Có độ tương thích tốt với các plugin
  • Cấu trúc HTML5 và Schema chuẩn SEO được hỗ trợ rất tốt
  • Customize có khu vực tùy chỉnh đầy đủ
  • Dễ dàng sử dụng
  • Có hỗ trợ Responsive
  • Hỗ trợ tùy biến chuyên nghiệp hơn với phần mở rộng Storefront Designer
  • Có code thân thiện với lập trình viên
  • Hỗ trợ nhiều child theme trả phí

Thêm dữ liệu mẫu cho Woocomerce 

Một gói dữ liệu đã tạo sẵn một số sản phẩm để chúng ta dễ dàng thử theme hoặc các chức năng nhờ dữ liệu mẫu của woocomerce. Để thấy theme hiển thị đầy đủ thế nào chúng ta nên thêm dữ liệu mẫu vào cho thuận tiện.

Trước hết bạn tải plugin về máy tính của mình và giải nén ra. Khi giải nén ra rồi bạn vào thư mục /woocomerce/dummy-data/ sẽ xuất hiện các tập tin mẫu nhưng ở đây mình chỉ sử dụng tập tin dummy-data.xml.

Tiếp đến truy cập vào website-> Công cụ-> Nhập vào-> WordPress (nếu bạn chưa cài plugin wordpress importer thì cài ngay để chuyển sang bước tiếp theo). Tiếp đến là bạn upload tập tin dummy-data.xml lên.Cách sử dụng theme Storefront

Đưa các sản phẩm về user của bạn sau đó đánh dấu vào ô Download and import file attachments rồi bấm Submit.

Cách sử dụng theme Storefront

Nếu bị time out do mạng của bạn hơi chậm, trong host/localhost hãy tạo tập tin php.ini hoặc user.ini và thêm:

01
max_execution_time = 200

Sau khi nhập dữ liệu thành công sẽ có thông báo như bên dưới

Cách sử dụng theme Storefront

Để kiểm tra bạn vào Sản phẩm có nhiều sản phẩm cấu hình rất đầy đủ.

Cách sử dụng theme Storefront

Cài đặt và kích hoạt theme Storefront

Để cài theme bạn truy cập vào Giao diện -> Giao diện -> Thêm mới và gõ trên thanh tìm kiếm tìm theme “Storefront”

Cách sử dụng theme Storefront

 

Sau khi cài đặt xong và hãy bấm kích hoạt theme lên.

Cài đặt trang chủ của theme Storefront

Theme Storefront không tự hiển thị ra trang chủ mà bạn phải tạo trang chủ mới và thiết lập cho nó. Để tạo một trang mới bạn và Trang -> Thêm trang mới có thể đặt tên là Trang chủ. Phần nội dung bỏ trống và thiết lập giao diện là Trang chủ.

Cách sử dụng theme Storefront

Đồng thời bạn cũng nên tạo một trang Tin tức hoặc Blog, nội dung bỏ trống và không thiết lập gì thêm.

Cách sử dụng theme Storefront

Sau đó truy cập vào Cài đặt -> Đọc để thiết lập trang chính và trang bài viết theo từng trang mà bạn vừa tạo lúc nảy.

Cách sử dụng theme Storefront

Bấm lưu thay đổi và ra trang chủ xem kết quả bạn vừa thực hiện.

 

Cách sử dụng theme Storefront

Các thành phần có trên trang chủ như bạn đã thấy trong ảnh và vô cùng dễ hiểu do phiên bản tiếng Việt nên mình chuyển sang phần tiếp theo.

Thiết lập khu vực chèn Widget

Theme Storefront hỗ trợ 6 vị trí chèn cho chúng ta:

  • Thanh bên
  • Bên dưới Đầu trang
  • Footer 1, 2, 3, 4

Cách sử dụng theme Storefront

Tính năng tùy chỉnh trong theme Storefront

Để tùy chỉnh theme bạn vào Giao diện -> Tùy chỉnh, tại đó bạn có thể thiết lập màu sắc, bố cục, logo,…

Cách sử dụng theme Storefront

Cài child theme trước khi tùy biến theme storefront nâng cao 

Tùy biến theme nên tránh sửa hoặc thêm code vào trực tiếp vì sẽ bị mất sạch khi update phiên bản mới. Để không bị mất bạn nên tạo một child theme. Bên dưới mình có tạo sẵn một child theme bạn chỉ việc tải về child theme sau đó bạn vào Giao diện -> Thêm mới -> Tải lên và upload theme này lên và kích hoạt bình thường. Tất cả các code bên dưới bạn sẽ chèn vào child theme vừa upload lên.

Bỏ một số thành phần hiển thị trong trang chủ

Tại tập tin template-homepage.php của theme này bạn sẽ thấy một đoạn code khai báo hiển thị như sau:

<?php
/**
* Functions hooked in to homepage action
*
* @hooked storefront_homepage_content - 10
* @hooked storefront_product_categories - 20
* @hooked storefront_recent_products - 30
* @hooked storefront_featured_products - 40
* @hooked storefront_popular_products - 50
* @hooked storefront_on_sale_products - 60
* @hooked storefront_best_selling_products - 70
*/
do_action( 'homepage'); ?>
Với đoạn code trên tại action hook homepage ta sẽ biết có các hàm nào được móc vào. Để xóa bớt các thành phần mà bạn không muốn hiển thị ra tại trang chủ đơn giản bạn chỉ cần xóa hàm đó ra khỏi hook homepage. Mình sẽ ví dụ cho bạn dễ hiểu, giả sử mình muốn xóa Fan Favorite và We Recommend thì mình chỉ cần thêm đoạn code sau vào trong functions.php.
/**
 * Xóa đi các thành phần không sử dụng trong homepage
 * @hook after_setup_theme
 *
 * template-homepage.php
 * @hook homepage
 * @hooked storefront_homepage_content - 10
 * @hooked storefront_product_categories - 20
 * @hooked storefront_recent_products - 30
 * @hooked storefront_featured_products - 40
 * @hooked storefront_popular_products - 50
 * @hooked storefront_on_sale_products - 60
 * @hooked storefront_best_selling_products - 70
 */
functiontp_homepage_blocks() {
 /*
 * Sử dụng: remove_action( 'homepage', 'tên_hàm_cần_xóa', số thứ tự mặc định );
 */
 remove_action( 'homepage', 'storefront_featured_products', 40 );
 remove_action( 'homepage', 'storefront_popular_products', 50 );
}
add_action( 'after_setup_theme', 'tp_homepage_blocks', 10 );

Điều chỉnh số lượng hiển thị ở những mục ngoài trang chủ

Tất cả các mục hiển thị ra ngoài tại trang chủ ta điều có thể chỉnh lại số lượng hiển thị ra của chúng. Như phần Shop by Category mặc định hiển thị là 3 nhưng ta có thể thay đổi lại, với cách sửa lại tham số tại filter hook của nó đã được khai báo.

Ví dụ bạn đầu phần Shop by Category được khai báo filter như thế này

$args= apply_filters( 'storefront_product_categories_args', array(
 'limit'=> 3,
 'columns'=> 3,
 'child_categories'=> 0,
 'orderby'=> 'name',
 'title'=> __( 'Shop by Category', 'storefront'),
) );
Bây giờ ta sẽ khai báo một hàm khác để filter lại hock storefront_product_categories_args
/**
 * Tùy biến Product by Category
 * @hook storefront_product_categories_args
 *
 */
functiontp_product_categories_args( $args) {
 $args= array(
 'limit'=> 6,
 'title'=> __( 'Danh mục sản phẩm', 'webdaitin')
 );
 return$args;
}
add_filter( 'storefront_product_categories_args', 'tp_product_categories_args')
Các bạn làm tương như những phần khác và mỗi phần là khai báo một hàm như vậy. Bên dưới mình để tên các hock tùy biến ngoài trang chủ của theme, bạn thay các tên này vào filter là được.
  • storefront_product_categories_args: Shop by Category
  • storefront_featured_products_args: We Recommended
  • storefront_popular_products_args: Fan Favorite
  • storefront_recent_products_args: New In
  • storefront_on_sale_products_args: On Sales
  • storefront_best_selling_products_args: Best Sellers

Chỉ với vài thao tác thiết kế website bằng wordpress với sự kết hợp của plugin Woocommerce chúng ta đã có ngay một trang bán hàng vô cùng đẹp mắt và tiện dụng. Chúc các bạn làm thành công.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

0334 363 307