Зареєструйте CPT за допомогою піктограми меню Dashicons for admin у WP 3.8


15

WordPress 3.8 в основу ввів плагін MP6, який серед іншого використовує знаковий шрифт під назвою Dashicons для відображення шрифтів на панелі приладів.

Тепер добре відомо, що register_post_type має аргумент, 'menu_icon'який дозволяє вказати спеціальну піктограму для входу в меню адміністратора CPT.

У своїх плагінах / темах я часто використовую цей аргумент зі своїми власними зображеннями піктограм, які зазвичай є темними, оскільки до меню адміністратора 3,8 було світле тло. З темним фоном меню за замовчуванням у WP 3.8 мої значки стають майже непомітними.

Що вбік, я думаю, що використовувати нові дашикони для моєї CPT буде здорово.

Після деяких досліджень я знаю, що можу просто використовувати CSS з дашиконів, щось подібне

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

Однак, використовуючи як 'menu_icon'аргумент, так register_post_type і попередній css, буде надруковано обидві піктограми в WP 3.8 та один значок + дивний знак у WP 3.8-, і без 'menu_icon'аргументу використання на старих версіях використовується значок за замовчуванням.

Я знаю , що умовно можна додати 'menu_icon'в register_post_typeдля WP 3.8- версій і умовно додати попередній CSS для WP 3.8+, але:

  • що включає додавання коду (2 умовних заяви) для кожного зареєстрованого CPT, тому оновлення плагінів / тем є досить важкою роботою
  • мені здається швидше вирішення, ніж елегантне рішення

Отже, питання:

Чи можливо використовувати css dashicons для WP 3.8+ та використовувати користувальницьке зображення, встановлене за допомогою 'menu_icon'парами для попередніх версій, «простішим» способом, який не передбачає додавання 2 умовних для кожного зареєстрованого CPT?

І якщо так, чи можливо це зробити якимось автоматичним способом прямо з register_post_typeбез додаткового коду?

Відповіді:


9

Пройшовши через кролячу нору та назад, відповідь - так , ядро ​​дозволяє легко використовувати дашикони під час реєстрації типів публікацій та додавання сторінок меню.

Для використання dashicon вам потрібно передати свій клас CSS dashicons-[name]до menu_iconабо icon_urlу відповідних місцях.

Доступні класи можна знайти dashicons.cssу джерелі чи на веб-сайті Dashicons (клацніть піктограму та перегляньте її назву вгорі).

Попередження! 3.8, схоже, випущено з dashicons-piechartприкладом класу в inline docs, що неправильно і не буде працювати. Фактичний клас для цієї піктограми у випуску є dashicons-chart-pie.


Я прийняв це, тому що це правильний спосіб зробити це. Мій плагін як користь, щоб бути краще сумісним назад (і я можу виправити використовувати назви класів замість char), тому що якщо ви кладете клас дашиконів, menu_iconви не можете використовувати URL-адресу зображення для попередніх версій ... але кого це хвилює минуле? :)
gmazzap

4

Легко: просто прочитайте відповідну частину register_post_type()phpDocBlock і використовуйте правильний аргумент для menu_icon: D

  • Використовуйте клас дашиконів . Наприклад, наприкладdashicon-groups
  • Передайте SVG-кодований SVG, використовуючи URI даних, які будуть кольоровими відповідно до колірної схеми. З цього слід почати data:image/svg+xml;base64,.
  • Пропустіть, 'none'щоб залишити div.wp-menu-imageпорожнім, тому піктограму можна додати через CSS.

1
* Клас Dashicons - це те, про що говорить @Rarst у своїй відповіді. * Використання base64-кодування може бути корисним, але не дуже просто, окрім того svg-painer.js, бібліотека ядра js, яка використовується для обробки кольорів, може зайняти багато часу, якщо піктограма більш "складна", ніж стандартні дашикони. * Третій варіант (порожній значок) дійсний не лише для WP 3.8+, але з давніх часів ... а використання css - це те, чого я хочу уникати (відповідно до питання). Тож +1 для поєднання всіх варіантів, але я вважаю, що прийнята відповідь вже відповідає моєму питанню. PS радий бачити той діамант біля вашого імені :)
gmazzap

@GM Цікава інформація про svg-painter.jsфайл. Не знав цього, як я ще не пробував.
кайзер

1
Одного разу я спробував використати його в трохи складному SVG-зображенні (це була проста будівельна рослина), щоб створити ефект зміни кольору на наведення миші. Я відмовився і застосував інший підхід через занадто затримку.
gmazzap

2
@GM Дякую за це. Ви повинні написати про це в блозі :) Я шукав, і єдиний корисний, який я міг знайти, був той, від Sven .
кайзер

3

Я відповідаю собі, бо сьогодні я поставив собі два питання, які я опублікував, і витратив деякий час, щоб знайти відповідь. Після того, як я знайшов рішення, я хочу його поділитися, але будь-яке інше рішення високо оцінено, і я готовий прийняти будь-яке рішення, яке я знайшов кращим, ніж моє. Зміни та вдосконалення мого рішення цінуються, а також заохочуються.


Редагувати

Після відповіді Рарста я відредагував код. Тепер функція використовує стандартні класи дашиконів, але також дозволяє вказати старий URL-адресу зображення в menu_iconаргументі та абсолютно новий клас дашиконів в menu_dashiconаргументі.


Робочий процес

Спочатку подумав, що я подумав, це те register_post_type, що спрацьовує дія, registered_post_typeяка переходить до підключення функцій, переданих аргументам register_post_type, не фільтруючи їх, тому можна створити спеціальні аргументи для цих функцій.

Тож я вирішив передати аргумент, 'menu_dashicon'щоб пройти спеціальний дашикон.

Після цього я подумав створити клас, який слухатиме цей аргумент, зберігаючи значок у змінній класу. Той самий клас може відповідати

  1. перевірте версію WP-файлу, і якщо вона менше, ніж 3.8, не робіть нічого
  2. якщо версія має 3,8+ циклічного циклу $menuмасиву на належний гачок і:
  3. видаліть, якщо є, будь-які власні зображення, додані через 'menu_icon'та
  4. додайте стиль вбудовування відповідно до того, що додано через 'menu_dashicon'парам

Я створюю код в одному файлі, таким чином його можна легко включити в будь-яку тему / плагін або навіть використовувати як модуль MU, а після цього можна просто використовувати абсолютно новий 'menu_dashicon'аргумент у кожній встановленій темі та / або плагіні.

Я також додав мінімальний заголовок плагіна, який дозволяє використовувати його як окремий плагін, але, ймовірно, це менш корисний спосіб використання.

Як користуватись

Всередині register_post_typeпросто передайте 'menu_dashicon'аргумент зі значенням класу dashicon ( без префіксу '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);

Це все. Отримайте назву класу Dashicons з його сайту .

Так ось код:

<?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);

Він також доступний як Gist


CPT з використанням дашиконів

Два CPT: "Ідеї" та "Галерея" за допомогою Dashicons. Зверніть увагу на автоматичну зміну кольору за допомогою різних кольорових схем адміністратора.



0

Я просто додав цей рядок до коду, який реєструє спеціальний тип публікації:

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

Ось повний код

введіть тут опис зображення

Не потрібно додавати CSS.


Саме це говорить @Rarst у своїй відповіді ...
gmazzap

Rarst не надає рядок коду, який потрібно додати до коду, який створює CPT, або повний фрагмент, до якого я пов’язаний. Також немає необхідності в CSS, щоб моє рішення було більш ефективним.
Бред Далтон
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.