Đăng ký CPT bằng biểu tượng Dashicons cho quản trị viên trong WP 3.8


15

WordPress 3.8 đã giới thiệu trong lõi MP6 plugin rằng trong số những thứ khác sử dụng phông chữ mang tính biểu tượng gọi là Dashicons để hiển thị phông chữ trong bảng điều khiển.

Bây giờ, chúng ta cũng biết rằng register_post_type có một đối số 'menu_icon'cho phép chỉ định một biểu tượng tùy chỉnh cho mục nhập menu quản trị CPT.

Trong các plugin / chủ đề của tôi, tôi thường sử dụng đối số đó với các hình ảnh biểu tượng tùy chỉnh thường tối vì trước trình đơn quản trị 3.8 có nền sáng. Với nền menu tối mặc định trong WP 3.8, các biểu tượng của tôi gần như vô hình.

Điều đó sang một bên, tôi nghĩ rằng sử dụng các dấu gạch ngang mới cho CPT của tôi sẽ rất tuyệt.

Sau một số nghiên cứu, tôi biết rằng tôi chỉ có thể sử dụng CSS từ dashicons, đại loại như

#menu-posts-mycpt div.wp-menu-image:before { content: "\f226"; }

Tuy nhiên, sử dụng cả 'menu_icon'đối số register_post_type css trước đó sẽ in cả hai biểu tượng trong WP 3.8 và một biểu tượng + ký tự lạ trong WP 3.8- và không sử dụng 'menu_icon'đối số, trên các phiên bản cũ hơn, biểu tượng mặc định được sử dụng.

Tôi biết tôi có điều kiện có thể thêm 'menu_icon'vào register_post_typecho WP 3.8- phiên bản và có điều kiện thêm css trước cho WP 3.8+, nhưng:

  • liên quan đến việc thêm một số mã (2 câu lệnh có điều kiện) cho mỗi CPT đã đăng ký, vì vậy việc cập nhật plugin / chủ đề là một công việc khá khó khăn
  • đối với tôi nó dường như là một cách giải quyết hơn là một giải pháp tao nhã

Vì vậy, câu hỏi là:

Có thể sử dụng dashicons css cho WP 3.8+ và sử dụng hình ảnh tùy chỉnh được thiết lập qua 'menu_icon'param cho các phiên bản trước theo cách "đơn giản hơn" không liên quan đến việc thêm 2 điều kiện cho mỗi CPT đã đăng ký?

Và, nếu vậy, có thể làm điều đó theo một cách tự động nào đó register_post_typemà không cần thêm mã nào không?

Câu trả lời:


9

Sau khi đi qua lỗ thỏ và trở lại, câu trả lời là - , lõi không cho phép dễ dàng sử dụng dấu gạch ngang khi đăng ký loại bài đăng và thêm các trang menu.

Để sử dụng dashicon, bạn cần chuyển lớp CSS của nó dashicons-[name]đến menu_iconhoặc icon_urlở những nơi có liên quan.

Các lớp có sẵn có thể được tra cứu trong dashicons.cssnguồn hoặc trang Dashicons (nhấp vào biểu tượng và nhìn vào tên của nó ở trên cùng).

Thông báo! 3.8 dường như đã được phát hành với dashicons-piechartví dụ về lớp trong các tài liệu nội tuyến, điều này là sai và sẽ không hoạt động. Lớp thực tế cho biểu tượng đó được phát hành là dashicons-chart-pie.


Tôi đã chấp nhận điều này bởi vì đó là cách đúng đắn để làm điều đó. Plugin của tôi là lợi ích để tương thích ngược tốt hơn (và tôi có thể sửa để sử dụng tên lớp thay vì char) vì nếu bạn đặt lớp dashicons trong menu_iconbạn không thể sử dụng url hình ảnh cho các phiên bản trước ... nhưng ai quan tâm đến quá khứ? :)
gmazzap

4

Dễ dàng: Chỉ cần đọc phần có liên quan của register_post_type()phpDocBlock và sau đó sử dụng đối số đúng cho menu_icon: D

  • Sử dụng lớp dashicons . Ví dụdashicon-groups
  • Vượt qua một SVG được mã hóa cơ sở 64 bằng cách sử dụng URI dữ liệu, sẽ được tô màu để phù hợp với bảng màu. Điều này nên bắt đầu với data:image/svg+xml;base64,.
  • Vượt qua 'none'để div.wp-menu-imagetrống, vì vậy một biểu tượng có thể được thêm thông qua CSS.

1
* Lớp Dashicons là những gì @Rarst nói trong câu trả lời của mình. * Sử dụng mã hóa base64 có thể hữu ích, nhưng imho không thực sự đơn giản, ngoài ra svg-painer.js, thư viện js lõi được sử dụng để xử lý thay đổi màu sắc, có thể rất tốn thời gian nếu biểu tượng "phức tạp" hơn các dấu gạch ngang tiêu chuẩn. * Tùy chọn thứ ba (biểu tượng trống) không chỉ hợp lệ cho WP 3.8+, mà vì từ lâu ... và sử dụng css là điều tôi muốn tránh (theo câu hỏi). Vì vậy, +1 để đặt tất cả các tùy chọn lại với nhau, nhưng tôi nghĩ rằng câu trả lời được chấp nhận đã đưa ra câu hỏi của tôi. PS rất vui khi thấy viên kim cương đó gần tên của bạn :)
gmazzap

@GM Thông tin thú vị về svg-painter.jstập tin. Tôi không biết điều đó vì tôi chưa thử.
kaiser

1
Khi tôi đã cố gắng sử dụng nó trong một hình ảnh svg phức tạp một chút (nó là một nhà máy xây dựng đơn giản) để tạo hiệu ứng thay đổi màu sắc trên chuột di chuột. Tôi đã từ bỏ và sử dụng một cách tiếp cận khác vì quá trễ.
gmazzap

2
@GM Cảm ơn vì điều đó. Bạn nên viết một bài đăng trên blog về điều đó :) Tôi đã tìm kiếm và người hữu ích duy nhất tôi có thể tìm thấy là bài viết từ Sven .
kaiser

3

Tôi đang tự trả lời vì hôm nay tôi đã tự hỏi mình 2 câu hỏi tôi đã đăng và dành một chút thời gian để tìm câu trả lời. Khi tôi tìm thấy giải pháp, tôi muốn chia sẻ nó, nhưng bất kỳ giải pháp nào khác đều được đánh giá cao và tôi sẵn sàng chấp nhận bất kỳ giải pháp nào tôi thấy tốt hơn giải pháp của mình. Chỉnh sửa và cải thiện giải pháp của tôi cũng được đánh giá cao cũng được khuyến khích.


Biên tập

Sau khi trả lời Rarst tôi đã chỉnh sửa mã. Bây giờ hàm sử dụng các lớp dashicons tiêu chuẩn, nhưng cũng cho phép chỉ định một url hình ảnh kiểu cũ trong menu_iconđối số và một lớp dashicons hoàn toàn mới trong menu_dashiconđối số.


Quy trình làm việc

Đầu tiên tôi nghĩ rằng tôi nghĩ rằng register_post_type, thực hiện một hành động, registered_post_typechuyển đến các hàm hook mà các đối số được truyền tới register_post_type, mà không lọc chúng, do đó có thể tạo các đối số tùy chỉnh cho các hàm đó.

Vì vậy, tôi quyết định chuyển đối số 'menu_dashicon'để vượt qua một dashicon tùy chỉnh.

Sau đó tôi nghĩ sẽ tạo ra một lớp lắng nghe đối số đó, lưu biểu tượng trong một biến lớp. Cùng một lớp có thể chịu trách nhiệm

  1. kiểm tra phiên bản hiện tại của WP và nếu ít hơn thì 3,8 không làm gì cả
  2. nếu phiên bản là 3,8+ lặp thì $menumảng trên hook thích hợp và:
  3. xóa, nếu có, bất kỳ hình ảnh tùy chỉnh được thêm thông qua 'menu_icon'
  4. thêm kiểu nội tuyến theo những gì được thêm thông qua 'menu_dashicon'param

Tôi tạo mã trong một tệp duy nhất, theo cách này có thể dễ dàng đưa vào bất kỳ chủ đề / plugin nào hoặc thậm chí được sử dụng làm plugin MU và sau đó người ta có thể sử dụng 'menu_dashicon'đối số hoàn toàn mới trong mọi chủ đề và / hoặc plugin được cài đặt.

Tôi cũng đã thêm một tiêu đề plugin tối thiểu cho phép sử dụng nó như một plugin độc lập, nhưng có lẽ đó là cách sử dụng ít hữu ích hơn.

Cách sử dụng

Bên trong register_post_typechỉ cần truyền 'menu_dashicon'đối số với giá trị của lớp dashicon ( không có tiền tố 'dashicons-'):

$args = array(
  ...
  'menu_dashicon' => 'chart-pie', // dashicons will be used in WP 3.8+
  'menu_icon' => $url_of_the_icon // icon images will be used in WP 3.7.1 & previous
);

register_post_type('my_cpt', $args);

Đó là tất cả. Nhận tên lớp biểu tượng Dashicons từ trang web của nó .

Vì vậy, đây là mã:

<?php
/**
* Plugin Name: GM CPT Icon
*/
namespace GM;

class CptIcon {

  public static $cpt;

  public $css;

  static function registerIcon( $cpt, $icon ) {
    self::$cpt[$cpt] = $icon;
  }

  function init() {
    if ( $this->mp6() ) {
      \add_action('admin_menu', array($this, 'parseMenu') );
    }
  }

  function mp6() {
    return \version_compare( $GLOBALS['wp_version'],  '3.8', '>=' );
  }      

  function parseMenu() {
    if ( $this->mp6() && ! empty( self::$cpt ) )  {
      foreach ( $GLOBALS['menu'] as $i => $item ) {
        if  $item[1] === 'edit_posts' && (strpos($item[2], 'edit.php?post_type=') === 0)) {
          $this->menuItemClass($i, str_replace('edit.php?post_type=', '', $item[2]));
        }
      }
    }
  }

  function menuItemClass( $i, $type ) {
    if ( \in_array($type, \array_keys(self::$cpt), TRUE ) ) {
      $GLOBALS['menu'][$i][4] = str_replace('menu-icon-post', '', $GLOBALS['menu'][$i][4]);
      $GLOBALS['menu'][$i][6] = 'dashicons-' . self::$cpt[$type];
    }
  }

}

\add_action('plugins_loaded', function() {
  if ( \is_admin() && !( \defined('DOING_AJAX') && \DOING_AJAX  ) ) {
    $cpticon = new CptIcon;
    $cpticon->init();
  }
});

\add_action('registered_post_type', function( $post_type, $args ) {
  if ( isset($args->menu_dashicon) && ! empty($args->menu_dashicon) ) {
    CptIcon::registerIcon($post_type, $args->menu_dashicon);
  }
}, 10, 2);

Nó cũng có sẵn như là Gist


CPT sử dụng dashicons

Hai CPT: "Ý tưởng" và "Thư viện" bằng cách sử dụng Dashicons. Lưu ý thay đổi màu tự động với các bảng màu quản trị khác nhau.



0

Tôi chỉ cần thêm dòng này vào mã đăng ký loại bài tùy chỉnh:

'menu_icon'    => 'dashicons-admin-users',

Đây là mã đầy đủ

nhập mô tả hình ảnh ở đây

Không cần thêm CSS.


Đó là điều chính xác mà @Rarst nói trong câu trả lời của anh ấy ...
gmazzap

Rarst không cung cấp dòng mã cần thêm vào mã tạo CPT hoặc đoạn mã đầy đủ mà tôi đã liên kết đến. Ngoài ra, không cần CSS nên giải pháp của tôi hiệu quả hơn.
Brad Dalton
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.