قالب وردپرس درنا توس
خانه / کامپیوتر و وب / طراحی وب / Css / آموزش ساخت جعبه دانلود حرفه ای

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

امروز در این مطلب کلبه دانش آموزش ساخت جعبه دانلود وردپرس را برای شما کاربران کلبه دانش قرارداده ایم

 

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

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

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

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

منبع :همیار وردپرس

راهنمای دانلود

لینک‌های دانلود

راهنمای دانلود

  • برای دانلود، به روی عبارت "دانلود" کلیک کنید و منتظر بمانید تا پنجره مربوطه ظاهر شود سپس محل ذخیره شدن فایل را انتخاب کنید و منتظر بمانید تا دانلود تمام شود.
  • جهت استفاده از فایل های فشرده از نرم افزار WinRar استفاده نموده و به پسورد هر فایل توجه نمایید.
  • در صورت بروز مشکل در دانلود فایل ها تنها کافی است از طریق سیستم گزارش خطا نسبت به بروز مشکل اطلاع دهید تا پیگیری سریع برای حل مشکل اقدام گردد.
  • فایل های قرار داده شده برای دانلود به منظور کاهش حجم و دریافت سریعتر فشرده شده اند، برای خارج سازی فایل ها از حالت فشرده از نرم افزار Win Rar و یا مشابه آن استفاده کنید.
  • کلمه رمز جهت بازگشایی فایل فشرده عبارت www.kolbedanesh.com ( حتما با حروف کوچک تایپ شود ) می باشد. تمامی حروف را میبایستی به صورت کوچک تایپ کنید و در هنگام تایپ به وضعیت EN/FA کیبورد خود توجه داشته باشید همچنین بهتر است کلمه رمز را تایپ کنید و از Copy-Paste آن بپرهیزید.
  • چنانچه در هنگام خارج سازی فایل از حالت فشرده با پیغام CRC مواجه شدید، در صورتی که کلمه رمز را درست وارد کرده باشید. فایل به صورت خراب دانلود شده است و می بایستی مجدداً آن را دانلود کنید.

درباره ی جلال

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

مطلب پیشنهادی

Seo - Kolbedanesh.com

سئو چیست؟ بهینه سازی وبسایت برای موتورهای جستجو

در این مطلب از کلبه دانش شما را با مبحث سئو چیست ؟ و چگونه به بهینه …

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

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