ডাব্লিউপি ৩.৮-এ অ্যাডমিন মেনু আইকনের জন্য ড্যাশিকনস ব্যবহার করে সিপিটি নিবন্ধন করুন


15

ওয়ার্ডপ্রেস ৩.৮ মূলত প্লাগইন এমপি introduced চালু করেছে যে অন্যান্য জিনিসের মধ্যে ড্যাশবোর্ডে ফন্টগুলি প্রদর্শন করতে ড্যাশিকনস নামে একটি আইকনিক ফন্ট ব্যবহার করে।

এখন, ভালভাবেই জানেন যে রেজিস্টার_পোস্ট_ টাইপের একটি যুক্তি রয়েছে 'menu_icon'যা সিপিটি অ্যাডমিন মেনু প্রবেশের জন্য একটি কাস্টম আইকন নির্দিষ্ট করতে দেয়।

আমার প্লাগিনগুলি / থিমগুলিতে আমি প্রায়শই আমার কাস্টম আইকন চিত্রগুলির সাথে সেই যুক্তিটি ব্যবহার করি যা সাধারণত অন্ধকার হয় কারণ 3..৮ অ্যাডমিন মেনুটির হালকা ব্যাকগ্রাউন্ড ছিল। WP 3.8 এ ডিফল্ট গা default় মেনু পটভূমিতে আমার আইকনগুলি প্রায় অদৃশ্য হয়ে যায়।

এদিকে, আমি মনে করি যে আমার সিপিটির জন্য নতুন ড্যাশিকনগুলি ব্যবহার করা দুর্দান্ত হবে।

কিছু গবেষণা করার পরে, আমি জানি যে আমি কেবল ড্যাশিকনগুলি থেকে সিএসএস ব্যবহার করতে পারি, এরকম কিছু

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

তবে পূর্ববর্তী সিএসএস এবং পূর্ববর্তী উভয়ই উভয় 'menu_icon'যুক্তি ব্যবহার করে ডাব্লুপি ৩.৮ এবং আইকন + ডাব্লুপি ৩.৮- তে একটি অদ্ভুত চর এবং দুটি যুক্তি ছাড়াই পুরানো সংস্করণে ডিফল্ট আইকন ব্যবহার করা হবে printregister_post_type 'menu_icon'

আমি শর্তসাপেক্ষে যোগ করতে পারেন জানি 'menu_icon'মধ্যে register_post_typeডাব্লু 3.8- সংস্করণের জন্য এবং শর্তসাপেক্ষে ডাব্লু জন্য 3.8+ পূর্ববর্তী CSS যুক্ত করুন, কিন্তু:

  • এতে নিবন্ধিত প্রতিটি সিপিটি-র জন্য কিছু কোড (২ শর্তসাপেক্ষ স্টেটমেন্ট) যুক্ত করা জড়িত , সুতরাং প্লাগইন / থিমগুলি আপডেট করা বেশ কঠিন কাজ
  • এটি আমার কাছে একটি মার্জিত সমাধানের চেয়ে বেশি পরিশ্রম বলে মনে হচ্ছে

সুতরাং, প্রশ্নগুলি হ'ল:

ডাব্লিকন ৩.৮+ এর জন্য ড্যাশিকনস সিএসএস ব্যবহার করা 'menu_icon'এবং পূর্বের সংস্করণগুলির জন্য "সহজ" উপায়ে রেজিস্টার্ড প্রতিটি সিপিটি-র জন্য 2 শর্তসাপেক্ষ যুক্ত হওয়া যুক্ত নয় এমন কাস্টম চিত্র ব্যবহার করা সম্ভব ?

এবং যদি তা হয় তবে কোনও অতিরিক্ত কোড ছাড়াই কিছু স্বয়ংক্রিয় পদ্ধতিতে কি সম্ভব register_post_type?

উত্তর:


9

খরগোশের গর্ত এবং পিছনে যাওয়ার পরে উত্তরটি হ'ল - হ্যাঁ , পোস্ট পোস্টের নিবন্ধগুলি নথিভুক্তকরণ এবং মেনু পৃষ্ঠা যুক্ত করার সময় সহজেই ড্যাশিকনগুলি ব্যবহার করতে দেয় to

Dashicon আপনি তার সিএসএস বর্গ পাস করতে হবে ব্যবহার করতে dashicons-[name]করতে menu_iconঅথবা icon_urlপ্রাসঙ্গিক স্থানে।

উপলব্ধ ক্লাসগুলি সন্ধান করা যেতে পারে dashicons.css উত্স বা ড্যাশিকনস সাইটে সন্ধান (আইকনে ক্লিক করুন এবং উপরে এটির জন্য নামটি দেখুন)।

সতর্কতা! ৩.৮ মনে হয় dashicons-piechartক্লাসের উদাহরণ হিসাবে ইনলাইন ডক্সে প্রকাশ করেছে, যা ভুল এবং কার্যকর হবে না। রিলিজটিতে সেই আইকনটির জন্য আসল ক্লাস dashicons-chart-pie


আমি এটি গ্রহণ করেছি কারণ এটি জিনিসটি করার সঠিক উপায়। সুবিধা হিসাবে আমার প্লাগইনটি আরও পিছিয়ে সুসংগত হতে পারে (এবং আমি চরের পরিবর্তে ক্লাসের নামগুলি ব্যবহার করতে ঠিক করতে পারি) কারণ আপনি যদি ড্যাশিকন ক্লাস রাখেন তবে আপনি menu_iconপূর্ববর্তী সংস্করণগুলির জন্য চিত্র ইউআরএল ব্যবহার করতে পারবেন না ... তবে কে অতীত কে যত্ন করে? :)
গাজাজ্যাপ

4

সহজ: register_post_type()খালি পিএইচপিডোকব্লকের প্রাসঙ্গিক অংশটি পড়ুন এবং তারপরে সঠিক যুক্তিটি ব্যবহার করুনmenu_icon : ডি

  • ব্যবহার ড্যাশিকনস ক্লাসটি । যেমন যেমনdashicon-groups
  • একটি ডেটা ইউআরআই ব্যবহার করে একটি বেস 64-এনকোডড এসভিজি পাস করুন, যা রঙের স্কিমের সাথে মেলে রঙিন হবে। এটি দিয়ে শুরু করা উচিতdata:image/svg+xml;base64,
  • খালি 'none'রাখতে পাস করুন div.wp-menu-image, যাতে একটি আইকন সিএসএসের মাধ্যমে যুক্ত করা যায়।

1
* ড্যাশিকনস ক্লাসটি হ'ল @ রাস্ট তার উত্তরে যা বলেছেন। * বেস 6464-এনকোড ব্যবহার করা কার্যকর হতে পারে তবে সত্যই সোজাসাপ্টা নয়, এ ছাড়াও svg-painer.js, বর্ণের পরিবর্তনগুলি পরিচালনা করতে ব্যবহৃত মূল জেএস লাইব্রেরি যদি আইকনটি আরও "জটিল" হয় তবে স্ট্যান্ডার্ড ড্যাশিকনগুলি খুব সময়সাপেক্ষ হতে পারে। * তৃতীয় বিকল্প (খালি আইকন) কেবলমাত্র ডাব্লুপি 3.8+ এর জন্য বৈধ নয়, তবে দীর্ঘকাল থেকে ... এবং সিএসএস ব্যবহার এমন জিনিস যা আমি এড়াতে চাই (প্রশ্ন অনুসারে)। সমস্ত বিকল্প একসাথে রাখার জন্য +1 করুন, তবে আমি মনে করি গ্রহণযোগ্য উত্তরটি ইতিমধ্যে আমার প্রশ্নের জবাবদিহি করছে। আপনার নামের নিকটে সেই হীরাটি দেখতে পিএস খুশি :)
gmaszap

@ জিএম svg-painter.jsফাইল সম্পর্কে আকর্ষণীয় তথ্য । আমি এখনও চেষ্টা না করায় এটি এটি জানত না।
কায়সার

1
মাউস হোভারে রঙিন প্রভাব তৈরি করার জন্য আমি একবার এটি বিট জটিল এসভিজি ইমেজে (এটি একটি সাধারণ বিল্ডিং প্ল্যান্ট) ব্যবহার করার চেষ্টা করেছি। খুব বেশি বিলম্বের কারণে আমি ছেড়ে দিয়েছি এবং অন্য পদ্ধতির ব্যবহার করেছি।
গাজাজ্যাপ

2
@ জিএম এর জন্য ধন্যবাদ আপনার সে সম্পর্কে একটি ব্লগ পোস্ট লিখতে হবে :) আমি অনুসন্ধান করেছিলাম এবং স্বেভেনের একমাত্র দরকারীটি আমি খুঁজে পেতে পারি ।
কায়সার

3

আমি নিজের উত্তর দিচ্ছি কারণ আজ আমি নিজের পোস্ট করা 2 টি প্রশ্ন জিজ্ঞাসা করেছি এবং উত্তর খুঁজতে কিছুটা সময় ব্যয় করেছি। আমি যখন কোনও সমাধান খুঁজে পেয়েছি, তখন আমি এটি ভাগ করে নিতে চাই, তবে অন্য কোনও সমাধান হিগল করে ধরা পড়েছে এবং আমি আমার চেয়ে ভাল যে কোনও সমাধান পেয়েছি তা গ্রহণ করতে প্রস্তুত। আমার সমাধানে সম্পাদনা এবং উন্নতিগুলি যেমন প্রশংসিত হয় তেমন নয় উত্সাহিত হয়।


সম্পাদন করা

রাস্ট উত্তরের পরে আমি কোডটি সম্পাদনা করেছি। এখন ফাংশন ব্যবহার মান dashicons ক্লাস, কিন্তু এছাড়াও একটি পুরানো শৈলী ছবির URL নির্দিষ্ট করার অনুমোদন দেবে menu_iconযুক্তি এবং একটি ব্র্যান্ড নতুন dashicons বর্গ menu_dashiconযুক্তি।


কর্মধারা

প্রথম ভাবি যে আমি ভেবেছিলাম যে এটি register_post_typeএকটি ক্রিয়াকলাপ registered_post_typeচালিয়েছিল, যেগুলি হুকিং ফাংশনগুলিতে পাস করে আর্গুমেন্টগুলিকে register_post_typeফিল্টার না করেই পাস করে, সুতরাং সেই ফাংশনে কাস্টম আর্গুমেন্ট তৈরি করা সম্ভব to

সুতরাং আমি 'menu_dashicon'একটি কাস্টম ড্যাশিকন পাস করার জন্য তর্কটি পাস করার সিদ্ধান্ত নিয়েছি।

এর পরে আমি একটি ক্লাস তৈরি করতে ভেবেছিলাম যা সেই যুক্তিটি শোনায়, ক্লাস ভেরিয়েবলের আইকন সংরক্ষণ করে। একই বর্গ দায়বদ্ধ হতে পারে

  1. ডাব্লুপি এর কারেন্ট সংস্করণ পরীক্ষা করুন, এবং যদি এটি কম হয় তবে 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);

এটি গিস্ট হিসাবেও উপলব্ধ


ড্যাশিকন ব্যবহার করে সিপিটি

দুটি সিপিটি: ড্যাশিকনস ব্যবহার করে "আইডিয়া" এবং "গ্যালারী"। বিভিন্ন অ্যাডমিন রঙের স্কিম সহ অটো রঙ পরিবর্তন নোট করুন।



0

আমি কেবল কোডটিতে এই লাইনটি যুক্ত করেছি যা কাস্টম পোস্টের ধরণের রেজিস্ট্রেশন করে:

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

এখানে সম্পূর্ণ কোড

এখানে চিত্র বর্ণনা লিখুন

কোনও সিএসএস যুক্ত করার দরকার নেই।


এটিই সঠিক জিনিস যা @ রার্স্ট তার উত্তরে
বলেছিল

রাস্ট কোডের লাইন সরবরাহ করে না যা সিপটি তৈরি করে এমন কোডে কোড যুক্ত করার বা আমার সাথে লিঙ্কিত পূর্ণ স্নিপেটের প্রয়োজন। এছাড়াও সিএসএসের দরকার নেই তাই আমার সমাধানটি আরও দক্ষ।
ব্র্যাড ডাল্টন
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.