آموزش ساخت جعبه دانلود
ما در این آموزش قصد داریم نحوه قراردادن باکس دانلود که حتما توتمام سایت های دانلود دیدید رو آموزش بدیم. برای این کار احتیاج به نصب یک افزونست که به پیوست ارائه میگردد
اول باید افزونه Advanced Custom Fileds رو نصب کنید.
این افزونه رو خودم فارسی کردم و در حال بروزرسانی فایل زبان نسخه ۴.۳.۲ هم هستم.
آموزش این افزونه رو دوست عزیز آقای دانیال حاتمی در آدرس های زیر دادن:
افزودن زمینه دلخواه با ACF (قسمت اول)
افزودن زمینه دلخواه با ACF (قسمت دوم)
در ادامه این آموزش امروز یاد میگیرید که چگونه یک جعبه دانلود با این افزونه بسازید …
۱- فایل های جاوا اسکریپت زیر رو در پوشه ی js قالبتون قرار بدید:
در این آدرس:
wp-content/themes/your theme/js
۲- کدهای زیر رو در فایل 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
|
/* 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;} |
3- کدهای زیر رو هم در 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
|
<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> |
4- موردی که باید حتما انجام بشه اینه که کدهای زیر رو به فایل header.php بعد از تابع
|
1
|
<?php wp_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)).
8- در قسمت بعد یعنی نوع زمینه ((ویرایشگر دیداری)) رو انتخاب کنید.
۹- حالا باز روی افزودن زمینه کلیک کنید.
۱۰- در قسمت برچسب زمینه ((راهنما)) و در قسمت نام زمینه بنویسید ((help)) نوع زمینه رو هم که ((ویرایشگر دیداری)) قرار میدید.
۱۱- کلیک روی افزودن زمینه – نوشتن ((مشخصات)) در قسمت برچسب زمینه – نوشتن ((info)) در قسمت نام زمینه – نوع زمینه هم که ((ویرایشگر دیداری)).
۱۲- مثل مرحله قبل: افزودن زمینه – نوشتن ((سیستم مورد نیاز)) در قسمت برچسب افزونه – نوشتن ((require)) در قسمت نام زمینه – نوع زمینه هم که ((ویرایشگر دیداری)).
مراحل تموم شد.
در قسمت ارسال نوشته باید متاباکسی به نام جعبه دانلود باشه.
اگه نبود از بالا قسمت تنظیمات صفحه تیک گزینه جعبه دانلود رو بزنید.
منبع سایت همیار وردپرس
مطالب زیر را حتما بخوانید:
قوانین ارسال دیدگاه در سایت
- چنانچه دیدگاهی توهین آمیز باشد و متوجه اشخاص مدیر، نویسندگان و سایر کاربران باشد تایید نخواهد شد.
- چنانچه دیدگاه شما جنبه ی تبلیغاتی داشته باشد تایید نخواهد شد.
- چنانچه از لینک سایر وبسایت ها و یا وبسایت خود در دیدگاه استفاده کرده باشید تایید نخواهد شد.
- چنانچه در دیدگاه خود از شماره تماس، ایمیل و آیدی تلگرام استفاده کرده باشید تایید نخواهد شد.
- چنانچه دیدگاهی بی ارتباط با موضوع آموزش مطرح شود تایید نخواهد شد.
نظرات کاربران