تخصيص قائمة التنقل في بلوجر باحترافيةعلى قالب بلس يو اي 3.2

تتوفر قائمة التنقل في نسختين، وهما القائمة الافتراضية مع قوائم منسدلة إضافية، وقائمة بديلة بدون قوائم منسدلة. لا يمكن تعديل القائمة الافتراضية إلا من خلال HTML.

استخدم هذه الأداة لإنشاء كود HTML لقائمة التنقل بسهولة.

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

نصائح! لنقل قائمة، انقر مع الاستمرار -> اسحب -> أفلت.
لتغيير الأيقونة، انقر على الأيقونة.
انقر على أيقونة المزيد للحصول على خيارات خاصة بالقائمة.
يوصى باستخدام كود HTML المصغر (minified) إن أمكن.

استعادة

إنشاء ناتج مضغوط تمكين المعاينة

يدوياً

انتقل إلى محرر HTML في بلوجر.(يجب ان تسجل الدخول الى بلوجر)

ابحث عن <b:includable id='items-mainMenu'>، والذي يبدو كالتالي:

<!--[ عناصر قائمة التنقل ]-->
<b:includable id='items-mainMenu'>
  ...
</b:includable>

يمكنك تعديل عناصر قائمة التنقل الخاصة بك بين <b:includable id='items-mainMenu'> و </b:includable>. هناك بعض العناصر المضافة افتراضياً، لا تتردد في إزالتها وإضافة عناصرك الخاصة.
إذا قمت بتعديل أداة HTML لقائمة التنقل في وقت سابق، فتأكد من أنها فارغة بالانتقال إلى تخطيط بلوجر.

لإضافة قائمة قياسية، يمكنك إضافة مقتطف الكود التالي مع استبدال الأجزاء المحددة بالقيم المناسبة:

<!--[ القائمة القياسية ]-->
<li>
  <!--[ قم بتغيير السمة href='#' لإضافة رابط ]-->
  <a aria-label='القائمة القياسية' href='#' itemprop='url'>
    <!--[ الأيقونة ]-->
    <b:include name='svg.folder-2'/>
    <!--[ العنوان ]-->
    <span itemprop='name'>القائمة القياسية</span>
  </a>
</li>

<!--[ القائمة القياسية ]-->
<li>
  <!--[ قم بتغيير السمة href='#' لإضافة رابط ]-->
  <a aria-label='تصوير' href='/search/label/Photography' itemprop='url'>
    <!--[ الأيقونة ]-->
    <svg class='line' viewBox='0 0 24 24'><path d='M6.76005 22H17.24C20 22 21.1 20.31 21.23 18.25L21.75 9.99C21.89 7.83 20.17 6 18 6C17.39 6 16.83 5.65 16.55 5.11L15.83 3.66C15.37 2.75 14.17 2 13.15 2H10.86C9.83005 2 8.63005 2.75 8.17005 3.66L7.45005 5.11C7.17005 5.65 6.61005 6 6.00005 6C3.83005 6 2.11005 7.83 2.25005 9.99L2.77005 18.25C2.89005 20.31 4.00005 22 6.76005 22Z'></path><path d='M10.5 8H13.5'></path><path d='M12 18C13.79 18 15.25 16.54 15.25 14.75C15.25 12.96 13.79 11.5 12 11.5C10.21 11.5 8.75 12.96 8.75 14.75C8.75 16.54 10.21 18 12 18Z'></path></svg>
    <!--[ العنوان ]-->
    <span itemprop='name'>تصوير</span>
  </a>
</li>

هناك عدة أنماط للقوائم المنسدلة يمكنك استخدامها على النحو التالي:

بدون أيقونة في القوائم الفرعية

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

تحذير! يرجى ملاحظة أن أيقونة svg لزر التبديل (toggle button) لا تزال مطلوبة ويجب تضمينها.

<!--[ القائمة المنسدلة ]-->
<li>
  <input id='nav-drop-1' type='checkbox' checked=''/>
  <label for='nav-drop-1' aria-label='قائمة فرعية' role='button'>
    <!--[ الأيقونة ]-->
    <b:include name='svg.folder-2'/>
    <!--[ العنوان ]-->
    <span>قائمة فرعية</span>
  </label>
  <ul>
    <li>
      <!--[ قم بتغيير السمة href='#' لإضافة رابط ]-->
      <a aria-label='قائمة فرعية 01' href='#' itemprop='url'>
        <!--[ العنوان ]-->
        <span itemprop='name'>قائمة فرعية 01</span>
      </a>
    </li>
    <li>
      <!--[ قم بتغيير السمة href='#' لإضافة رابط ]-->
      <a aria-label='قائمة فرعية 02' href='#' itemprop='url'>
        <!--[ العنوان ]-->
        <span itemprop='name'>قائمة فرعية 02</span>
      </a>
    </li>
    <li>
      <!--[ قم بتغيير السمة href='#' لإضافة رابط ]-->
      <a aria-label='قائمة فرعية 03' href='#' itemprop='url'>
        <!--[ العنوان ]-->
        <span itemprop='name'>قائمة فرعية 03</span>
      </a>
    </li>
  </ul>
</li>

<!--[ القائمة المنسدلة ]-->
<li>
  <input id='nav-drop-1' type='checkbox' checked=''/>
  <label for='nav-drop-1' aria-label='التصنيفات' role='button'>
    <!--[ الأيقونة ]-->
    <svg class='line' viewBox='0 0 24 24'><path d='M5 10H7C9 10 10 9 10 7V5C10 3 9 2 7 2H5C3 2 2 3 2 5V7C2 9 3 10 5 10Z' stroke-miterlimit='10'></path><path d='M17 10H19C21 10 22 9 22 7V5C22 3 21 2 19 2H17C15 2 14 3 14 5V7C14 9 15 10 17 10Z' stroke-miterlimit='10'></path><path d='M17 22H19C21 22 22 21 22 19V17C22 15 21 14 19 14H17C15 14 14 15 14 17V19C14 21 15 22 17 22Z' stroke-miterlimit='10'></path><path d='M5 22H7C9 22 10 21 10 19V17C10 15 9 14 7 14H5C3 14 2 15 2 17V19C2 21 3 22 5 22Z' stroke-miterlimit='10'></path></svg>
    <!--[ العنوان ]-->
    <span>التصنيفات</span>
  </label>
  <ul>
    <li>
      <!--[ قم بتغيير السمة href='#' لإضافة رابط ]-->
      <a aria-label='تصوير' href='/search/label/Photography' itemprop='url'>
        <!--[ العنوان ]-->
        <span itemprop='name'>تصوير</span>
      </a>
    </li>
    <li>
      <!--[ قم بتغيير السمة href='#' لإضافة رابط ]-->
      <a aria-label='فن' href='/search/label/Art' itemprop='url'>
        <!--[ العنوان ]-->
        <span itemprop='name'>فن</span>
      </a>
    </li>
    <li>
      <!--[ قم بتغيير السمة href='#' لإضافة رابط ]-->
      <a aria-label='مدونة' href='/search/label/Blog' itemprop='url'>
        <!--[ العنوان ]-->
        <span itemprop='name'>مدونة</span>
      </a>
    </li>
  </ul>
</li>

مع أيقونة في القوائم الفرعية

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

<!--[ القائمة المنسدلة ]-->
<li>
  ...
  <ul>
    ...
    <li>
      <!--[ قم بتغيير السمة href='#' لإضافة رابط ]-->
      <a aria-label='قائمة فرعية 01' href='#' itemprop='url'>
        <!--[ الأيقونة ]-->
        <b:include name='svg.folder-2'/>
        <!--[ العنوان ]-->
        <span itemprop='name'>قائمة فرعية 01</span>
      </a>
    </li>
    ...
  </ul>
</li>

<!--[ القائمة المنسدلة ]-->
<li>
  <input id='nav-drop-2' type='checkbox' checked=''/>
  <label for='nav-drop-2' aria-label='التصنيفات' role='button'>
    <!--[ الأيقونة ]-->
    <svg class='line' viewBox='0 0 24 24'><path d='M5 10H7C9 10 10 9 10 7V5C10 3 9 2 7 2H5C3 2 2 3 2 5V7C2 9 3 10 5 10Z' stroke-miterlimit='10'></path><path d='M17 10H19C21 10 22 9 22 7V5C22 3 21 2 19 2H17C15 2 14 3 14 5V7C14 9 15 10 17 10Z' stroke-miterlimit='10'></path><path d='M17 22H19C21 22 22 21 22 19V17C22 15 21 14 19 14H17C15 14 14 15 14 17V19C14 21 15 22 17 22Z' stroke-miterlimit='10'></path><path d='M5 22H7C9 22 10 21 10 19V17C10 15 9 14 7 14H5C3 14 2 15 2 17V19C2 21 3 22 5 22Z' stroke-miterlimit='10'></path></svg>
    <!--[ العنوان ]-->
    <span>التصنيفات</span>
  </label>
  <ul>
    <li>
      <!--[ قم بتغيير السمة href='#' لإضافة رابط ]-->
      <a aria-label='تصوير' href='/search/label/Photography' itemprop='url'>
        <!--[ الأيقونة ]-->
        <svg class='line' viewBox='0 0 24 24'><path d='M6.76005 22H17.24C20 22 21.1 20.31 21.23 18.25L21.75 9.99C21.89 7.83 20.17 6 18 6C17.39 6 16.83 5.65 16.55 5.11L15.83 3.66C15.37 2.75 14.17 2 13.15 2H10.86C9.83005 2 8.63005 2.75 8.17005 3.66L7.45005 5.11C7.17005 5.65 6.61005 6 6.00005 6C3.83005 6 2.11005 7.83 2.25005 9.99L2.77005 18.25C2.89005 20.31 4.00005 22 6.76005 22Z'></path><path d='M10.5 8H13.5'></path><path d='M12 18C13.79 18 15.25 16.54 15.25 14.75C15.25 12.96 13.79 11.5 12 11.5C10.21 11.5 8.75 12.96 8.75 14.75C8.75 16.54 10.21 18 12 18Z'></path></svg>
        <!--[ العنوان ]-->
        <span itemprop='name'>تصوير</span>
      </a>
    </li>
    <li>
      <!--[ قم بتغيير السمة href='#' لإضافة رابط ]-->
      <a aria-label='فن' href='/search/label/Art' itemprop='url'>
        <!--[ الأيقونة ]-->
        <svg class='line' viewBox='0 0 24 24'><path d='M10 4.5V18C10 19.08 9.55999 20.07 8.85999 20.79L8.82001 20.83C8.73001 20.92 8.63001 21.01 8.54001 21.08C8.24001 21.34 7.89999 21.54 7.54999 21.68C7.43999 21.73 7.33 21.77 7.22 21.81C6.83 21.94 6.41 22 6 22C5.73 22 5.46001 21.97 5.20001 21.92C5.07001 21.89 4.94 21.86 4.81 21.82C4.65 21.77 4.50001 21.72 4.35001 21.65C4.35001 21.64 4.35 21.64 4.34 21.65C4.06 21.51 3.79001 21.35 3.54001 21.16L3.53 21.15C3.4 21.05 3.28001 20.95 3.17001 20.83C3.06001 20.71 2.95 20.59 2.84 20.46C2.65 20.21 2.49001 19.94 2.35001 19.66C2.36001 19.65 2.36001 19.65 2.35001 19.65C2.35001 19.65 2.35 19.64 2.34 19.63C2.28 19.49 2.22999 19.34 2.17999 19.19C2.13999 19.06 2.10999 18.93 2.07999 18.8C2.02999 18.54 2 18.27 2 18V4.5C2 3 3 2 4.5 2H7.5C9 2 10 3 10 4.5Z'></path><path d='M22 16.5V19.5C22 21 21 22 19.5 22H6C6.41 22 6.83 21.94 7.22 21.81C7.33 21.77 7.43999 21.73 7.54999 21.68C7.89999 21.54 8.24001 21.34 8.54001 21.08C8.63001 21.01 8.73001 20.92 8.82001 20.83L8.85999 20.79L15.66 14H19.5C21 14 22 15 22 16.5Z'></path><path d='M4.81 21.8199C4.21 21.6399 3.64001 21.3099 3.17001 20.8299C2.69001 20.3599 2.35999 19.7899 2.17999 19.1899C2.56999 20.4399 3.56 21.4299 4.81 21.8199Z'></path><path d='M18.37 11.2899L15.66 14L8.85999 20.7899C9.55999 20.0699 10 19.08 10 18V8.33995L12.71 5.62996C13.77 4.56996 15.19 4.56996 16.25 5.62996L18.37 7.74996C19.43 8.80996 19.43 10.2299 18.37 11.2899Z'></path><path d='M6 19C6.55228 19 7 18.5523 7 18C7 17.4477 6.55228 17 6 17C5.44772 17 5 17.4477 5 18C5 18.5523 5.44772 19 6 19Z'></path></svg>
        <!--[ العنوان ]-->
        <span itemprop='name'>فن</span>
      </a>
    </li>
    <li>
      <!--[ قم بتغيير السمة href='#' لإضافة رابط ]-->
      <a aria-label='مدونة' href='/search/label/Blog' itemprop='url'>
        <!--[ الأيقونة ]-->
        <svg class='line' viewBox='0 0 24 24'><path d='M13.26 3.59997L5.04997 12.29C4.73997 12.62 4.43997 13.27 4.37997 13.72L4.00997 16.96C3.87997 18.13 4.71997 18.93 5.87997 18.73L9.09997 18.18C9.54997 18.1 10.18 17.77 10.49 17.43L18.7 8.73997C20.12 7.23997 20.76 5.52997 18.55 3.43997C16.35 1.36997 14.68 2.09997 13.26 3.59997Z' stroke-miterlimit='10'></path><path d='M11.89 5.05005C12.32 7.81005 14.56 9.92005 17.34 10.2' stroke-miterlimit='10'></path><path d='M3 22H21' stroke-miterlimit='10'></path></svg>
        <!--[ العنوان ]-->
        <span itemprop='name'>مدونة</span>
      </a>
    </li>
  </ul>
</li>

قوائم فرعية في المستوى الأعلى

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

<!--[ القائمة المنسدلة (قائمة فرعية في المستوى الأعلى) ]-->
<li class='mr'>
  <input id='nav-drop-3' type='checkbox' checked=''/>
  <label for='nav-drop-3' aria-label='المزيد...' role='button'>
    <!--[ العنوان ]-->
    <span>المزيد...</span>
  </label>
  <ul>
    <li>
      <!--[ قم بتغيير السمة href='#' لإضافة رابط ]-->
      <a aria-label='قائمة فرعية 01' href='#' itemprop='url'>
        <!--[ الأيقونة ]-->
        <b:include name='svg.folder-2'/>
        <!--[ العنوان ]-->
        <span itemprop='name'>قائمة فرعية 01</span>
      </a>
    </li>
    <li>
      <!--[ قم بتغيير السمة href='#' لإضافة رابط ]-->
      <a aria-label='قائمة فرعية 02' href='#' itemprop='url'>
        <!--[ الأيقونة ]-->
        <b:include name='svg.folder-2'/>
        <!--[ العنوان ]-->
        <span itemprop='name'>قائمة فرعية 02</span>
      </a>
    </li>
    <li>
      <!--[ قم بتغيير السمة href='#' لإضافة رابط ]-->
      <a aria-label='قائمة فرعية 03' href='#' itemprop='url'>
        <!--[ الأيقونة ]-->
        <b:include name='svg.folder-2'/>
        <!--[ العنوان ]-->
        <span itemprop='name'>قائمة فرعية 03</span>
      </a>
    </li>
  </ul>
</li>

مزيد من التخصيص

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

انتقل إلى مصمم مظهر بلوجر (Theme Designer).
انقر على علامة التبويب متقدم (Advanced).
من القائمة المنسدلة للاختيار، حدد النمط: قائمة التنقل (Style: Navigation Menu).

كيف يمكنني إبقاء قائمة التنقل موسعة افتراضياً لعرض سطح المكتب؟

تمت إضافة خيار تغيير هذا السلوك في الإصدار v3.1. يمكنك العثور على هذا الخيار فقط إذا كنت تستخدم الإصدار v3.1 أو أحدث.

انتقل إلى النمط: قائمة التنقل (Style: Navigation Menu) كما هو موضح أعلاه، واضبط طول الحالة الافتراضية لشريط التنقل (سطح المكتب) على 1 بكسل أو 2 بكسل لإبقاء قائمة التنقل في عرض سطح المكتب مطوية أو موسعة على التوالي.

من أين يمكنني الحصول على أيقونات SVG؟

يمكنك العثور على بعض أيقونات SVG هنا.

Tst

تخصيص قائمة التنقل في بلوجر باحترافيةعلى قالب بلس يو اي 3.2

أداة إنشاء القوائم (موصى بها)

يدوياً

القائمة القياسية

بدون أيقونة في القوائم الفرعية

مع أيقونة في القوائم الفرعية

قوائم فرعية في المستوى الأعلى

مزيد من التخصيص

عن المؤلف

إرسال تعليق

الانضمام إلى المحادثة