Sử dụng Child Theme để sửa theme chính

Chào các bạn,

Trước tôi có hướng dẫn các bạn mua theme tại Chợ Theme sao cho theme đó đáp ứng 80-90% các tính năng mà các bạn đang cần. Vậy 0-20% tính năng chưa theo ý các bạn, các bạn sẽ tự tuỳ chỉnh, sửa xoá các kiểu cho vừa ý.

Để sửa các bạn sẽ phải sửa (lập trình lại) code của Parent Theme (chính là theme bạn mua). Nhưng khi Parent Theme ra phiên bản mới, các bạn update thì những đoạn code mà các bạn sửa sẽ bị ghi đè, thế là công toi.

Child Theme sẽ giải quyết vấn đề trên, nói ngắn gọn thì nó sẽ kế thừa những gì Parent Theme đang có, ngoại trừ css. Và các bạn sửa chỗ nào thì chỗ đó sẽ chịu tác dụng.

Để tạo Child Theme hãy tạo thư mục ngay cạnh thư mục của Parent Theme có tên theo dạng:

[tên thư mục Parent Theme]-child

Ví dụ: tên thư mục Parent Theme là couponxl thì Child Theme của nó tương ứng sẽ là couponxl-child

Tiếp theo bạn cần tạo ra tối thiểu 2 file là functions.php và style.css

cần tạo ra tối thiểu 2 file là functions.php và style.css trong thư mục của child theme
cần tạo ra tối thiểu 2 file là functions.php và style.css trong thư mục của child theme

Nội dung của style.css khai báo thông tin về Child Theme theo ví dụ sau:

/*
Theme Name: Coupon XL Child Theme
Theme URI: http://demo.powerthemes.club/themes/couponxl/
Description: Coupon XL | Premium Coupons And Dealt WP Theme
Author: pebas
Author URI: http://themeforest.net/user/pebas/
License: GNU General Public License version 3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Version: 1.0
Template: couponxl
Tags: white
*/

Vì Child Theme không kế thừa css của Parent Theme như đã nói ở trên nên nếu muốn sử dụng css các bạn phải gọi lại nó bằng cách thêm nội dung dưới đây vào file functions.php

<?php add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles', 3 ); function theme_enqueue_styles() {     wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); } ?>

Đến đây, Child Theme đã được tạo và để sử dụng bạn phải kích hoạt (active) nó

Ví dụ: Kích hoạt Child Theme của theme CouponXL
Ví dụ: Kích hoạt Child Theme của theme CouponXL

Cuối cùng, để sửa code của Parent Theme các bạn lưu ý:

Khi muốn sửa file nào ở Parent Theme hãy tạo ra file tương ứng ở Child Theme hoặc copy nó sang và bắt đầu sửa. Lúc này khi mở trang web của bạn ra nó sẽ nạp (load – chạy code) file bị sửa trong thư mục Child Theme và bỏ qua file tương ứng trong Parent Theme.

Ngoại trừ file functions.php trong Parent Theme không bị bỏ qua, thay vào đó nó sẽ vẫn được load (chạy code) như bình thường, và file functions.php trong Child Theme cũng được chay. Cho nên khi viết thêm hàm các bạn chú ý kiểm tra xem nó có bị trùng lặp 2 file này hay không bằng cách kiểm tra trước khi tạo hàm:

#your-parent-theme/functions.php
if ( ! function_exists( 'your_function' ) ) {
    function your_function() {
        //  Do something.
    }
}

Lưu ý nhỏ, thông thường để include file (ví dụ file my_included_file.php) bạn dùng:

include_once(get_template_directory().'/my_included_file.php');

 

Nhưng trong Child Theme bạn phải dùng:

include_once(get_stylesheet_directory().'/my_included_file.php');

 


Trộn (merge) file ngôn ngữ .po trong trường hợp update theme WordPress

Bài viết Việt hoá WordPress theme sử dụng phần mềm PoEdit hoặc dịch file .po online đã chỉ cho bạn cách dịch theme sang ngôn ngữ của bạn. Vậy trong trường hợp theme đó được nâng cấp lên phiên bản mới và có thể một phần ngôn ngữ có thể thay đổi theo thì làm thế nào chúng ta có thể trộn (merge) 2 file ngôn ngữ cũ và mới vào với nhau mà không bị mất đi những gì ta đã dịch được.

Bước 1: Mở file .po của phiên bản cũ ra bằng phần mềm PoEdit

Mở file .po của phiên bản cũ ra
Mở file .po của phiên bản cũ ra

 Bước 2: Trên thanh menu chọn Catalog rồi chọn ‘Update from POT file’

Trên thanh menu chọn Catalog rồi chọn 'Update from POT file'
Trên thanh menu chọn Catalog rồi chọn ‘Update from POT file’

Cuối cùng: Bạn trỏ đến file .po mới là xong, lúc này 2 file đã được trộn và bạn có thể bắt đầu dịch những phần mới mà không phải dịch lại những gì trước đó bạn đã làm.


[START UP] Cấu hình đăng nhập CouponXL bằng google, twitter, facebook

Bài trước bạn đã biết Cài đặt, cấu hình theme CouponXL, nhập dữ liệu mẫu cho giống với demo của người ta, nhưng chưa đăng nhập được bằng google, twitter, facebook thì bài này sẽ giúp bạn làm được điều này:

Video này sẽ hướng dẫn các bạn cấu hình website để đăng nhập bằng  google, facebook, twitter. Trong video có đăng nhập thử thành công với google và twitter, còn facebook thì gặp lỗi, tôi có hướng dẫn sửa lỗi này ở cuối bài viết này.

Lỗi như bạn thấy trong video là do chưa cho facebook biết sau khi facebook xác nhận okie thì sẽ redirect về trang nào? Vì vậy bạn hãy bổ sung thông tin về URL redirect:

Vào settings của app rồi vào advance. Sau đó kéo xuống dưới sẽ thấy mục 'Valid OAuth redirect URIs' như hình dưới
Vào settings của app rồi vào advance. Sau đó kéo xuống dưới sẽ thấy mục ‘Valid OAuth redirect URIs’ như hình dưới
nhập vào mục 'Valid OAuth redirect URIs' trang mà sẽ redirect là 'http://muahanggiamgia.vn/index.php?social-connect=facebook-callback' (bạn chú ý đổi sang domain của bạn)
nhập vào mục ‘Valid OAuth redirect URIs’ trang mà sẽ redirect là ‘http://muahanggiamgia.vn/index.php?social-connect=facebook-callback’ (bạn chú ý đổi sang domain của bạn)

Lúc này sẽ không còn lỗi lầm nào nữa.

Như vậy ngoài chức năng đăng ký, đăng nhập truyền thống qua website bây giờ khách hàng của chúng ta có thể thực hiện qua google, facebook, twitter. <<<WordPress mạnh chứ nhể>>>

Bài tiếp theo tôi sẽ Việt hoá theme CouponXL sử dụng phần mềm PoEdit


[STARTUP] Cài đặt, cấu hình theme CouponXL

Bài viết [START UP] Chọn mua theme trên chợ Themeforest để thực hiện ý tưởng đã hướng dẫn bạn mua được theme theo ý tưởng kinh doanh, bài này sẽ giúp bạn cài đặt, cấu hình cho nó hiển thị như demo.

Sau khi download theme và giải nén, trong thư mục 01_CouponXL_Theme bạn sẽ thấy file couponxl.zip và hãy dùng nó để cài đặt theme như những theme bình thường khác. Để xem chi tiết cách cài đặt cấu hình bạn xem trong thư mục 05_CouponXL_Help, mở file index.html có minh hoạ khá đầy đủ và dễ hiểu để bạn có thể tự làm được. Lúc đầu tôi định viết chi tiết (thực ra là viết lại của họ) nhưng khi tôi tự thực hiện thấy khá đơn giản nên tôi thấy hướng dẫn lại chi tiết cho các bạn là không cần thiết. Thay vào đó tôi sẽ điểm lại một vài bước cần chú ý.

Sau khi kích hoạt (active) theme các bạn sẽ được nhắc cài đặt những plugin cần thiết. Bạn hãy kích vào link thông báo nhắc và cài tất cả những plugin mà họ liệt kê.

Có lời nhắc bạn phải cài những plugin bắt buộc, bạn hãy kích vào 'begin installing plugins'
Có lời nhắc bạn phải cài những plugin bắt buộc, bạn hãy kích vào ‘begin installing plugins’

Bước tiếp theo chọn tất cả plugin rồi chọn install, sau đó apply để cài đặt:

Chọn tất cả các plugin và thiết lập cài đặt toàn bộ chúng
Chọn tất cả các plugin và thiết lập cài đặt toàn bộ chúng
Các plugin đã cài đặt, bạn phải kích hoạt chúng bằng cách kích 'Return to Required plugins installer'
Các plugin đã cài đặt, bạn phải kích hoạt chúng bằng cách kích ‘Return to Required plugins installer’
Chọn tất cả các plugin và thiết lập kích hoạt (active) toàn bộ chúng
Chọn tất cả các plugin và thiết lập kích hoạt (active) toàn bộ chúng

Lúc này việc cài đặt cơ bản hoàn tất, website cần có dữ liệu mẫu để không bị trống trải.

Vào Appearance ==> Import Demo Data, Click vào Import Demo Data và chờ cho đến khi có thông báo thành công (all done!).
Vào Appearance ==> Import Demo Data, Click vào Import Demo Data và chờ cho đến khi có thông báo thành công (all done!).

Tiếp tục import các tuỳ chọn được cài đặt sẵn để gần giống với bản demo hơn.

Vào CouponXL ==> Import/Export. Kích vào 'Import from file' sẽ hiện ra ô nhập văn bản, copy nội dung file 'theme_options.txt' rồi paste vào ô này, tìm file trong thư mục theme couponxl ==> includes ==> radium-one-click-demo-install ==> demo-files
Vào CouponXL ==> Import/Export. Kích vào ‘Import from file’ sẽ hiện ra ô nhập văn bản, copy nội dung file ‘theme_options.txt’ rồi paste vào ô này, tìm file trong thư mục theme couponxl ==> includes ==> radium-one-click-demo-install ==> demo-files

Cuối cùng đặt chế độ Reading, bật chế độ Anyone can register như sau:

Đặt Front page là Home và Posts page là News
Đặt Front page là Home và Posts page là News
Bật (tích chọn) chế độ Anyone can register
Bật (tích chọn) chế độ Anyone can register

Okie con dê, lúc này mọi thứ đã khá giống với bản demo nhà người ta rồi. Bạn xem thêm trong file hướng dẫn như đã nói ở đầu bài để bổ sung hay sửa thông tin mẫu. Trong bài tiếp theo tôi sẽ hướng dẫn Cấu hình đăng nhập CouponXL bằng google, twitter, facebook.

Keep calm and think positive