افزودن آیکون جدید به پست تایپ ها در پنل مدیریت وردپرس

افزودن آیکون جدید به پست تایپ ها در پنل مدیریت وردپرس

سلام شاید که شما یک مدیر سایت هستید و در برخی از سایت ها دیده باشید که زمانی یک سایت وارد می شوید و آن سایت در پنل مدیریت خود آیکون های سفارشی را به عنوان نمادک های جدید در پنل مدیریت وردپرس شما نمایش می دهد و شما هم دوست دارید که برای بخش های مختلفی از سایت خود پست تایپ های سفارشی و آیکون های که می خواهید را در پنل مدیریت سایت خود نمایش دهید و ما امروز می خواهیم در میهن آکادمی به شما آموزش دهیم که چطور می توانید در پنل مدیریت سایت خود این کار را انجام دهید.

در این آموزش قسمت می خواهیم به شما آموزش دهیم که به صورت قدم قدم بتوانید یک آیکون جدید به پنل مدیریت وردپرس خود اضافه کنید و نمایش دهید و این آیکون ها و پست تایپ های وردپرس از نسخه 3.8 به بعد در وردپرس قابل فعال است و این آیکون ها از یک فونت آیکون به نام Dashicons استفاده می کند و این آیکون نگاهی بزرگتر و به هر اندازه در صفحه نمایش شما دارد و شما می توانید از این آیکون ها برای پست تایپ های خود استفاده کنید.

همانطور که می دانید وردپرس یک سیستم منبع باز یا همان اوپن سورس می باشد که شما می توانید با استفاده از این سیستم مدیریت محتوا وردپرس برای خود هر گونه تغییری که می خواهید را با کد نویسی و یا با کمک افزونه در سایت خود انجام دهید و ما در این آموزش هر دو روش را به شما آموزش می دهیم.

افزودن آیکون جدید به پست تایپ ها در وردپرس :

اول از همه برای اینکه بتوانید یک آیکون جدید به پست تایپ ها در سایت خود اضافه کنید و نمایش دهید باید یک افزونه ای نصب کنید که بتوانید این کار را انجام دهید و ما برای شما دو افزونه را معرفی می کنیم که باید برای ساخت و نمایش پست آیکون به پست تایپ ها در وردپرس خود نصب کنید و نام اولین افزونه ای که شما باید نصب کنید cpt custom icon می باشد و در ضمن اگر که نمی دانید چطور در وردپرس افزونه نصب کنید (آموزش نصب افزونه در وردپرس) را مطالعه کنید.

بعد از نصب و فعالسازی شما باید به مسیر تنظیمات در پنل وردپرس خود شوید و بعد از آن بر روی دکمه CPT Custom Icon Settings بروید و در اینجا شما پست تایپ های سفارشی خود که ساخته اید را می بینید و مشاهده می کنید

بعد از اینکه شما بر روی بخش مورد نظر وارد شدید یک دکمه ای وجود دارد به نام Choose Icon که شما باید برای انتخاب آیکون و نوع فونت خود کلیک کنید مانند تصویر بالا

در ضمن اگر که به تازگی یک پست تایپ سفارشی ایجاد کرده اید به شما توصیه می کنیم که از افزونه های مانند Custom Post Type UI برای ایجاد و مدیریت و همچنین طبقه بندی پست تایپ های سفارشی استفاده کنید و یک یا چند آیکون برای پست تایپ های که ساخته اید را امتحان کنید و هر کدام بهتر بود را به عنوان آیکون های پست تایپ های سفارشی خود انتخاب کنید و این افزونه به صورت پیشفرض از فونت آیکون های Dashicons پشتیبانی می کند و بنابراین به وب سایت Dashicons رفته و آیکون مورد نظر خود را برای پست تایپ خود که می خواهید انتخاب کنید

با کلیک بر روی هر آیکون برای شما یک صفحه ای باز می شود که شما باید برای اینکه بتوانید نسخه بزرگتری از آیکون ها در بالا نمایش داده شده است را دریافت کنید بر روی آن کلیک کنید و در کنار آن می توانید با استفاده از کلاس های CSS که شما مشاهده می کنید آن را کپی کرده و پست تایپ سفارشی را که می خواهید در CPT UI ویرایش شود را ویرایش کنید و برای این کار بر روی لینک Advance Options کلیک کرده و در پایین قسمت آیکون از منو CSS آن را جایگذاری کرده و سپس تغییرات را ذخیره کنید

برای اضافه کردن آیکون می توانید تصویری مطابق میل خود انتخاب کنید و آن را با کلیک کردن بر روی رسانه ها در بخش بارگذاری آپلود کنید و بر روی لینک ویرایش کلیک کرده و آدرس تصویر را کپی کنید و سپس آدرس را در فیلد آیکون منو در قسمت تنظیمات CPT UI جایگذار کنید.

اضافه کردن آیکون جدید به پست تایپ ها در پنل مدیریت وردپرس با کد نویسی :

اگر که از پست تایپ های سفارشی را با قرار دادن یک کد در افزونه و یا با استفاده از فایل های Functions.php ایجاد کردید شما می توانید آیکون های منو را به شکل دستی وارد کنید و این بار باز دوباره به سایت Dashicons رفته و یکی از آیکون های مد نظر خود را کد Css آن را کپی کرده و بعد از این آدرس در کد پست تایپ سفارشی خود اضافه کنید مانند مثال :

'menu_icon'           => 'mdi:wordpress',

یا همچنین می توانید آدرس کامل یک فایل تصویری را به عنوان آیکون به پست تایپ های خود در پنل مدیریت وردپرس به عنوان نماد نمایش دهید مانند مثال زیر :

'menu_icon'           => 'http://www.example.com/wp-content/uploads/2023/01/your-cpt-icon.webp',

یک قطعه کد کاملی که باعث ایجاد یک پست تایپ سفارشی به اسم محصولات سایت به همراه یک منو آیکون میشود را در قسمت زیر توضیح داه ایم :

// Register Custom Post Type
function custom_post_type() {

	$labels = array(
		'name'                => _x( 'products', 'Post Type General Name', 'text_domain' ),
		'singular_name'       => _x( 'Product', 'Post Type Singular Name', 'text_domain' ),
		'menu_name'           => __( 'Products', 'text_domain' ),
		'parent_item_colon'   => __( 'Parent Item:', 'text_domain' ),
		'all_items'           => __( 'All Items', 'text_domain' ),
		'view_item'           => __( 'View Item', 'text_domain' ),
		'add_new_item'        => __( 'Add New Item', 'text_domain' ),
		'add_new'             => __( 'Add New', 'text_domain' ),
		'edit_item'           => __( 'Edit Item', 'text_domain' ),
		'update_item'         => __( 'Update Item', 'text_domain' ),
		'search_items'        => __( 'Search Item', 'text_domain' ),
		'not_found'           => __( 'Not found', 'text_domain' ),
		'not_found_in_trash'  => __( 'Not found in Trash', 'text_domain' ),
	);
	$args = array(
		'label'               => __( 'Products', 'text_domain' ),
		'description'         => __( 'Post Type Description', 'text_domain' ),
		'labels'              => $labels,
		'supports'            => array( ),
		'taxonomies'          => array( 'category', 'post_tag' ),
		'hierarchical'        => false,
		'public'              => true,
		'show_ui'             => true,
		'show_in_menu'        => true,
		'show_in_nav_menus'   => true,
		'show_in_admin_bar'   => true,
		'menu_position'       => 5,
		'menu_icon'           => 'mdi:wordpress',
		'can_export'          => true,
		'has_archive'         => true,
		'exclude_from_search' => false,
		'publicly_queryable'  => true,
		'capability_type'     => 'page',
	);
	register_post_type( 'Products', $args );

}

// Hook into the 'init' action
add_action( 'init', 'custom_post_type', 0 );

به همین راحتی شما می توانید در سایت خود با کمک کد نویسی و یا به همراه نصب افزونه آیکون جدید به پست تایپ های خود اضافه کنید و نمایش دهید.

موفق و پیروز باشید.