خرید هاست ارزدیجیتال
حراجی دامنه های ویژهمشاهده





تبلیغات
تبلیغات تبلیغات
تبلیغات ژاکت, مرجع خرید قالب و افزونه وردپرسی اورجینال

آموزش ایجاد ابزارک تب ها در وردپرس

مقالات,آموزش,ترفند , آموزش ها , وردپرس

وب سایت هایی که بر پایه وردپرس ایجاد میشوند و مورد استفاده قرار میگیرند اکثرا دارای ابزارک هایی هستند که در صفحات مختلف دیتاهای مختلفی را نمایش میدهد اما مشکلی که وجود دارد این است که ابزارک ها باید در کوچکترین حالت خود بیشترین اطلاعات را منتقل کنند که نیاز به افزودن ابزارک های زیاد به سایدبار سایت نباشد برای این منظور در این آموزش روش ایجاد ابزارک تب ها در وردپرس را می آموزیم.

 

آموزش ایجاد ابزارک تب ها در وردپرس

آموزش ایجاد ابزارک تب ها در وردپرس

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

 

ایجاد فایل های مهم برای تب ها

در مرحله اول باید یک پوشه به نام wp-tab-widget در هاست وب سایت خود ایجاد کنید و سپس دو فایل در داخل این پوشه بسازید اولی با نام wp-tabber-widget.php باید ساخته شود و فایل دوم را با نام wp-tabber-style.css میسازیم. همانطور که مشخص است فایل اول برای کد های php و فایل دوم برای استایل ها مورد استفاده قرار خواهد گرفت. فایل سوم را نیز با نام wp-tabber.js بسازید. این فایل شامل اسکریپت های مربوط به تب هایی است که ساخته میشود.

 

در ابتدای کار فایل wp-tabber-widget.php را گشوده و کد زیر را در آن قرار دهید:

 

<?php // 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="#tab۱">جدیدترین ها</a></li>
 
 
<li><a href="#tab۲">برچسب ها</a></li>
 
 
<li><a href="#tab۳">نظرات</a></li>
 
  
</ul>
 
 
<div class="tab_container">
 
<div id="tab۱" class="tab_content">
<?php wp_get_archives('type=postbypost&limit=۳'); ?>
</div>
 
 
<div id="tab۲" class="tab_content" style="display:none;">
   
<?php wp_tag_cloud('smallest=۸&largest=۱۰&'); ?>
   
</div>
 
 
<div id="tab۳" class="tab_content" style="display:none;">
<?php global $wpdb; $sql = "SELECT DISTINCT ID, post_title, post_password, comment_ID, comment_post_ID, comment_author, comment_date_gmt, comment_approved, comment_type,comment_author_url, SUBSTRING(comment_content,۱,۳۰) AS com_excerpt FROM $wpdb->comments
LEFT OUTER JOIN $wpdb->posts ON ($wpdb->comments.comment_post_ID =
$wpdb->posts.ID)
WHERE comment_approved = '۱' AND comment_type = '' AND
post_password = ''
ORDER BY comment_date_gmt DESC
LIMIT ۱۰";
$comments = $wpdb->get_results($sql);
$output = $pre_HTML;
$output .= "\n
 
<ul>";
foreach ($comments as $comment) {
$output .= "\n
 
<li>".strip_tags($comment->comment_author)
.":" . "<a href=\"" . get_permalink($comment->ID) .
"#comment-" . $comment->comment_ID . "\" title=\"on " .
$comment->post_title . "\">" . strip_tags($comment->com_excerpt)
."</a></li>
 
  
";
}
$output .= "\n</ul>
 
  
";
$output .= $post_HTML;
echo $output;?>
</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");') ); ?>

 

پس از آن شما باید به این ابزارکی که ساخته شده است کد های 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);

 

در نهایت شما نیاز به دادن استایل هایی زیبا به آن هستید که یک مورد از این استایل ها برای شما در ادامه قرار داده میشود:

 

ul.tabs {
position: relative;
z-index: ۱۰۰۰;
float: right;
border-left: ۱px solid #C۳D۴EA;
}
ul.tabs li {
position: relative;
overflow: hidden;
height: ۲۶px;
float: right;
margin: ۰;
padding: ۰;
line-height: ۲۶px;
background-color: #۹۹B۲B۷;
border: ۱px solid #C۳D۴EA;
border-left: none;
}
ul.tabs li  a{
display: block;
padding: ۰ ۱۰px;
outline: none;
text-decoration: none;
}
html ul.tabs li.active,
html ul.tabs li.active a:hover {
background-color: #D۵DED۹;
border-bottom: ۱px solid #D۵DED۹;
}
.widget-area .widget .tabs a  {
color: #FFFFFF;
}
.tab_container {
position: relative;
top: -۱px;
z-index: ۹۹۹;
width: ۱۰۰%;
float: left;
font-size: ۱۱px;
background-color: #D۵DED۹;
border: ۱px solid #C۳D۴EA;
}
.tab_content {
padding: ۷px ۱۱px ۱۱px ۱۱px;
line-height: ۱.۵;
}
.tab_content ul {
margin: ۰;
padding: ۰;
list-style: none;
}
.tab_content li {
margin: ۳px ۰;
 }
.tab-clear {
clear:both;
}

 

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

این مقاله چقدر براتون مفید بود؟

از ۱ تا ۵ امتیاز بدید.

میانگین رتبه 0 / 5. تعداد رای : 0

تا حالا کسی رای نداده! اولین نفر شما باشید.

دانلود

هاست ارزان، لایت اسپید، سرور مجازی منطبق با اسکریپت های 20script کلیک کنید >

خرید ارز
مطلب مفیدی بود ؟
نویسنده : تیم محتوای 20اسکریپت 0 مقالات,آموزش,ترفند , آموزش ها , وردپرس
لینک کوتاه مطلب : https://www.20script.ir/?p=32602
کلمات کلیدی پست :
مطالب مرتبط
8,548تغییر نامک downloads در افزونه Easy Digital Downloads تاریخ : 2020/04/29
2,908روش های هایلایت کردن یک منو در وردپرس تاریخ : 2023/06/18
7,280آموزش رفع خطای Missing a temporary folder در وردپرس تاریخ : 2019/07/4
6,616آموزش رفع خطای This site ahead contains harmful programs تاریخ : 2019/04/9
5,644چرا کلمات کلیدی طولانی در افزایش سئو مهم هستند تاریخ : 2019/05/31
10,036آموزش رفع خطای ۴۰۴ ساب فولدر وردپرس تاریخ : 2019/10/6
6,952نمایش لیست نوشته های زماندار در وردپرس تاریخ : 2019/04/15
5,336دسترسی به پیشخوان وردپرس فقط توسط مدیر تاریخ : 2019/08/28
5,120چگونه فیلد تصاویر را به دسته‌ های وردپرس اضافه کنیم؟ تاریخ : 2019/10/9
9,388افزونه وردپرس مدیریت ابزارک ها Widget Logic تاریخ : 2016/12/25
6,160رفع خطای وردپرس در حال حاضر به روز رسانی دیگری در حال پردازش است تاریخ : 2018/12/29
5,136چگونگی پیدا کردن ID دسته ها و مطالب در وردپرس تاریخ : 2019/05/11
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت هاقالب عشق بین انگشت ها
قالب دخترونه و آرایشقالب دخترونه و آرایش
قالب زیبای ماشینقالب زیبای ماشین
قالب فانتزی و طنز چِشمقالب فانتزی و طنز چِشم
قالب دختر رویاییقالب دختر رویایی
قالب وبلاگ دکوراسیونقالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درختقالب وبلاگ کلبه و درخت
قالب دختر زیباقالب دختر زیبا
قالب پسرونه غمگینقالب پسرونه غمگین
قالب عاشقانه قلبقالب عاشقانه قلب
بیست اسکریپت
اسکریپت
profile
sourceforge
profile webmaster
profile check
checker list
checker
checker
upload file