آموزش ساخت جعبه دانلود

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

http://forum.wp-parsi.com/topic/13455-%D8%A7%D9%81%D8%B2%D9%88%D9%86%D9%87-%D8%B2%D9%85%DB%8C%D9%86%D9%87-%D9%87%D8%A7%DB%8C-%D8%AF%D9%84%D8%AE%D9%88%D8%A7%D9%87-%D9%BE%DB%8C%D8%B4%D8%B1%D9%81%D8%AA%D9%87-advanced-custom-fields/page__st__10#entry112721

اما با لطف یکی از دوستان کمی بهم برخورد و تصمیم گرفتم که این جعبه دانلود رو رایگان برای دوستان بزارم.

خب از موضوع اصلی یعنی آموزش ساخت جعبه دانلود خارج نشم.

*برای استفاده از این جعبه دانلود حتما باید افزونه Advanced Custom Fields نصب باشه.

1- فایل های جاوا اسکریپت زیر رو در پوشه ی js قالبتون قرار بدید:
در این آدرس:

wp-content/themes/your theme/js

اگه این پوشه وجود نداشت اون رو بسازید.

دانلود فایل های جاوا اسکریپت:
فایل پیوستی js.zip 4.04K 26 تعداد دریافت ها

2- کدهای زیر رو هم در انتهای فایل Style.css قرار بدید:

/* download box css */
.tab-container {
width: 625px;
}
.etabs {
margin: 0;
padding: 0;
}
.tab {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background: none repeat scroll 0 0 #EEEEEE;
border-color: #999999 #999999 -moz-use-text-color;
border-image: none;
border-radius: 7px;
border-style: solid solid none;
border-width: 1px 1px medium;
display: inline-block;
margin: 5px 0 5px 5px;
}
.tab a {
color: #FFFFFF;
display: block;
font-family: B Yekan;
font-size: 15px;
line-height: 2em;
outline: medium none;
padding: 0 10px;
text-decoration: none;
}
.tab a:hover {
text-decoration: underline;
}
.tab.active {
background: none repeat scroll 0 0 #FFFFFF;
border-color: #666666;
position: relative;
top: 1px;
}
.tab a.active {
font-weight: bold;
}
.panel-container {
margin-bottom: 10px;
}
.tab.dl-color {
background: none repeat scroll 0 0 #EEAF00;
border: 4px solid #DFA200;
}
.tab.help-color {
background: none repeat scroll 0 0 #45A7EF;
border: 4px solid #338DCF;
}
.tab.info-color {
background: none repeat scroll 0 0 #3BCADA;
border: 4px solid #2FB1BF;
}
.tab.require-color {
background: none repeat scroll 0 0 #C8C7C7;
border: 4px solid #898989;
}
#tabs1-dl {
background: none repeat scroll 0 0 #FDFBCB;
border: 3px solid #FFD40F;
border-radius: 10px;
padding: 0 10px 10px;
}
#tabs1-help {
background: none repeat scroll 0 0 #CBE9FC;
border: 3px solid #4FBCFF;
border-radius: 10px;
padding: 0 10px 10px;
}
#tabs1-info {
background: none repeat scroll 0 0 #AEF2F9;
border: 3px solid #67C7CF;
border-radius: 10px;
padding: 0 10px 10px;
}
#tabs1-require {
background: none repeat scroll 0 0 #E3E3E3;
border: 3px solid #898989;
border-radius: 10px;
padding: 0 10px 10px;
}
#tab-container h2 {
font-family: yekan;
font-size: 18px;
margin: 0;
font-family: B Yekan;
}

3- کدهای زیر هم باید در فایل Single.php قرار بگیرن:
در هر قالب بستگی به جایی که می خواید قرار بگیره داره.