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

در ۷ اسفند ۱۳۹۳ آموزش ویدئویی اضافه شد

download-box2

سلام

من قائم هسنم.

این اولین نوشته من در سایت همیار وردپرس هست.

بسم الله … آموزش رو شروع کنم.

اول باید افزونه Advanced Custom Fileds رو نصب کنید.

آموزش این افزونه رو دوست عزیز آقای دانیال حاتمی در آدرس های زیر دادن:

افزودن زمینه دلخواه با ACF (قسمت اول)

افزودن زمینه دلخواه با ACF (قسمت دوم)

در ادامه این آموزش امروز یاد میگیرید که چگونه یک جعبه دانلود با این افزونه بسازید …

۱- فایل های جاوا اسکریپت زیر رو در پوشه ی 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)) در قسمت نام زمینه – نوع زمینه هم که ((ویرایشگر دیداری)).

مراحل تموم شد.

در قسمت ارسال نوشته باید متاباکسی به نام جعبه دانلود باشه.

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

با آرزوی موفقیت برای شما و همیار وردپرس

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

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

  پیش‌نمایش

دانلود افزونه Advanced Custom Fileds

دانلود صفحه افزونه
آیا این مقاله برای شما مفید بود؟
تقریبا
خیر

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

ارسال دیدگاه به معنی این است که شما ابتدا قوانین ارسال دیدگاه را مطالعه کرده‌اید و با آن موافق هستید.

دیدگاه‌های این نوشته جدید ترین ها شاخص

  1. سلام
    پست عالیه

    من میخواستم ازش استفاده کنم

    اما وقتی همه ی کد ها رو سر جاش میذارم
    منو آبشاری سایت از کار می افته
    یعنی وقتی کد هدر رو میذارم اینجوی میشه
    لطفا کمک کنید …….

    http://beroozfa.com

    بروزفا ، سالم ترین سایت تفریحی کشور

    • 10 سال عضو همیار وردپرس

      تنظیمات افزونه را به درستی انجام دهید

      با احترام

  2. سلام این دانلود باکس تو همه پستها باکسو نشون میده
    میشه کاری کرد که فقط تو یه سری پست باکس نشون داده بشه
    اگه امکانش هست اموزش بزارین
    ممنون میشم

  3. Fatal error: Call to undefined function get_field() in I:xampphtdocswordpresswp-contentthemesdaylisingle.php on line 37
    ارور بالا ظاهر میشه

    • 10 سال عضو همیار وردپرس

      در رابطه با این ارور لطفاً به آموزش های رفع آن رجوع کنید

      با احترام

  4. درود

    قائم عزیز – لطفا کمکم کنید
    آموزش عالی بود
    گام به گام همه رو انجام دادم و در ارسال نوشته جعبه دانلود اضافه شد
    فقط یک مشکل
    بعد از گذاشتن لینک درون جعبه دانلود به کلی صفحفه مشکی میشه !!!
    از شما خواهش میکنم به این شماره 09390676105 و یا id : o.bardiya ارتباط برقرار کنید تا مشکل رو حل کنیم
    استاد عمیقا به این آموزش و نتیجه ی آن احتیاج دارم
    منتظر تماس شما هستم

    با احترام
    فریبرز

  5. خیلی ممنون؛
    solvester.ir

  6. علی جون باز هم مثل همیشه عالی بود

  7. 10 سال عضو همیار وردپرس

    سیستم اعلام نمرات نمرا:
    nomra.ir

  8. 10 سال عضو همیار وردپرس

    دوست عزیز سیستم نمرات سایتت رو چطوری راه اندازی کردی؟
    یه دمو بده ببینیم

  9. 10 سال عضو همیار وردپرس

    در خط های 74 و 75 – 80 و 81 – 86 و 87 – 92 و 93 می تونید رنگ پس زمینه و حاشیه رو تغییر بدید.

  10. 10 سال عضو همیار وردپرس

    قبلا کمی تغییر توی استایل دادم.
    این تصویر از قبل از تغییر هست.

مطالب زیر را حتما بخوانید