آموزش ساخت جعبه دانلود در وردپرس
حتمی شما هم در سایت های مختلف کادر مخصوص به دانلودها را دیده اید که شامل لینک دانلود و حجم فایلها و… میباشد. اگر شما هم یک سایت دانلود دارید برای حرفه ای تر شدن سایت خود نیاز به استفاده از این جعبه دانلود را دارید. در این آموزش طریقه ساخت جعبه دانلود را به دو روش ساده و پیشرفته قرار داده ایم. در ادامه با هاستینجا همراه باشید.
ابتدا برای شروع افزونه زیر را نصب و فعال کنید.
آموزش ساخت جعبه دانلود ساده که دارای چهار لینک دانلود و حجم و رمز و منبع مباشد :
ابتدا تصاویر زیر را درون فایل images قالب وردپرس قرار دهید.
کد زیر را در فایل single.php قرار دهید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<?php if( get_field('dl_name')):?> <div class="custom-download-box"> <ul class="metabox"> <li class="dl"> <p><strong><a href="<?php echo get_field('dl_link');?>"><?php echo get_field('dl_name');?></a></strong></p> </li> <li class="size"> <p><strong><?php echo get_field('dl_size');?></strong></p> </li> <li class="dl"> <p><strong><a href="<?php echo get_field('dl_link2');?>"><?php echo get_field('dl_name2');?></a></strong></p> </li> <li class="size"> <p><strong><?php echo get_field('dl_size2');?></strong></p> </li> <li class="dl"> <p><strong><a href="<?php echo get_field('dl_link3');?>"><?php echo get_field('dl_name3');?></a></strong></p> </li> <li class="size"> <p><strong><?php echo get_field('dl_size3');?></strong></p> </li> <li class="dl"> <p><strong><a href="<?php echo get_field('dl_link4');?>"><?php echo get_field('dl_name4');?></a></strong></p> </li> <li class="size"> <p><strong><?php echo get_field('dl_size4');?></strong></p> </li> <li class="pass"> <p>رمز: <strong><?php echo get_field('dl_pass');?></strong></p> </li> <li class="source"> <p><strong><a href="<?php echo get_field('source_link');?>"><?php echo get_field('source_name');?></a></strong></p> </li> </ul> </div> <?php endif;?> |
سپس کد زیر را در فایل style.css قرار دهید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
.custom-download-box { width: 460px; height: auto; background-repeat: no-repeat; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -moz-transition: all 0.5s ease-out 0s; margin-top: 0px; margin-bottom: 0px; margin-right: auto; margin-left: auto; font-size: 14px; background-color: #bebbbb; text-decoration: none; background-image: url("images/icon-image.png"); background-repeat: no-repeat; background-position:-20px center; paddin-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -right: 10px; padding: 15px; border: 5px solid #250; font-family: B Yekan, Comic Sans MS; } .metabox { line-height: 1.2; font-family: B Yekan, Comic Sans MS; } ul.metabox { list-style-type: none; font-family: B Yekan, Comic Sans MS; } .dl { background: url("images/dl-image.png") no-repeat scroll right center rgba(0, 0, 0, 0); padding-right: 23px; font-family: B Yekan, Comic Sans MS; } .size { background: url("images/size-image.png") no-repeat scroll right center rgba(0, 0, 0, 0); padding-right: 23px; font-family: B Yekan, Comic Sans MS; } .pass { background: url("images/pass-image.png") no-repeat scroll right center rgba(0, 0, 0, 0); padding-right: 23px; font-family: B Yekan, Comic Sans MS; } .source { background: url("images/source-image.png") no-repeat scroll right center rgba(0, 0, 0, 0); padding-right: 23px; font-family: B Yekan, Comic Sans MS; } |
در مرحله بعد به بخش تنظیمات افزونه بروید و گزینه افزودن را انتخاب کنید.
در بخش استایل گزینه دارای متاباکس را انتخاب کنید.
نام گروه زمینه را وارد کنید.
سپس مطابق آموزش های زیر عمل کنید.
گزینه افزودن زمینه را انتخاب کنید.
برچسب زمینه= دانلود ۱
نام زمینه= dl_name
گزینه افزودن زمینه را انتخاب کنید.
برچسب زمینه= لینک ۱
نام زمینه= dl_link
————————————–
گزینه افزودن زمینه را انتخاب کنید.
برچسب زمینه= دانلود ۲
نام زمینه= dl_name2
گزینه افزودن زمینه را انتخاب کنید.
برچسب زمینه= لینک ۲
نام زمینه= dl_link2
————————————–
گزینه افزودن زمینه را انتخاب کنید.
برچسب زمینه= دانلود ۳
نام زمینه= dl_name3
گزینه افزودن زمینه را انتخاب کنید.
برچسب زمینه= لینک ۳
نام زمینه= dl_link3
————————————–
گزینه افزودن زمینه را انتخاب کنید.
برچسب زمینه= دانلود ۴
نام زمینه= dl_name4
گزینه افزودن زمینه را انتخاب کنید.
برچسب زمینه= لینک ۴
نام زمینه= dl_link4
————————————–
گزینه افزودن زمینه را انتخاب کنید.
برچسب زمینه= رمز فایل
نام زمینه= dl_pass
————————————–
گزینه افزودن زمینه را انتخاب کنید.
برچسب زمینه= منبع
نام زمینه= source_name
در پایان گزینه انتشار را انتخاب کنید تا جعبه ایجاد شود.
آموزش ساخت جعبه دانلود پیشرفته که دارای لینک دانلود های نامحدود و مشخصات و سیستم مورد نیاز و.. میباشد :
ابتدا فایل های زیر را در پوشه js قالب وردپرس خود قرار دهید.
کد زیر را در فایل single.php قرار دهید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<?php if( get_field('download_links')):?> <divid="tab-container"class='tab-container'> <ulclass='etabs'> <liclass='tab dl-color'><ahref="#tabs1-dl">لینک دانلود</a></li> <liclass='tab help-color'><ahref="#tabs1-help">راهنما</a></li> <liclass='tab info-color'><ahref="#tabs1-info">مشخصات</a></li> <liclass='tab require-color'><ahref="#tabs1-require">سیستم مورد نیاز</a></li> </ul> <divclass='panel-container'> <divid="tabs1-dl"> <h2>لینکهای دانلود</h2> <?php echo get_field('download_links');?> </div> <divid="tabs1-help"> <h2>راهنما</h2> <?php echo get_field('help');?> </div> <divid="tabs1-info"> <h2>مشخصات</h2> <?php echo get_field('info');?> </div> <divid="tabs1-require"> <h2>سیستم مورد نیاز</h2> <?php echo get_field('require');?> </div> </div> <?php endif;?> |
کد زیر را در فایل style.css قرار دهید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 |
.tab-container { width: 500px; margin: 0 8px 0 0; } .etabs { padding: 0; margin: 0 0 16px; } .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; margin-top: -15px; } .tab.dl-color { color: rgb(136, 101, 0); background: -moz-linear-gradient(270deg, #ffcc00 0%, #d49d00 100%); background: -webkit-gradient(linear, 270deg, color-stop(0%, #ffcc00), color-stop(100%, #d49d00)); background: -webkit-linear-gradient(270deg, #ffcc00 0%, #d49d00 100%); background: -o-linear-gradient(270deg, #ffcc00 0%, #d49d00 100%); background: -ms-linear-gradient(270deg, #ffcc00 0%, #d49d00 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffcc00', endColorstr='#d49d00', GradientType='1'); background: linear-gradient(180deg, #ffcc00 0%, #d49d00 100%); 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(270deg, #75c7fe 0%, #327fc6 100%); background: -webkit-gradient(linear, 270deg, color-stop(0%, #75c7fe), color-stop(100%, #327fc6)); background: -webkit-linear-gradient(270deg, #75c7fe 0%, #327fc6 100%); background: -o-linear-gradient(270deg, #75c7fe 0%, #327fc6 100%); background: -ms-linear-gradient(270deg, #75c7fe 0%, #327fc6 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#75c7fe', endColorstr='#327fc6', GradientType='1'); background: linear-gradient(180deg, #75c7fe 0%, #327fc6 100%); text-shadow: 0px 1px 0px rgb(94, 178, 231); border: 5px; } .tab.info-color { color: rgb(8, 118, 130); background: -moz-linear-gradient(270deg, #45d7e7 0%, #06b1c4 100%); background: -webkit-gradient(linear, 270deg, color-stop(0%, #45d7e7), color-stop(100%, #06b1c4)); background: -webkit-linear-gradient(270deg, #45d7e7 0%, #06b1c4 100%); background: -o-linear-gradient(270deg, #45d7e7 0%, #06b1c4 100%); background: -ms-linear-gradient(270deg, #45d7e7 0%, #06b1c4 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#45d7e7', endColorstr='#06b1c4', GradientType='1'); background: linear-gradient(180deg, #45d7e7 0%, #06b1c4 100%); text-shadow: 0px 1px 0px rgb(114, 232, 245); border: 5px; } .tab.require-color { color: rgb(78, 77, 77); background: -moz-linear-gradient(270deg, #dedcdc 0%, #919191 100%); background: -webkit-gradient(linear, 270deg, color-stop(0%, #dedcdc), color-stop(100%, #919191)); background: -webkit-linear-gradient(270deg, #dedcdc 0%, #919191 100%); background: -o-linear-gradient(270deg, #dedcdc 0%, #919191 100%); background: -ms-linear-gradient(270deg, #dedcdc 0%, #919191 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dedcdc', endColorstr='#919191', GradientType='1'); background: linear-gradient(180deg, #dedcdc 0%, #919191 100%); 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; } |
کد زیر را نیز در فایل header.php قبل از تک <head/> قرار دهید.
|
1 2 3 4 5 6 7 8 |
<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
سپس نوع زمینه ویرایشگر دیداری را انتخاب کنید
در پایان بر روی گزینه انتشار کایک کنید تا جعبه ایجاد شود.