قطعا در سایت های مختلفی دیده اید که بخشی به نام تب دارند و در آن محطالب محبوب، آخرین مطالب و… را با یک کلیک نمایش می دهند؟ در این مطلب قصد داریم چگونگی ساخت ابزارک تب ها در وردپرس را آموزش دهیم تا بتوانیم در سایت وردپرسی خود ابزارک تب ها را داشته باشیم

چرا ابزارک تب ها را باید داشته باشیم؟

بر فرض مثال تصور کنید که یک وب سایت وردپرسی راه انداخته اید. به مرور زمان بدین نتیججه می رسید که جای خالی برای افزودن ابزارک های مورد نیاز خود ندارید. در این حالت می توانید با استفاده از تب ها 3 ابزارک را در یک ابزارک داشته باشید

کاربر می تواند با یک کلیک بقیه محتویات ابزارک را نیز ببیند و دسترسی سریع تری داشته باشد. بسیاری از سایت های محبوب از این ابزارک ها استفاده کرده اند و حالا شما هم میتوانید با خواندن این مقاله این ابزارک بسیار کاربردی را داشته باشید

نکته: برای یادگیری این آموزش نیاز است که با HTML و CSS آشنا باشید.

ساخت ابزارک تب های جی کوئری

شروع می کنیم. در مرحله اول نیاز است که یک پوشه به نام wp-tab-widget بسازید. سپس شما می بایست 2 فایل در داخل این پوشه بسازید که در ادامه خواهیم گفت

فایل اول با نام wp-tabber-widget.php بسازید. این فایل شامل کدهای HTML و PHP مربوط به تب ها است. فایل دوم را با نام wp-tabber-style.css بسازید. کد های این فایل برای استایل دهی به تب ها می باشد. فایل سوم را نیز با نام wp-tabber.js بسازید. این فایل شامل اسکریپت های مربوط به تب هاست.

حال فایل wp-tabber-widget.php را با NotePad باز کنید و کد زیر را داخل آن قرار دهید

با کد بالا، ما یک افزونه به نام WPSchool jQuery Tabber Widget ساختیم. اگر با روش افزونه نویسی آشنا نیستید افزونه نویسی در وردپرس را مطالعه نمایید.

حال نیاز داریم و اسکریپت ها و استایل های مربوط به ابزارک تب ها را تعریف کنیم. پس در ابتدا یک فایل به نام wp-tabber.js ساخته و کدهای زیر را درون آن قرار دهید

حال ابزارک ما آماده است. در قدم بعدی نیاز است که استایل های ابزارک را نیز تعریف کنیم. پس یک فایل به نام wp-tabber-style.css ساخته و کدهای زیر را داخلش قرار دهید:

آموزش امروز هم به پایان رسید. با استفاده از افزونه بالا می توانید آخرین نوشته ها، برچسب ها و دیدگاه ها را به صورت تب نمایش دهید.

همچنین می توانید محتویات این تب ها را مطابق میل خود و داخل فایل wp-tabber.php عوض کنید

امیدوارم مورد پسند شما واقع شده باشد

موفق باشید

8 دیدگاه برای “ساخت ابزارک تب ها در وردپرس

  • امیر
    - ۱۶ خرداد , ۱۳۹۳

    سلام من اینو ساختم اصلا مثل مال خودتون نیست که خیلی ساده هست می شه استایلی که برای خودتون ساختین رو برای من ایمیل کنید با تشکر

  • طراحی قالب وردپرس
    - ۷ مرداد , ۱۳۹۴

    عالللللللللللللللللللللللللللللللللللللللللللللللللللللللللللللللللللللی بود

  • mohamad
    - ۹ شهریور , ۱۳۹۴

    سلام.امکان استفاده از این افزونه در قالب اصلی هم وجود داره؟

  • مهرداد
    - ۲۲ شهریور , ۱۳۹۴

    سلام
    الان اینو دقیق چیکار کنیم؟میشه توضیح بدین چطور توی قالب استفاده کنم ؟ ممنون

  • علی
    - ۲۹ شهریور , ۱۳۹۴

    ممنون خیلی خیلی ممنون
    تا حالا اموزش به این خوبی ندیده بودم
    نحوه اضافه کردن تب و قراردادن کد اچ تی ام ال را پیدا کردم
    یک سوال خیلی فنی
    چطور میتونم از این تب در دو یا سه جا استفاده کنم در صورتی که در هر ابزارک کد های داخلش متفاوت باشه

    • الناز
      - ۲۹ شهریور , ۱۳۹۴

      سلام دوست عزیز. از همین آموزش میتونید عوض کنید فقط دقت کنید که باید نام class ها و فانکشن ها و id ابزارک رو عوض کنید

دیدگاه خود را بیان کنید