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

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

في هذه المقالة، سنوضح لك كيفية إضافة أيقونات الصور بسهولة إلى ووردبريس في قوائم التنقل.

لماذا إضافة أيقونات الصور مع ووردبريس في قوائم التنقل؟

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

من خلال إضافة أيقونات الصور إلى قائمة التنقل، يمكنك تشجيع الزوار على الانتباه إلى القائمة واستكشاف المزيد من موقعك.

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

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

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

مع ذلك، دعنا نرى كيف يمكنك إضافة أيقونات الصور إلى ووردبريس على قائمة التنقل الخاصة بك.

الطريقة 1: إضافة أيقونات الصور إلى قوائم التنقل باستخدام اضافة (سريع وسهل)

الطريقة الأسهل لإضافة أيقونات إلى قوائم ووردبريس الخاصة بك هي استخدام Menu Image. تأتي هذه الاضافة مع أيقونات dashIcon التي يمكنك إضافتها ببضع نقرات فقط.

إذا قمت بإعداد Font Awesome على الموقع الكتروني الخاص بك، فيمكنك بسهولة إضافة هذه الأيقونات إلى قائمة التنقل الخاصة بك باستخدام Menu Image. لمزيد من المعلومات حول كيفية تثبيت Font Awesome، راجع دليلنا حول كيفية إضافة خطوط الأيقونات بسهولة إلى قالب ووردبريس الخاصة بك.

خيار آخر هو استخدام الصور أو الأيقونات من مكتبة الوسائط ووردبريس.

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

عند التنشيط، انقر فوق Menu Image في لوحة تحكم ووردبريس. على هذه الشاشة، يمكنك اختيار ما إذا كنت تريد الحصول على إشعارات الأمان والميزات أو النقر فوق الزر “Skip”.

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

إذا كنت تخطط لاستخدام أيقونات من Font Awesome أو dashicons، فسوف يقوم Menu Image بتغيير حجمها تلقائيًا. ومع ذلك، إذا كنت تستخدم صورًا من مكتبة الوسائط، فستحتاج إلى تحديد الحجم يدويًا.

تدعم الاضافة أحجام الصور الافتراضية في ووردبريس، مثل الصور المصغرة والصور والكبيرة. كما يضيف ثلاثة أحجام فريدة يتم ضبطها على 24×24 و36×36 و48×48 بكسل افتراضيًا.

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

عند إضافة الأيقونات إلى القائمة، سترى حقل “image on hover” افتراضيًا. يتيح لك هذا عرض ايقونة مختلفة عندما يحرك الزائر المؤشر فوق عنصر القائمة هذا.

فقط كن على علم بأن هذا الإعداد متاح فقط عند استخدام صورك الخاصة. لست بحاجة إلى القلق بشأن ميزة “image on hover” إذا كنت تخطط لاستخدام dashIcons أو أيقونات Font Awesome.

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

إذا كنت تريد إنشاء تأثيرات تحريك مختلفة، فتأكد من تحديد “Enable the image on hover field”.

بمجرد الانتهاء من ذلك، انقر فوق “حفظ التغييرات” لتخزين إعداداتك.

لإضافة أيقونات إلى قائمة التنقل، توجه إلى صفحة المظهر » القوائم. بشكل افتراضي، سيعرض ووردبريس القائمة الأساسية لموقعك.

إذا كنت تريد تحرير قائمة مختلفة، فما عليك سوى فتح القائمة المنسدلة “اختر قائمة لتحريرها” واختيار قائمة من القائمة. بعد ذلك، انقر فوق “تحديد”.

الآن، مرر الماوس فوق أول عنصر في القائمة حيث تريد إضافة أيقونة. عندما تظهر “Menu Image”، انقر عليها.

يمكنك الآن تحديد ما إذا كنت تريد استخدام صورتك الخاصة أو اختيار أيقونة جاهزة، مثل أيقونة Font Awesome.

لاستخدام أيقونة جاهزة، انقر فوق زر الاختيار بجوار “Icon”.

يمكنك بعد ذلك النقر لتحديد أي dashicon أو أيقونة Font Awesome.

إذا كنت تريد استخدام صورتك الخاصة، فحدد زر الاختيار بجوار “Image” وانقر على رابط “Set Image”.

يمكنك الآن إما اختيار صورة من مكتبة الوسائط الخاصة بـ ووردبريس أو تحميل ملف جديد من جهاز الكمبيوتر الخاص بك.

إذا قمت بتحديد “Enable the image on hover field” في إعدادات الاضافة، فستحتاج أيضًا إلى النقر فوق “Set image on hover”.

الآن، اختر صورة لعرضها عندما يحوم المستخدم فوق عنصر القائمة هذا.

في بعض الأحيان، قد ترغب في تجاهل هذا الإعداد وإظهار نفس الايقونة مهما كان الأمر. للقيام بذلك، انقر فوق “Set image on hover” ثم اختر نفس الايقونة بالضبط.

إذا لم تحدد صورة، فسوف تختفي الايقونة تمامًا عندما يحوم الزائر فوقها.

بعد ذلك، افتح القائمة المنسدلة حجم الصورة واختر حجمًا من القائمة.

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

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

عندما تكون راضيًا عن الأيقونة، فقد حان الوقت لإلقاء نظرة على تسمية عنصر القائمة. بشكل افتراضي، تعرض الأصافة تسمية العنوان بعد الأيقونة.

لتغيير ذلك، حدد أيًا من أزرار الاختيار في قسم “موضع العنوان”.

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

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

للمضي قدمًا وإخفاء العلامة، حدد زر الاختيار بجوار “Hide”.

عندما تكون راضيًا عن كيفية إعداد عنصر القائمة، انقر فوق “حفظ التغييرات”.

لإضافة أيقونة إلى عناصر قائمة أخرى، ما عليك سوى اتباع نفس العملية الموضحة أعلاه.

عند الانتهاء، لا تنس النقر فوق الزر “حفظ القائمة”. الآن، إذا قمت بزيارة موقع ووردبريس الخاص بك، فسترى قائمة التنقل المحدثة مباشرة.

الطريقة 2: إضافة أيقونات إلى قوائم ووردبريس باستخدام الكود (أكثر قابلية للتخصيص)

يمكنك أيضًا إضافة أيقونات الصور إلى قوائم التنقل الخاصة بك باستخدام CSS.

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

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

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

للعثور على عنوان URL للصورة، ما عليك سوى تحديدها في مكتبة الوسائط في ووردبريس ثم إلقاء نظرة على حقل “عنوان URL للملف”.

للحصول على تعليمات أكثر تفصيلاً، يرجى الاطلاع على دليلنا حول كيفية الحصول على عنوان URL للصور التي تقوم بتحميلها في ووردبريس.

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

بًعد ذلك، افتح القائمة المنسدلة “تحديد قائمة لتحريرها” واختر القائمة التي تريد إضافة أيقونات الصور إليها.

بعد ذلك، انقر فوق “تحديد”.

بعد ذلك، ستحتاج إلى تمكين فئات CSS المخصصة بالنقر فوق “خيارات الشاشة”.

في اللوحة التي تظهر، حدد المربع بجوار “CSS Classes (الفئات)”.

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

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

للبدء، ما عليك سوى النقر فوق العنصر الأول الذي تريد إضافة أيقونة صورة إليه. في حقل “‘CSS Classes (اختياري)’”، اكتب اسم الفئة التي تريد استخدامها.

ستستخدم فئات CSS المخصصة هذه في الخطوة التالية، لذا دونها في المفكرة أو تطبيق مماثل.

ما عليك سوى اتباع نفس العملية لإضافة فئة منفصلة إلى جميع عناصر القائمة. بعد ذلك، انقر فوق “حفظ القائمة” لتخزين إعداداتك.

الآن أنت جاهز لإضافة أيقونات الصور إلى قوائم التنقل في ووردبريس باستخدام CSS.

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

لهذا السبب نوصي باستخدام WPCode.

إنه أفضل اضافة لمقتطفات الكود في ووردبريس يستخدمه أكثر من مليون موقع الكتروني ويسمح لك بإضافة تعليمات برمجية مخصصة دون تعديل ملف functions.php الخاص بقالب ووردبريس الخاص بك.

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

عند التنشيط، توجه إلى Code Snippets » Add Snippet.

سيؤدي هذا إلى نقلك إلى صفحة “Add Snippet”، حيث يمكنك رؤية مكتبة WPCode من المقتطفات الجاهزة. تتضمن هذه المقتطفات التي تسمح لك بتحسين أمان ووردبريس الخاص بك عن طريق تعطيل XML-RPC، وتحميل أنواع الملفات التي لا يدعمها ووردبريس افتراضيًا، والمزيد.

ما عليك سوى تحريك الماوس فوق “Add Your Custom Code” ثم النقر فوق “Use snippet” عندما يظهر.

للبدء، اكتب عنوان لمقتطف الكود المخصص. يمكن أن يكون هذا أي شيء يساعدك في تحديد المقتطف في لوحة تحكم ووردبريس.

بعد الانتهاء من ذلك، افتح القائمة المنسدلة “Code Type” وحدد “CSS Snippet”.

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

لمساعدتك، قمنا بإنشاء مقتطف عينة أدناه. يمكنك المضي قدمًا وتغيير “.carticon” إلى فئة CSS المخصصة التي أنشأتها في الخطوة السابقة. ستحتاج أيضًا إلى استبدال عنوان URL برابط للصورة في مكتبة الوسائط الخاصة بك على ووردبريس:

.carticon {
background-image: url('http://localhost/wordpress/wp-content/my-media/cartcheckout.png');
background-repeat: no-repeat;
background-position: left;
padding-left: 5px;
}

ملاحظة مهمة: ستحتاج إلى إبقاء النقطة “.” أمام فئة CSS في مقتطف الكود. هذا ما يخبر ووردبريس بأنها فئة وليست نوعًا آخر من محددات CSS.

سوف تحتاج إلى تعديل المقطع أعلاه لكل عنصر قائمة فردي أنشأته أعلاه.

عندما تكون راضيًا عن الكود الخاص بك، انتقل إلى قسم “Insertion”. يمكن لاضافة WPCode إضافة الكود إلى مواقع مختلفة، مثل بعد كل منشور، أو واجهة المستخدم فقط، أو المسؤول فقط.

لاستخدام كود CSS المخصص عبر مدونتك أو موقع الويب الخاص بك على ووردبريس بالكامل، انقر فوق “Auto Insert” إذا لم يكن محددًا بالفعل.

ثم، افتح القائمة المنسدلة “Location” واختر “Site Wide Header”.

بعد ذلك، تكون جاهزًا للتمرير إلى أعلى الشاشة والنقر فوق مفتاح التبديل “Inactive” حتى يتغير إلى “Active”.

وأخيرًا، انقر فوق “Save Snippet” لجعل CSS المخصص نشطًا.

الآن، إذا قمت بزيارة الموقع الكتروني الخاص بك، فسترى جميع أيقونات الصور في قائمة التنقل الخاصة بك.

اعتمادًا على قالب ووردبريس الخاص بك، قد تحتاج إلى تعديل CSS بحيث تظهر أيقونات الصور في المكان الصحيح تمامًا. إذا كانت هذه هي الحالة، فانتقل إلى Code Snippets » Code Snippets في لوحة تحكم ووردبريس.

ثم، ما عليك سوى تحريك المؤشر فوق المقتطف والنقر فوق رابط “Edit” عندما يظهر.

سيؤدي هذا إلى فتح محرر الكود، والذي سيكون جاهزًا لإجراء بعض التغييرات.

مكافأة: إضافة أيقونات الوسائط الاجتماعية إلى قوائم ووردبريس

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

للقيام بذلك، يمكنك استخدام اضافة Menu Image. عند التنشيط، ما عليك سوى زيارة صفحة المظهر » القوائم من لوحة تحكم ووردبريس وتوسيع علامة التبويب “روابط مخصصة” في العمود الأيمن.

ثم أضف عنوان URL لمعرف الوسائط الاجتماعية الخاص بك واكتب اسم المنصة. بعد ذلك، انقر فوق الزر “إضافة إلى القائمة”.

بمجرد إضافة ملف تعريف الوسائط الاجتماعية كعنصر قائمة، سيتم عرضه على الجانب الأيمن من الشاشة.

هنا، يجب عليك توسيع علامة تبويب العناصر مرة أخرى والنقر فوق الزر “Menu Image”.

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

إذا كنت تريد إضافة أيقونة جاهزة، فيمكنك تحديد خيار “Icon” وإضافة أيقونة الوسائط الاجتماعية الخاصة بك من FontAwesome.

أخيرًا، انقر على زر “حفظ التغييرات” لتخزين إعداداتك.

لقد نجحت الآن في إضافة أيقونة وسائط اجتماعية إلى قائمة التنقل الخاصة بك. لمزيد من المعلومات، راجع البرنامج التعليمي الخاص بنا حول كيفية إضافة أيقونات الوسائط الاجتماعية في قوائم ووردبريس.

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