it-swarm.asia

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

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

على سبيل المثال ، قل أن القائمة الأفقية مثل:

الرئيسية | عنا | المنتجات | الاتجاهات | اتصل

والمقصود بعنصر "المنتجات" li هو ربط 3 صفحات في قائمة منسدلة رأسية تحتها ، لذلك "المنتجات" نفسها لا تمثل في الواقع صفحة ، كيف يمكنني القيام بذلك في WP؟

(أستخدم WP كـ CMS ، مع الصفحات الرئيسية والداخلية الثابتة. أقوم ببناء القوالب الخاصة بي ، وقم بتنسيق القوائم في CSS ، ثم سجل القوائم في الوظائف. php واتصل بها في القوالب.) في WP يمكنك إضافة إدخالات إلى القوائم عبر قائمة الصفحات ، أو عن طريق الروابط المخصصة. لكنني لا أريد ربط "المنتجات". إذا لم أقم بإضافة رابط إلى الرابط المخصص ، فلن يسمح لي بإضافته إلى القائمة.

هل هذا قابل للتنفيذ من خلال مسؤول القوائم أو هل يجب علي التعامل معه بطريقة أخرى؟

شكرا لك على أي مساعدة!

24
PVA

لدي بعض الأفكار:

  1. اضبط الرابط المخصص على # والذي لن يعيد أي شيء
  2. أضف فئة مخصصة للعناصر ثم استخدم jQuery لإزالة الروابط.
  3. استخدم PHP مكافئًا لطريقة jQuery
  4. استخدم تعطيل رابط قائمة الأصل البرنامج المساعد (أو قم بفصله واكتب ما تريد)
12
Brooke.

أسهل طريقة للقيام بذلك بدون مكون إضافي أو أي شيء هي استخدام وظيفة "القوائم" في WordPress. فيما يلي إرشادات WordPress 4.8:

  1. من لوحة معلومات WordPress الخاصة بك ، انتقل إلى "المظهر -> القوائم"
  2. في علامة التبويب "تحرير القوائم" ، حدد "روابط مخصصة"
  3. بالنسبة لعنوان URL ، أدخل "#" (بدون علامات اقتباس)
  4. بالنسبة إلى نص الارتباط ، أدخل النص الذي تريده للحصول على المستوى العلوي من القائمة المنسدلة
  5. انقر فوق الزر "إضافة إلى القائمة"
  6. اسحب عنصر القائمة إلى الموضع المطلوب داخل قائمتك
  7. بالنسبة لعنصر القائمة الذي أضفته للتو ، انقر على السهم لأسفل على يمين العنصر (سيصبح "رابط مخصص" على يسار العنصر)
  8. أزل "#" من عنوان URL. سيؤدي هذا - في جميع المتصفحات - إلى تحويل الرابط إلى نص عادي.
  9. انقر على زر "حفظ القائمة"
22
GavinR

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

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

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

/**
 * Remove the href from empty links `<a href="#">` in the nav menus
 * @param string $menu the current menu HTML
 * @return string the modified menu HTML
 */
function wpse_remove_empty_links( $menu ) {
    return str_replace( '<a href="#">', '<a>', $menu );
}

add_filter( 'wp_nav_menu_items', 'wpse_remove_empty_links' );
6
shea

هذا عملت لي:

قمت بتنشيط فئات CSS في القوائم> خيارات الشاشة> فئات CSS ثم أعطيت عنصر القائمة الذي أردت إلغاء تنشيط الفئة ".nolink" وأضفت هذا الرمز إلى لوحة CSS المخصصة:

.nolink {
   pointer-events: none;
   cursor: default;
}
1
RickyBono

باستخدام PHP النهج أضفت هذا الكود إلى jobs.php:

function remove_link_contact_menu($item_output, $item) {
    if ($item->post_name == 'contact')
        return '<span>' . $item->title . '</span>';

    return $item_output;
}
add_filter('walker_nav_menu_start_el', 'remove_link_contact_menu', 20, 2);
add_filter('megamenu_walker_nav_menu_start_el', 'remove_link_contact_menu', 20, 2);

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

1
Sam Bull

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

#_

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

0
user1249523

الكتابة من 1/2019 ، الحل الذي ينتج HTML5 الصحيح هو القيام بما يلي.

  1. أضف رابطًا مخصصًا بعنوان URL مضبوط على # ، وأي اسم تريده. كلا الحقلين مطلوبان.
  2. قم بتحرير الرابط المخصص المضافة حديثًا حتى يكون عنوان URL فارغًا.
  3. حفظ التغييرات.

سيؤدي هذا إلى إنتاج تنقل من المستوى الأعلى <a>Menu</a> وهو الطريقة الصحيحة لتمثيل رابط غير قابل للنقر.

0
DavGarcia
  1. عيّن الرابط المخصص على # والذي لن يُرجع أي عنصر قائمة
  2. إضافة هذا الفلتر:

    add_filter( 'wp_nav_menu_items', 'wpse_remove_empty_links' );
    
    function wpse_remove_empty_links( $menu ) {
    
        return preg_replace("/<a href=\"#\">(.+?)<\/a>/is", "<span>$1</span>", $menu);
    
    }
    
  3. قم بتعديل span CSS للحصول على نفس نمط <a> ، لا تنسَ cursor: context-menu;.

0
calmohallag

إنشاء عنصر قائمة "روابط مخصصة" وإضافة "javascript :؛" (بدون علامات اقتباس) لحقل URL. هذه طريقة أفضل من استخدام "#" لأنها لن تمرر صفحتك إلى الأعلى عند النقر عليها.

0
Tahi Reu

لقد حللت بهذه الطريقة: في header.php (لموضوعك) بحثت عن:

'link_before'     => '',
'link_after'      => '',

واستبدل بـ:

'link_before'     => '<script>var scriptTag=document.getElementsByTagName("script");scriptTag=scriptTag[scriptTag.length-1];if(scriptTag.parentNode.href)if(scriptTag.parentNode.href.slice(-1)=="#")document.write("<span onclick=\"return false\">")</script>',
'link_after'      => '<script>var scriptTag=document.getElementsByTagName("script");scriptTag=scriptTag[scriptTag.length-1];if(scriptTag.parentNode.href)if(scriptTag.parentNode.href.slice(-1)=="#")document.write("</span>")</script>',

بعبارة بسيطة ، يتحقق هذا البرنامج النصي إذا كان الرابط الأصلي ينتهي بـ "#" ، في هذه الحالة ، يضيف عنصر امتداد حول محتوى العلامة A ، مما يؤدي إلى تعطيل النقرة.

آمل أن يساعد :-)

0
niente0

يمكنك تعطيل الأحداث على علامة <a> لجميع عناصر قائمة المستوى الأول باستخدام css pure. .main-menu فئة قد يكون لها اسم آخر وفقا لتسمية القائمة الخاصة بك.

/* disable parent menu items */
ul.main-menu > li > a {
    pointer-events: none;
}
0
Karl Adler

سيؤدي ذلك إلى إزالة النقر (وإلغاء تحديد العنصر). بهذه الطريقة ، لا يتعين عليك استخدام الروابط المخصصة # في قائمتك.

add_action( 'wp_footer', function(){
    ?>
    <script>
    (function( $ ) {
        var itemm = $('#main-menu .menu-item-has-children > a');
        itemm.click(function(){
            document.activeElement && document.activeElement.blur();
            return false;
        });
    })(jQuery);
    </script>
<?php
 }, 1, 0 );
0
Doug Cassidy

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

preg_replace('/<a>([^<]+)<\/a>/i', '<span class="no-link">$1</span>', $navHTML);
0
deweydb

أدركت أنني متأخرة في اللعبة ، لكن هاتين الطريقتين أستخدمهما:

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

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

0
Barry

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

0
Rob