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

javaheri123

کاربر عضو
سلام دوستان خسته نباشید

خیلی دنبال این افزونه گشتم اما پیدا نکردم

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

نمونه :

 
آخرین ویرایش توسط مدیر:

hannanstd.ir

مدیر انجمن و توسعه دهنده ووکامرس پارسی
اینو تست کن

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

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

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

حال فایل wp-tabber-widget.php را با NotePad باز کنید و کد زیر را داخل آن قرار دهید و بجای آیدی دسته ها عدد مربوط به آیدی دسته مورد نظرتون رو بنویسین .


کد:
<?php
/* Plugin Name: WPSchool jQuery Tabber Widget
Plugin URI: http://wpschool.ir
Description: نمونه افزونه ابزارک تب ها اماده شده توسط مدرسه وردپرس
Version: 1.0
Author: WPSchool
Author URI: http://wpschool.ir
License: GPL2
*/

// creating a widget
class WPBTabberWidget extends WP_Widget {

function WPBTabberWidget() {
        $widget_ops = array(
        'classname' => 'WPBTabberWidget',
        'description' => 'Simple jQuery Tabber Widget'
);
$this->WP_Widget(
        'WPBTabberWidget',
        'WPBeginner Tabber Widget',
        $widget_ops
);
}
function widget($args, $instance) { // widget sidebar output

function wpb_tabber() {

// Now we enqueue our stylesheet and jQuery script

wp_register_style('wpb-tabber-style', plugins_url('wp-tabber-style.css', __FILE__));
wp_register_script('wpb-tabber-widget-js', plugins_url('wp-tabber.js', __FILE__), array('jquery'));
wp_enqueue_style('wpb-tabber-style');
wp_enqueue_script('wpb-tabber-widget-js');

// Creating tabs you will be adding you own code inside each tab
?>

<ul class="tabs">
<li class="active"><a href="#tab1">دسته 1</a></li>
<li><a href="#tab2">دسته 2</a></li>
<li><a href="#tab3">دسته 3</a></li>
</ul>

<div class="tab_container">

<div id="tab1" class="tab_content">
<?php $temp_query = $wp_query; query_posts("showposts=10&cat=آیدی دسته 1"); ?>
<?php while (have_posts()) { the_post(); ?>
<li><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to “<?php the_title(); ?>”"><?php the_title(); ?></a></li>
<?php } $wp_query = $temp_query; ?>
</div>

<div id="tab2" class="tab_content" style="display:none;">

 <?php $temp_query = $wp_query; query_posts("showposts=10&cat=آیدی دسته 2"); ?>
<?php while (have_posts()) { the_post(); ?>
<li><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to “<?php the_title(); ?>”"><?php the_title(); ?></a></li>
<?php } $wp_query = $temp_query; ?>

</div>

<div id="tab3" class="tab_content" style="display:none;">

<?php $temp_query = $wp_query; query_posts("showposts=10&cat=آیدی دسته سه"); ?>
<?php while (have_posts()) { the_post(); ?>
<li><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to “<?php the_title(); ?>”"><?php the_title(); ?></a></li>
<?php } $wp_query = $temp_query; ?>

</div>

</div>

<div class="tab-clear"></div>

<?php

}

extract($args, EXTR_SKIP);
// pre-widget code from theme
echo $before_widget;
$tabs = wpb_tabber();
// output tabs HTML
echo $tabs;
// post-widget code from theme
echo $after_widget;
}
}

// registering and loading widget
add_action(
'widgets_init',
create_function('','return register_widget("WPBTabberWidget");')
);
?>
با کد بالا، ما یک افزونه به نام WPSchool jQuery Tabber Widget ساختیم.

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


کد:
(function($)  {
$(".tab_content").hide();
$("ul.tabs li:first").addClass("active").show();
$(".tab_content:first").show();
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tab_content").hide();
var activeTab = $(this).find("a").attr("href");
//$(activeTab).fadeIn();
if ($.browser.msie) {$(activeTab).show();}
else {$(activeTab).fadeIn();}
return false;
});
})(jQuery);
حال ابزارک ما آماده است. در قدم بعدی نیاز است که استایل های ابزارک را نیز تعریف کنیم. پس یک فایل به نام wp-tabber-style.css ساخته و کدهای زیر را داخلش قرار دهید:


کد:
ul.tabs { 
position: relative; 
z-index: 1000; 
float: right; 
border-left: 1px solid #C3D4EA; 
}
ul.tabs li {
position: relative; 
overflow: hidden; 
height: 26px; 
float: right; 
margin: 0; 
padding: 0; 
line-height: 26px; 
background-color: #99B2B7;
border: 1px solid #C3D4EA; 
border-left: none; 
}
ul.tabs li  a{ 
display: block; 
padding: 0 10px; 
outline: none; 
text-decoration: none;
}
html ul.tabs li.active, 
html ul.tabs li.active a:hover { 
background-color: #D5DED9; 
border-bottom: 1px solid #D5DED9; 
}
.widget-area .widget .tabs a  { 
color: #FFFFFF; 
}
.tab_container {
position: relative; 
top: -1px; 
z-index: 999; 
width: 100%; 
float: left; 
font-size: 11px; 
background-color: #D5DED9; 
border: 1px solid #C3D4EA;
}
.tab_content { 
padding: 7px 11px 11px 11px;
line-height: 1.5;
}
.tab_content ul { 
margin: 0;
padding: 0; 
list-style: none; 
}
.tab_content li { 
margin: 3px 0;
 }
.tab-clear {
clear:both;
}
آموزش امروز هم به پایان رسید. با استفاده از افزونه بالا می توانید آخرین نوشته های سه دسته را به صورت تب نمایش دهید . فقط باید آیدی دسته ها را بالا ورد کنین .

 

alifiresoft

کاربر عضو
این پلاگین ها رو هم یه سر بزن :



 

javaheri123

کاربر عضو
دوست عزیزم خیلی ازت ممنونم

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

 

javaheri123

کاربر عضو
این پلاگین ها رو هم یه سر بزن :



>>> این به نظرم اون چیزینه که میخوای
علی جان دستت درد نکنه دقیقا آخرین افزونه خیلی کاربردیه اما متاسفانه تو نصب یه همچین پیغامی میده :

Sorry, you can't activate unless you have installed

 

javaheri123

کاربر عضو
بچه ها پیداش کردم قوربونه همتون دانلودش کنید :



 

Mohamad139400

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

 
بالا