Dashicons هي مجموعة أساسية مضمنة من أيقونات الخطوط في ووردبريس والتي تم تقديمها مرة أخرى في ووردبريس 3.8 عندما قاموا بإعادة تصميم واجهة المستخدم الخلفية الضخمة ويتم استخدامها افتراضيًا للروابط المختلفة الموجودة على شريط الإدارة الأيمن. على الرغم من أنها تم تصميمها للنواة، إلا أنه يمكن استخدامها في الاضافات والقوالب المخصصة الخاصة بك، ليس فقط عند تحديد أنواع المنشورات المخصصة أو انشاء لوحات ادارة مخصصة ولكن أيضًا في تصميم قالب الواجهة الأمامية إذا كنت ترغب في ذلك. وأفضل ما في الأمر أنه سهل للغاية!

استخدام Dashicons لأنواع المنشورات المخصصة

عندما تقوم بتسجيل نوع منشور مخصص جديد في ووردبريس، كل ما عليك فعله هو تعيين وسيط Menu_icon المساوية لاسم كلاس CSS الخاص بـ Dashicon الذي ترغب في استخدامه وسيتم تعريف هذا الايقونة على أنها ايقونة المعروض على الجانب الأيمن لاسم نوع المنشور المخصص الخاص بك في لوحة إدارة ووردبريس. ما عليك سوى زيارة صفحة Dashicons المقصودة والنقر على أي ايقونة ترغب في استخدامه وسترى اسم الفصل في الأعلى بجوار الايقونة حتى تتمكن من نسخها ولصقها.

استخدام Dashicons في تصميم قالب الواجهة الأمامية

تستخدم الكثير من القوالب هذه الأيام أيقونات الواجهة الأمامية لأشياء مثل تعريف النشر (التاريخ والتصنيف والوسوم والمؤلف) بالإضافة إلى أيقونات الهيدر مثل أيقونات المستخدم والبحث والمتجر. في حين أن أيقونة الخطوط الأكثر استخدامًا وشعبية هي FontAwesome وهي تعمل بشكل رائع مع معظم المشاريع، فهي أيضًا مجموعة أيقونات كبيرة جدًا تتضمن العديد من الايقونات التي ربما لن تستخدمها أبدًا؛ يمكنك استخدام موقع الكتروني لمولد الخطوط مثل Fontello لإنشاء Stylesheet تحتوي على الأيقونات التي تحتاجها فقط، ولكن البديل الأخر هو استخدام Dashicons المضمن بالفعل في تثبيت ووردبريس الخاص بك، كل ما عليك فعله هو تحميل البرامج النصية “scripts” على الواجهة الأمامية.

قم ببساطة بإضافة ما يلي إلى jobs.php الخاص بقالبك لتنزيل Dashicons على الواجهة الأمامية (أدخل عبر قالب فرعي إذا كنت تقوم بتخصيص قالب موجود ولا تنشئ قالب خاص بك).

add_action( 'wp_enqueue_scripts', function() {
    wp_enqueue_style( 'dashicons' );
} );

يمكنك الأن إدراج ايقونة عبر HTML على هذا النحو:

<span class="dashicons dashicons-menu"></span>

قم بتغيير بسيط حيث تقول “القائمة” على الأيقونة التي ترغب في استخدامها. يمكن لصق HTML هذا في أي مكان في القالب حيث تريد عرض الايقونة. يمكنك أيضًا إدراج HTML في عناصر القائمة الخاصة بك عن طريق لصق HTML مباشرة في حقل “التسمية” الخاص بعنصر القائمة.

كيفية انشاء كود قصير Dashicons

الحل الأخر لاستخدام Dashicons على الواجهة الأمامية هو إنشاء كود قصير يمكنك استخدامه في أي مكان على الموقع. يعد هذا خيار جيد إذا كنت تنشئ موقع للعميل وتريد أن تسهل عليه إدراج الأيقونات على الموقع حتى لا يضطر إلى العبث بـ HTML. فيما يلي مثال لما قد يبدو عليه هذا الكود، ما عليك سوى إضافة الكود إلى ملف jobs.php الخاص بك (أو أي ملف أخر غير قالب يتم تنزيلة بواسطة jobs.php).

add_shortcode( 'dashicon', function( $atts ) {
	$atts = shortcode_atts( array(
		'icon' => 'menu',
	), $atts, 'bartag' );
	if ( ! empty( $atts[ 'icon' ] ) ) {
		return '<span class="dashicons dashicons-' . esc_attr( $atts[ 'icon' ] ) . '"></span>';
	}
} );

استخدام الكود القصير:

[dashicon icon="chart-pie"]

ملاحظة: يفترض الكود القصير أعلاه أنك قد اتبعت بالفعل الخطوة السابقة وقمت بتنزيل Stylesheet Dashicons على الواجهة الأمامية لديك. إذا لم تكن قد فعلت ذلك، فيمكنك ببساطة إضافة دالة “wp_enqueue_style” من المقتطف أعلاه مباشرة إلى الكود القصير وسيتم تحميل ورقة الأنماط فقط عند استخدام الايقونة. ومع ذلك، يوصى بتنزيل Script بشكل عام، وإلا فسيتم تحميل ورقة أنماط (Stylesheet) Dashicons في فوتر موقعك، وبالتالي سيتم عرض الايقونات بعد عرض موقعك وستتسبب في “فلاش” بسيط.

نأمل أن تساعدك هذه المقالة في تعلم كيفية استخدام Dashicons في ووردبريس. قد ترغب أيضًا بالاطلاع على دليلنا حول كيفية عرض الكود بسهولة على موقع ووردبريس الخاص بك واختيارنا الخبير لـ أفضل اضافات ووردبريس الضرورية لتنمية موقعك الكتروني.