Зарегистрируйте CPT, используя Dashicons для значка меню администратора в 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_typeWP 3.8-версии и условно добавить предыдущий css для WP 3.8+, но:

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

Итак, вопросы:

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

И, если это так, возможно ли сделать это каким-то автоматическим способом register_post_typeбез дополнительного кода?

Gmazzap
источник

Ответы:

9

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

Чтобы использовать dashicon, вам нужно передать его класс CSS dashicons-[name]в menu_iconили icon_urlв соответствующие места.

Доступные классы можно найти в dashicons.cssисходном коде или на сайте Dashicons (щелкните значок и посмотрите его название сверху).

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

Rarst
источник
Я принял это, потому что это правильный способ сделать это. Преимущество моего плагина в том, что он лучше совместим с menu_iconпредыдущими версиями (и я могу исправить использование имен классов вместо char), потому что, если вы добавите класс dashicons, вы не сможете использовать URL-адрес изображения для предыдущих версий ... но кого волнует прошлое? :)
gmazzap
4

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

  • Используйте класс дашиконов . Например,dashicon-groups
  • Передайте SVG в кодировке base64, используя URI данных, который будет окрашен в соответствии с цветовой схемой. Это должно начаться с data:image/svg+xml;base64,.
  • Передайте, 'none'чтобы оставить div.wp-menu-imageпустым, чтобы иконка могла быть добавлена ​​через CSS.
кайзер
источник
1
* Класс Dashicons - это то, что @Rarst говорит в своем ответе. * Использование base64-encode может быть полезным, но imho не очень прост, кроме того svg-painer.js, базовая библиотека js, используемая для обработки изменения цвета, может занять очень много времени, если значок более «сложный», чем стандартные дашиконы. * Третий вариант (пустой значок) действителен не только для WP 3.8+, но и долгое время ... и я хочу избежать использования css (согласно вопросу). Итак, +1 за объединение всех вариантов, но я думаю, что принятый ответ уже ответил на мой вопрос. PS рад видеть этот бриллиант рядом с твоим именем :)
gmazzap
@GM Интересная информация о svg-painter.jsфайле. Я не знал, как я еще не пробовал.
Кайзер
1
Однажды я попытался использовать его в немного сложном svg-изображении (это было простое строительное растение), чтобы создать эффект изменения цвета при наведении мыши. Я сдался и использовал другой подход из-за слишком большой задержки.
gmazzap
2
@GM Спасибо за это. Вы должны написать в блоге об этом :) Я искал, и единственный полезный, который я мог найти, был тот из Свена .
Кайзер
3

Я отвечаю сам, потому что сегодня я задал себе два вопроса, которые я написал, и потратил некоторое время, чтобы найти ответ. Как только я нашел решение, я хочу поделиться им, но любое другое решение высоко ценится, и я готов принять любое решение, которое я нашел лучше, чем мое. Изменения и улучшения моего решения приветствуются, а также приветствуются.


редактировать

После первого ответа я отредактировал код. Теперь функция использует стандартные классы dashicons, но также позволяет указывать URL-адрес изображения старого стиля в menu_iconаргументе и новый класс dashicons в menu_dashiconаргументе.


Workflow

Сначала я подумал, что 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);

Это также доступно как Гист


CPT с использованием дашиконов

Два CPT: «Идеи» и «Галерея» с использованием Dashicons. Обратите внимание, автоматическое изменение цвета с различными цветовыми схемами администратора.


Gmazzap
источник
0

Я просто добавил эту строку в код, который регистрирует пользовательский тип записи:

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

Вот полный код

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

Не нужно добавлять CSS.

Брэд Далтон
источник
Именно это и говорит @Rarst в своем ответе ...
gmazzap
Rarst не предоставляет строку кода, которую нужно добавить в код, который создает CPT, или полный фрагмент, с которым я связан. Также нет необходимости в CSS, поэтому мое решение более эффективно.
Брэд Далтон