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

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

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

لماذا يجب إضافة عناصر مخصصة إلى قوائم ووردبريس

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

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

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

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

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

إضافة عناصر مخصصة إلى قوائم التنقل المحددة في ووردبريس

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

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

دعونا نبدأ.

1. إضافة نافذة منبثقة للبحث في قائمة ووردبريس

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

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

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

هذه الاضافة هي إضافة لـ SearchWP، وهي أفضل اضافة للبحث في ووردبريس في السوق.

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

بعد تثبيت الإضافة، ما عليك سوى التوجه إلى صفحة المظهر » القوائم. ضمن عمود “إضافة عناصر القائمة”، انقر فوق علامة التبويب “SearchWP Modal Search Forms” لتوسيعها.

حدد محرك البحث الخاص بك ثم انقر فوق الزر “إضافة إلى القائمة”.

ستضيف الإضافة البحث إلى قائمة التنقل الخاصة بك. انقر فوق “Modal search form” أسفل عناصر القائمة لتوسيعه وتغيير التسمية إلى “بحث” أو أي شيء آخر تريده.

لا تنس النقر على زر “حفظ القائمة” لتخزين التغييرات التي أجريتها.

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

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

2. إضافة أيقونات وصور مخصصة إلى قوائم محددة

عنصر مخصص شائع آخر يرغب المستخدمون غالبًا في إضافته إلى قائمة معينة هو صورة أو أيقونة.

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

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

انقر على زر صورة القائمة باللون الأزرق للمتابعة.

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

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

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

بعد ذلك، يمكنك زيارة الموقع الكتروني الخاص بك لرؤية الصورة أو الأيقون المخصصة في عناصر قائمة معينة.

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

3. إضافة روابط تسجيل الدخول/الخروج إلى قائمة ووردبريس محددة

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

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

سنوضح لك كيفية إضافتها باستخدام اضافة أو باستخدام مقتطف من الكود.

1. أضف روابط تسجيل الدخول/الخروج إلى القوائم باستخدام الاضافة

هذه الطريقة أسهل وموصى بها لجميع المستخدمين.

أولاً، تحتاج إلى تثبيت وتفعيل اضافة Login or Logout Menu Item. بعد ذلك، تحتاج إلى زيارة صفحة المظهر » القائمة والنقر فوق علامة التبويب “Login/Logout” لتوسيعها.

من هنا، تحتاج إلى تحديد عنصر “‘Log In|Log Out” والنقر على زر “إضافة إلى القائمة”.

لا تنس النقر على زر “حفظ القائمة” لتخزين التغييرات التي أجريتها. يمكنك الآن زيارة الموقع الكتروني الخاص بك لمشاهدة رابط تسجيل الدخول والخروج المخصص الخاص بك قيد التشغيل.

سيتغير الرابط ديناميكيًا لتسجيل الدخول أو تسجيل الخروج وفقًا لحالة تسجيل دخول المستخدم.

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

2. أضف روابط تسجيل الدخول/الخروج باستخدام الكود المخصص

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

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

أسهل طريقة للعثور على هذا هي زيارة صفحة المظهر » القوائم وتحريك الماوس إلى منطقة مواقع القوائم.

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

لاحظ الاسم المستخدم للموقع المستهدف الذي تريد عرض رابط تسجيل الدخول/الخروج فيه.

بعد ذلك، تحتاج إلى إضافة الكود التالي إلى ملف functions.php الخاص بقالبك أو إلى الإضافة الخاصة بالموقع.

add_filter( 'wp_nav_menu_items', 'add_loginout_link', 10, 2 );
function add_loginout_link( $items, $args ) {
    if (is_user_logged_in() && $args->theme_location == 'primary') {
        $items .= '<li><a href="'. wp_logout_url() .'">Log Out</a></li>';
    }
    elseif (!is_user_logged_in() && $args->theme_location == 'primary') {
        $items .= '<li><a href="'. site_url('wp-login.php') .'">Log In</a></li>';
    }
    return $items;
}

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

سيقوم هذا الرابط الديناميكي بالتبديل تلقائيًا إلى تسجيل الدخول أو تسجيل الخروج استنادًا إلى حالة تسجيل دخول المستخدم.

4. إضافة نص مخصص إلى قائمة التنقل الخاصة بـ ووردبريس

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

هناك طريقتان يمكنك من خلالهما القيام بذلك.

1. إضافة نص مخصص إلى قائمة معينة (طريقة سهلة)

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

انقر فوق الزر “إضافة إلى القائمة” للمتابعة.

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

لا تنس النقر على زر قائمة الحفظ ومعاينة موقعك الإلكتروني. ستلاحظ ظهور النص المخصص في قائمة التنقل.

لا يزال رابطًا، لكن النقر عليه لا يفعل أي شيء للمستخدم.

2. إضافة نص مخصص إلى قائمة التنقل باستخدام الكود

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

بعد ذلك، تحتاج إلى إضافة الكود التالي إلى ملف functions.php الخاص بالقالب أو إلى الإضافة الخاصة بالموقع.

add_filter( 'wp_nav_menu_items', 'your_custom_menu_item', 10, 2 );
function your_custom_menu_item ( $items, $args ) {
    if ( $args->theme_location == 'primary') {
        $items .= '<li><a title="">Custom Text</a></li>';
    }
    return $items;
}

ما عليك سوى استبدال المكان الذي يظهر فيه “Custom Text” بنصك الخاص.

يمكنك الأن حفظ التغييرات وزيارة الموقع الكتروني الخاص بك لرؤية النص المخصص الذي أضفته في نهاية قائمة التنقل الخاصة بك.

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

5. إضافة التاريخ الحالي في قائمة ووردبريس

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

ما عليك سوى إضافة الكود التالي إلى ملف functions.php الخاص بقالبك أو إلى الإضافة الخاص بالموقع.

add_filter('wp_nav_menu_items','add_todaysdate_in_menu', 10, 2);
function add_todaysdate_in_menu( $items, $args ) {
    if( $args->theme_location == 'primary')  {
          
        $todaysdate = date('l jS F Y');
        $items .=  '<li><a>' . $todaysdate .  '</a></li>';
  
    }
    return $items;
}

لا تنس استبدال “primary” بموقع القائمة.

يمكنك الأن زيارة الموقع الكتروني الخاص بك لرؤية التاريخ الحالي في قائمة ووردبريس الخاصة بك.

يمكنك أيضًا تغيير تنسيق التاريخ حسب رغبتك. راجع البرنامج التعليمي الخاص بنا حول كيفية تغيير تنسيق التاريخ والوقت في ووردبريس.

6. عرض اسم المستخدم في قائمة ووردبريس

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

أولاً، ستحتاج إلى إضافة الكود التالي إلى ملف functions.php الخاص بقالبك أو إلى الإضافة الخاصة بالموقع.

add_filter( 'wp_nav_menu_objects', 'username_in_menu_items' );
function username_in_menu_items( $menu_items ) {
    foreach ( $menu_items as $menu_item ) {
        if ( strpos($menu_item->title, '#profile_name#') !== false) {
             if ( is_user_logged_in() )     {
                $current_user = wp_get_current_user();
                 $user_public_name = $current_user->display_name;
                $menu_item->title =  str_replace("#profile_name#",  " Hey, ". $user_public_name, $menu_item->title . "!");
             } else { 
             $menu_item->title =  str_replace("#profile_name#",  " Welcome!", $menu_item->title . "!");
             }
        }
    }
 
    return $menu_items;
} 

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

بعد ذلك، تحتاج إلى الانتقال إلى صفحة المظهر » القوائم وإضافة رابط مخصص جديد بـ #profile_name# كنص رابط.

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

7. عرض القوائم الشرطية بشكل ديناميكي في ووردبريس

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

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

تتيح لك هذه الطريقة إنشاء عدة قوائم وعرضها فقط عند تطابق شروط معينة.

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

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

بعد إنشاء القائمة، انتقل إلى علامة التبويب “إدارة مواضع القوائم”.

من هنا، تحتاج إلى النقر فوق رابط “Conditional Menus” بجوار موقع القائمة.

بعد ذلك، عليك تحديد القائمة التي أنشأتها سابقًا من القائمة المنسدلة.

ثم انقر على زر “+ Conditions.

سيؤدي هذا إلى ظهور نافذة منبثقة.

من هنا، يمكنك تحديد الشروط التي يجب استيفاؤها لعرض هذه القائمة.

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

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

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