Blog Cương Hồ: mã nguồn mở

Reviews

Xem tất cả

Bài đăng mới nhất

Phần mềm tách file và ghép file PDF miễn phí

ĐỌC THÊM →

Share theme Blogspot tin tức cực đẹp

ĐỌC THÊM →

Share code wordpress shop bán hàng điện tử

ĐỌC THÊM →

Cách tự thêm màu sắc giao diện trong Admin ở WordPress 3.8

Trước kia WordPress chỉ hỗ trợ 2 gam màu chính trong khu vực quản trị của WordPress là màu xanh và màu đen xám. Tuy nhiên khi phiên bản 3.8 được ra mắt, nó đã hỗ trợ thêm 6 gam màukhác nữa mà bạn có thể chọn trong Users -> Your Profile. Điều này làm chúng ta rất thích thú vì giờ đây chúng ta có thể thổi nhiều phong cách mới lạ hơn vào khu vực quản trị với nhiều màu sắc khác nhau.

Nhưng nếu bạn vẫn chưa đã mắt với 6 màu mặc định trong đó thì sao? Ở đây mình sẽ chia sẻ mẹo nhỏ để bạn tự thêm nhiều gam màu khác nhau thông qua sử dụng plugin Admin Color Schemes, nhưng chúng ta sẽ không dừng lại ở mức chỉ dùng plugin mà sẽ kết hợp sửa một xíu trong plugin nữa.

Công cụ cần chuẩn bị

Do plugin này sử dụng SASS nên mình cần bạn chuẩn bị ít nhất một phần mềm hỗ trợ chuyển mã SASS sang CSS, như Prepros mình đang dùng chẳng hạn. Và tốt hơn hết, bạn nên làm ởLocalhost trước khi upload lên bởi vì ai cũng biết là SASS sẽ làm việc thuận tiện nhất khi bạn làm việc tại localhost.

Cài đặt plugin

Trước hết bạn cài đặt plugin Admin Color Schemes vào cái đã nhé. Sau khi cài xong, nó sẽ cho bạn thêm một vài gam màu khác trong Users -> Your Profile để bạn chọn.Để tôi thử!

Okay.

Tự thêm gam màu vào plugin

Để thêm gam màu, bạn vào thư mục admin-color-schemes trong wp-content/plugins và tạo một thư mục mang tên bất kỳ để chứa các file CSS của gam màu mới, ví dụ như thachpham1 chẳng hạn.

Sau đó bạn vào thư mục bất kỳ như flat, lawn, seashore,…và copy 3 file color-rtl.css, color.cssvà color.scss. bỏ vào thư mục vừa tạo.

Xong bước thiết lập nhé, bây giờ bạn mở phần mềm Prepros lên và ấn vào Add New Project rồi thêm thư mục mà bạn vừa tạo vào.

Thêm xong thì bạn sẽ thấy Dashboard ở Prepros hiển thị file .scss, tức là file mà nó cần chuyển mã SASS.

Bây giờ bạn có thể tạm thu nhỏ nó lại, đừng có tắt là được.

Kế tiếp là mở file admin-color-schemes.php trong thư mục plugin kia và tìm đoạn này

function add_colors() {

Ngay dưới hàm đó là danh sách những mã màu mà tác giả đã thêm vào, mỗi gam màu sẽ được khai báo bằng vài dòng như thế này

wp_admin_css_color(

'seashore', __( 'Seashore', 'admin_schemes' ),

plugins_url( "seashore/colors$suffix.css", __FILE__ ),

array( '#F8F6F1', '#d5cdad', '#7D6B5C', '#456a7f' ),

array( 'base' => '#533C2F', 'focus' => '#F8F6F1', 'current' => '#F8F6F1' )

);

Như vậy, chúng ta chỉ cần copy một đoạn đó và thêm ngay bên dưới những gam màu khác là xong, nhớ hay đổi lại những thông tin của họ thành của mình, mình xin chú thích các dòng trên code kia như sau:

Dòng 2: slug của tên gam màu và tên gam màu. Bạn nên đặt giống nhau, slug phải là chữ thường không có ký tự đặc biệt.

Dòng 3: Đường dẫn trỏ tới thư mục chứa các file CSS của gam màu, bạn chỉ cần thay đổi tên thư mục thôi chứ không nên đổi colors$suffix.css

Dòng 4: 4 mã màu mà nó sẽ hiển thị ra trang chọn gam màu mà người ta có thể nhìn thấy, giống như cái ảnh phía trên mình chụp đó.

Dòng 5: Mã màu mà nó sẽ áp dụng trong từng phần, mỗi phần nó được khai báo bằng tên như base, focus, current

Và đây là một ví dụ của mình sau khi đã sửa

wp_admin_css_color(

'thachpham1', __( 'Thạch Phạm 01', 'admin_schemes' ),

plugins_url( "thachpham1/colors$suffix.css", __FILE__ ),

array( '#00AC6B', '#20815D', '#007046', '#35D699' ),

array( 'base' => '#007046', 'focus' => '#00AC6B', 'current' => '#00AC6B' )

);

Chèn mã màu mới vào plugin

Khi F5 trang chọn màu thì mình sẽ được…

Nếu bạn có thử tò mò click vào thì yên tâm đi, chưa được đâu vì ta chỉ mới thêm cái tượng trưng thôi chứ muốn đổi thật thì phải sửa lại file color.scss.

Hãy mở file color.scss trong thư mục của bạn đã tạo ra và chỉ cần sửa mã màu ở 4 dòng đầu tiên thôi. Sau đó save lại và xem kết quả.

Ối zồi ôi, nhìn đẹp thế nhở, Thạch chọn màu mà lị.

Nếu bạn muốn chọn được màu đẹp và phù hợp nhất, bạn có thể tham khảo các danh sách website sau:

http://colorschemedesigner.com/

http://www.colorcombos.com/

Đừng quên là nếu web bạn có nhiều thành viên thì họ vẫn có thể chọn màu do bạn tạo ra nhé, còn chần chờ gì nữa mà không nhanh tay lẹ chân thêm gam màu theo ý mình chứ.

ĐỌC THÊM →

Video Hướng dẫn Việt hóa WooCommerce

Cách đây mấy ngày có 3 bạn hỏi mình cách Việt Hóa plugin WooCommerce vì nó không hỗ trợ gói ngôn ngữ tiếng Việt. Thực chất nếu muốn Việt hóa WooCommerce thì bạn phải sửa trực tiếp từ các file ngôn ngữ .po có sẵn của nó. Nhưng để dễ dàng hơn với những người mới tìm hiểu thì mình xin hướng dẫn cách Việt hóa WooCommerce với plugin CodestylingLocalization

PLUGIN NÀY LÀM VIỆC THẾ NÀO?

Codestyling Localization là một plugin cho phép bạn tạo file ngôn ngữ .po và .mo trực tiếp trên WordPress và chỉnh sửa cũng trực tiếp trên đó. Đây được hiểu là một công cụ dịch lại các đoạn văn bản có trong một file ngôn ngữ nào đó.

Dĩ nhiên không phải riêng với WooCommerce, Codestyling Localization có thể Việt hóa bất cứ thành phần nào trong WordPress và bất cứ plugin nào, miễn plugin đó hỗ trợ đa ngôn ngữ.

HƯỚNG DẪN VIỆT HÓA WOOCOMMERCE

Để Việt hóa được toàn Woocommerce, bạn cần phải Việt hóa 2 giai đoạn, đó là Việt hóa ở code và trong gói ngôn ngữ.

Giai đoạn 1: Việt hóa trong gói ngôn ngữ

Chọn Quality là 720p và ấn Full Screen lên xem cho rõ..

Bước 1: Tải plugin CodestylingLocalization về, sau đó kích hoạt lên bình thường. Tiếp theo đó bạn vào Tool ->Localization

Bước 2. Sau khi truy cập vào trang cài đặt của Localization, bạn tìm đến plugin WooCommerce và nhấn nút Add New Languages, chọn Tiếng Việt.

Bước 3. Mở file wp-config.php trong WordPress, tìm

define('WPLANG', '');

Nếu chưa có thì tự viết vào. Thêm vi_VN vào giữa cặp dấu nháy ”. Lúc này ta sẽ có

define('WPLANG', 'vi_VN');

Bước 4. Trở lại Tools -> Localization, vẫn tìm tới plugin WooCommerce, nhấn vào nút Rescan của ngôn ngữ tiếng Việt, sau đó chọn Edit.

Bước 5. Tìm đoạn văn bản cần dịch, sau đó nhấn vào nút Edit bên phải và viết nghĩa cần dịch vào khung phía dưới. Sau đó ấn Save và bấm vào nút generate mo-files. Lúc này bạn đã Việt hóa thành công.

Thủ thuật Việt hóa

Sau khi Việt hóa xong, bạn có thể vào file wp-content/plugins/woocommerce/languages và sao chép 2 file woocommerce-vi_VN.po và woocommerce-vi_VN.mo lại, có thể share cho người khác dùng hoặc để dành sau này dùng tiếp.

Giai đoạn 2: Việt hóa trong code

Giai đoạn này thường là bạn sẽ Việt hóa những chữ trong phần thanh toán, giỏ hàng, thông tin người mua…v.v..

Để Việt hóa được các phần này, bạn vào thư mục wp-content/plugins/

Muốn Việt hóa ở phần nào thì bạn tải file tương ứng với phần đó về máy. Sau đó sử dụng phần mềm Notepad++để chỉnh sửa, nhớ chọn bảng mã của tập tin là UTF-8.

Muốn Việt hóa cụm từ nào thì tốt nhất các bạn nên copy cụm từ đó ở web, sau đó Ctrl + F để tìm cụm từ rồi Viết lại thành tiếng Việt. Save lại và upload đè lên file cũ trên host.

Chúc các bạn Việt hóa thành công, ai Việt hóa xong nhớ chia sẻ lại cho người khác dùng với nhé.

Nguồn: thachpham.com

ĐỌC THÊM →