WP 3.8 में व्यवस्थापक मेनू आइकन के लिए Dashicons का उपयोग करके CPT पंजीकृत करें


15

वर्डप्रेस 3.8 ने प्लगइन एमपी 6 को मुख्य रूप से पेश किया कि अन्य चीजों के बीच डैशबोर्ड में फ़ॉन्ट प्रदर्शित करने के लिए डैशिकॉन नामक एक प्रतिष्ठित फ़ॉन्ट का उपयोग करें।

अब, अच्छी तरह से जानते हैं कि register_post_type में एक तर्क 'menu_icon'है जो CPT व्यवस्थापक मेनू प्रविष्टि के लिए एक कस्टम आइकन निर्दिष्ट करने की अनुमति देता है।

अपने प्लगइन्स / थीम में, मैं अक्सर अपने कस्टम आइकन चित्रों के साथ उस तर्क का उपयोग करता हूं जो सामान्य रूप से अंधेरे होते हैं क्योंकि इससे पहले 3.8 व्यवस्थापक मेनू में एक हल्की पृष्ठभूमि थी। WP 3.8 में डिफ़ॉल्ट डार्क मेनू पृष्ठभूमि के साथ मेरे आइकन लगभग अदृश्य हो जाते हैं।

एक तरफ, मुझे लगता है कि मेरे सीपीटी के लिए नए डैशिकन्स का उपयोग करना अच्छा होगा।

कुछ शोधों के बाद, मुझे पता है कि मैं बस सीएसएस का उपयोग डैशियन से कर सकता हूं, कुछ ऐसा

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

हालाँकि और पिछले css दोनों के 'menu_icon'तर्क का उपयोग करके दोनों आइकन WP 3.8 में प्रिंट होंगे और एक आइकन + WP 3.8- में एक अजीब आकर्षण होगा, और तर्क का उपयोग किए बिना , पुराने संस्करणों पर डिफ़ॉल्ट आइकन का उपयोग किया जाता है।register_post_type 'menu_icon'

मुझे लगता है मैं सशर्त जोड़ सकते हैं 'menu_icon'में register_post_typeWP 3.8- संस्करणों के लिए और सशर्त WP के लिए 3.8+ पिछले सीएसएस जोड़ने के लिए, लेकिन:

  • जिसमें हर CPT पंजीकृत के लिए कुछ कोड (2 सशर्त विवरण) जोड़ना शामिल है , इसलिए प्लगइन्स / थीम को अपडेट करना काफी कठिन काम है
  • यह मेरे लिए एक सुंदर समाधान की तुलना में अधिक समाधान है

तो, प्रश्न हैं:

WP 3.8+ के लिए डैशिकन्स सीएसएस का उपयोग करना संभव है और 'menu_icon'पिछले संस्करणों के लिए "सरल" तरीके से परम के माध्यम से स्थापित कस्टम छवि का उपयोग करना संभव है जो पंजीकृत सीपीटी के लिए 2 सशर्त को शामिल नहीं करता है?

और, यदि हां, तो क्या यह संभव है कि किसी भी अतिरिक्त कोड के बिना किसी भी स्वचालित तरीके से सीधे register_post_type?

जवाबों:


9

खरगोश के छेद और पीठ से गुजरने के बाद, उत्तर है - हाँ , कोर आसानी से डैशिकन्स का उपयोग करने की अनुमति देता है जब पोस्ट प्रकारों को पंजीकृत करना और मेनू पृष्ठों को जोड़ना होता है।

Dashicon आप अपने CSS वर्ग उत्तीर्ण करने की आवश्यकता का उपयोग करने के dashicons-[name]लिए menu_iconयाicon_url संबंधित स्थानों ।

उपलब्ध कक्षाएं dashicons.cssस्रोत या डैशिकन्स साइट में देखी जा सकती हैं (आइकन पर क्लिक करें और शीर्ष पर इसके लिए नाम देखें)।

चेतावनी! 3.8 dashicons-piechartइनलाइन डॉक्स में कक्षा के उदाहरण के साथ जारी किया गया लगता है , जो गलत है और काम नहीं करेगा। रिलीज में उस आइकन के लिए वास्तविक वर्ग है dashicons-chart-pie


मैंने इसे स्वीकार कर लिया है क्योंकि यह बात करने का सही तरीका है। मेरे प्लगइन के रूप में बेहतर पिछड़े संगत होने के लिए लाभ (और मैं चार के बजाय वर्ग के नाम का उपयोग करने के लिए ठीक कर सकता हूं) क्योंकि अगर आप डैशिकन्स वर्ग को रखते हैं menu_iconतो आप पिछले संस्करणों के लिए छवि यूआरएल का उपयोग नहीं कर सकते हैं ... लेकिन अतीत की परवाह कौन करता है? :)
gmazzap

4

आसान: बस register_post_type()phpDocBlock के प्रासंगिक भाग को पढ़ें और फिर इसके लिए सही तर्क का उपयोग करें menu_icon: D

  • डैशिकन्स वर्ग का उपयोग करें । उदाहरण के लिएdashicon-groups
  • एक बेस यूआई-एनकोडेड एसवीजी को एक डेटा यूआरआई का उपयोग करके पास करें, जो कि रंग योजना से मेल खाने के लिए रंगीन होगा। इसके साथ शुरू होना चाहिए data:image/svg+xml;base64,
  • खाली 'none'छोड़ने के लिए पास div.wp-menu-image, इसलिए CSS के माध्यम से एक आइकन जोड़ा जा सकता है।

1
* डैशिकन्स वर्ग @Rarst अपने जवाब में क्या कहता है। * बेस64-एनकोड का उपयोग करना उपयोगी हो सकता है, लेकिन वास्तव में सीधा नहीं है, इसके अलावा svg-painer.js, कोर जेएस लाइब्रेरी का उपयोग रंग परिवर्तन को संभालने के लिए किया जाता है, यदि बहुत अधिक समय लग सकता है यदि आइकन अधिक "जटिल" है तो मानक डैशिकॉन। * तीसरा विकल्प (खाली आइकन) न केवल WP 3.8+ के लिए मान्य है, बल्कि एक लंबे समय के बाद से ... और सीएसएस का उपयोग करने से कुछ ऐसा है जिससे मैं बचना चाहता हूं (प्रश्न के अनुसार)। तो सभी विकल्पों को एक साथ रखने के लिए +1, लेकिन मुझे लगता है कि स्वीकृत उत्तर पहले से ही मेरे प्रश्न का है। पुनश्च आपके नाम के पास :) है कि हीरे देख कर खुश
gmazzap

@GM svg-painter.jsफाइल के बारे में रोचक जानकारी । यह नहीं पता था क्योंकि मैंने अभी तक कोशिश नहीं की है।
कैसर

1
एक बार जब मैंने माउस होवर पर रंग परिवर्तन प्रभाव बनाने के लिए इसे एक बिट कॉम्प्लेक्स svg इमेज (यह एक साधारण बिल्डिंग प्लांट था) में इस्तेमाल करने की कोशिश की। मैंने बहुत विलंबता के कारण एक और दृष्टिकोण दिया और उसका उपयोग किया।
gmazzap

2
@GM उस एक के लिए धन्यवाद। आपको उस बारे में एक ब्लॉग पोस्ट लिखना चाहिए :) मैं खोज रहा था और एकमात्र उपयोगी जो मुझे मिल सकता था वह स्वेन से था ।
केसर

3

मैं अपने आप को जवाब दे रहा हूं क्योंकि आज मैंने खुद से 2 सवाल पूछे हैं, जो मैंने पोस्ट किए हैं, और जवाब खोजने के लिए कुछ समय बिताया है। एक बार जब मुझे कोई समाधान मिल गया, तो मैं इसे साझा करना चाहता हूं, लेकिन किसी भी अन्य समाधान को बहुत कम किया गया है और मैं किसी भी समाधान को स्वीकार करने के लिए तैयार हूं, जो मुझे मेरी तुलना में बेहतर मिला। मेरे समाधान के संपादन और सुधार की सराहना की जाती है और साथ ही साथ नै को प्रोत्साहित भी किया जाता है।


संपादित करें

Rarst जवाब के बाद मैंने कोड संपादित किया है। अब फ़ंक्शन मानक डैशिकॉन्स कक्षाओं का उपयोग करते हैं, लेकिन तर्क में एक पुरानी शैली की छवि url और तर्क में एक ब्रांड के नए डैशिकंस वर्ग को भी निर्दिष्ट करने की अनुमति देते हैं ।menu_iconmenu_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'परम के माध्यम से जोड़ा गया है के अनुसार इनलाइन शैली जोड़ें

मैं एक एकल फ़ाइल में कोड बनाता हूं, इस तरह इसे आसानी से किसी भी विषय / प्लगइन में शामिल किया जा सकता है या यहां तक ​​कि एमयू प्लगइन के रूप में भी इस्तेमाल किया जा सकता है और उसके बाद एक बस नए ब्रांड का उपयोग किया जा सकता है'menu_dashicon' हर विषय और / या प्लगइन स्थापित तर्क का है।

मैंने एक न्यूनतम प्लगइन हेडर भी जोड़ा है जो इसे स्टैंडअलोन प्लगइन के रूप में उपयोग करने की अनुमति देता है, लेकिन शायद यह उपयोग करने का कम उपयोगी तरीका है।

कैसे इस्तेमाल करे

अंदर register_post_typeसिर्फ 'menu_dashicon'डैशिकॉन क्लास के मान के साथ तर्क पास करें ( उपसर्ग 'डैशिकन्स-' के बिना ))

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

बस इतना ही। अपनी साइट से डैशिकन आइकन वर्ग नाम प्राप्त करें ।

तो यहाँ कोड:

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

यह जिस्ट के रूप में भी उपलब्ध है


CPTs का उपयोग करते हुए डैशियन

दो सीपीटी: "आइडियाज़" और "गैलरी" डैशिकन्स का उपयोग करते हुए। नोट अलग-अलग व्यवस्थापक रंग योजनाओं के साथ ऑटो रंग परिवर्तन।



0

मैंने इस लाइन को कोड में जोड़ा है जो कस्टम पोस्ट प्रकार को पंजीकृत करता है:

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

यहाँ पूर्ण कोड है

यहाँ छवि विवरण दर्ज करें

कोई CSS जोड़ने की जरूरत नहीं है।


यही कारण है कि सटीक बात यह है कि @Rarst उसके जवाब में कहते हैं है ...
gmazzap

Rarst उस कोड की पंक्ति प्रदान नहीं करता है जिसे उस कोड को जोड़ने की आवश्यकता होती है जो CPT या पूर्ण स्निपेट बनाता है जिसे मैंने लिंक किया है। इसके अलावा सीएसएस की कोई आवश्यकता नहीं है, इसलिए मेरा समाधान अधिक कुशल है।
ब्रैड डाल्टन
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.