استخدام علامات تبويب Bootstrap 3 لعرض المنشورات في تصنيف نوع المنشور المخصص

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

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

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

إليكم ما نحاول تحقيقه:

إعداد نوع الوظيفة والتصنيف

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

استخدم الإعدادات أدناه:

ثم نحتاج إلى إعداد تصنيف الأنواع حتى نتمكن من تجميع كل أفلامنا في النوع الصحيح. باستخدام Custom Post Type UI ، أنشئ التصنيف باستخدام الإعدادات أدناه:

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

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

للتبسيط ، سأقوم بإنشاء صفحة في WordPress تسمى "أفلام" ثم أقوم بتجاوز هذه الصفحة حيث سنضع الكود الخاص بنا. طريقة القيام بذلك هي إنشاء ملف يسمى page-films.php في مجلد القالب الخاص بك ، ثم يستخدم WordPress هذا الملف لعرض صفحة الأفلام. بهذه الطريقة ، يمكننا إضافة الشفرة التي نحتاجها ولن تظهر إلا عند الانتقال إلى صفحة الفيلم على الموقع.

ليس من الضروري تسمية الصفحة بـ "أفلام" ، ولكن تأكد من أن سبيكة الصفحة تتطابق مع الجزء الثاني من قالب الصفحة. لذلك إذا كان الرابط الثابت للصفحة هو "أفلام" ، فسيتم تسمية ملف القالب باسم page-movies.php.

إنشاء علامات التبويب

إذا قمت بزيارة موقع Bootstrap وقمت بزيارة قسم علامات التبويب ، فيمكننا الحصول على الترميز الذي سنحتاجه. طالما تم تحميل جميع ملفات Bootstrap javascript (خاصة tabs.js و transitions.js) ، يجب أن تعمل علامات التبويب التي قمت بلصقها للتو في صفحتك بشكل جيد.

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

 <؟ php $ film_genres = get_terms ('genres')؛ ؟>

في هذا المثال ، قمت بتعيين get_terms مقابل المتغير film_genres $ ، ولكن يمكنك استخدام ما تريد.

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

 <ul class = "nav-tabs nav-justified">
  <li class = "active">
    <a data-toggle="tab" href="#all"> الكل </a>
  </li>
  <؟ php foreach ($ film_genres as $ film_genre) {؟>
    <li>
      <a href="#<؟php echo $film_genre-> slug؟> "data-toggle =" tab "> <؟ php echo $ film_genre-> name؟> </a>
    </li>
  <؟ }؟>
</ul>

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

محتوى علامة التبويب

نريد بعد ذلك تعيين محتوى علامة التبويب لعلامة التبويب كل الأفلام ، ونقوم بذلك باستخدام wp_query فوق نوع المنشور من الأفلام مثل:

 <div class = "tab-pane active">
  <؟ php 	
  $ args = مجموعة (
    "post_type" => "أفلام" ،
    "posts_per_page" -1 ،
    "orderby" => "العنوان" ،
    'النظام' => 'ASC'
  ) ؛
  $ all_films = WP_Query جديد ($ args)؛		
  ؟>

  <؟ php if ($ all_films-> have_posts ()): // تأكد من أن لدينا أفلامًا نعرضها قبل القيام بأي شيء؟>
  <div class = "table-responsive">
    <table class = "table">
      <؟ php while ($ all_films-> have_posts ()): $ all_films-> the_post ()؛ ؟>	
      <tr>
        <td> <؟ php the_post_thumbnail ()؟> </td>
        <td> <h3> <؟ php the_title ()؟> </ h3 </td>
        <td>
          <p class = "lead"> <؟ php the_excerpt ()؟> </p>
          <a href="<؟php the_permalink() ؟> "class =" btn btn-primary "> قراءة المزيد </a>
        </td>
      </tr>
      <؟ php end while؛ ؟>
      <؟ php wp_reset_query ()؟>
    </table>
  </div>
  <؟ php endif؛ ؟>

</div> <! - جزء علامة تبويب كل الأفلام ->

تأكد من تعيين قيمة مفتاح نوع المنشور على اسم نوع المنشور الخاص بك (إذا كنت لا تستخدم الأفلام) ، مثل "post_type" => "نوع المنشور الخاص بك هنا". ثم نعيد جميع المنشورات في نوع منشور الفيلم وترتيبها حسب العنوان تصاعديًا.

نقوم بعد ذلك بتشغيل حلقة WordPress عادية فوق كائن wp_query هذا وإرجاع جميع منشورات الفيلم.

في هذا المثال ، اخترت إخراج جدول bootstrap داخل كل جزء علامة تبويب ، ولكن يمكنك إخراج بياناتك وقتما تشاء. الشيء الذي يجب تذكره ، هو أنه باستخدام حلقة wp_query ، يمكننا استخدام جميع وظائف WordPress الرائعة مثل the_title و the_excerpt و the_post_thumbnail وما إلى ذلك.

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

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

 <؟ php foreach ($ film_genres as $ film_genre) {؟>
  <div class = "tab-pane">
    <؟ php 	
    $ args = مجموعة (
      "post_type" => "أفلام" ،
      "posts_per_page" -1 ،
      "orderby" => "العنوان" ،
      'النظام' => 'ASC' ،
      'tax_query' => مجموعة (
        مجموعة مصفوفة(
          "التصنيف" => "الأنواع" ،
          'field' => 'slug' ،
          'الشروط' => $ film_genre-> slug
        )
      )
    ) ؛
    أفلام دولار = WP_Query جديدة ($ args) ؛		
    ؟>

    <؟ php if ($ films-> have_posts ()): // تأكد من أن لدينا أفلامًا نعرضها قبل فعل أي شيء؟>
    <table class = "table">
      <؟ php while ($ films-> have_posts ()): $ films-> the_post ()؛ ؟>	
      <tr>
        <td> <؟ php the_post_thumbnail ()؟> </td>
        <td> <h3> <؟ php the_title ()؟> </ h3 </td>
        <td>
          <p class = "lead"> <؟ php the_excerpt ()؟> </p>
          <a href="<؟php the_permalink() ؟> "class =" btn btn-primary "> قراءة المزيد </a>
        </td>
      </tr>
      <؟ php end while؛ ؟>
      <؟ php wp_reset_query ()؟>
    </table>
    <؟ php endif؛ ؟>

  </div>
<؟ }؟>

نحن نلف نفس foreach الذي استخدمناه من قبل حول div جزء علامات التبويب. نحتاج إلى القيام بذلك حتى نتمكن من الوصول إلى القيم من الكائن film_genre $ الذي قمنا بتعيينه ، حيث سنحتاج إلى استخدام قيمة slug لتمريرها إلى wp_query ، وكذلك لتعيين معرف جزء علامة التبويب.

بمجرد إنشاء wp_query ، نستخدم نفس حلقة WordPress الموجودة في جزء علامة تبويب الأفلام "all" ، مع تذكر تغيير متغير wp_query إلى شيء فريد مثل $ film_genres.

وهذا حقا عن ذلك. يجب أن تعمل علامات تبويب Bootstrap بشكل مثالي ، وعندما تضيف نوعًا جديدًا مع الأفلام المرفقة به ، يجب أن يظهر كعلامة تبويب جديدة.

ها هو الكود الكامل:

 <section class = "films-tabs">

  <؟ php $ film_genres = get_terms ('genres')؛ // الحصول على كافة الأنواع؟>

  <! - علامات تبويب التنقل ->
  <ul class = "nav-tabs nav-justified">
    <li class = "active">
      <a data-toggle="tab" href="#all"> الكل </a>
    </li>
    <؟ php foreach ($ film_genres as $ film_genre) {؟>
      <li>
        <a href="#<؟php echo $film_genre-> slug؟> "data-toggle =" tab "> <؟ php echo $ film_genre-> name؟> </a>
      </li>
    <؟ }؟>
  </ul>

  <! - أجزاء علامة التبويب ->
  <div class = "tab-content">

    <div class = "tab-pane active">
      <؟ php 	
      $ args = مجموعة (
        "post_type" => "أفلام" ،
        "posts_per_page" -1 ،
        "orderby" => "العنوان" ،
        'النظام' => 'ASC'
      ) ؛
      $ all_films = WP_Query جديد ($ args)؛		
      ؟>

      <؟ php if ($ all_films-> have_posts ()): // تأكد من أن لدينا أفلامًا نعرضها قبل القيام بأي شيء؟>
      <div class = "table-responsive">
        <table class = "table">
          <؟ php while ($ all_films-> have_posts ()): $ all_films-> the_post ()؛ ؟>	
          <tr>
            <td> <؟ php the_post_thumbnail ()؟> </td>
            <td> <h3> <؟ php the_title ()؟> </ h3 </td>
            <td>
              <p class = "lead"> <؟ php the_excerpt ()؟> </p>
              <a href="<؟php the_permalink() ؟> "class =" btn btn-primary "> قراءة المزيد </a>
            </td>
          </tr>
          <؟ php end while؛ ؟>
          <؟ php wp_reset_query ()؟>
        </table>
      </div>
      <؟ php endif؛ ؟>

    </div> <! - جزء علامة تبويب كل الأفلام ->

    <؟ php foreach ($ film_genres as $ film_genre) {؟>

      <div class = "tab-pane">
        <؟ php 	
        $ args = مجموعة (
          "post_type" => "أفلام" ،
          "posts_per_page" -1 ،
          "orderby" => "العنوان" ،
          'النظام' => 'ASC' ،
          'tax_query' => مجموعة (
            مجموعة مصفوفة(
              "التصنيف" => "الأنواع" ،
              'field' => 'slug' ،
              'الشروط' => $ film_genre-> slug
            )
          )
        ) ؛
        أفلام دولار = WP_Query جديدة ($ args) ؛		
        ؟>

        <؟ php if ($ films-> have_posts ()): // تأكد من أن لدينا أفلامًا نعرضها قبل فعل أي شيء؟>
        <table class = "table">
          <؟ php while ($ films-> have_posts ()): $ films-> the_post ()؛ ؟>	
          <tr>
            <td> <؟ php the_post_thumbnail ()؟> </td>
            <td> <h3> <؟ php the_title ()؟> </ h3 </td>
            <td>
              <p class = "lead"> <؟ php the_excerpt ()؟> </p>
              <a href="<؟php the_permalink() ؟> "class =" btn btn-primary "> قراءة المزيد </a>
            </td>
          </tr>
          <؟ php end while؛ ؟>
          <؟ php wp_reset_query ()؟>
        </table>
        <؟ php endif؛ ؟>

      </div>
    <؟ }؟>

  </div> <! - tab-content ->

</section> <! - film-tabs ->

إذا كنت بحاجة إلى مساعدة بشأنك فلا تتردد في الاتصال بنا.