لو فتحت نسخة بيتا من ووردبريس 7.2 ولقيت أيقونات القائمة الجانبية شكلها أنضف، ده مش خيالك. التغيير ده شكله بسيط، بس لو إضافتك أو قالب عميلك بيلوّن أو بيخفي أو بيبدّل أيقونة من أيقونات النواة بـ CSS، فممكن يبوظ بهدوء يوم 8 ديسمبر. خلّينا نعرف إيه اللي هيفضل شغال وإيه اللي محتاج تصلّحه من النهارده.
بصراحة: هذا المقال قراءة لملاحظة المطورين الرسمية وجدول الإصدار، ولم نختبر التغييرات على مواقع إنتاج بعد. اختبر على بيئة الاختبار (Staging) قبل أي تعديل على موقع عميل.
ما الذي تغيّر في أيقونات ووردبريس 7.2؟
حتى الإصدار 7.1 كانت أيقونات القائمة الجانبية في لوحة التحكم (Dashboard) وفي شريط الإدارة (Admin Bar) حروفاً من خط Dashicons، يرسمها المتصفح على العنصر الوهمي (Pseudo-element) ::before عبر CSS. في ووردبريس 7.2 أصبحت هذه الأيقونات أيقونات SVG مضمّنة (Inline SVG) من حزمة @wordpress/icons، أي عناصر حقيقية داخل HTML.
النتيجة العملية: أي قاعدة CSS تستهدف ::before لتلوين أيقونة من أيقونات النواة أو إخفائها لم تعد تصل إليها، لأن الأيقونة لم تعد مرسومة هناك. اللون الآن يُضبط على العنصر الحاوي، ويرثه الـ SVG عبر currentColor.
يشمل التغيير الأيقونات الاثنتي عشرة للعناصر الرئيسية في القائمة: Dashboard وPosts وMedia وLinks وPages وComments وAppearance وPlugins وUsers وTools وSettings، وSites في لوحة تحكم الشبكة، إضافة إلى سهم زر Collapse Menu وأغلب أيقونات شريط الإدارة.
الموعد: بحسب جدول الإصدار الرسمي، صدرت Beta 1 في 20 أكتوبر 2026، والمرشح الأول للإصدار (RC1) مقرر في 17 نوفمبر، والإصدار النهائي في 8 ديسمبر 2026.
هل تحتاج إضافتك أو قالبك إلى تعديل؟
الخبر الجيد أن أغلب الإضافات والقوالب لا تحتاج شيئاً. تسجيل صفحات القائمة وعناصر شريط الإدارة، بـ Dashicons أو بدونها، يعمل كما كان. المتأثر فعلاً هو الكود الذي يعدّل أيقونات النواة نفسها عبر CSS، وأنظمة ألوان لوحة التحكم، وقوالب لوحة التحكم المخصّصة.
ووردبريس 7.2
ما الذي يبقى وما الذي يتعطل؟
تأثير أيقونات SVG على كود إضافتك
| المعيار | قبل 7.2 | في 7.2 |
|---|---|---|
| menu_icon بقيمة dashicons-* | يعمل | يعمل |
| content على wp-menu-image::before | يستبدل | يستبدل |
| تلوين ::before فقط | يعمل | يحتاج تعديلاً |
| إخفاء ::before فقط | يعمل | يحتاج تعديلاً |
| البحث عن span فارغ | موجود | اختفى |
| اسم أيقونة core-admin | غير مدعوم | مدعوم |
ما يبقى يعمل دون تعديل، بحسب ملاحظة المطورين:
- قيم
menu_iconالمسجّلة لا تتغير. مثلاًget_post_type_object( 'post' )->menu_iconما زالتdashicons-admin-post، والمتغير العام$menuوالـ REST API يحملان القيم نفسها. - إذا استخدمت إضافة أيقونة Dashicon لها مقابل في مجموعة
core-admin، تُعرض أيقونة SVG المقابلة تلقائياً في القائمة الجانبية. - أي Dashicon آخر، أو رابط صورة، أو SVG بترميز base64، أو القيمة
none، يُعرض كما كان تماماً. - قاعدة
::beforeفيهاcontentعلىdiv.wp-menu-imageما زالت تستبدل الأيقونة ولا يظهر الـ SVG. - في شريط الإدارة:
contentعلى.ab-icon::beforeما زال يستبدل أيقونة أي عنصر من عناصر النواة، وعناصر الإضافات الأخرى تُعرض كما كانت.
في JetEngine: إذا أنشأت نوع محتوى مخصصاً (Custom Post Type) من JetEngine واخترت له أيقونة من Dashicons، فالقيمة نفسها تبقى محفوظة وتُعرض كما كانت، أو تتحول إلى SVG إذا كان لها مقابل في
core-admin. لا تحتاج إلى إعادة إعداد أنواع المحتوى في مواقع عملائك.
إصلاح أنظمة ألوان لوحة التحكم
إذا كانت إضافتك تسجّل نظام ألوان للوحة التحكم (Admin Color Scheme) ويلوّن ملف CSS الخاص به الأيقونات عبر ::before، فووردبريس 7.2 يحاول الحفاظ على ألوانك مؤقتاً:
- في القائمة الجانبية: تأخذ الأيقونات ألوان الأيقونات التي مررتها إلى
wp_admin_css_color()، وإلا فلون نص القائمة. - في شريط الإدارة: إذا ولّدت ملفك بـ SASS اعتماداً على
_admin.scssالخاص بالنواة، فهو يلوّن العنصر.ab-iconأصلاً وتبقى الألوان سليمة.
في غير ذلك تظهر الألوان الافتراضية للنواة. الحل الكامل: أينما لوّنت أيقونة عبر ::before، لوّن العنصر نفسه أيضاً، وحيث تلوّن .ab-item::before أضف .ab-icon. هذه الصيغة تعمل في 7.2 والإصدارات الأقدم معاً:
/* Before */
#adminmenu div.wp-menu-image::before { color: #c3c4c7; }
#wpadminbar li:hover .ab-icon::before { color: #72aee6; }
#wpadminbar #wp-admin-bar-site-name > .ab-item::before { color: #c3c4c7; }
/* After (works on 7.2 and earlier versions) */
#adminmenu div.wp-menu-image,
#adminmenu div.wp-menu-image::before { color: #c3c4c7; }
#wpadminbar li:hover .ab-icon,
#wpadminbar li:hover .ab-icon::before { color: #72aee6; }
#wpadminbar #wp-admin-bar-site-name > .ab-item .ab-icon,
#wpadminbar #wp-admin-bar-site-name > .ab-item::before { color: #c3c4c7; }
كرّر الفكرة نفسها لحالات hover وfocus وcurrent وopen، ولقواعد .mobile. الأمثلة أعلاه نماذج فقط وليست قائمة كاملة.
إصلاح كود CSS الذي يعدّل أيقونات النواة
هذه هي الحالات الخمس الأكثر شيوعاً في إضافات «تخصيص لوحة التحكم» والقوالب البيضاء (White Label) التي يسلّمها المستقلون لعملائهم. كل كود «After» هنا يعمل في 7.2 والإصدارات السابقة.
إخفاء أيقونة من أيقونات النواة
إخفاء ::before لم يعد يخفي شيئاً لأن الأيقونة عنصر مستقل الآن. أخفِ العنصر أيضاً:
/* Before */
#adminmenu #menu-comments div.wp-menu-image::before { display: none; }
#wpadminbar #wp-admin-bar-wp-logo > .ab-item .ab-icon::before { display: none; }
#wpadminbar #wp-admin-bar-edit > .ab-item::before { display: none; }
/* After (works on 7.2 and earlier versions) */
#adminmenu #menu-comments div.wp-menu-image::before,
#adminmenu #menu-comments div.wp-menu-image svg { display: none; }
#wpadminbar #wp-admin-bar-wp-logo > .ab-item .ab-icon { display: none; }
#wpadminbar #wp-admin-bar-edit > .ab-item::before,
#wpadminbar #wp-admin-bar-edit > .ab-item .ab-icon { display: none; }
استبدال أيقونة بشعار العميل
الطريقة القديمة كانت تضع صورة خلفية على الحرف وتجعله شفافاً، معتمدة على content الذي تضعه النواة لإنشاء المساحة. الآن ضع content والحجم بنفسك:
/* Before */
#adminmenu #menu-posts div.wp-menu-image::before {
background-image: url(logo.png);
color: transparent;
}
#wpadminbar #wp-admin-bar-wp-logo > .ab-item .ab-icon::before {
background-image: url(logo.png);
color: transparent;
}
/* After (works on 7.2 and earlier versions) */
#adminmenu #menu-posts div.wp-menu-image::before {
content: "";
background: url(logo.png) center / 20px 20px no-repeat;
}
#wpadminbar #wp-admin-bar-wp-logo > .ab-item .ab-icon::before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
background: url(logo.png) center / contain no-repeat;
}
تنبيه: هذه هي الحالة التي ستراها غالباً في مواقع العملاء: شعار الشركة مكان شعار ووردبريس في شريط الإدارة. لو لم تحدّثها، قد يختفي الشعار أو تظهر أيقونة ووردبريس الأصلية بعد التحديث.
استبدال أيقونات شريط الإدارة المرسومة على .ab-item::before
ينطبق هذا على العناصر edit وcustomize وsite-editor وmy-sites وsite-name وmy-account. أصبحت أيقونتها عنصر .ab-icon مستقلاً، فإذا وضعت content على .ab-item::before فقط يُخفى حرفك وتظهر أيقونة النواة. ضع content على ::before الخاص بعنصر الأيقونة أيضاً:
/* Before */
#wpadminbar #wp-admin-bar-edit > .ab-item::before { content: "\f319"; }
/* After (works on 7.2 and earlier versions) */
#wpadminbar #wp-admin-bar-edit > .ab-item::before,
#wpadminbar #wp-admin-bar-edit > .ab-item .ab-icon::before { content: "\f319"; }
أيقونة البحث وأيقونة My Sites وزر Collapse Menu
القواعد على العناصر الوهمية لهذه الأيقونات الثلاث لم تعد تؤثر فيها. استهدف العنصر الجديد:
/* Before */
#wpadminbar #adminbarsearch::before { color: red; }
#wpadminbar .quicklinks li div.blavatar::before { color: red; }
#collapse-button .collapse-button-icon::after { color: red; }
/* After (works on 7.2 and earlier versions) */
#wpadminbar #adminbarsearch::before,
#wpadminbar #adminbarsearch .ab-icon { color: red; }
#wpadminbar .quicklinks li div.blavatar::before,
#wpadminbar .quicklinks li div.blavatar svg { color: red; }
#collapse-button .collapse-button-icon::after,
#collapse-button .collapse-button-icon svg { color: red; }
استهداف عنصر في القائمة باسم كلاس Dashicon
استخدم معرّف العنصر أو كلاس menu-icon-* بدل كلاس الأيقونة:
/* Before */
#adminmenu .dashicons-admin-post::before { content: "\f319"; }
/* After (works on 7.2 and earlier versions) */
#adminmenu .dashicons-admin-post::before { content: "\f319"; }
#adminmenu .menu-icon-post div.wp-menu-image::before { content: "\f319"; }
انتبه للفرق: كلاس الـ Dashicon القديم كان يطابق كل عنصر يستخدم الأيقونة نفسها، أما المعرّف أو menu-icon-* فيطابق عنصراً واحداً.
كود PHP يبحث عن span فارغ في عناوين شريط الإدارة
بعض عناصر النواة كانت تضع <span class="ab-icon"> فارغاً داخل العنوان لرسم الأيقونة. في 7.2 اختفى هذا الـ span من كل عناصر النواة وأصبحت الأيقونة تُمرَّر عبر وسيط icon الجديد، باستثناء wp-logo الذي يحتوي عنوانه على الأيقونة نفسها.
مثلاً، عنوان العنصر new-content الذي تعيده $wp_admin_bar->get_node( 'new-content' )->title كان:
<span class="ab-icon" aria-hidden="true"></span><span class="ab-label">New</span>
وأصبح:
<span class="ab-label">New</span>
إذا كانت إضافتك تبحث عن هذا الـ span لتعديل العنوان أو الأيقونة، فلن تجده بعد التحديث. ابحث في الكود عن ab-icon داخل أي دالة تقرأ get_node() أو تعدّل عنواناً.
الواجهة الجديدة: أيقونات SVG لقوائم إضافتك
التغيير ليس مجرد صيانة؛ فهو يفتح لك واجهة لاستخدام أيقونات SVG في صفحات إضافتك بدل Dashicons، بتمرير اسم أيقونة مسجّلة على شكل collection/icon-name.
أي أيقونات تستخدم؟ استخدم مجموعة core-admin. بحسب ملاحظة المطورين، أي أيقونة تُضاف إلى core-admin لن يتغير اسمها ولن تُحذف، وستُضاف أيقونات أخرى بحسب طلبات المطورين. لا تستخدم مجموعة core في لوحة التحكم؛ فهي مخصصة للواجهة والمحتوى وبلوك Icon، وقد تلغي بعض الإضافات تسجيلها. ويمكنك تسجيل مجموعتك الخاصة عبر wp_register_icon_collection() وwp_register_icon().
أيقونة لصفحة في القائمة الجانبية
تقبل add_menu_page() ووسيط menu_icon في register_post_type() الآن اسم أيقونة مسجّلة، إلى جانب القيم القديمة:
add_menu_page(
__( 'Notes', 'my-plugin' ),
__( 'Notes', 'my-plugin' ),
'manage_options',
'my-plugin-notes',
'my_plugin_render_notes',
'core-admin/pin' // Now allowed: a registered icon name.
);
أيقونة لعنصر في شريط الإدارة
تقبل WP_Admin_Bar::add_node() وسيطاً جديداً اسمه icon، وتُعرض الأيقونة قبل العنوان:
add_action(
'admin_bar_menu',
function ( WP_Admin_Bar $wp_admin_bar ) {
$wp_admin_bar->add_node(
array(
'id' => 'my-plugin-notes',
'icon' => 'core-admin/pin',
'title' => __( 'Notes', 'my-plugin' ),
'href' => admin_url( 'admin.php?page=my-plugin-notes' ),
)
);
},
100
);
في الحالتين، الاسم غير المسجّل لا يعرض أيقونة، ومع تفعيل WP_DEBUG يظهر تنبيه _doing_it_wrong(). وهناك دالة مساعدة جديدة wp_is_valid_icon_name() تتحقق فقط من أن القيمة بالشكل collection/icon-name، ولا تتحقق من أن الأيقونة مسجّلة.
دعم الإصدارات الأقدم من 7.2 في الكود نفسه
إذا كانت إضافتك تُستخدم على مواقع لم تُحدَّث بعد، وهو الوضع الطبيعي في مواقع كثيرة يديرها مستقلون، فاختر الحالة التي تنطبق عليك. ابحث عن الـ Dashicon الذي تستخدمه داخل مفتاح 'dashicons' في ملف الربط (Manifest) الذي تشير إليه ملاحظة المطورين.
الحالة 1: لا يوجد مقابل رسمي في core-admin، أو تريد أيقونة SVG خاصة بك. في القائمة الجانبية أسماء الأيقونات غير مدعومة في الإصدارات الأقدم، فاحمِها بشرط function_exists( 'wp_is_valid_icon_name' ). أما شريط الإدارة فيتجاهل الوسيط الجديد في الإصدارات الأقدم، والـ span الفارغ في العنوان يُخفى في 7.2، فمرّر الاثنين:
add_menu_page(
...,
function_exists( 'wp_is_valid_icon_name' ) ? 'core-admin/receipt' : 'dashicons-text'
);
$wp_admin_bar->add_node(
array(
...
'title' => '<span class="ab-icon dashicons-text" aria-hidden="true"></span> My Node',
'icon' => 'core-admin/receipt',
)
);
الحالة 2: للـ Dashicon مقابل رسمي في 7.2. أيقونة القائمة الجانبية تُستبدل تلقائياً، لكن في شريط الإدارة يجب أن تمرّر اسم الأيقونة المقابلة بنفسك:
add_menu_page(
...,
'dashicons-cart'
);
$wp_admin_bar->add_node(
array(
...
'title' => '<span class="ab-icon dashicons-cart" aria-hidden="true"></span> My Node',
'icon' => 'core-admin/cart',
)
);
الحالة 3: المقابل سيُضاف في إصدار لاحق. تحقّق من التسجيل عبر WP_Icons_Registry قبل الاستخدام، مع الرجوع إلى Dashicon للإصدارات الأقدم:
$icon = 'dashicons-text'; // for < 7.2
if ( function_exists( 'wp_is_valid_icon_name' ) ) {
$registry = WP_Icons_Registry::get_instance();
if ( $registry->is_registered( 'core-admin/invoice' ) ) {
$icon = 'core-admin/invoice'; // for > 7.2 (as an example)
} elseif ( $registry->is_registered( 'core-admin/receipt' ) ) {
$icon = 'core-admin/receipt'; // for 7.2
}
}
add_menu_page(
...,
$icon
);
$wp_admin_bar->add_node(
array(
...
'title' => '<span class="ab-icon dashicons-text" aria-hidden="true"></span> My Node',
'icon' => $icon,
)
);
خطة فحص سريعة قبل 8 ديسمبر
قبل 8 ديسمبر
افحص إضافتك في 4 خطوات
ابحث عن ::before
في CSS: wp-menu-image وab-icon وab-item وblavatar.
ابحث عن ab-icon في PHP
أي كود يقرأ عناوين شريط الإدارة عبر get_node.
اختبر على Staging
أنظمة الألوان، hover، القائمة المطوية، الجوال والعربية.
طبّق صيغة After
تعمل على 7.2 والإصدارات الأقدم معاً.
- ابحث في ملفات CSS الخاصة بإضافاتك وقوالبك عن
wp-menu-image::beforeوab-icon::beforeوab-item::beforeو#adminbarsearch::beforeوblavatar::beforeوdashicons-داخل#adminmenu. - ابحث في PHP عن
ab-iconداخل أي كود يقرأ عناوين عناصر شريط الإدارة. - ثبّت آخر نسخة بيتا أو RC على بيئة اختبار، وفعّل كل نظام ألوان تسجّله إضافتك، وجرّب حالات hover والقائمة المطوية وعرض الجوال.
- طبّق صيغ «After» أعلاه؛ فهي تعمل على الإصدارين معاً، فلا تحتاج إلى نسختين من الإضافة.
- للعملاء: راجع أي تخصيص White Label للوحة التحكم، خصوصاً شعار الشركة في شريط الإدارة، قبل تفعيل التحديث التلقائي للإصدارات الكبرى.
ملاحظة: لوحة التحكم العربية تعمل باتجاه RTL، وملاحظة المطورين لا تذكر شيئاً خاصاً بها. لذلك أضف عرض لوحة التحكم بالعربية إلى قائمة الاختبار في الخطوة 3، ولا تفترض أن النتيجة مطابقة للنسخة الإنجليزية.
اقرأ أيضًا
الأسئلة الشائعة
س: هل سيتوقف خط Dashicons عن العمل في ووردبريس 7.2؟
ج: لا. ما تغيّر هو طريقة عرض أيقونات النواة في القائمة الجانبية وشريط الإدارة. قيم dashicons-* التي تسجّلها إضافتك ما زالت مقبولة، وتُعرض كما كانت أو بمقابلها SVG إن وُجد.
س: متى يصدر ووردبريس 7.2؟
ج: الموعد المقرر في جدول الإصدار الرسمي هو 8 ديسمبر 2026، بعد ثلاثة مرشحين للإصدار أولها في 17 نوفمبر. المواعيد قابلة للتغيير، فتابع صفحة الإصدار على Make WordPress Core.
س: كيف أعرف إن كانت إضافتي متأثرة بتغيير الأيقونات؟
ج: إذا كانت لا تعدّل أيقونات النواة عبر CSS ولا تسجّل نظام ألوان ولا تقرأ عناوين عناصر شريط الإدارة، فغالباً لا تحتاج شيئاً. غير ذلك، ابحث عن المحددات المذكورة في خطة الفحص أعلاه.
س: هل يمكنني استخدام أيقونة SVG خاصة بي في قائمة إضافتي؟
ج: نعم. سجّل مجموعة أيقونات بـ wp_register_icon_collection() ثم الأيقونة بـ wp_register_icon()، ومرّر اسمها إلى add_menu_page() أو وسيط icon في add_node()، مع شرط function_exists لدعم الإصدارات الأقدم.
س: ما الفرق بين مجموعتي core و core-admin؟
ج: core-admin مخصصة لأيقونات لوحة التحكم وأسماؤها ثابتة لا تُحذف. أما core فمخصصة للواجهة والمحتوى وبلوك Icon، وقد تلغي بعض الإضافات تسجيلها، فلا تعتمد عليها في لوحة التحكم.
الخلاصة
أيقونات ووردبريس 7.2 أصبحت SVG مضمّنة، وأغلب الإضافات لن تشعر بالفرق. المتأثر هو كود CSS الذي يلوّن أو يخفي أو يستبدل أيقونات النواة عبر ::before، وأنظمة الألوان، والكود الذي يبحث عن span فارغ في شريط الإدارة. وكل الإصلاحات المذكورة تعمل على الإصدارين القديم والجديد.
افتح بيئة الاختبار النهارده ودوّر على ::before في ملفات CSS بتاعتك، وقبل 8 ديسمبر هتكون مطمّن إن لوحات تحكم عملائك مش هتتفاجئ بأيقونة ناقصة.
مراجع إضافية: WordPress 7.2 – Make WordPress Core، Test Scrub Schedule for WordPress 7.2
مرجع المقال (بالإنجليزية): SVG icons in the admin bar and menu in WordPress 7.2
المقال ده مش ترجمة حرفية: متكيّف للقارئ العربي ومضاف عليه سياق ووردبريس وElementor وJetEngine.


