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

cover

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

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>

حالا بریم سراغ تنظیمات افزونه:

  قرار دادن کدهای دلخواه در هدر و فوتر وردپرس با Insert Headers and Footers

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

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

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

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

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

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

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

  پیش‌نمایش

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

دانلود صفحه افزونه
مشاوره آموزشی رایگان
شما این فرصت را دارید، با تکمیل فرم زیر، قبل از انتخاب دوره آموزشی مناسب خود، از مشاوره رایگان کارشناسان آموزشی مجموعه همیار آکادمی استفاده نمائید.
 
مشاوران آموزشی
همیار آکادمی
پاسخگوی شما هستند
آیا این مقاله برای شما مفید بود؟
تقریبا
خیر

اگر می‌خواهید از آخرین و محبوب‌ترین مقالات ما در ایمیل خود مطلع شوید، همین الان ایمیل خود را در کادر زیر وارد کنید:

تعداد علاقه‌مندانی که تاکنون عضو خبرنامه ما شده‌اند:

331,406 نفر

پاسخی بگذارید

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

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

    با سلام
    من توی یک سایتی یسری باکس دیدم که یسری عکس به باکس اضافه کرده بود و متن بش اضافه کرده بود و وقتی موس را روی باکس میبردیم باکس از حالت مربع به حالت دایره در میومد
    میخواستم بدونم چجوری میتونم همچین چیزیو توی سایت خودم اجرا کنم یا اگه افزونه خاصی داره
    لفزونه را با موزشش بهم معرفی کنید
    سایتی که میگفتم اینه باکس ها در وسط سحفه قرار گرفتن clash-foroosh.ir/
    با تشکر از همیار وردپرس

  2. سلام مرسی از مطلبتون.
    یه سوال فنی
    اگه بخوایم یه باکس دانلود واسه سریال درست کنیم چطوریه مثلاً یه سریال 5 تا فصل داره و هر فصل 20 قسمته چطوری میشه جعبه دانلود براش ساخت ؟ ممنون میشم جواب بدین خیلی درگیرشم

  3. سلام وقت بخیر!
    دوست عزیز من یک قالب خریداری کردم که توش به صورت پیشفرض باکس دانلود داره!
    چطوری میتونم فعالش کنم؟

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

    سلام من راه اندازی کردم جعبه دانلود رو ولی یک مشکلی که هست اینه که وقتی با گوشی به صفحه سایت میرم جعبه دانلود استایل خودش رو از دست میده و فقط نوشته ها میاد و کادرش کلا پاک میشه برای این مشکل چه کار باید کرد؟

  5. سلام cssفکرکنم خرابه اصلا کار نکرد همچی داره ولی css کار نمیکنه

  6. سلام
    من دو تا باکس ساختم یکی برای آموزش نصب و یک برای لینک های دانلود
    چطوری میتونم کاری کنم وقتی که مثلا برای هر کدوم از باکس ها مقداری رو تعیین نکردم کلا اون باکس رو نشون نده

  7. با سلام

    من می خواستم می تونید یه با دانلود طرحش خودم میدم برام طراحی کنید

    وهزینش چقدر میشه

  8. باسلام من وقتی که می خواهم پست بگذارم با استفاده از این افزونه این ارور را می دهد

    Failed to load content css: http://localhost/wordpress/wp-content/themes/hueman/assets/admin/css/editor-style-rtl.css

    لطفا کمک کنید.

  9. سلام.اگه حال و حوصله جواب دادن دارید بپرسم.چون از هر هزار تا سوال شاید یکی جواب داده بشه.
    دستورالعمل ساخت باکس دانلود رو انجام دادم بدون مشکل انجام شد و در صحتش شکی نیست.حالا می خام بپرسم که روشی وجود داره که همین باکس دانلود به جای اینکه در همه ی پستها نمایش داده بشه (چون حتی توی پستهایی که متادیتا براش تعریف نمی کنیم هم این باکس دانلود نمایش داده می شه.) فقط در دسته بندی های خاص نمایش داده بشه؟ یعنی مثلا من یه سایت با موضوعات مختلف دارم.فقط می خام توی دسته بندی نرم افزار، امکان درج باکس دانلود وجود داشته باشه.
    سوال بعدی ام اینه که به چه روشی باید در همین باکس دانلود، در هر بخش، کلمات پیش فرضی وجود داشته باشه که نویسنده سایت فقط بیاد توش مقدار قرار بده.مثلا در باکس دانلود، در بخش سیستم موردنیاز، کاری انجام بدیم که سی پی یو، ماردبورد، گرافیک و غیره به صورت پیش فرض نوشته شده باشه و نویسنده ی سایت فقط بیاد توش متن بنویسه و دیگه برای هر پست از اول ننویسه سی پی یو، گرافیک و فلان و بهمان.
    ممنون از شما

  10. سلام

    بنده طبق آموزش پیش رفتم اما رنگ پس زمینه نوشته ها رو نشون نمیده وهمش رو سفید نشون میده
    دلیل چیه ؟

  11. سلام خیلی ممنون از آموزشتون من همه کارارو بدرستی انجام دادم و اضافه کردم جعبرو
    فقط یه مشکل عجیبی دارم
    به جز تب اولی بقیه تبها display:non
    میگیرن خود به خود این استایل هم فقط در مرورگر دیده میشی یعنی تو کدها چنین چیزی نیست
    و به همین خاطر نشون داده نمیشن به جز تب دانلود
    میشه راهنماییم کنید؟

  12. ببخشید برای من در قسمت نمایش ویرایشگر نداره
    لطفا کمک کنید

  13. سلام جعبه رو درست کردم و درست بود اما وقتی رفتم تو صفحه اصلی دیدم که صفحه ریخته به هم و تصویرا از حالت عادی در اومدن
    و این به خاطر کدیه که باید تو پوشه هدر قرار بگیره . هرجا تو هدر گذاشتمش بازم درست نمیشه
    میخواستم بدونم امکانش هست که یه جا دیگه بزارمش؟
    باید چیکار کنم؟
    ممنون میشم جواب بدید

  14. با افزونه Pricing Table یا با افزونه های مشابه https://www.elegantthemes.com/blog/resources/best-wordpress-pricing-table-plugins راحت میشه ساخت و نیازی به این همه درد سر نداره

  15. سلام خسته نباشید من این آموزش رو انجام دادم اما بعد بی خیال جعبه دانلود شدم اما حالا قالبم دچار مشکل شده قالبم اینفولد هست با افزونه های یاهست سئو و وردپرس فارسی مشکل پیدا کردم خواهش می کنم چیکار کنم تمام بخش های که تو این آموزش اضافه کردم رو هم پاک کردم اما بازم مشکل هست قالب رو پاک و نصب کردم بازم هست افزونه های رو غیر فعال و فعال کردم اما مشکل رفع نشد لطفا کمک کنید

  16. سلام
    من از این باکس دانلود استفاده میکنم و خیلی ازش راضیم اما یک مشکل کوچک دارم اونم اینه که دکمه دانلود و متنی که برای اون انتخاب میکنیم در این باکس باهم توی یک ردیف قرار نمیگیرن و دکمه زیر متن میره و یکم فضای اضافی ایجاد میکنه
    عرض باکس رو زیاد کردم از 625 px به 1000px هم ارتقا دادمش تفاوتی نکرد
    در اصل باید تغییر دیگری درونش داده بشه که من نمیدونم کجاست
    اسکرسن شات رو ببینید و اگر ممکنه راهنمایی بفرمایید
    http://s6.uplod.ir/i/00794/bywsgv4j8q3n.png

  17. سلام من وقتی اسکریپ هدر رو میزارم کلا صفحه نخست و اصلی سایت بهم میریزه . مشکلش هم از آدرسی هستش که داخل کد وجود داره چطور باید حلش کنم ؟

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

      سلام سعید جان. آدرس سایت داخل کد مشکلی نداره ولی برای اطمینان بیشتر از لینک زیر دانلود کن:
      http://s6.picofile.com/d/21e125a9-2c11-42db-a77c-5f1e548a8b9c/jquery_min.js’ defer onload=’

      از نظر این که قالب رو به هم میریزه، برو تو قسمت اسلایدش و همان اولین کد یعنی “.tab-container” یه float:right بهش بده بعد که رفت جایی که خودتون میخواستید برای چپ و راست بردنش از margin-right:0px; استفاده کنید (به جای 0 عدد دلخواه خود را قرار دهید). برای عقب بردنش هم میتوانید از اعداد منفی به جای 0 استفاده کنید.

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

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

    سلام.
    ممنون از آموزشهای خوبتون. فقط می خواستم بگم بعضی نوشته های من نیازی به قراردادن فایلی برای دانلود ندارند. میخوام برای همچین نوشته هایی جعبه دانلود نیاد. میشه بگید باید چیکار کنیم؟

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

    سلام ممنون از آموزش شما، من از پوسته اینترفیس که از سایت همیار ورد پرس گرفته ام استفاده می کنم و قسمت Single.php را ندارد کدهای مربوط به Single.php را در کجا کپی کنم؟

  20. ببخشید این مشکل جعبه دانلود در کروم مربوط به css هست ؟چون داخل فایر فاکس همچین مشکلی نیست ، چطوری میشه حلش کرد ؟
    http://s6.picofile.com/file/8255093176/Scree.png

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

دوره‌های آموزشی