• اطلاعیه ها

    • Saeed Fard

      برگزاری چهارمین همایش Coder Conf و کد تخفیف برای کاربران وردپرس پارسی   20/04/97

      کدرکانف هر سال در آخرین پنجشنبه مرداد با بورد‌های مختلفی برگزار می‌گردد،امسال نیز کدرکانف در همین تاریخ با حضور برنامه نویسان مطرح کشور در بورد تخصصی جاوااسکریپت برگزار خواهد شد، یک گردهمایی متفاوت با طعم Javascript. Coderconf هر سال نسبت به سال‌های گذشته با حضور برنامه‌نویسان پر رنگتر می‌شود. ما سعی کردیم هر ساله به این کنفرانس مفهوم عمیق تری ببخشیم تا از آنچه در سال‌های گذشته عرضه شده به روزتر و مفیدتر واقع شویم. امسال فرصتی خواهد بود تا با نگرشی جدید و بهبود مطالب ارائه شده، عمیقتر به این موضوع نگاه کنیم تا بجای تکرار مباحث پیشین گامی هر چند کوچک در مسیر ارتقای دانش فنی برنامه‌نویسان ایرانی برداریم. ما در Coderconf ۴ با تمرکز بر روی Javascript نیت کرده‌ایم این فرصت را در اختیار برنامه نویسان قرار دهیم تا با ظرافت و استانداردهای روز دنیا کار خود را پیش ببرند. به نظر ما امسال زمان آن فرا رسیده‌است تا این زبان را به صورت تخصصی و از ابعاد مختلف به چالش بکشیم.   دبیر علمی همایش میلاد حیدری، کدرکانف ۴ را اینگونه توصیف کرده است :اشتراک گذاری دانش بهترین راه رسیدن به جاودانگی اطلاعات است. هر ساله همایش‌های زیادی برگزار میشه که افراد شرکت‌کننده می‌توانند با افراد مجرب شبکه سازی کنند. امسال در کدرکانف سعی کردیم علاوه بر بخش شبکه سازی بین افراد بیشتر روی انتقال دانش و کیفیت ارائه ها تمرکز داشته باشیم . به قصد یک گردهمایی بلند مدت بین برنامه‌نویسان جاوااسکریپت که با هم تبادل دانش و اطلاعات کنند گردهم آییم.
      بنده به عنوان عضو کوچکی از جامعه برنامه‌نویسان جاوااسکریپت ایران امیدوارم در کدرکانف امسال علاوه بر شبکه سازی، از اطلاعاتی که دوستان در این همایش در اختیارتان قرار می‌دهند استفاده کنید. در سایت همایش میتوانید سخنرانان و موضوع پنل همایش کدرکانف رو مشاهده کنید . علاقه‌مندان به حضور در این همایش می‌توانند با کد تخفیف wpparsi اقدام به ثبت نام در این گردهمایی کنند. سایت همایش :‌http://coderconf.org
      بلیط فروشی همایش :‌https://evand.com/events/coderconf4  
mohamad

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

14 پست در این موضوع قرار دارد

سلام .

خسته نباشید

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

راه حلی داره؟

0

به اشتراک گذاری این پست


لینک به پست

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

2

به اشتراک گذاری این پست


لینک به پست

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

0

به اشتراک گذاری این پست


لینک به پست

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/

4

به اشتراک گذاری این پست


لینک به پست

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

0

به اشتراک گذاری این پست


لینک به پست

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

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

3

به اشتراک گذاری این پست


لینک به پست

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


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

0

به اشتراک گذاری این پست


لینک به پست

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

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

4

به اشتراک گذاری این پست


لینک به پست

کدهای جاوا اسکریپت را همونطور که گفتند اصلاح کنید و از کدهای 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>

3

به اشتراک گذاری این پست


لینک به پست

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

post-4746-0-81134500-1392460783_thumb.pn

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

home.php

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

0

به اشتراک گذاری این پست


لینک به پست

ارسال شده در (ویرایش شده)

کدهای جاوا اسکریپت را همونطور که گفتند اصلاح کنید و از کدهای 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>

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

ویرایش شده در توسط Black_sky
longbox
0

به اشتراک گذاری این پست


لینک به پست

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

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

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

0

به اشتراک گذاری این پست


لینک به پست

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

0

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

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

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری