Zarejestruj CPT za pomocą Dashicons dla ikony menu administratora w WP 3.8


15

WordPress 3.8 wprowadził w zasadzie wtyczkę MP6, która między innymi używa kultowej czcionki o nazwie Dashicons do wyświetlania czcionek na desce rozdzielczej.

Teraz dobrze wiadomo, że register_post_type ma argument, 'menu_icon'który pozwala określić niestandardową ikonę dla pozycji menu administratora CPT.

W moich wtyczkach / motywach często używam tego argumentu z moimi niestandardowymi obrazami ikon, które normalnie są ciemne, ponieważ menu administratora w wersji 3.8 miało jasne tło. Przy domyślnym ciemnym tle menu w WP 3.8 moje ikony stają się prawie niewidoczne.

Poza tym myślę, że użycie nowych dashiconów do mojego CPT będzie fajne.

Po kilku badaniach wiem, że mogę po prostu użyć CSS z dashiconów, coś w tym rodzaju

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

Jednak użycie zarówno 'menu_icon'argumentu, jak register_post_type i poprzedniego css spowoduje wydrukowanie obu ikon w WP 3.8 i jednej ikony + dziwny znak w WP 3.8-, i bez 'menu_icon'argumentu użycia , w starszych wersjach używana jest domyślna ikona.

Wiem, że mogę warunkowo dodać 'menu_icon'w register_post_typedla WP 3.8- wersjach i warunkowo dodać poprzedni css dla WP 3.8+, ale:

  • który wymaga dodania kodu (2 instrukcji warunkowych) dla każdego zarejestrowanego CPT, więc aktualizacja wtyczek / motywów jest dość ciężką pracą
  • wydaje mi się bardziej obejściem niż eleganckim rozwiązaniem

Tak więc pytania są następujące:

Czy można używać dashicons css dla WP 3.8+ i używać niestandardowych ustawień obrazu za pomocą 'menu_icon'parametrów dla poprzednich wersji w „prostszy” sposób, który nie wymaga dodania 2 warunku dla każdego zarejestrowanego CPT?

A jeśli tak, to czy jest to możliwe w jakiś automatyczny sposób, register_post_typebez żadnego dodatkowego kodu?

Odpowiedzi:


9

Po przejściu przez dziurę królika iz powrotem odpowiedź brzmi - tak , rdzeń pozwala łatwo korzystać z dashiconów podczas rejestrowania typów postów i dodawania stron menu.

Aby korzystać z dashicon, musisz przekazać jego klasę CSS dashicons-[name]do menu_iconlub icon_urlw odpowiednich miejscach.

Dostępne klasy można sprawdzić dashicons.cssw źródle lub na stronie Dashicons (kliknij ikonę i spójrz na jej nazwę u góry).

Alarm! Wydaje się, że wersja 3.8 została wydana dashicons-piechartjako przykład klasy w wbudowanych dokumentach, co jest błędne i nie będzie działać. Rzeczywista klasa tej ikony w wydaniu to dashicons-chart-pie.


Zaakceptowałem to, ponieważ jest to właściwy sposób na zrobienie tego. Moja wtyczka ma tę zaletę, że jest lepiej kompatybilna wstecz (i mogę naprawić używanie nazw klas zamiast char), ponieważ jeśli umieścisz klasę dashicons w menu_iconsobie, nie będziesz mógł użyć adresu URL obrazu dla poprzednich wersji ... ale kogo to obchodzi z przeszłością? :)
gmazzap

4

Łatwo: po prostu przeczytaj odpowiednią część register_post_type()phpDocBlock, a następnie użyj właściwego argumentu dla menu_icon: D

  • Użyj klasy dashicons . Na przykładdashicon-groups
  • Przekaż plik SVG zakodowany w standardzie base64, używając identyfikatora URI danych, który zostanie pokolorowany zgodnie ze schematem kolorów. To powinno zacząć się od data:image/svg+xml;base64,.
  • Podaj, 'none'aby pozostawić div.wp-menu-imagepuste, dzięki czemu można dodać ikonę za pomocą CSS.

1
* Klasa Dashicons jest tym, co mówi @Rarst w swojej odpowiedzi. * Korzystanie z kodowania base64 może być przydatne, ale imho nie bardzo proste, a ponadto svg-painer.jspodstawowa biblioteka js używana do obsługi zmiany kolorów może być bardzo czasochłonna, jeśli ikona jest bardziej „złożona” niż standardowe dashicony. * Trzecia opcja (pusta ikona) jest ważna nie tylko dla WP 3.8+, ale od dłuższego czasu ... i używanie css jest czymś, czego chcę uniknąć (jak na pytanie). Więc +1 za zebranie wszystkich opcji razem, ale myślę, że zaakceptowana odpowiedź już odpowiada na moje pytanie. PS z przyjemnością widzę ten diament w pobliżu twojego imienia :)
gmazzap

@GM Interesujące informacje o svg-painter.jspliku. Nie wiedziałem o tym, ponieważ jeszcze nie próbowałem.
kaiser

1
Kiedyś próbowałem użyć go w nieco złożonym obrazie SVG (była to prosta roślina budowlana), aby stworzyć efekt zmiany koloru po najechaniu myszą. Zrezygnowałem i zastosowałem inne podejście z powodu zbyt długiego opóźnienia.
gmazzap

2
@GM Dzięki za to. Powinieneś napisać o tym post na blogu :) Szukałem i jedynym przydatnym, jaki mogłem znaleźć, był ten ze Svena .
kaiser

3

Odpowiadam sobie, bo dzisiaj zadałem sobie dwa pytania, które opublikowałem, i poświęciłem trochę czasu na znalezienie odpowiedzi. Po znalezieniu rozwiązania chcę je udostępnić, ale każde inne rozwiązanie jest bardzo doceniane i jestem gotowy zaakceptować każde rozwiązanie, które znalazłem lepsze niż moje. Doceniamy zmiany i ulepszenia mojego rozwiązania, a także zachęcamy.


Edytować

Po odpowiedzi Rarst dokonałem edycji kodu. Teraz funkcja korzysta ze standardowych klas dashicons, ale umożliwia także określenie menu_iconadresu URL starego stylu w argumencie i zupełnie nowej klasy dashicons w menu_dashiconargumencie.


Przepływ pracy

Po pierwsze, pomyślałem, że register_post_typeuruchamia akcję, registered_post_typektóra przechodzi do funkcji przechwytujących, do których przekazywane są argumenty register_post_type, bez ich filtrowania, więc możliwe jest tworzenie niestandardowych argumentów dla tych funkcji.

Zdecydowałem więc przekazać argument, 'menu_dashicon'aby przekazać niestandardowy dashicon.

Potem pomyślałem o stworzeniu klasy, która słucha tego argumentu, zapisując ikonę w zmiennej klasy. Ta sama klasa może być odpowiedzialna przed

  1. sprawdź aktualną wersję WP, a jeśli jest mniejsza niż 3.8, nic nie rób
  2. jeśli wersja ma wersję 3.8+, zapętl $menutablicę na odpowiednim haku i:
  3. usuń, jeśli są, wszelkie niestandardowe obrazy dodane za pomocą 'menu_icon'i
  4. dodaj styl wbudowany zgodnie z tym, co zostało dodane za pomocą 'menu_dashicon'parametru

Tworzę kod w jednym pliku, w ten sposób można go łatwo włączyć do dowolnego motywu / wtyczki lub nawet użyć jako wtyczki MU, a następnie można użyć zupełnie nowego 'menu_dashicon'argumentu w każdym zainstalowanym motywie i / lub wtyczce.

Dodałem również minimalny nagłówek wtyczki, który pozwala używać go jako samodzielnej wtyczki, ale prawdopodobnie jest to mniej przydatny sposób użycia.

Jak używać

Wewnątrz register_post_typewystarczy przekazać 'menu_dashicon'argument z wartością klasy dashicon ( bez przedrostka „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);

To wszystko. Pobierz nazwę klasy ikony Dashicons ze swojej witryny .

Więc tutaj kod:

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

Jest również dostępny jako Gist


CPT za pomocą dashiconów

Dwa CPT: „Pomysły” i „Galeria” za pomocą Dashicons. Zwróć uwagę na automatyczną zmianę kolorów za pomocą różnych schematów kolorów administratora.



0

Po prostu dodałem tę linię do kodu, który rejestruje niestandardowy typ postu:

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

Oto pełny kod

wprowadź opis zdjęcia tutaj

Nie trzeba dodawać żadnych CSS.


Dokładnie to mówi @Rarst w swojej odpowiedzi ...
gmazzap

Rarst nie zapewnia wiersza kodu, który wymaga dodania do kodu tworzącego CPT lub pełnego fragmentu, z którym mam połączenie. Nie ma też potrzeby stosowania CSS, więc moje rozwiązanie jest bardziej wydajne.
Brad Dalton
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.