رفتن به مطلب

ایجاد تب در ستون کناری


پست های پیشنهاد شده

سلام

دوستان کسی هست که بتونه بهترین راه برای این کار رو نشون بده و بشه راحت تر یه تب در ستون کناری پوسته وردپرسی داشت که شامل نوشته های تازه و موضوعات سایت و ابر برچسب ها و آخرین دیدگاه ها باشه من توی سایت گشتم و یه راه بود اگه دوستان بتونند یه راه برای این کار ارائه بدن که آسونتر از این باشه بهتر میشه

لینک به ارسال

سلام

دوستان کسی هست که بتونه بهترین راه برای این کار رو نشون بده و بشه راحت تر یه تب در ستون کناری پوسته وردپرسی داشت که شامل نوشته های تازه و موضوعات سایت و ابر برچسب ها و آخرین دیدگاه ها باشه من توی سایت گشتم و یه راه بود اگه دوستان بتونند یه راه برای این کار ارائه بدن که آسونتر از این باشه بهتر میشه

سلام دوست من مطمئنی درست جست و جو کردی ؟

خوشبختانه اینقدر مباحث برنامه نویسی در اینترنت فراوون شده که پیدا کردن ساخت تب بندی فک نکنم زیاد سخت باشه !

به هر حال :


<div class="spbox">
<ul class="sptabs">
<li><a href="#spcontent1" class="spactive" >آخرین ها</a></li>
<li><a href="#spcontent2" >موضوعات</a></li>
<li><a href="#spcontent3" >ابرچسب ها</a></li>
<li><a href="#spcontent4" >دیدگاه</a></li>
</ul>
<div class="spcontent">
<div id="spcontent1">
<ul class="tabs-content" >
<?php
$recent_posts = wp_get_recent_posts();
foreach( $recent_posts as $recent ){
echo '<li><a href="' . get_permalink($recent["ID"]) . '">' . $recent["post_title"].'</a> </li> ';
}
?>
</ul>
</div>
<div id="spcontent2">
<ul class="tabs-content" >
<?php wp_list_categories('orderby=name'); ?>
</ul>
</div>
<div id="spcontent3">
<ul class="tabs-content" >
<?php
wp_tag_cloud( array(
'smallest' => 8,
'largest' => 22,
'unit' => 'pt',
'number' => 35,
'format' => 'flat',
'separator' => "\n",
'orderby' => 'name',
'order' => 'ASC',
'exclude' => null,
'include' => null,
'topic_count_text_callback' => default_topic_count_text,
'link' => 'view',
'taxonomy' => 'post_tag',
'echo' => true,
'child_of' => null, // see Note!
) ); ?>
</div>
</ul>
</div>
<div id="spcontent4">
<ul class="tabs-content" >
<?php $comments = get_comments('status=approve&number=5'); ?>
<?php foreach ($comments as $comment) { ?>
<li>
<?php echo get_avatar( $comment, '40' ); ?>
<a title="">
<span class="name-send-comment"><?php echo strip_tags($comment->comment_author); ?></span>
<br />
<span class="text-comment-form"><?php echo wp_html_excerpt( $comment->comment_content, 20 ); ?>...</span>
</a>
<div style="clear: both;"></div>
</li>
<?php } ?>
</ul>
</div>
</div>
</div>

استایل :


.spcontent{
background:#145ECF;
float:right;
width:100%;
}
.sptabs{
list-style:none;
}
.sptabs li{
float:right;
margin:0px 8.2px;
}
.sptabs li a{
text-decoration: none;
padding:4px 12px;
background-color:#145ECF;
color:#D4D4D4;
}
.sptabs li a:hover{
color:#333333;
text-shadow:0px 1px 5px #FFA347;
}
.sptabs li a.spactive{
background-color:#4DB870;
}
.tabs-content{
list-style:none;
margin:0px 7px;
}
.tabs-content li{
padding-top:5px;
}
.tabs-content li a{
transition:all .2s;
-webkit-transition:all .2s;
-moz-transition:all .2s;
-o-transition:all .2s;
-ms-transition:all .2s;
}
.tabs-content li a:hover{
padding:5px 7px;
border-radius:3px;
color:#FFA347;
}

اسکریپت :


<script type="text/javascript">
jQuery(document).ready(function(){

jQuery('.spcontent div:not(:first)').hide();

jQuery('ul.sptabs li a').on('click',function(){
if(jQuery(this).hasClass('spactive')){return false;}
jQuery('ul.sptabs li a').removeClass('spactive');
jQuery(this).addClass('spactive');
var href=jQuery(this).attr('href');
var split=href.split('#');
jQuery('.spcontent div').hide();
jQuery('.spcontent div#'+split[1]).slideDown(300);
return false;
});

});
</script>

مشکلی داشت بگید

لینک به ارسال

سلام دوست من مطمئنی درست جست و جو کردی ؟

خوشبختانه اینقدر مباحث برنامه نویسی در اینترنت فراوون شده که پیدا کردن ساخت تب بندی فک نکنم زیاد سخت باشه !

به هر حال :


<div class="spbox">
<ul class="sptabs">
<li><a href="#spcontent1" class="spactive" >آخرین ها</a></li>
<li><a href="#spcontent2" >موضوعات</a></li>
<li><a href="#spcontent3" >ابرچسب ها</a></li>
<li><a href="#spcontent4" >دیدگاه</a></li>
</ul>
<div class="spcontent">
<div id="spcontent1">
<ul class="tabs-content" >
<?php
$recent_posts = wp_get_recent_posts();
foreach( $recent_posts as $recent ){
echo '<li><a href="' . get_permalink($recent["ID"]) . '">' . $recent["post_title"].'</a> </li> ';
}
?>
</ul>
</div>
<div id="spcontent2">
<ul class="tabs-content" >
<?php wp_list_categories('orderby=name'); ?>
</ul>
</div>
<div id="spcontent3">
<ul class="tabs-content" >
<?php
wp_tag_cloud( array(
'smallest' => 8,
'largest' => 22,
'unit' => 'pt',
'number' => 35,
'format' => 'flat',
'separator' => "\n",
'orderby' => 'name',
'order' => 'ASC',
'exclude' => null,
'include' => null,
'topic_count_text_callback' => default_topic_count_text,
'link' => 'view',
'taxonomy' => 'post_tag',
'echo' => true,
'child_of' => null, // see Note!
) ); ?>
</div>
</ul>
</div>
<div id="spcontent4">
<ul class="tabs-content" >
<?php $comments = get_comments('status=approve&number=5'); ?>
<?php foreach ($comments as $comment) { ?>
<li>
<?php echo get_avatar( $comment, '40' ); ?>
<a title="">
<span class="name-send-comment"><?php echo strip_tags($comment->comment_author); ?></span>
<br />
<span class="text-comment-form"><?php echo wp_html_excerpt( $comment->comment_content, 20 ); ?>...</span>
</a>
<div style="clear: both;"></div>
</li>
<?php } ?>
</ul>
</div>
</div>
</div>

استایل :


.spcontent{
background:#145ECF;
float:right;
width:100%;
}
.sptabs{
list-style:none;
}
.sptabs li{
float:right;
margin:0px 8.2px;
}
.sptabs li a{
text-decoration: none;
padding:4px 12px;
background-color:#145ECF;
color:#D4D4D4;
}
.sptabs li a:hover{
color:#333333;
text-shadow:0px 1px 5px #FFA347;
}
.sptabs li a.spactive{
background-color:#4DB870;
}
.tabs-content{
list-style:none;
margin:0px 7px;
}
.tabs-content li{
padding-top:5px;
}
.tabs-content li a{
transition:all .2s;
-webkit-transition:all .2s;
-moz-transition:all .2s;
-o-transition:all .2s;
-ms-transition:all .2s;
}
.tabs-content li a:hover{
padding:5px 7px;
border-radius:3px;
color:#FFA347;
}

اسکریپت :


<script type="text/javascript">
jQuery(document).ready(function(){

jQuery('.spcontent div:not(:first)').hide();

jQuery('ul.sptabs li a').on('click',function(){
if(jQuery(this).hasClass('spactive')){return false;}
jQuery('ul.sptabs li a').removeClass('spactive');
jQuery(this).addClass('spactive');
var href=jQuery(this).attr('href');
var split=href.split('#');
jQuery('.spcontent div').hide();
jQuery('.spcontent div#'+split[1]).slideDown(300);
return false;
});

});
</script>

مشکلی داشت بگید

مشکلم این کد هاست نمیشه این کد ها رو نزارم و با یه کد درون ابزارک ایجادش کنم

لینک به ارسال

مشکلم این کد هاست نمیشه این کد ها رو نزارم و با یه کد درون ابزارک ایجادش کنم

من کدی سراغ ندارم ، ولی خوب این کدها رو دستی بزارید که همونجوری که دلتون میخواد بهش استایل بدید

لینک به ارسال

سلام

اگر نمی‌خواید خودتون این کار رو انجام بدید از افزونه استفاده کنید

اول دوم سوم

ممنونم دوست عزیز دستتوت درد نکنه

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...