ایجاد تب در قالب

[mohamad 19]

سلام .

خسته نباشید

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

راه حلی داره؟

[Morteza 34190]

شما کدوم افزونه رو بررسی کردید؟

[mohamad 19]

من افزونه Tabbed Widgets رو پیدا کردم که فقط تب ها رو به قسمت ساید بار اضافه می کرد و چند سال هم هست آپدیت نشده.ولی میخوام توی قالب ازش استقاده کنم

[Morteza 34190]

http://wordpress.org/extend/plugins/tabs-in-post-editor/
http://wordpress.org/extend/plugins/wp-ui/
http://wordpress.org/extend/plugins/put/
http://wordpress.org/extend/plugins/wordpress-post-tabs/

[mohamad 19]

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

[imanfakhar 26231]

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

http://jsbin.com/edehas/2/edit

[mohamad 19]

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

Parse error: syntax error, unexpected ')', expecting '&' or T_VARIABLE

[عبدالماجد 3203]

جاوا اسکریپت رو به خود قالب مثلا فایل ایندکس یا هیدر اضافه کنید به این صورت :

<script type="text/javascript">
function wpParsiSwich(Down)
{
document.getElementById('wpParsiTabBox').className=Down;
}
</script>

[imanfakhar 26231]

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

#wpParsiTabBox {
display:block;
padding:0;
margin:0;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom:1px #666 solid;
border-right:1px #999 solid;
box-shadow: 0px 0px 5px rgba(0, 0, 0, .5);
-moz-box-shadow:0px 0px 5px rgba(0, 0, 0, .5);
-o-box-shadow: 0px 0px 5px rgba(0, 0, 0, .5);
-khtml-box-shadow: 0px 0px 5px rgba(0, 0, 0, .5);
-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, .5);
overflow:hidden;
}
#wpParsiTabBox a {
text-decoration:none;
}
.wpParsiTabH {
margin:0;
padding:0;
list-style:none;
position:relative;
z-index:1;
}
.wpParsiTabH li {
margin:0;
padding:0;
text-align:center;
display:inline-block;
font-weight:100;
width:32%;
height:32px;
line-height:32px;
background:#666;
position:relative;
    background-image: -webkit-gradient(linear, right top,  left bottom, from(#666), to(#444));
    background-image: -webkit-linear-gradient(right, #666, #444);
    background-image:    -moz-linear-gradient(right, #666, #444);
    background-image:	  -o-linear-gradient(right, #666, #444);
    background-image: linear-gradient(to left, #666, #444);
    border-bottom:1px #000 solid;
}
.wpParsiTabH li a,.wpParsiTabH li a:link,.wpParsiTabH li a:visited,.wpParsiTabH li a:hover {
color:#bbb;
text-shadow:1px 1px 0px #333;
}
.wpParsiTab {
background:#eee;
    background-image: -webkit-gradient(linear, top right, bottom left, from(#eee), to(#bbb));
    background-image: -webkit-linear-gradient(top, #eee, #bbb);
    background-image:    -moz-linear-gradient(top, #eee, #bbb);
    background-image:	  -o-linear-gradient(top, #eee, #bbb);
    background-image: linear-gradient(to bottom, #eee, #bbb);
height:400px;
margin:-1px 0 0 0;
display:none;
z-index:0;
}
.classWpParsiTabBox1 #wpParsiTabTH1,
.classWpParsiTabBox2 #wpParsiTabTH2,
.classWpParsiTabBox3 #wpParsiTabTH3
{
background:#eee;
width:36%;
border-bottom:0px #eee none;

}
.classWpParsiTabBox1 #wpParsiTabT1,
.classWpParsiTabBox2 #wpParsiTabT2,
.classWpParsiTabBox3 #wpParsiTabT3
{
display:block;
}
.wpParsiTabContent{
display:block;
padding:10px 0;
margin:0px 8px;
}

به style.css منتقل کنید و از کدهای html به این بخشش نیاز دارید که جای بخش های فارسی باید کدهای مورد نظرتون رو بگذارید

<div id="wpParsiTabBox" class="classWpParsiTabBox1">
<ul class="wpParsiTabH">
<li id="wpParsiTabTH1"><a href="#body" onclick="wpParsiSwich('classWpParsiTabBox1')">عنوان اول</a></li><li id="wpParsiTabTH2"><a href="#body" onclick="wpParsiSwich('classWpParsiTabBox2')">عنوان دوم</a></li><li id="wpParsiTabTH3"><a href="#body" onclick="wpParsiSwich('classWpParsiTabBox3')">عنوان سوم</a></li>
</ul>
<div class="wpParsiTab" id="wpParsiTabT1"><div class="wpParsiTabContent">محتویات تب اول</div></div>
<div class="wpParsiTab" id="wpParsiTabT2"><div class="wpParsiTabContent">محتویات تب دوم</div></div>
<div class="wpParsiTab" id="wpParsiTabT3"><div class="wpParsiTabContent">محتویات تب سوم</div></div>
</div>

[shili 13]

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

البته اینم بگم که من از قالب برگه جدا استفاده میکنم

home.php

میشه لطف کنید راهنمایی کنید

[shili 13]

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

#wpParsiTabBox {

display:block;

padding:0;

margin:0;

-webkit-border-bottom-left-radius: 10px;

-webkit-border-bottom-right-radius: 10px;

-moz-border-radius-bottomleft: 10px;

-moz-border-radius-bottomright: 10px;

border-bottom-left-radius: 10px;

border-bottom-right-radius: 10px;

border-bottom:1px #666 solid;

border-right:1px #999 solid;

box-shadow: 0px 0px 5px rgba(0, 0, 0, .5);

-moz-box-shadow:0px 0px 5px rgba(0, 0, 0, .5);

-o-box-shadow: 0px 0px 5px rgba(0, 0, 0, .5);

-khtml-box-shadow: 0px 0px 5px rgba(0, 0, 0, .5);

-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, .5);

overflow:hidden;

}

#wpParsiTabBox a {

text-decoration:none;

}

.wpParsiTabH {

margin:0;

padding:0;

list-style:none;

position:relative;

z-index:1;

}

.wpParsiTabH li {

margin:0;

padding:0;

text-align:center;

display:inline-block;

font-weight:100;

width:32%;

height:32px;

line-height:32px;

background:#666;

position:relative;

background-image: -webkit-gradient(linear, right top, left bottom, from(#666), to(#444));

background-image: -webkit-linear-gradient(right, #666, #444);

background-image: -moz-linear-gradient(right, #666, #444);

background-image: -o-linear-gradient(right, #666, #444);

background-image: linear-gradient(to left, #666, #444);

border-bottom:1px #000 solid;

}

.wpParsiTabH li a,.wpParsiTabH li a:link,.wpParsiTabH li a:visited,.wpParsiTabH li a:hover {

color:#bbb;

text-shadow:1px 1px 0px #333;

}

.wpParsiTab {

background:#eee;

background-image: -webkit-gradient(linear, top right, bottom left, from(#eee), to(#bbb));

background-image: -webkit-linear-gradient(top, #eee, #bbb);

background-image: -moz-linear-gradient(top, #eee, #bbb);

background-image: -o-linear-gradient(top, #eee, #bbb);

background-image: linear-gradient(to bottom, #eee, #bbb);

height:400px;

margin:-1px 0 0 0;

display:none;

z-index:0;

}

.classWpParsiTabBox1 #wpParsiTabTH1,

.classWpParsiTabBox2 #wpParsiTabTH2,

.classWpParsiTabBox3 #wpParsiTabTH3

{

background:#eee;

width:36%;

border-bottom:0px #eee none;

}

.classWpParsiTabBox1 #wpParsiTabT1,

.classWpParsiTabBox2 #wpParsiTabT2,

.classWpParsiTabBox3 #wpParsiTabT3

{

display:block;

}

.wpParsiTabContent{

display:block;

padding:10px 0;

margin:0px 8px;

}

به style.css منتقل کنید و از کدهای html به این بخشش نیاز دارید که جای بخش های فارسی باید کدهای مورد نظرتون رو بگذارید

<div id="wpParsiTabBox" class="classWpParsiTabBox1">

<ul class="wpParsiTabH">

<li id="wpParsiTabTH1"><a href="#body" onclick="wpParsiSwich('classWpParsiTabBox1')">عنوان اول</a></li><li id="wpParsiTabTH2"><a href="#body" onclick="wpParsiSwich('classWpParsiTabBox2')">عنوان دوم</a></li><li id="wpParsiTabTH3"><a href="#body" onclick="wpParsiSwich('classWpParsiTabBox3')">عنوان سوم</a></li>

</ul>

<div class="wpParsiTab" id="wpParsiTabT1"><div class="wpParsiTabContent">محتویات تب اول</div></div>

<div class="wpParsiTab" id="wpParsiTabT2"><div class="wpParsiTabContent">محتویات تب دوم</div></div>

<div class="wpParsiTab" id="wpParsiTabT3"><div class="wpParsiTabContent">محتویات تب سوم</div></div>

</div>

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

ویرایش شده اسفند 92 توسط Black_sky
longbox

[Parsa 23463]

بخش js کدها نیست

افزونه

https://wordpress.org/plugins/tabby-responsive-tabs/

[reazah 255]

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

http://jsbin.com/edehas/2/edit

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

[Morteza 34190]

به wpParsiTabH یک li و در بخش پایین براساس ای دی همین li یک div با آی دی جدید