WordPress 3.8 แนะนำในส่วนหลักปลั๊กอิน MP6 ที่เหนือสิ่งอื่นใดใช้แบบอักษรสัญลักษณ์ที่เรียกว่า Dashicons เพื่อแสดงแบบอักษรในแดชบอร์ด

ตอนนี้ทราบดีว่าregister_post_typeมีอาร์กิวเมนต์'menu_icon'ที่อนุญาตให้ระบุไอคอนที่กำหนดเองสำหรับรายการเมนูผู้ดูแลระบบ CPT

ในปลั๊กอิน / ชุดรูปแบบของฉันฉันมักจะใช้อาร์กิวเมนต์นั้นกับภาพไอคอนที่กำหนดเองของฉันที่ปกติจะมืดเพราะก่อนเมนูผู้ดูแลระบบ 3.8 มีพื้นหลังสีอ่อน ด้วยพื้นหลังเมนูมืดเริ่มต้นใน WP 3.8 ไอคอนของฉันเกือบจะมองไม่เห็น

นอกจากนั้นฉันคิดว่าการใช้ dashicons ใหม่สำหรับ CPT ของฉันจะเจ๋ง

หลังจากการวิจัยบางอย่างฉันรู้ว่าฉันสามารถใช้ CSS จาก dashicons ได้เช่นกัน

#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 ทุกครั้งดังนั้นการอัปเดตปลั๊กอิน / ธีมจึงเป็นงานที่ค่อนข้างหนัก
• ดูเหมือนว่าฉันจะมีวิธีแก้ปัญหามากกว่าวิธีแก้ปัญหาที่สง่างาม

ดังนั้นคำถามคือ:

เป็นไปได้ที่จะใช้ dashicons css สำหรับ WP 3.8+ และใช้ภาพที่กำหนดเองผ่าน'menu_icon'param สำหรับรุ่นก่อนหน้าในรูปแบบ "เรียบง่าย" ที่ไม่เกี่ยวข้องกับการเพิ่มเงื่อนไข 2 สำหรับ CPT ที่ลงทะเบียนทุกครั้งหรือไม่

และถ้าเป็นเช่นนั้นเป็นไปได้ที่จะทำในวิธีอัตโนมัติบางอย่างตรงไปตรงมาregister_post_typeโดยไม่มีรหัสเพิ่มเติมหรือไม่

หลังจากผ่านรูกระต่ายและด้านหลังคำตอบคือใช่หลักจะอนุญาตให้ใช้ dashicons ได้อย่างง่ายดายเมื่อลงทะเบียนประเภทโพสต์และเพิ่มหน้าเมนู

ในการใช้ dashicon คุณจะต้องผ่านคลาส CSS dashicons-[name]ไปยังmenu_iconหรือicon_urlในสถานที่ที่เกี่ยวข้อง

สามารถค้นหาคลาสที่มีอยู่dashicons.cssในซอร์สหรือไซต์ Dashicons (คลิกที่ไอคอนและดูที่ชื่อด้านบน)

แจ้งเตือน! 3.8 ดูเหมือนว่าจะมีการเผยแพร่พร้อมกับdashicons-piechartตัวอย่างของคลาสในเอกสารอินไลน์ซึ่งผิดและจะไม่ทำงาน dashicons-chart-pieระดับที่แท้จริงสำหรับไอคอนที่ในข่าวคือ

ง่าย: เพียงอ่านส่วนที่เกี่ยวข้องของregister_post_type()phpDocBlock แล้วใช้อาร์กิวเมนต์ที่เหมาะสมสำหรับmenu_icon: D

• ใช้คลาสdashicons สำหรับเช่นdashicon-groups
• ส่ง SVG พื้นฐานที่เข้ารหัส 64 โดยใช้ data URI ซึ่งจะมีสีเพื่อให้ตรงกับชุดสี data:image/svg+xml;base64,นี้ควรเริ่มต้นด้วย
• ผ่าน'none'เพื่อปล่อยdiv.wp-menu-imageว่างเปล่าดังนั้นไอคอนสามารถเพิ่มผ่าน CSS

ฉันตอบตัวเองเพราะวันนี้ฉันถามตัวเอง 2 คำถามที่ฉันโพสต์และใช้เวลาในการค้นหาคำตอบ เมื่อฉันพบวิธีแก้ไขปัญหาฉันต้องการแบ่งปัน แต่โซลูชันอื่น ๆ ได้รับการอัปเดตอย่างมหาศาลและฉันพร้อมที่จะยอมรับวิธีแก้ไขปัญหาใด ๆ ที่ฉันพบว่าดีกว่าของฉัน การแก้ไขและปรับปรุงวิธีการแก้ปัญหาของฉันได้รับการชื่นชมและไม่สนับสนุน

แก้ไข

หลังจากคำตอบRarstฉันแก้ไขโค้ดแล้ว ตอนนี้ฟังก์ชั่นใช้คลาส dashicons มาตรฐาน แต่ยังอนุญาตให้ระบุ URL รูปแบบเก่าในการmenu_iconโต้แย้งและคลาส dashicons ใหม่ในการmenu_dashiconโต้แย้ง

ขั้นตอนการทำงาน

แรกคิดว่าฉันคิดว่าเป็นที่register_post_typefires การกระทำregistered_post_typeที่ผ่านไป hooking หน้าที่ข้อโต้แย้งส่งผ่านไปregister_post_typeโดยไม่ต้องกรองพวกเขาจึงเป็นไปได้ที่จะสร้างข้อโต้แย้งที่กำหนดเองเพื่อฟังก์ชั่นที่

ดังนั้นฉันจึงตัดสินใจที่จะผ่านการโต้เถียง'menu_dashicon'เพื่อผ่านแดชบอร์ดที่กำหนดเอง

หลังจากนั้นฉันคิดว่าจะสร้างคลาสที่ฟังอาร์กิวเมนต์นั้นให้บันทึกไอคอนในตัวแปรคลาส ชั้นเรียนเดียวกันสามารถรับผิดชอบได้

1. ตรวจสอบรุ่นของกระแส WP และถ้าน้อยกว่านั้น 3.8 จะไม่ทำอะไรเลย
2. ถ้า version เป็น 3.8+ วนรอบ$menuอาร์เรย์บน hook ที่เหมาะสมและ:
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 สองรายการ: "แนวคิด" และ "คลังภาพ" โดยใช้ Dashicons หมายเหตุการเปลี่ยนสีอัตโนมัติด้วยชุดสีผู้ดูแลระบบที่แตกต่างกัน

ฉันเพิ่งเพิ่มบรรทัดนี้ในรหัสที่ลงทะเบียนประเภทโพสต์ที่กำหนดเอง:

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

นี่คือรหัสเต็ม

ไม่จำเป็นต้องเพิ่ม CSS ใด ๆ