Làm thế nào để sử dụng và tận dụng tối đa nó?

Spread the love

Các biểu tượng thật hấp dẫn!

Họ có khả năng giao tiếp nhanh chóng với khán giả bằng cách thiết lập một kết nối hình ảnh mạnh mẽ.

Đây là lý do tại sao các biểu tượng được sử dụng rộng rãi ở mọi nơi, bao gồm cả các trang web WordPress.

Ngoài ra, sử dụng cùng một chủ đề trên trang web của bạn trong vài tháng có thể gây nhàm chán. Đó là chuyện bình thường.

Và sau đó, bạn sẽ tìm kiếm thứ gì đó thú vị hơn, sử dụng thứ đó và lại cảm thấy nhàm chán,

Và chu kỳ cứ lặp đi lặp lại…

Vì vậy, làm thế nào bạn có thể bỏ qua chu kỳ buồn chán đó?

Dashicons là một cách tuyệt vời!

Nó có thể tăng tính thẩm mỹ cho trang web của bạn và giúp bạn nổi bật. Nó cũng sẽ giúp bạn không phải nỗ lực thêm và làm trang web của bạn quá tải với những hình ảnh không cần thiết làm chậm tốc độ trang.

Vì vậy, hãy khám phá Dashicons và cách bạn có thể sử dụng chúng hiệu quả trên trang web WordPress của mình.

Dashicons WordPress là gì?

Dashicons là phông chữ biểu tượng chính thức của WordPress được giới thiệu cách đây nhiều năm với phiên bản 3.8. Những phông chữ này rất thú vị và tuyệt vời nếu bạn sử dụng nó trên trang web của mình. Chúng là các tệp SVG chất lượng hàng đầu mà bạn có thể dễ dàng chia tỷ lệ thành bất kỳ kích thước nào mà không bị pixel hóa.

Vì họ có hỗ trợ WordPress gốc do chính nhóm của họ tạo ra, bạn có thể sử dụng chúng trực tiếp mà không cần tải tập lệnh bổ sung. Có khoảng 350 phông chữ biểu tượng được bao gồm, bạn có thể tìm thấy trong tài liệu chính thức Tài nguyên dành cho nhà phát triển WordPress.

  Cách khởi chạy ứng dụng trên máy Mac của bạn

Họ đã phân loại các biểu tượng này dựa trên chủ đề, ngoài ra, bạn có thể thấy trường tìm kiếm động cho phép bạn lọc các biểu tượng có sẵn.

Bạn có thể sử dụng các biểu tượng này trên:

  • bảng điều khiển WordPress
  • menu điều hướng
  • Trang và bài viết
  • metadata
  • yếu tố biên tập
  • Plugin và chủ đề tùy chỉnh
  • Bảng quản trị
  • Thiết kế mặt trước

Bạn có nhận thấy tôi đang nói “biểu tượng” lặp đi lặp lại không?

Ở đây, ý tôi chỉ là phông chữ biểu tượng.

Không phải hình ảnh ở dạng biểu tượng.

Vâng, có một sự khác biệt giữa hai.

Hãy làm sáng tỏ điều đó.

Sự khác biệt giữa biểu tượng hình ảnh và phông chữ biểu tượng?

Phông chữ biểu tượng và biểu tượng hình ảnh hơi giống nhau, nhưng thay vì bảng chữ cái, các ký hiệu vector có trong phông chữ biểu tượng.

Điều đó có quá kỹ thuật không?

Hãy để tôi làm rõ điều đó.

Về cơ bản, các phông chữ biểu tượng này giống với hình ảnh mà bạn có thể sử dụng để thêm biểu tượng trên trang web của mình chứ không phải hình ảnh thực tế.

Họ cung cấp rất nhiều lợi ích cho bạn.

Làm sao?

Hình ra trong phần tiếp theo.

Tại sao bạn nên sử dụng chúng?

  • Có thể mở rộng như văn bản được sử dụng trên trang web của bạn vì chúng là phông chữ
  • Dung lượng nhẹ không ảnh hưởng đến tốc độ tải trang của bạn so với hình ảnh
  • Có khả năng đặt màu biểu tượng thông qua CSS và thêm các thuộc tính bổ sung như màu gradient, bóng, v.v.
  • Tuyệt vời trong việc tiết kiệm quá nhiều yêu cầu HTTP bằng cách cho phép bạn tải tất cả các phông chữ cùng một lúc mà bạn có thể sử dụng trên các trang của mình. Nếu bạn sử dụng nhiều hình ảnh trên trang web, bạn sẽ phải thực hiện nhiều yêu cầu để tìm nạp chúng, điều này làm tăng thời gian tải trang.
  • Dễ sử dụng và điều chỉnh hơn so với hình ảnh. Bạn có thể thêm các biểu tượng dễ nhận biết và sáng tạo mà không cần phải tạo lại chúng mỗi khi bạn cần một biểu tượng cho trình phát video, email, âm nhạc hoặc bất kỳ thứ gì khác.
  • Khả năng truy cập tốt hơn vì chúng được tích hợp ngay trong WordPress
  Avast One - Có xứng đáng không?

Làm thế nào để sử dụng chúng?

Sử dụng Dashicons không phải là kỹ thuật tên lửa.

Tin tôi đi; Mình quen cả 2 :0

Chỉ cần làm theo một số bước được đề cập bên dưới để bắt đầu với WordPress Dashicons.

Bước 1: Kích hoạt Dashicons trên trang web WordPress của bạn

Trước khi bạn bắt đầu, hãy bật Dashicons ở nơi bạn cần, chẳng hạn như một chủ đề. Đối với điều này, bạn cần thêm một số mã vào tệp function.php.

Để làm điều đó:

  • Trước tiên, hãy chuyển đến Trình chỉnh sửa Chủ đề/Giao diện từ Bảng điều khiển WordPress của bạn.
  • Mở tệp tin.php.
  • Cuộn đến cuối tệp và thêm một vài dòng mã vào tập lệnh enqueue
add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' );
function load_dashicons_front_end() {
wp_enqueue_style( 'dashicons' );
}

Ví dụ trên là kích hoạt Dashicons trên giao diện người dùng.

Đảm bảo bạn tạo một chủ đề con trước khi chỉnh sửa tệp tin.php. Đó là bởi vì nếu bạn chỉnh sửa trực tiếp tệp chủ đề và sau đó một bản cập nhật dành cho chủ đề đó, thì nó sẽ ghi đè lên tất cả những thay đổi bạn thực hiện đối với tệp.

Bước 2: Tìm mã HTML & CSS của Dashicon

WordPress.org cung cấp một thư viện Dashicons, giúp bạn tìm mã CSS và HTML thuộc mỗi biểu tượng. Tại đây, hãy truy cập Tài nguyên dành cho nhà phát triển để tìm Dashicons bạn muốn sử dụng và sau đó:

  • Nhấp vào biểu tượng mong muốn của bạn.
  • Chọn giữa “Sao chép CSS” hoặc “Sao chép HTML” bằng cách nhấp vào nó.
  • Bây giờ, bạn sẽ thấy một cửa sổ bật lên. Chỉ cần sao chép mã vào khay nhớ tạm.
  • Quyết định nơi bạn muốn sử dụng biểu tượng, chẳng hạn như chủ đề, Siêu dữ liệu, menu điều hướng, v.v.
  • Dán mã đã sao chép vào Tiện ích văn bản hoặc Trình soạn thảo văn bản của nơi đã chọn.
  • Sửa đổi giao diện biểu tượng bằng cách sử dụng CSS tùy chỉnh

Đó là nó.

Bên cạnh đó, theo mặc định, tất cả các biểu tượng đều có kích thước 20 pixel. Bạn có thể thay đổi nó bằng cách sử dụng các phần tử CSS từ các tùy chọn như Phần tử kiểm tra của Google Chrome hoặc FireBug của Firefox.

Làm cách nào để tận dụng tối đa WordPress Dashicons?

Bạn đã thấy cách bạn có thể sử dụng Dashicons trên trang web của mình và bây giờ chúng ta sẽ xem cách sử dụng nó cho các mục đích cụ thể.

  iPadOS gần như sẽ biến iPad của bạn trở thành một chiếc máy tính thực sự

1. Sử dụng menu điều hướng

Để thêm các biểu tượng vào menu, hãy làm theo các bước dưới đây:

  • Chuyển đến Menu/Giao diện từ bảng điều khiển
  • Sao chép mã HTML được thiết kế cho biểu tượng menu từ WordPress.org
  • Dán nó vào “Nhãn điều hướng” trên bảng điều khiển
  • Nhấp vào nút “lưu” và sau đó tải trang chủ. Nó sẽ hiển thị biểu tượng mát mẻ và sắc nét.

2. Sử dụng trên post meta

Bạn sẽ có thể sử dụng Dashicons ngay phía trước ngày tháng, tên tác giả, thẻ hoặc danh mục dựa trên chủ đề cộng với dữ liệu mà nó hiển thị.

Vì bạn đã có Dashicons, hãy mở tệp style.css. Nếu không, bạn cũng có thể sử dụng trình chỉnh sửa CSS tùy chỉnh để không làm mất các thay đổi của mình sau khi cập nhật chủ đề. Tiếp theo, thêm mã CSS của bạn sau khi tìm thấy bộ chọn phù hợp.

3. Trên phần phụ trợ của WordPress

Nếu bạn muốn bao gồm các biểu tượng khác nhau cho các tiêu đề bài đăng, loại bài đăng hoặc tiện ích con tùy chỉnh khác nhau, thì rất dễ thực hiện.

Mẹo nhanh: Tạo mã ngắn

Để sử dụng Dashicons một cách dễ dàng, bạn có thể tạo một shortcode cho nó. Nó rất hữu ích, đặc biệt là khi bạn tạo một trang web cho khách hàng của mình, những người sẽ thấy dễ dàng chèn Dashicons mà không phải loay hoay với các mã.

Sự kết luận

Tôi hy vọng mọi thứ khá rõ ràng về phía bạn liên quan đến WordPress Dashicons. Chúng không chỉ đảm bảo tính thẩm mỹ cho trang web của bạn mà còn dễ sử dụng và cải thiện tốc độ tải trang.

Và bạn biết đấy, ‘sắc đẹp và trí tuệ’ là một sự kết hợp hiếm có.

Vì vậy, hãy nhanh lên, sử dụng các Dashicons bắt mắt đó trên trang web WordPress của bạn!

x