Daftarkan CPT menggunakan Dashicons untuk ikon menu admin di WP 3.8


15

WordPress 3.8 memperkenalkan inti MP6 plugin yang antara lain menggunakan font ikonik yang disebut Dashicons untuk menampilkan font di dashboard.

Sekarang, perlu diketahui bahwa register_post_type memiliki argumen 'menu_icon'yang memungkinkan untuk menentukan ikon khusus untuk entri menu admin CPT.

Dalam plugin / tema saya, saya sering menggunakan argumen itu dengan gambar ikon kustom saya yang biasanya gelap karena sebelum menu admin 3,8 memiliki latar belakang yang terang. Dengan latar belakang menu gelap default di WP 3.8 ikon saya menjadi hampir tidak terlihat.

Selain itu, saya pikir menggunakan dashicons baru untuk CPT saya akan keren.

Setelah beberapa penelitian, saya tahu saya bisa menggunakan CSS dari dashicons, sesuatu seperti

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

Namun menggunakan 'menu_icon'argumen dari register_post_type dan css sebelumnya akan mencetak kedua ikon di WP 3.8 dan satu ikon + karakter aneh di WP 3.8-, dan tanpa 'menu_icon'argumen penggunaan , pada versi yang lebih lama ikon default digunakan.

Aku tahu aku kondisional dapat menambahkan 'menu_icon'di register_post_typeuntuk WP 3.8- versi dan kondisional menambahkan css sebelumnya untuk WP 3.8+, tetapi:

  • yang melibatkan penambahan beberapa kode (2 pernyataan kondisional) untuk setiap CPT yang terdaftar, sehingga memperbarui plugin / tema cukup sulit.
  • menurut saya lebih merupakan solusi daripada solusi yang elegan

Jadi, pertanyaannya adalah:

Apakah mungkin untuk menggunakan dashicons css untuk WP 3.8+ dan menggunakan pengaturan gambar khusus melalui 'menu_icon'param untuk versi sebelumnya dengan cara "lebih sederhana" yang tidak melibatkan penambahan 2 syarat untuk setiap CPT yang terdaftar?

Dan, jika demikian, apakah mungkin melakukannya dengan cara otomatis langsung dari register_post_typetanpa kode tambahan?

Jawaban:


9

Setelah melalui lubang kelinci dan kembali, jawabannya adalah - ya , inti memang memungkinkan untuk dengan mudah menggunakan dashicons saat mendaftarkan jenis posting dan menambahkan halaman menu.

Untuk menggunakan dashicon Anda harus meneruskan kelas CSS-nya dashicons-[name]ke menu_iconatau icon_urldi tempat-tempat yang relevan.

Kelas yang tersedia dapat dilihat dashicons.cssdi sumber atau situs Dashicons (klik ikon dan lihat namanya di atasnya).

Waspada! 3,8 tampaknya telah dirilis dengan dashicons-piechartsebagai contoh kelas dalam inline docs, yang salah dan tidak akan berfungsi. Kelas aktual untuk ikon yang dirilis adalah dashicons-chart-pie.


Saya menerima ini karena itu cara yang tepat untuk melakukan hal itu. Plugin saya sebagai manfaat untuk kompatibel lebih baik ke belakang (dan saya bisa memperbaiki menggunakan nama kelas, bukan char) karena jika Anda memasukkan kelas dashicons di menu_iconAnda tidak dapat menggunakan url gambar untuk versi sebelumnya ... tapi siapa yang peduli dengan masa lalu? :)
gmazzap

4

Mudah: Cukup baca bagian yang relevan dari register_post_type()phpDocBlock dan kemudian gunakan argumen yang tepat untuk menu_icon: D

  • Gunakan kelas dashicons . Untuk misalnyadashicon-groups
  • Lewati SVG yang dikodekan base64 menggunakan data URI, yang akan diwarnai agar sesuai dengan skema warna. Ini harus dimulai dengan data:image/svg+xml;base64,.
  • Lewati 'none'untuk membiarkan div.wp-menu-imagekosong, sehingga ikon dapat ditambahkan melalui CSS.

1
* Kelas Dashicons adalah apa yang dikatakan @Rarst dalam jawabannya. * Menggunakan base64-encode bisa berguna, tetapi saya tidak benar-benar mudah, di samping itu svg-painer.js, inti js library yang digunakan untuk menangani perubahan warna, bisa sangat memakan waktu jika ikon lebih "kompleks" daripada standar dashicons. * Opsi ketiga (ikon kosong) tidak hanya valid untuk WP 3.8+, tetapi sejak lama ... dan menggunakan css adalah sesuatu yang ingin saya hindari (sesuai pertanyaan). Jadi +1 untuk menyatukan semua opsi, tapi saya pikir jawaban yang diterima sudah menjawab pertanyaan saya. PS senang melihat berlian dekat nama Anda :)
gmazzap

@ GM info menarik tentang svg-painter.jsfile tersebut. Tidak mengetahuinya karena saya belum mencoba.
kaiser

1
Setelah saya mencoba menggunakannya dalam gambar svg agak rumit (itu adalah bangunan sederhana) untuk membuat efek perubahan warna pada mouse hover. Saya menyerah dan menggunakan pendekatan lain karena terlalu laten.
gmazzap

2
@ GM Terima kasih untuk yang itu. Anda harus menulis posting blog tentang itu :) Saya sedang mencari dan satu-satunya yang berguna yang bisa saya temukan adalah yang dari Sven .
kaiser

3

Saya menjawab sendiri karena hari ini saya bertanya pada diri sendiri 2 pertanyaan yang saya posting, dan meluangkan waktu untuk menemukan jawaban. Setelah saya menemukan solusi, saya ingin membagikannya, tetapi solusi lain sangat tepat dan saya siap untuk menerima solusi apa pun yang saya temukan lebih baik daripada milik saya. Pengeditan dan peningkatan solusi saya dihargai dan tidak dianjurkan.


Edit

Setelah jawaban Rarst saya telah mengedit kode. Sekarang fungsinya menggunakan kelas dashicons standar, tetapi juga memungkinkan untuk menentukan url gambar gaya lama dalam menu_iconargumen dan kelas dashicon baru dalam menu_dashiconargumen.


Alur kerja

Pertama saya pikir saya pikir adalah register_post_type, menembakkan suatu tindakan,, registered_post_typeyang lolos ke fungsi kait argumen dilewati register_post_type, tanpa menyaring mereka, jadi mungkin untuk membuat argumen kustom untuk fungsi itu.

Jadi saya memutuskan untuk meneruskan argumen 'menu_dashicon'untuk melewati dasbor kustom.

Setelah itu saya berpikir untuk membuat kelas yang mendengarkan argumen itu, menyimpan ikon dalam variabel kelas. Kelas yang sama dapat bertanggung jawab untuk

  1. periksa versi terbaru WP, dan jika kurang dari 3,8 jangan lakukan apa-apa
  2. jika versinya 3.8+ loop $menuarray pada hook yang tepat dan:
  3. hapus, jika ada, gambar kustom apa pun yang ditambahkan melalui 'menu_icon'dan
  4. tambahkan gaya inline sesuai dengan apa yang ditambahkan melalui 'menu_dashicon'param

Saya membuat kode dalam satu file, dengan cara ini dapat dengan mudah dimasukkan dalam setiap tema / plugin atau bahkan digunakan sebagai plugin MU dan setelah itu kita dapat menggunakan 'menu_dashicon'argumen baru di setiap tema dan / atau plugin yang diinstal.

Saya juga menambahkan header plugin minimal yang memungkinkan untuk menggunakannya sebagai plugin mandiri, tapi mungkin itu cara yang kurang bermanfaat untuk digunakan.

Cara Penggunaan

Di dalam register_post_typehanya meneruskan 'menu_dashicon'argumen dengan nilai kelas dashicon ( tanpa awalan '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);

Itu saja. Dapatkan nama kelas ikon Dashicons dari situsnya .

Jadi di sini kodenya:

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

Ini juga tersedia sebagai Gist


CPT menggunakan dasbor

Dua CPT: "Gagasan" dan "Galeri" menggunakan Dashicons. Perhatikan perubahan warna otomatis dengan berbagai skema warna admin.



0

Saya cukup menambahkan baris ini ke kode yang mendaftarkan jenis posting khusus:

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

Ini kode lengkapnya

masukkan deskripsi gambar di sini

Tidak perlu menambahkan CSS apa pun.


Itulah hal yang tepat yang dikatakan @Rarst dalam jawabannya ...
gmazzap

Rarst tidak menyediakan baris kode yang perlu ditambahkan ke kode yang membuat CPT atau cuplikan lengkap yang telah saya tautkan. Juga tidak perlu untuk CSS sehingga solusi saya lebih efisien.
Brad Dalton
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.