هل تريد إضافة أيقونات صور إلى قوائم التنقل في WordPress الخاصة بك؟
يمكن أن تساعد الصور الزائرين على فهم التنقل في موقعك في لمح البصر. يمكنك حتى استخدام الرموز لتسليط الضوء على المحتوى الأكثر أهمية في القائمة أو العبارة التي تحث المستخدم على اتخاذ إجراء.
في هذه المقالة ، سنوضح لك كيفية إضافة أيقونات الصور إلى قوائم التنقل في WordPress.
لماذا تضيف أيقونات الصور مع قوائم التنقل في WordPress؟
عادة ما تكون قوائم التنقل في WordPress عبارة عن روابط نصية عادية. تعمل هذه الروابط مع معظم مواقع الويب ، لكنها لا تبدو دائما مثيرة للاهتمام أو جذابة.
من خلال إضافة أيقونات الصور إلى قائمة التنقل ، يمكنك تشجيع الزوار على الانتباه إلى القائمة واستكشاف المزيد من موقعك.
إذا كانت قائمتك تحتوي على الكثير من الخيارات المختلفة ، فيمكن لأيقونات الصور أن تسهل على الزوار مسح المحتوى والعثور على ما يبحثون عنه. يمكن أن تكون هذه طريقة سهلة لزيادة مشاهدات الصفحة وتقليل معدل الارتداد في WordPress.
يمكنك حتى استخدام رمز صورة لتسليط الضوء على عنصر القائمة الأكثر أهمية ، مثل رابط الخروج في متجر عبر الإنترنت.
من خلال تمييز عبارة تحث المستخدم على اتخاذ إجراء في شريط القائمة ، يمكنك غالبا الحصول على المزيد من الاشتراكات والمبيعات والأعضاء والتحويلات الأخرى.
مع ما يقال ، دعنا نرى كيف يمكنك إضافة أيقونات الصور إلى قائمة التنقل في WordPress الخاصة بك. ما عليك سوى استخدام الروابط السريعة أدناه للانتقال مباشرة إلى الطريقة التي تريد استخدامها.
الطريقة 1: إضافة أيقونات الصور إلى قوائم التنقل باستخدام إضافة (سريع وسهل)
أسهل طريقة لإضافة أيقونات الصور إلى قوائم WordPress الخاصة بك هي استخدام الإضافة Menu Image. تأتي هذه الإضافة مع رموز dashicon التي يمكنك إضافتها ببضع نقرات فقط.
إذا قمت بإضافة أيقونات Font Awesome إلى موقع الويب الخاص بك ، فيمكنك استخدامها مع هذه الإضافة المجانية.
إذا كنت ترغب في استخدام ملفات الرموز الخاصة بك ، فإن Menu Image تتيح لك أيضا تحديد صورة أو رمز من مكتبة وسائط WordPress.
أول شيء عليك القيام به هو تثبيت وتفعيل الإضافة Menu Image. لمزيد من التفاصيل ، راجع دليلنا خطوة بخطوة حول كيفية تثبيت اضافة WordPress .
عند التنشيط ، انقر فوق صورة القائمة في لوحة معلومات WordPress. في هذه الشاشة ، يمكنك اختيار ما إذا كنت تريد الحصول على إشعارات الأمان والميزات أو النقر فوق الزر “تخطي”.
سينقلك هذا إلى شاشة حيث يمكنك تكوين إعدادات الإضافة. للبدء، سترى جميع الأحجام المختلفة التي يمكنك استخدامها لأيقونات الصور.
إذا كنت تخطط لاستخدام الرموز من Font Awesome أو dashicons ، فستقوم Menu Image بتغيير حجمها تلقائيا. ومع ذلك ، إذا كنت تستخدم صورا من مكتبة الوسائط ، فستحتاج إلى تحديد الحجم يدويا.
يدعم الإضافة أحجام صور WordPress الافتراضية ، مثل الصورة المصغرة والصورة والكبيرة. كما يضيف ثلاثة أحجام فريدة يتم تعيينها على 24×24 و 36×36 و 48×48 بكسل افتراضيا.
يجب أن تعمل هذه الإعدادات بشكل جيد لمعظم مواقع الويب ، ولكن يمكنك جعل الرموز أكبر أو أصغر عن طريق كتابة أرقام مختلفة لحجم صورة القائمة 1st أو 2nd أو 3rd.
عند إضافة رموز إلى قائمتك ، سترى حقل “صورة عند التحويم” افتراضيا. يتيح لك ذلك إظهار رمز مختلف عندما يحوم الزائر فوق عنصر القائمة هذا.
فقط كن على علم بأن هذا الإعداد متاح فقط عند استخدام صورك الخاصة. لا داعي للقلق بشأن ميزة “الصورة عند التحويم” إذا كنت تخطط لاستخدام dashicons أو أيقونات Font Awesome.
يمكن أن يساعد عرض رمز مختلف الزوار في معرفة مكانهم في قائمة التنقل. هذا مفيد بشكل خاص إذا كانت القائمة تحتوي على الكثير من العناصر المختلفة. على سبيل المثال، يمكنك استخدام ألوان أو أحجام أيقونات مختلفة لتمييز عنصر القائمة المحدد حاليا.
إذا كنت ترغب في تجربة تأثيرات تحوم مختلفة ، فتأكد من تحديد “تمكين الصورة في حقل التمرير”.
مع القيام بذلك ، انقر فوق “حفظ التغييرات” لتخزين إعداداتك.
لإضافة أيقونات إلى قائمة التنقل ، توجه إلى المظهر »القوائم. بشكل افتراضي ، سيعرض WordPress القائمة الأساسية لموقعك.
إذا كنت ترغب في تعديل قائمة مختلفة ، فما عليك سوى فتح القائمة المنسدلة “تحديد قائمة لتعديلها” واختيار قائمة من القائمة. بعد ذلك ، انقر فوق “تحديد”.
الآن ، ابحث عن عنصر القائمة الأول حيث تريد إضافة رمز ونقرة عليه. بعد ذلك ، ما عليك سوى تحديد الزر الجديد “إضافة صورة / رمز”.
يمكنك الآن تحديد ما إذا كنت تريد استخدام صورتك الخاصة أو اختيار رمز.
لاستخدام رمز جاهز ، انقر فوق زر الاختيار بجوار “الرموز”. يمكنك بعد ذلك النقر لتحديد أي داشيكون أو رمز الخط الرائع.
هل تريد استخدام صورك الخاصة بدلا من ذلك؟
ثم حدد زر الاختيار بجوار “صورة” وانقر على رابط “تعيين الصورة”.
يمكنك الآن إما اختيار صورة من مكتبة وسائط WordPress أو تحميل ملف جديد من جهاز الكمبيوتر الخاص بك.
إذا حددت “تمكين الصورة في حقل التحويم” في إعدادات الإضافة ، فستحتاج أيضا إلى النقر فوق “تعيين الصورة عند التمرير”.
الآن ، اختر صورة لإظهارها عندما يحوم المستخدم فوق عنصر القائمة هذا.
في بعض الأحيان ، قد ترغب في تجاهل هذا الإعداد وإظهار نفس الرمز بغض النظر عن السبب. للقيام بذلك ، انقر فوق “تعيين الصورة عند التحويم” ثم اختر نفس الصورة بالضبط.
إذا لم تقم بذلك ، فسيختفي الرمز عندما يحوم الزائر فوقه.
بعد ذلك ، افتح ملف حجم الصورة القائمة المنسدلة واختر حجما من القائمة. يؤدي استخدام نفس الحجم لجميع الرموز إلى جعل القائمة تبدو أكثر تنظيما.
ومع ذلك ، يمكنك تكبير رمز القائمة الأكثر أهمية. على سبيل المثال ، إذا قمت بإنشاء متجر على الإنترنت باستخدام إضافة مثل WooCommerce ، فيمكنك استخدام رمز أكبر ل “Checkout” حتى يبرز.
عندما تكون راضيا عن الرمز ، فقد حان الوقت لإلقاء نظرة على تسمية عنصر القائمة.
بشكل افتراضي ، تعرض الإضافة تسمية العنوان بعد الرمز.
لتغيير هذا ، حدد أيا من أزرار الاختيار في قسم “موضع العنوان”.
خيار آخر هو إزالة تسمية التنقل تماما ، وإنشاء قائمة أيقونات فقط. هذا يمكن أن يمنع القائمة التي تحتوي على الكثير من العناصر من الظهور بشكل فوضوي.
ومع ذلك ، يجب عليك إخفاء التسميات فقط إذا كان من الواضح ما يعنيه كل رمز. إذا كان الأمر غير واضح ، فسيواجه الزوار صعوبة في التنقل في مدونة WordPress أو موقع الويب الخاص بك.
للمضي قدما وإخفاء الملصق ، حدد زر الاختيار بجوار “بلا”.
عندما تكون راضيا عن كيفية إعداد عنصر القائمة ، انقر فوق “حفظ التغييرات”.
لإضافة رمز إلى عناصر القائمة الأخرى ، ما عليك سوى اتباع نفس العملية الموضحة أعلاه.
عند الانتهاء ، لا تنس النقر فوق الزر “حفظ القائمة”. الآن ، إذا قمت بزيارة موقع الويب الخاص بك ، فسترى قائمة التنقل المحدثة مباشرة.
الطريقة 2: إضافة أيقونات إلى قوائم WordPress باستخدام التعليمات البرمجية (أكثر قابلية للتخصيص)
يمكنك أيضا إضافة أيقونات صور إلى قوائم التنقل باستخدام CSS مخصص. يمنحك هذا مزيدا من المرونة للتحكم بالضبط في مكان ظهور الرموز في قوائمك.
ومع ذلك ، فإنه يتطلب منك إضافة كود مخصص في WordPress ، لذلك يوصى به لمستخدمي WordPress المتوسطين أو المتقدمين.
قبل أن تبدأ ، امض قدما وقم بتحميل جميع ملفات الصور الخاصة بك إلى مكتبة وسائط WordPress. لكل صورة ، تأكد من نسخ عنوان URL الخاص بها ولصقه في محرر نصوص مثل Notepad. ستحتاج إلى استخدام الروابط الموجودة في التعليمات البرمجية الخاصة بك ، لذلك يمكن أن يوفر لك ذلك الكثير من الوقت.
للعثور على عنوان URL للصورة ، ما عليك سوى تحديده في مكتبة وسائط WordPress ثم إلقاء نظرة على حقل “عنوان URL للملف”.
بعد ذلك ، انتقل إلى المظهر »القوائم.
بعد ذلك ، افتح القائمة المنسدلة “تحديد قائمة لتحريرها” واختر القائمة التي تريد إضافة رموز الصور إليها.
، امض قدما وانقر على “تحديد”.
بعد ذلك ، تحتاج إلى تمكين فئات CSS المخصصة بالنقر فوق “خيارات الشاشة”.
في اللوحة التي تظهر ، حدد المربع بجوار “فئات CSS”.
مع القيام بذلك ، يمكنك إضافة فئات CSS مخصصة إلى أي عنصر في قائمة التنقل. هذه هي الطريقة التي ستربط بها كل عنصر قائمة بصورة في مكتبة وسائط WordPress.
يمكنك تسمية هذه الفئات بأي شيء تريده ، ولكن من الجيد استخدام شيء يساعدك في تحديد عنصر القائمة.
للبدء ، ما عليك سوى النقر فوق العنصر الأول الذي تريد إضافة رمز صورة إليه. في حقل “فئات CSS (اختياري)” ، اكتب اسم الفصل الذي تريد استخدامه.
ستستخدم فئات CSS المخصصة هذه في الخطوة التالية ، لذا قم بتدوينها في Notepad أو تطبيق مشابه.
ما عليك سوى اتباع نفس العملية لإضافة فئة منفصلة إلى جميع عناصر القائمة الخاصة بك. بعد ذلك ، انقر فوق “حفظ القائمة” لتخزين إعداداتك.
ملاحظه: سيتم ربط كل رمز بفئة CSS الخاصة به ، لذا تأكد من تسمية عناصر القائمة بشكل مختلف إذا كنت تريد استخدام رموز منفصلة.
أنت الآن جاهز لإضافة أيقونات الصور إلى قوائم التنقل في WordPress باستخدام CSS.
في كثير من الأحيان ، ستخبرك دروس WordPress التعليمية بإضافة مقتطفات التعليمات البرمجية إلى ملفات قالب WordPress الخاصة بك. ومع ذلك ، قد يؤدي القيام بذلك إلى حدوث أخطاء WordPress شائعة وليس مناسبا جدا للمبتدئين.
لهذا السبب نوصي باستخدام WPCode.
WPCode هي الإضافة الأكثر شيوعا لمقتطفات التعليمات البرمجية الذي يستخدمه أكثر من 1 مليون موقع WordPress. يسمح لك بإضافة رمز مخصص دون تحرير وظائف المظهر الخاص بك .php الملف.
أول شيء عليك القيام به هو تثبيت وتفعيل الإضافة WPCode المجانية.
عند التنشيط ، توجه إلى مقتطفات الشفرة »إضافة مقتطف.
هنا ، ما عليك سوى تحريك مؤشر الماوس فوق “أضف الرمز المخصص الخاص بك”.
عندما يظهر ، انقر فوق “استخدام المقتطف”.
للبدء، اكتب عنوانا لمقتطف الشفرة المخصص. يمكن أن يكون هذا أي شيء يساعدك في تحديد المقتطف في لوحة معلومات WordPress.
مع القيام بذلك ، افتح القائمة المنسدلة “نوع الرمز” وحدد “مقتطف CSS”.
في محرر التعليمات البرمجية ، ستحتاج إلى إضافة بعض التعليمات البرمجية لكل رمز تريد إظهاره.
لمساعدتك، أنشأنا عينة مقتطف أدناه. يمكنك المضي قدما وتغيير “.carticon” إلى فئة CSS المخصصة التي أنشأتها في الخطوة السابقة. ستحتاج أيضا إلى استبدال عنوان URL برابط إلى الصورة في مكتبة وسائط WordPress الخاصة بك:
|
1
2
3
4
5
6
|
.carticon {background-image: url('http://localhost:10013/wp-content/my-media/cartcheckout.png');background-repeat: no-repeat;background-position: left;padding-left: 5px;} |
ملاحظه: ستحتاج إلى الاحتفاظ بالنقطة “.” أمام فئة CSS في مقتطف الشفرة. هذا ما يخبر WordPress أنه فئة وليس نوعا آخر من محدد CSS.
ستحتاج إلى ضبط المقتطف أعلاه لكل عنصر قائمة فردي أنشأته أعلاه. يمكنك ببساطة لصقها جميعا في حقل “معاينة الكود”.
عندما تكون راضيا عن شفرتك، مرر إلى قسم “الإدراج”. يمكن ل WPCode إضافة رمز إلى مواقع مختلفة ، مثل بعد كل منشور أو الواجهة الأمامية فقط أو المسؤول فقط.
تريد استخدام رمز CSS المخصص عبر موقع WordPress بالكامل ، لذا انقر فوق “إدراج تلقائي” إذا لم يكن محددا بالفعل.
ثم افتح القائمة المنسدلة “الموقع” واختر “رأس الموقع على نطاق واسع”.
بعد ذلك ، تكون جاهزا للتمرير إلى أعلى الشاشة والنقر فوق مفتاح التبديل “غير نشط” ، بحيث يتغير إلى “نشط”.
أخيرا ، انقر فوق “حفظ المقتطف” لجعل CSS المخصص مباشرا.
الآن ، إذا قمت بزيارة موقع الويب الخاص بك ، فسترى جميع أيقونات الصور في قائمة التنقل الخاصة بك.
اعتمادا على المظهر الخاص بك ، قد تحتاج إلى تعديل CSS بحيث يعرض أيقونات الصور في المكان الصحيح تماما. إذا كانت هذه هي الحالة ، فتوجه إلى مقتطفات التعليمات البرمجية »مقتطفات التعليمات البرمجية في لوحة معلومات WordPress.
بعد ذلك ، ما عليك سوى التمرير فوق المقتطف والنقر على رابط “تعديل” عند ظهوره.
يؤدي هذا إلى فتح محرر التعليمات البرمجية ، وهو جاهز لإجراء بعض التغييرات.
نأمل أن تساعدك هذه المقالة في تعلم كيفية إضافة أيقونات الصور إلى قائمة التنقل في WordPress.