Sử dụng WordPress Dashicons để thêm biểu tượng phông chữ vào chủ đề Genesis của bạn

Bạn đã thấy chủ đề WordPress Twenty Fourteen mới với các biểu tượng phông chữ nhỏ trong meta bài đăng hoặc mục nhập chưa? Bạn biết không, những người bên cạnh ngày đăng bài, tác giả bài đăng và thẻ? Bạn có thể thêm chúng bằng cách sử dụng phông chữ biểu tượng. Có nhiều phông chữ biểu tượng khác nhau và tài nguyên cho chúng và hướng dẫn sử dụng chúng.

Tuy nhiên, WordPress 3.8 đã thêm một phông chữ biểu tượng - Dashicons - vào phía quản trị viên của WordPress. Và vì vậy, với một chút mã, bạn có thể cung cấp các biểu tượng đó để sử dụng trong Chủ đề Genesis WordPress của mình.

Hướng dẫn này chỉ cho bạn cách sử dụng phông chữ biểu tượng WordPress Dashicons để thêm các biểu tượng cho meta mục nhập của chủ đề Genesis Sample 2.0.1.

Bạn có thể tìm thấy tất cả mã trong Gist: Sử dụng WordPress Dashicons

Tổng quan về Dashicons và cách sử dụng chúng

Bạn có thể xem tất cả các Dashicons và lấy mã cho mỗi biểu tượng tại Tài nguyên dành cho nhà phát triển: Dashicons. Tôi đã khoanh tròn những thứ bạn sẽ sử dụng hôm nay.

Bước 1. Tìm hình ảnh của biểu tượng bạn muốn sử dụng. Nhấn vào nó.

Bước 2. Nhìn vào đầu trang trong vùng màu xanh lam để tìm liên kết “Sao chép CSS”. Nhấn vào nó.

Bước 3. Bạn muốn sao chép mã từ cửa sổ bật lên trông giống như: content: "\f142";

Bạn sẽ sử dụng mã này bên dưới trong CSS của mình cho mỗi biểu tượng. Tôi đã thực hiện tất cả việc sao chép, nếu bạn sử dụng cùng các biểu tượng mà tôi đã sử dụng. Bây giờ bạn đã có ý tưởng chung về những gì cần tìm, bạn có thể bắt đầu chỉnh sửa chủ đề con Genesis của mình.

(Lưu ý: Xem Danh sách tài nguyên cho trang web WordPress của bạn để biết các đề xuất về tài nguyên phông chữ biểu tượng và trình chỉnh sửa CSS và tập lệnh tùy chỉnh.)

Yêu cầu phông chữ Dashicons

Phông chữ Dashicon cần được xếp vào hàng trước cho trang web hoặc blog WordPress của bạn. Bạn có thể làm điều đó bằng cách thêm một chút mã vào cuối tệp functions.php chủ đề con của bạn hoặc thêm nó vào một plugin tập lệnh tùy chỉnh, như Code Snippets.

//Enqueue the Dashicons script
add_action( 'wp_enqueue_scripts', 'amethyst_enqueue_dashicons' );
function amethyst_enqueue_dashicons() {
	wp_enqueue_style( 'amethyst-dashicons-style', get_stylesheet_directory_uri(), array('dashicons'), '1.0' );
}

Tạo kiểu cho Dashicons và Meta mục nhập chủ đề

Tiếp theo, bạn có thể thêm các kiểu biểu tượng vào style.css chủ đề con của mình hoặc trình chỉnh sửa CSS tùy chỉnh. Nếu bạn thêm vào tệp style.css, bạn có thể tìm thấy phần bắt đầu bằng bộ chọn .entry-meta. Ngay bên dưới đó là một phần mới - Phân trang. Thêm tất cả CSS ngay trên phần Phân trang.

Đầu tiên hãy thêm CSS sẽ được sử dụng bởi tất cả các biểu tượng; bạn sẽ thêm các biểu tượng trước mỗi công cụ chọn meta mục nhập này - thời gian nhập cảnh, tác giả mục nhập, mục nhập-nhận xét-liên kết, danh mục mục nhập và thẻ mục nhập.

.entry-time:before,
.entry-author:before,
.entry-comments-link:before,
.entry-categories:before,
.entry-tags:before {
	color: #f15123; 
	display: inline-block;
	-webkit-font-smoothing: antialiased;
	font: normal 20px/1 'dashicons';
	vertical-align: top;
	margin-right: 5px;
	margin-right: 0.5rem;
}

Bạn có thể chọn bất kỳ màu nào bạn thích; Tôi đã sử dụng màu đỏ cam, # f15123, để các biểu tượng nổi bật; màu xám đẹp để sử dụng thay thế sẽ là color: #666;
Nếu bạn muốn các biểu tượng nhỏ hơn, ví dụ: 16px, thay vì 20px, bạn sẽ thay đổi dòng:font: normal 16px/1 'dashicons';

Tiếp theo, bạn muốn thêm mã mà bạn đã sao chép từ trang Dashicons cho mỗi biểu tượng.

.entry-time:before {
	content: "f145"; /* dashicons-calendar */
}

.entry-author:before {
	content: "f110"; /* dashicons-admin-users */
}

.entry-comments-link:before {
	content: "f101"; /* dashicons-admin-comments */
}

.entry-categories:before {
	content: "f318"; /* dashicons-category */
}

.entry-tags:before {
	content: "f323"; /* dashicons-tag */
}

Sau đó, bạn cần thêm một chút đệm thừa vào bên phải của văn bản.

.entry-time,
.entry-author,
.entry-categories {
	padding-right: 15px;
	padding-right: 1.5rem;
}

Và cuối cùng, nếu bạn muốn các danh mục và thẻ nằm trên cùng một dòng, thay vì dòng riêng biệt, như tôi có, bạn có thể thêm:

.entry-categories,
.entry-tags {
	display: inline-block;
}

Một số chỉnh sửa tùy chọn đối với Meta mục nhập

Tôi có một số chỉnh sửa khác trong Gist cho bài đăng này, trong trường hợp bạn quyết định muốn xóa “bởi” trước tác giả mục nhập hoặc nếu bạn chỉ muốn sử dụng các biểu tượng không có văn bản trước danh mục và thẻ trong chân trang mục nhập .

Vui lòng cho tôi biết các biểu tượng của bạn trông như thế nào trong chủ đề con Genesis bằng cách sử dụng WordPress Dashicons!