ساخت جعبه کامل دانلود با Advanced Custom Fileds

ساخت جعبه کامل دانلود با Advanced Custom Fileds
http://www.msina.ir/wp-content/uploads/2015/03/Wp-Msina.ir-advanced-custom-fields.zip

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

download-box2

امید است اکسیژن طراحی سایت Msina بتواند شما وبمستران عزیز در زمینه وردپرس راضی و خوشنود بگرداند.

Advanced Custom Fileds

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

آدرس زیر:

wp-content/themes/your theme/js

دانلود فایل های جاوا اسکریپت

۲- کدهای زیر رو در فایل 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 {
color: rgb(136, 101, 0);
background: -moz-linear-gradient(center top , rgb(255, 204, 0), rgb(212, 157, 0)) repeat scroll 0% 0% transparent;
text-shadow: 0px 1px 1px rgb(255, 204, 51);
box-shadow: 0px -1px 0px rgb(255, 236, 160), 0px 1px 0px rgb(183, 136, 0), 0px 3px 3px rgba(0, 0, 0, 0.25);
border: 5px;
}
.tab.help-color {
color: rgb(11, 68, 137);
background: -moz-linear-gradient(center top , rgb(117, 199, 254), rgb(50, 127, 198)) repeat scroll 0% 0% transparent;
text-shadow: 0px 1px 0px rgb(94, 178, 231);
border: 5px;
}
.tab.info-color {
color: rgb(8, 118, 130);
background: -moz-linear-gradient(center top , rgb(69, 215, 231), rgb(6, 177, 196)) repeat scroll 0% 0% transparent;
text-shadow: 0px 1px 0px rgb(114, 232, 245);
border: 5px;
}
.tab.require-color {
color: rgb(78, 77, 77);
background: -moz-linear-gradient(center top , rgb(222, 220, 220), rgb(145, 145, 145)) repeat scroll 0% 0% transparent;
text-shadow: 0px 1px 0px rgb(219, 217, 217);
border: 5px;
}
#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;
}

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

<div id="tab-container" class='tab-container'>
<ul class='etabs'>
<li class='tab dl-color'><a href="#tabs1-dl">لینک دانلود</a></li>
<li class='tab help-color'><a href="#tabs1-help">راهنما</a></li>
<li class='tab info-color'><a href="#tabs1-info">مشخصات</a></li>
<li class='tab require-color'><a href="#tabs1-require">سیستم مورد نیاز</a></li>
</ul>
<div class='panel-container'>
<div id="tabs1-dl">
<h2>لینک های دانلود</h2>
<?php echo get_field('download_links'); ?>
</div>
 
<div id="tabs1-help">
<h2>راهنما</h2>
<?php echo get_field('help'); ?>
</div>
 
<div id="tabs1-info">
<h2>مشخصات</h2>
<?php echo get_field('info'); ?>
</div>
<div id="tabs1-require">
<h2>سیستم مورد نیاز</h2>
<?php echo get_field('require'); ?>
</div>
</div>
۴- موردی که باید حتما انجام بشه اینه که کدهای زیر رو به فایل header.php بعد از تابع:
<?php wp_head(); ?
و سپس این کدها را اضافه کنید:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="<?php bloginfo('template_url'); ?>/js/jquery.hashchange.min.js" type="text/javascript"></script>
<script src="<?php bloginfo('template_url'); ?>/js/jquery.tab.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready( function() {
         $('#tab-container').easytabs();
});
</script>
و اما قسمت مهم تنظیمات:

۱- در سمت راست منوی مدیریت روی زمینه های دلخواه کلیک کنید. (قسمت راست منو )
۲- در قسمت بالا و در کنار گروه های زمینه روی افزودن کلیک کنید. ( قسمت بالا )
۳- در قسمت تنظیمات موقعیت رو معمولی بعد از نوشته قرار بدید. ( قسمت تنظیمات )
۴- در پایین این قسمت یعنی استایل تیک گزینه دارای متاباکس استاندارد رو بزنید.
۵- در بالای صفحه هم نام گروه زمینه رو انتخاب می کنید مثلا  جعبه دانلود .
۶- روی افزودن زمینه کلیک کنید.
۷- در قسمت برچسب زمینه بنویسید  لینک های دانلود و در قسمت نام زمینه هم بنویسید  download_links .
۸- در قسمت بعد یعنی نوع زمینه  ویرایشگر دیداری رو انتخاب کنید. ( ویرایشگر دیداری )
۹- حالا باز روی افزودن زمینه کلیک کنید.
۱۰- در قسمت برچسب زمینه  راهنما و در قسمت نام زمینه بنویسید  help نوع زمینه رو هم که  ویرایشگر دیداری قرار میدید.
۱۱- کلیک روی افزودن زمینه – نوشتن  مشخصات در قسمت برچسب زمینه – نوشتن  info در قسمت نام زمینه – نوع زمینه هم که  ویرایشگر دیداری .
۱۲- مثل مرحله قبل: افزودن زمینه – نوشتن  سیستم مورد نیاز در قسمت برچسب افزونه – نوشتن  require در قسمت نام زمینه – نوع زمینه هم که  ویرایشگر دیداری .

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

دانلود افزونه  صفحه افزونه

نوشته شده دراسفند ۱۰, ۱۳۹۳ درآموزش های وردپرس, آموزش وردپرس, آموزش وردپرس, آموزش وردپرس, مربوط به تم, وردپرس, پلاگین وردپرس, کاربردی

اشتراک گذاری

درباره نویسنده

بنیان‌گذار اکسیژن طراحی سایت Msina

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

Time limit is exhausted. Please reload CAPTCHA.

Back to Top