Hướng dẫn sử dụng theme Flatsome

Quảng cáo
Ads_ngang
Website dinhthuanit.com có bài Hướng dẫn sử dụng theme Flatsome

Flatsome là một theme framework tuyệt hảo để thiết kế website bán sản phẩm bằng WordPress. Trong bài viết này, mình sẽ trình bầy một số kiến thức liên quan đến việc phát triển theme flatsome. Chúng ta cùng bắt đầu nhé.

Cập nhật Flatsome

Trước khi thi hành bất kỳ cập nhật nào, bạn nên thi hành sao lưu WordPress an toàn.

Có 2 cách bạn có thể cập nhật theme flatsome, cách đơn giản bạn có thể cập nhật tự động thông qua trang quản trị WP. Tại trang này, bạn mở Dashboard → Updates , cuộn xuống và tìm phần update cho theme flatsome. Lưu ý: Sau khi update nhớ xóa toàn bộ cache.

Cách khác, chúng ta sẽ cập nhật giao diện thông qua FTP:

  • Truy cập http://themeforest.net/downloads và tải flatsome mới nhất.
  • Giải nén và upload lên hosting, xóa hoặc đổi tên thư mục wp-content/themes/flatsome

Lưu ý: bạn có thể sẽ bị mất dữ liệu, nếu bạn sửa trực diện vào các files trong thư mục theme flatsome. Điều này là không nên, trong tình huống update mới theme sẽ bị ghi đè.

Tùy biến CSS

Làm sao để thêm CSS vào theme flatsome? câu hỏi này phổ biến nhất với những người dùng WordPress. Bạn có thể tùy biến CSS cho flatsome với 2 cách.

Sử dụng options

Có 2 nơi để bạn thêm CSS, trong phần Theme Options:

  • Theme Options → Style → Custom CSS
  • Theme Options → Advanced → Custom CSS

2 phần này hoạt động giống nhau, bạn chọn một trong 2 phần để thêm CSS.

Sử dụng Child theme

Bạn cũng có thể có thể thêm CSS trực diện vào tệp style.css của child theme flatsome-child/style.css hoặc cũng có thể có thể chèn mã CSS vào tệp functions.php như sau:

 add_action('wp_head', 'print_head'); function print_head() { ?>   <?php }  

Thêm mã Javascript

Flatsome có đầy đủ option giúp bạn tùy biến website một cách dễ dàng, chúng ta thường chèn các đoạn mã theo dấu từ bên phía ngoài như google analytic,..

Để thêm code trong phần head footer của trang, bạn truy cập Advanced → Global Settings .

Kích hoạt UX Builder cho Custom Post Type

Mặc định flatsome hỗ trợ UX Builder cho Page, Post, WooCommerce. Tuy nhiên bạn cũng cũng có thể sử dụng UX Builder cho post tùy chỉnh, để kích hoạt bạn thêm đoạn code sau vào tệp functions.php

  <?php // Do not include this if already open! /** * Code goes in theme functions.php */ add_action( 'init', function () { add_ux_builder_post_type( 'custom_post_type' ); } );  

Thêm fonts chữ cho Flatsome

Thêm fonts tùy chỉnh vào theme flatsome rất dễ dàng với một vài đoạn CSS hoặc sử dụng plugin. Bạn cũng có thể thêm fonts vào cài đặt Flatsome cùng theo với upload fonts bởi plugin.

Base font:

 body{font-family: "Custom Font Name", sans-serif}  

Navigation font:

 .nav >  li >  a {font-family: "Custom Font Name", sans-serif;}  

Heading font:

 h1,h2,h3,h4,h5,h6, .heading-font{font-family: "Custom Font Name", sans-serif;}  

Alt font:

 .alt-font{font-family: "Custom font name", sans-serif;}  

Font tùy chỉnh

Mình khuyên bạn nên sử dụng plugin use any font để cũng có thể có thể thêm mọi fonts vào website.

TypeKit fonts

Để sử dụng TypeKit fonts bạn cài đặt plugin Typekit Fonts for WordPress.

Chú ý: Tắt Google fonts nếu bạn muốn chỉ sử dụng font tùy chỉnh. Mặc định flatsome sử dụng Google Fonts, bạn có thể tắt font này trong Theme Options → Style → Typography .

Bật theo dấu logs

Trong công đoạn phát triển theme, bạn rất cũng đều có thể gặp phải lỗi PHP & xuất hiện lỗi trắng trang. Điều này thực thụ khó chịu, rất may WordPress là một CMS hoàn hảo, có tích hợp sẵn chức năng debug lỗi. Để bật theo dõi lỗi bạn vui lòng xem hướng dẫn: bật logs trong WordPress.

Cấu hình cache

Có một số plugin giúp bạn bức tốc WordPress bằng cách thêm cache cho website, xem bài viết bức tốc wordpress với WP Super Cache – Cài đặt và Cấu hình.

Để nhận được bài viết mới vui lòng đăng ký kênh kiến thức WordPress từ A-Z ở Form bên dưới. Bạn cũng có thể có thể nhận được sự trợ giúp trên Twitter và Facebook

Bài viết Hướng dẫn sử dụng theme Flatsome được tổng hợp và biên tập bởi: dinhthuanit.com. Mọi ý kiến đóng góp và phản hồi vui lòng gửi Liên Hệ cho dinhthuanit.com để điều chỉnh. dinhthuanit.com xin cảm ơn.

Bài Viết Liên Quan


Bài Viết Khác


Quảng cáo
Ads_ngang