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 في فوتر موقعك، وبالتالي سيتم عرض الايقونات بعد عرض موقعك وستتسبب في “فلاش” بسيط.