يحدث ذلك للجميع.

تجد موضوعًا يعجبك ، وتقوم بتثبيته وتقضي بضعة أشهر في الاستمتاع بمظهر موقعك. ولكن بعد ذلك ، بعد بضعة أشهر ، بدأت الفكرة تبدو قديمة. مملة بعض الشيء.

المشكلة الوحيدة هي أنك لا تريد قضاء بضع ساعات في البحث عن شيء جديد. إذا كان هناك فقط طريقة لإضافة القليل من البهارات إلى موضوعك ، القليل من التوهج لإبرازه.

قبل أن ترفع يديك في حالة من اليأس ، دعني أوضح لك طريقة سهلة لإضفاء لمسة مميزة على مظهرك. المظهر دون بذل الكثير من الجهد ، وبدون إضافة صور غير ضرورية يمكن أن تبطئ موقعك.

أدخل Dashicons. Dashicons هي أيقونات خطوط تم تقديمها في WordPress 3.8. إنها تلك الرموز الرائعة والرائعة التي تراها عند تسجيل الدخول إلى لوحة القيادة الخاصة بك. ألن يكون رائعًا إذا كان بإمكانك إضافتها إلى قالبك أيضًا؟

حسنًا ، يمكنك وسأوضح لك كيف.

كيف يمكنك استخدام Dashicons في قائمة التنقل؟

لنبدأ بمثال بسيط. تم تضمين Dashicons بالفعل في WordPress منذ الإصدار 3.8 ولكنك لا تزال بحاجة إلى تضمينها حتى يتم عرضها بشكل صحيح في الواجهة الأمامية لموقعك ؛ هذا هو المظهر الخاص بك.

الخطوة 1: اجعل مظهر Dashicons الخاص بك جاهزًا

لجعل Dashicons السمة الخاصة بك جاهزة ، افتح أولاً ملف jobs.php (الموجود في Appearance & gt ؛ محرر - سيفتح افتراضيًا ملف CSS لموضوعك الحالي. انطلق وابحث عنوظائف.php وانقر فوقه لتحميله في المحرر.)

الخطوة 2: قم بإدراج البرنامج النصي في قائمة الانتظار

قم بالتمرير حتى النهاية والصق هذه الأسطر من الكود في النهاية:

//Enqueue the Dashicons script add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' ); function load_dashicons_front_end() { wp_enqueue_style( 'dashicons' ); }

حسنًا! الآن المظهر الخاص بك جاهز لاستخدام Dashicons.

الخطوة 3: إضافة Dashicons إلى عناصر القائمة

دعنا نضيف Dashicon لرابط الصفحة الرئيسية. توجه إلى موقع Dashicons على الويب وحدد الرمز الذي تريده.

تحديث: كانت Dashicons متاحة في الأصل على GitHub.io ، لكنها أصبحت متاحة منذ ذلك الحين على WordPress.org.

الخطوة 4:

انقر فوق الرمز المطلوب (في هذه الحالة قمت بتحديد رمز الصفحة الرئيسية) ثم انقر فوق نسخ HTML. سيعطيك نافذة منبثقة تحتوي على الكود الذي تحتاجه.

الخطوة 5:

ارجع إلى لوحة معلومات WordPress الخاصة بك ، وانقر على Appearance & gt ؛ القوائم والصق الكود في المكان الذي يقول "تسمية التنقل".

إذا كنت لا تزال تريد ظهور الكلمة ، فاكتبها بعد قوس الإغلاق.

انقر فوق حفظ وتحميل الصفحة الرئيسية الخاصة بك. يجب أن يعرض رابط الصفحة الرئيسية الآن رمز Dashicon لطيفًا ونقيًا.

يمكنك القيام بذلك لجميع عناصر قائمة التنقل أو للمنزل فقط. فقط كرر الخطوات المذكورة أعلاه مع الرموز المتطابقة. كان ذلك سهلاً ، أليس كذلك؟

كيف تستخدم Dashicons في نشر التعريف؟

يمكنك المضي قدمًا وإضافة Dashicons إلى meta المنشور ، أو بعبارة أخرى إضافة Dashicons أمام المؤلف الاسم أو التاريخ أو الفئة أو العلامة ؛ .اعتمادا عليالموضوع الخاص بك والمعلومات التي يعرضها.

نظرًا لأنك قمت بالفعل بإدراج Dashicons في قالبك ، كل ما عليك فعله الآن هو فتح ملف style.css (أو استخدام محرر CSS المخصص الذي يعد دائمًا خيارًا أفضل لا تفقد التغييرات بمجرد تحديث السمة الخاصة بك!) ، ابحث عن المحدد المطابق وأضف رمز CSS.

لنفترض أنك تريد إضافة رمز أمام اسمك أو اسم مؤلفك.

الخطوة 1:

أولاً سنختار رمزًا نريده.

الخطوة 2:

ثم اضغط عليها ، وهذه المرة اختر Copy CSS. مرة أخرى ، ستعطيك نافذة منبثقة تحتوي على الكود الذي تريد لصقه.

الخطوة 3:

الآن افتح style.css وابحث عن المحدد المقابل ، في هذه الحالة - .entry-author. من خلال إضافة: قبل ثم لصق رمز CSS الذي نسخته من موقع Dashicons ، سيكون لاسم المؤلف رمزًا رائعًا أمامه. تحتاج أيضًا إلى تحديد أنك تستخدم خط Dashicons. تبدو الشفرة المعدلة كما يلي:

.entry-author:before { font-family: "dashicons"; content: "\f110"; }

دعنا نضيف القليل من التصميم أيضًا ، والآن تبدو الشفرة المكتملة كما يلي:

.entry-author:before { font-family: "dashicons"; content: "\f110"; color: #f15123; display: inline-block; -webkit-font-smoothing: antialiased; font: normal 20px/1; vertical-align: top; margin-right: 5px; margin-right: 0.5rem; } 

النتيجة النهائية

إذن ماذا هل سيبدو هذا في النهاية؟

شيء من هذا القبيل:

هناك العديد من الطرق التي يمكنك من خلالها استخدام Dashicons - دع إبداعك يترسخ وشاهد ما يمكنك فعله.

وضع كل شيء معًا

بصرف النظر عن الأمثلة المذكورة أعلاه ، يمكنك استخدام Dashicons في الواجهة الخلفية الخاصة بك لتحديد مختلفأيقونات لأنواع منشورات مختلفة ، أو يمكنك استخدامها في عناوين منشوراتك ، أو عناوين عناصر واجهة المستخدم ، أو إذا كنت تقوم بإنشاء صفحة مقصودة مخصصة ، يمكنك التمييز بين الصفحات المختلفة لموقعك.

إليك مثال أساسي لما يمكنك استخدامها لإنشاء: