Điều này xảy ra với tất cả mọi người.

Bạn tìm thấy chủ đề mình thích, cài đặt chủ đề đó và dành vài tháng để tận hưởng giao diện trang web của mình. Nhưng sau đó, sau một vài tháng, chủ đề bắt đầu trở nên cũ kỹ. Hơi nhàm chán.

Vấn đề duy nhất là bạn không muốn dành vài giờ để tìm kiếm thứ gì đó mới. Giá như có một cách để thêm một chút gia vị cho chủ đề của bạn, một chút nổi bật để làm cho nó nổi bật.

Trước khi bạn bó tay trong tuyệt vọng, hãy để tôi chỉ cho bạn một cách dễ dàng để thêm gia vị cho chủ đề của bạn. chủ đề mà không tốn quá nhiều công sức và không cần thêm các hình ảnh không cần thiết có thể làm chậm trang web của bạn.

Nhập Dashicons. Dashicons là các biểu tượng phông chữ đã được giới thiệu trong WordPress 3.8. Chúng là những biểu tượng tuyệt vời và thú vị mà bạn nhìn thấy khi đăng nhập vào trang tổng quan của mình. Sẽ rất tuyệt nếu bạn cũng có thể thêm chúng vào chủ đề của mình phải không?

Chà, bạn có thể và tôi sẽ chỉ cho bạn cách thực hiện.

Làm cách nào để bạn có thể sử dụng Dashicons trong giao diện của mình? menu điều hướng?

Hãy bắt đầu bằng một ví dụ đơn giản. Dashicons đã được đưa vào WordPress kể từ phiên bản 3.8 nhưng bạn vẫn cần đưa chúng vào để chúng hiển thị chính xác ở mặt trước của trang web của bạn; tức là chủ đề của bạn.

Bước 1: Chuẩn bị sẵn sàng cho Dashicons chủ đề của bạn

Để sẵn sàng cho Dashicons chủ đề của bạn, trước tiên hãy mở tệp functions.php của bạn (có trong Giao diện> ;Trình chỉnh sửa – theo mặc định, nó sẽ mở tệp CSS của chủ đề hiện tại của bạn. Hãy tiếp tục và tìm kiếmfunctions.php và nhấp vào nó để tải nó trong Trình chỉnh sửa.)

Bước 2: Nhập tập lệnh vào hàng đợi

Cuộn xuống cuối cùng và dán những dòng này mã ở cuối:

//Enqueue the Dashicons script add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' ); function load_dashicons_front_end() { wp_enqueue_style( 'dashicons' ); }

Được rồi! Bây giờ, chủ đề của bạn đã sẵn sàng để sử dụng Dashicons.

Bước 3: Thêm Dashicons vào các mục menu

Hãy thêm Dashicon cho liên kết Trang chủ của bạn. Truy cập trang web Dashicons và chọn biểu tượng bạn thích.

Cập nhật: Dashicons ban đầu có sẵn trên GitHub.io, nhưng sau đó chúng đã có sẵn trên WordPress.org.

Bước 4:

Nhấp vào biểu tượng mong muốn (trong trường hợp này tôi đã chọn biểu tượng trang chủ) rồi nhấp vào Sao chép HTML. Nó sẽ cung cấp cho bạn một cửa sổ bật lên chứa mã bạn cần.

Bước 5:

Quay lại trang tổng quan WordPress của bạn, nhấp vào Giao diện > ; Menu và dán mã vào ngay vị trí Nhãn điều hướng.

Nếu bạn vẫn muốn từ đó hiển thị, hãy nhập từ đó sau dấu ngoặc vuông đóng.

Nhấp vào lưu và tải trang chủ của bạn. Liên kết trang chủ của bạn bây giờ sẽ hiển thị một Dashicon đẹp, sắc nét.

Bạn có thể thực hiện việc này cho tất cả các mục menu điều hướng hoặc chỉ cho trang chủ. Chỉ cần lặp lại các bước trên với các biểu tượng phù hợp. Điều đó thật dễ dàng phải không?

Bạn sử dụng Dashicons trong meta bài đăng như thế nào?

Bạn có thể tiến thêm một bước và thêm Dashicons vào meta bài đăng của mình hoặc nói cách khác là thêm Dashicons trước tên tác giả tên, ngày, danh mục hoặc thẻ; phụ thuộc vàochủ đề của bạn và thông tin mà chủ đề đó hiển thị.

Vì bạn đã đặt Dashicons trong chủ đề của mình nên tất cả những gì bạn phải làm bây giờ là mở tệp style.css của mình (hoặc sử dụng trình chỉnh sửa CSS tùy chỉnh luôn là một tùy chọn tốt hơn để bạn không làm mất các thay đổi sau khi chủ đề của bạn cập nhật!), hãy tìm bộ chọn phù hợp và thêm mã CSS.

Giả sử bạn muốn thêm một biểu tượng phía trước tên của mình hoặc tên tác giả.

Bước 1:

Đầu tiên, chúng ta sẽ chọn một biểu tượng mà mình muốn.

Bước 2:

Sau đó nhấp vào nó và lần này chọn Sao chép CSS. Một lần nữa, nó sẽ cung cấp cho bạn một cửa sổ bật lên chứa mã bạn cần dán.

Bước 3:

Bây giờ hãy mở style.css của bạn và tìm bộ chọn tương ứng, trong trường hợp này là – .entry-author. Bằng cách thêm :before và sau đó dán mã CSS mà bạn đã sao chép từ trang web Dashicons, tên tác giả sẽ có một biểu tượng đẹp ở phía trước. Bạn cũng cần xác định rằng bạn đang sử dụng phông chữ Dashicons. Mã đã sửa đổi trông như thế này:

.entry-author:before { font-family: "dashicons"; content: "\f110"; }

Hãy thêm một chút kiểu dáng và bây giờ mã đã hoàn thành trông như thế này:

.entry-author:before { font-family: "dashicons"; content: "\f110"; color: #f15123; display: inline-block; -webkit-font-smoothing: antialiased; font: normal 20px/1; vertical-align: top; margin-right: 5px; margin-right: 0.5rem; } 

Kết quả cuối cùng

Vậy thì sao cuối cùng nó sẽ như thế nào?

Đại loại như thế này:

Có rất nhiều cách bạn có thể sử dụng Dashicons – hãy để óc sáng tạo của bạn phát huy và xem bạn có thể làm được gì.

Kết hợp tất cả lại với nhau

Ngoài các ví dụ trên, bạn có thể sử dụng Dashicons trong chương trình phụ trợ của mình để chỉ định cáccác biểu tượng cho các loại bài đăng khác nhau hoặc bạn có thể sử dụng chúng trong tiêu đề bài đăng, tiêu đề tiện ích hoặc nếu bạn đang tạo trang đích tùy chỉnh, bạn có thể phân biệt giữa các trang khác nhau trên trang web của mình.

Dưới đây là ví dụ cơ bản về những gì bạn có thể sử dụng chúng để tạo: