نمایش تب ها به صورت کشویی در وردپرس با Accordions

سلام و روز بخیر به دوستان عزیز و همراهان همیشگی مِستر آموز.

 

در حقیقت همه صاحبان سایت سعی میکنن سایت زیبا با جلوه های بصری خوبی داشته باشند تا بتوانند برای جذب بازدیدکننده با بقیه سایت های بزرگ و کوچک رقابت کنند. در بعضی از سایت ها حتما دیده اید که در قسمت مختلف یا برای مثال بخش سوالات متداول ، برای ارائه محتوا از منوها و تب ها در وردپرس استفاده می کنند. این بی شک این امر سایت را زیباتر خواهد کرد. برای انجام این کار با ما همراه باشید.

 

 

نمایش تب ها به صورت کشویی در وردپرس با Accordions

با استفاده از این افزونه، می توانید تب ها در وردپرس را به صورت آکاردئونی یا کشویی نمایش دهید.

 

 

برای دانلود افزونه Accordions اینجا یا تصویر زیر را کلیک کنید.

 

 

بعد از فعال سازی این افزونه، یک آیتم جدید در منوی اصلی سایت با نام Accordions ایجاد می شود. در زیر منوی آن گزینه  New Accordions  وارد محیط تنظیمات افزونه می شویم. تب های متعددی وجود دارند که در ادامه به توضیح گزینه های موجود در هر کدام می پردازیم.

 

آموزش تنظیمات افزونه ی Accordions

در صفحه تنظیمات افزونه ابتدا عنوان مورد نظر خود را وارد کنید.

 

Shortcode

اینجا چهار قعطه کد مجزا از هم

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

 

 

قسمت اول: تب کشویی ساده

کد اول:

برای استفاده از کادر کشویی، شورت کد اول را در جای مورد نظر، صفحه یا نوشته خود بگذارید.

کد دوم:

این کادر همان کد اول است، با این تفاوت که با زبان php می باشد.  می توانید آن را در یکی از فایل های قالب خود بگذارید و از آن مثلا در هدر ، سایدبار ، نوشته ها و … استفاده کرد.

 

قسمت دوم: تب کشویی چند قسمتی

کد اول:

این قطعه کد برای قرار گرفتن در صفحات یا نوشته هاست.

کد دوم:

این کد هم به زبان PHP برای استفاده در فایل های قالب می باشد.

 

تب Accordion Options

 

 

Collapsible:

این قسمت برای تعیین اینکه کادر کشویی قابلیت جمع شوندگی داشته باشد یا خیر.

heightStyle:

از این قسمت می توانید استایل ارتفاع را تعیین کنید، اگر می خواهید کادر بدون اسکرول بار نمایش داده شود، گزینه Content را انتخاب کنید. و در غیر اینصورت گزینه Fill را برای نمایش دادن اسکرول بار انتخاب کنید.

Activate event:

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

 

 

تب Style

 

 

Themes:

برای تعیین نوع قالب تب کشوی است.

 

Container options:

این بخش برای تنظیم متن و رنگ بندی می باشد و با چهار بخش پایین قابل تنظیم می باشد:

Text Align: جهت تراز کردن متن می باشد.
Padding: این قسمت برای تعیین حاشیه های متن از مرز های کادر یا تب، بر حسب پیکسل.
Background color: رنگ پس زمینه
Background image: تصویر پس زمینه

 

Icon set

 

 

از این تب می توانید برای باز و بسته شدن بت کشوی آیکون انتخاب کنید. لازم به ذکر است که می توانید از آیکون های پیش فرض نیز استفاده کنید.

Plus Icon: انتخاب یک آیکون برای بسته شدن.
Minus Icon: انتخاب یک آیکون برای باز شدن.
Icon color: از این بخش رنگ آیکون را انتخاب کنید.
Icon font size: اینجا هم اندازه فونت آیکون را بر حسب پیکسل انتخاب کنید.

 

Accordions Header

در این قسمت برای تنظیمات مربوط به قسمت Header (سربرگ) تب های کشویی می باشد.

Default Background Color: این قسمت برای انتخاب رنگ پس زمینه ی پیش فرض می باشد.
Active Background Color: برای انتخاب رنگ پس زمینه ی حالت فعال از این بخش استفاده کنید. (حالتی که کادر مورد نظر توسط کاربر انتخاب شده است و محتوای آن در حال  نمایش است.)
Accordions Header Font Color: برای انتخاب رنگ فونت Header (سربرگ) از این قسمت استفاده کنید.
Accordions Header Font Size: این بخش نیز برای انتخاب اندازه ی فونت Header (سربرگ)  بر حسب پیکسل است.

 

 

Accordions Content

تنظیمات مربوط به محتوای کادر کشویی:

Accordions Content Font Color: رنگ فونت محتوا را انتخاب کنید.
Accordions Content Font Size: اندازه فونت محتوا را از این بخش انتخاب کنید.
Accordions Content Background Color: این بخش نیز برای انتخاب رنگ پس زمینه ی محتوا می باشد.

 

تب Content

 

 

برای تعیین متن Header و محتوای تب ها در وردپرس به صورت کشویی از این بخش استفاده کنید و در قسمت های مورد نظر وارد کنید. برای اضافه کردن موارد جدید به
کادر کشویی می توانید از دکمه ی Add استفاده کنید.

 

تب Custom CSS

 

 

در این قسمت می توانید کد های CSS مورد نظر را وارد کنید. البته اگر به زبان CSS آشنایی داشته باشید. اگر هم به زبان CSS مسلط نیست پیشنهاد می کنم از الان با رفتن به بخش آموزش CSS مِستر آموز این زبان شیرین را فرا بگیرید.

 

تب Tab Options

 

 

Collapsible:

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

 

الان تنها کاری که باید انجام دهید این است که با کلیک کردن روی دکمه انتشار کار خود را ذخیره کنید.

 

 

اکنون قطعه کد دلخواه خود را کپی کنید و در برگه یا نوشته مورد نظر قرار دهید.

 

 

اکنون می توانید نتیجه کار خود را مشاهده کنید:

 

 

 

موفق و پیروز باشید.