Tự thêm gam màu cho trang Admin của WordPress 3.8

Tự thêm gam màu mới

Tự thêm gam màu mới

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àu khá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.

Nhiều màu sắc hỗ trợ trong admin

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.

Tạo thư mục chứa gam màu mới

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

Copy các file CSS và SASS vào thư mục mới

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 thư mục gam màu vào Prepros

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.

custom-admin-color-schemes-4

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' )
		);
Thêm mã màu vào code plugin

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

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

Tự thêm gam màu mới

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ả.

Mã màu mới cho admin

Ố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:

  • https://colorschemedesigner.com/
  • https://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ứ.

Nguồn: Tự thêm gam màu cho trang Admin của WordPress 3.8 | Thạch Phạm

Categories: Content Marketing, Digital Marketing, Google Ads, Kinh doanh, PHP, SEO, Server - Hosting, WordPress, WordPress Development, Wordpress Plugin, WordPress Theme, Wordpress Tutorial,
Tags: baemin, bán hàng online, bán hàng online trên facebook, bán hàng qua facebook, bán hàng quần áo, bán hàng thời trang, bán hàng trên baemin, bán hàng trên facebook, bán hàng trên fanpage, bán hàng trên grab, bán hàng trên marketplace, bán hàng trên now, bán hàng trên tiktok, báo cáo kết quả hoạt động kinh doanh, bí quyết kinh doanh online, bít tết Âu việt, black friday, buôn bán hàng thùng, buôn bán hàng thùng tuyển chọn, cách bán hàng online đắt khách, cách bán hàng trên marketplace, cách bán hàng trên tiktok, câu chuyện kinh doanh, câu chuyện thành công, chương trình khuyến mãi, công nghệ phần mềm bán hàng, cửa hàng cafe, cửa hàng minh tuấn mobile, cửa hàng phụ kiện, cửa hàng thời trang, cửa hàng thực phẩm, cửa hàng thực phẩm sạch, doanh số bán hàng, dox garage & coffee, dox garage & coffee, đăng ký bán hàng trên baemin, đăng ký bán hàng trên go food, đăng ký bán hàng trên grab, đăng ký bán hàng trên now, facebook, facebook pos, fanpage, file excel, file excel báo cáo kết quả kinh doanh, file excel quản lý kho, foodngon, go food, go jek, grab, halo mobile, khởi nghiệp, khởi nghiệp kinh doanh, khởi nghiệp kinh doanh thời trang, kinh doanh cafe, kinh doanh điện thoại, kinh doanh điện tử điện máy, kinh doanh đồ handmade, kinh doanh gì sau dịch, kinh doanh mỹ phẩm, kinh doanh mỹ phẩm online, kinh doanh nhà hàng, kinh doanh online, kinh doanh phụ kiện, kinh doanh quán cafe, kinh doanh shop thời trang, kinh doanh siêu thị mini, kinh doanh spa, kinh doanh thành công, kinh doanh thời trang, kinh doanh thời trang trẻ em, kinh doanh thực phẩm, kinh doanh thực phẩm sạch thành công, kinh doanh trên facebook, kinh doanh trên grab, kinh nghiệm bán hàng, kinh nghiệm kinh doanh, làm đồ handmade, lily shop, link kháng tài khoản quảng cáo, lụa tơ tằm bá minh, marketing online, mặt hàng dễ bán, mẹo bán hàng, mẹo bán hàng trên facebook, mẹo hay, ngày black friday năm 2020 là ngày nào?, now, now - foody, phầm mềm quản lý bán hàng miễn phí, phần mềm chốt đơn, phần mềm chốt đơn hàng, phần mềm miễn phí, phần mềm pos, phần mềm quản lý bán hàng, phần mềm quản lý bán hàng đáng tin cậy, phần mềm quản lý bán hàng miễn phí, phụ kiện ben & tony, phụ kiện ben & tony, phụ kiện hà xinh, quán cafe hiệu quả, quản lý cửa hàng, quản lý cửa hàng thời trang, quản lý nhà hàng, quản lý nhân viên, quản lý nhân viên cứng đầu, quản lý nhân viên thời vụ, quảng cáo thương hiệu, shop thời trang, shopee, siêu thị minimart, status, status bán hàng, status quảng cáo mỹ phẩm, stella spa, stt bán hàng online hài hước, stt tương tác bán hàng, t.u.s shop, tài khoản bị vô hiệu hóa, tài khoản facebook, tài khoản facebook bị vô hiệu hóa, tải miễn phí file excel quản lý kho, tăng doanh thu mùa black friday, thời trang kosta, thời trang mine, thời trang tú trần shop, thực phẩm sạch, thực phẩm sạch 02, thực phẩm sạch tâm an, thuê mặt bằng kinh doanh, tiki, tiktok, tú trần shop,
4 cách sửa lỗi không hiển thị Visual Editor
Cách backup (sao lưu) dữ liệu WordPress thủ công
Tác giả

Bình luận

Leave a Message

Registration isn't required.

NguyenLp LarTheme