آموزش ایجاد جعبه (باکس) دانلود حرفه ای برای وردپرس

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

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

آموزش ایجاد جعبه (باکس) دانلود حرفه ای برای وردپرس

خب برای باکس دانلود حرفه ای اگر دقت کرده باشید در یک سایت این جعبه در آخر پست و قبل از مواردی چون دسه بندی – کلمات کلیدی و .. قرار می گیرد. بنابر ای شما باید کدی را که در زیر قرار دادیم را کپی ور فایل سینگل (single.php) قالب وردپرس خود اضافه کنید یک پیشنهادی که ما داریم اینه،سعی کنید اول در لوکال هاست اگر دارید و یا اگر ندارید ایجاد کنید (آموزش نصب وردپرس در لوکال هاست) و این عمال را انجا و سپس انتقال دهید داخل قالب اصلی هاست خود.ویا اینکه حتما یک پشتیبان از قالب خود بگیرید تا مشکلی پیش نیاد.

فایل single.php را از پیشخوان » نمایش » ویرایشگر » فایل سینگل را ویرایش کنید یا از داخل خود قالب single.php را باز کنید.و دنبال کد زیر بگردید:


<?php the_tags(); ?>

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

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


<div class="download post">
<a
href="#" onclick="return wprp_toggle('.download-instruction','');"> <span
class="instruction-expander">راهنمای دانلود</span></a>

<h2>لینک‌های دانلود</h2>
<!--زمینه های دلخواه-->

<div id="download-links">
<ul>

<!--
<li id="keyfiyat-image">فعال<font color="#0093C4"> <?php echo get_post_meta($post->ID, 'جعبه دانلود',true); ?></font>&nbsp,</li>
-->
<?php $mid_var = get_post_meta($post->ID, 'نام',true);
if(isset($mid_var) && !empty($mid_var)) : ?>
<li id="format-image"><strong>نام :&nbsp </strong></strong><font color="#0093C4"> <?php echo get_post_meta($post->ID, 'نام',true); ?></font>&nbsp </li>
<?php endif; ?>

<?php $mid_var = get_post_meta($post->ID, 'لینک مستقیم',true);
if(isset($mid_var) && !empty($mid_var)) : ?>
<li id="zhaner-image"><a href="<?php echo get_post_meta($post->ID, 'لینک مستقیم',true); ?>"><strong> دانلود با لینک مستقیم </strong></a>&nbsp</li>
<?php endif; ?>

<?php $mid_var = get_post_meta($post->ID, 'دانلود قسمت اول',true);
if(isset($mid_var) && !empty($mid_var)) : ?>
<li id="zhaner-image"><a href="<?php echo get_post_meta($post->ID, 'دانلود قسمت اول',true); ?>"><strong> دانلود قسمت اول </strong></a>&nbsp</li>

<?php endif; ?>

<?php $mid_var = get_post_meta($post->ID, 'دانلود قسمت دوم',true);
if(isset($mid_var) && !empty($mid_var)) : ?>
<li id="zhaner-image"><a href="<?php echo get_post_meta($post->ID, 'دانلود قسمت دوم',true); ?>"><strong> دانلود قسمت دوم </strong></a>&nbsp</li>
<?php endif; ?>

<?php $mid_var = get_post_meta($post->ID, 'دانلود قسمت سوم',true);
if(isset($mid_var) && !empty($mid_var)) : ?>
<li id="zhaner-image"><a href="<?php echo get_post_meta($post->ID, 'دانلود قسمت سوم',true); ?>"><strong> دانلود قسمت سوم </strong></a>&nbsp</li>
<?php endif; ?>

<?php $mid_var = get_post_meta($post->ID, 'دانلود قسمت چهارم',true);
if(isset($mid_var) && !empty($mid_var)) : ?>
<li id="zhaner-image"><a href="<?php echo get_post_meta($post->ID, 'دانلود قسمت چهارم',true); ?>"><strong> دانلود قسمت چهارم </strong></a>&nbsp</li>
<?php endif; ?>

<?php $mid_var = get_post_meta($post->ID, 'لینک کمکی',true);
if(isset($mid_var) && !empty($mid_var)) : ?>
<li id="hajm-image"><a href="<?php echo get_post_meta($post->ID, 'لینک کمکی',true); ?>"><strong> لینک کمکی </strong></a>&nbsp</li>
<?php endif; ?>

<?php $mid_var = get_post_meta($post->ID, 'رمز',true);
if(isset($mid_var) && !empty($mid_var)) : ?>
<li id="format-image"><strong> رمز فایل :&nbsp </strong><font color="#0093C4"> <?php echo get_post_meta($post->ID, 'رمز',true); ?></font>&nbsp</li>
<?php endif; ?>

<?php $mid_var = get_post_meta($post->ID, 'حجم',true);
if(isset($mid_var) && !empty($mid_var)) : ?>
<li id="format-image"><strong>حجم فایل :&nbsp </strong></strong><font color="#0093C4"> <?php echo get_post_meta($post->ID, 'حجم',true); ?></font>&nbsp </li>
<?php endif; ?>

<?php $mid_var = get_post_meta($post->ID, 'فرمت',true);
if(isset($mid_var) && !empty($mid_var)) : ?>
<li id="date-image"><strong> فرمت فایل :&nbsp </strong><font color="#0093C4"> <?php echo get_post_meta($post->ID, 'فرمت',true); ?></font>&nbsp</li>
<?php endif; ?>

<?php $mid_var = get_post_meta($post->ID, 'منبع',true);
if(isset($mid_var) && !empty($mid_var)) : ?>
<li id="date-image"><strong> منبع :&nbsp </strong><font color="#0093C4"> <?php echo get_post_meta($post->ID, 'منبع',true); ?></font>&nbsp</li>
<?php endif; ?>

<?php $mid_var = get_post_meta($post->ID, 'توضیحات',true);
if(isset($mid_var) && !empty($mid_var)) : ?>
<li id="format-image"><strong>توضیحات :&nbsp </strong></strong><font color="#0093C4"> <?php echo get_post_meta($post->ID, 'توضیحات',true); ?></font>&nbsp </li>
<?php endif; ?>

</ul>
</div>
<!--/زمینه های دلخواه-->

</div><div
class="download-instruction"><h3>راهنمای دانلود</h3><ul><li>برای دانلود، به روی عبارت "دانلود" کلیک کنید و منتظر بمانید تا پنجره مربوطه ظاهر شود سپس محل ذخیره شدن فایل را انتخاب کنید و منتظر بمانید تا دانلود تمام شود.</li><li>جهت استفاده از فایل های فشرده از نرم افزار WinRar استفاده نموده و به پسورد هر فایل توجه نمایید.</li><li><span
style="color: #ff0000;">در صورت بروز مشکل در دانلود فایل ها تنها کافی است از طریق سیستم گزارش خطا نسبت به بروز مشکل اطلاع دهید تا پیگیری سریع برای حل مشکل اقدام گردد.</span></li><li>فایل های قرار داده شده برای دانلود به منظور کاهش حجم و دریافت سریعتر فشرده شده اند، برای خارج سازی فایل ها از حالت فشرده از نرم افزار<b> Win Rar </b>و یا مشابه آن استفاده کنید.</li><li>کلمه رمز جهت بازگشایی فایل فشرده عبارت <b>www.uptheme.ir ( حتما با حروف کوچک تایپ شود )</b> می باشد. تمامی حروف را میبایستی به صورت کوچک تایپ کنید و در هنگام تایپ به وضعیت EN/FA کیبورد خود توجه داشته باشید همچنین بهتر است کلمه رمز را تایپ کنید و از Copy-Paste آن بپرهیزید.</li><li>چنانچه در هنگام خارج سازی فایل از حالت فشرده با پیغام <b>CRC</b> مواجه شدید، در صورتی که کلمه رمز را درست وارد کرده باشید. فایل به صورت خراب دانلود شده است و می بایستی مجدداً آن را دانلود کنید.</li></ul></div>

<!-- /download -->

این کدی که در بالا گفته شد در قسمت ورد نظر کپی شود کد زمینه دلخواه جهت ایجاد باکس دانلود بود و قطعه نوشته ای هم که ما درون کد قرار دادیم را می توانید متن خودتونو قرار و جایگزین کنید.این نوشته به صورت ثابت در تمامی باکسهای مطالب وجود خواهد داشت (میتوان متن راهنما باشد)

الان نوبت میرسه به css همان استایل زیبا سازی جعبه دانلود فابل استایل style.css قالب را ویرایش کنید و کد های زیر را در این فایل اضافه کنید.دقت داشته باشید کلاس و دیو های این جعبه دانلود ID , class قالب فرق داشته باشه در غیر این صورت بهم ریختگی در سایت ایجاد خواهد شد مد نظر داشته باشید.

/************** uptheme.ir *************/
.wprp_wrapper {
clear: both;
color: #676D72;
display: block;
margin: -15px 0;
padding: 10px;
text-align: right;
}
.wprp_form {
background: none repeat scroll 0 0 #F0F4F7;
border: 1px solid #D9E4EF;
box-shadow: 0 9px 5px -4px rgba(0, 0, 0, 0.7);
display: none;
margin: 0 auto;
width: 580px;
}
.wprp_form form {
margin: 0;
padding: 0;
}
.wprp_message {
background-color: #FFFFFF;
border: 1px solid #D9E4EF;
display: none;
padding: 5px;
text-align: right;
}
.wprp_clear {
clear: both;
display: block;
}
#report_as {
font-family: Tahoma,Geneva,sans-serif;
font-size: 12px;
float:right;
}
.wprp_form textarea {
font-family: Tahoma,Geneva,sans-serif;
font-size: 12px;
}
.wprp_submit {
background: none repeat scroll 0 0 #89D1FF;
border: 0 none;
color: #000000;
font-family: Tahoma,Geneva,sans-serif;
font-size: 12px;
padding: 5px;
text-shadow: 1px 1px 1px #FFFFFF;
}
.wprp_report_link a {
background: url("images/sup.png") no-repeat scroll 558px center #F2D811;
border-bottom: 1px solid #F0B60A;
border-radius: 8px 8px 8px 8px;
border-top: 4px solid #FFEB6B;
color: #333333;
cursor: pointer;
display: block;
font: 18px/1.4 Bkoodak,Tahoma;
margin: 10px 0 0;
padding: 10px 50px 10px 10px;
text-decoration: none;
text-shadow: 1px 1px 1px #FFFFFF;
width: 540px;
z-index: 999;
}

/********** uptheme download **********/

.entry .downloads {
background: none repeat scroll 0 0 #E6FFB2;
border-bottom: 2px solid #B8EB59;
border-radius: 7px 7px 7px 7px;
color: #5CA000;
font-size: 1em;
margin: 10px 20px;
padding: 5px 15px;
transition: all 0.3s ease-out 0s;
}
.entry .downloads h2 {
color: #8CCD18;
font-size: 22px;
margin: 4px 0;
}
.entry .downloads .info_icon {
display: inline-block;
float: right;
height: 16px;
margin-left: 3px;
margin-top: 0;
width: 15px;
}
.entry .downloads .dd_icon {

display: inline-block;
float: right;
height: 16px;
margin-left: 3px;
margin-top: 0;
width: 16px;
}
.entry .downloads .id_icon {

display: inline-block;
float: right;
height: 16px;
margin-left: 3px;
margin-top: 0;
width: 16px;
}

.instruction-expander {
background: none repeat scroll 0 0 #8EC61A;
border-bottom: 1px solid #6BA217;
border-radius: 3px 3px 3px 3px;
color: #FFFFFF;
cursor: help;
display: block;
float: left;
font-size: 0.9em;
line-height: 1.3;
margin-top: 10px;
padding: 2px 10px 3px;
}
.download-instruction {
background: none repeat scroll 0 0 #F2FFD7;
border-radius: 7px 7px 7px 7px;
color: #609F31;
display: none;
font-size: 0.9em;
margin: 5px 30px 10px;
padding: 15px;
}
.entry .downloads h2 {
color: #8CCD18;
font-size: 22px;
margin: 4px 0;
font-family:Bkoodak;
}
.download-instruction h3{
font-family:Bkoodak;
}
#download-links{
padding-top:15px;
}
#download-links li{
list-style:none
}

/********* download icon ***********/
#download-links .nam-file-dl {
background: url("images/name.png") no-repeat 488px 0px ;
padding-right: 25px;
}

#download-links .downloads-box-link {
background: url("images/download1.png") no-repeat 488px 0px;
padding-right: 25px;

}
#download-links .downloads-box-link1 {
background: url("images/download1.png") no-repeat 488px 0px ;
padding-right: 25px;
}
#download-links .downloads-box-link-help {
background: url("images/download1.png") no-repeat 488px 0px ;
padding-right: 25px;
}
#download-links .pass-file-dl {
background: url("images/password.png") no-repeat 488px 0px;
padding-right: 25px;
}
#download-links .size-file-dl {
background: url("images/size.gif") no-repeat 488px 0px;
padding-right: 25px;
}
#download-links .format-file-dl {
background: url("images/all-images.png1") no-repeat 488px 0px ;
padding-right: 25px;
}
#download-links .des-file-dl {
background: url("images/tozihat.png") no-repeat 488px 0px ;
padding-right: 25px;
}
#download-links .sourse-file-dl {
background: url("images/all-images.png1") no-repeat 488px 0px ;
padding-right: 25px;
}

خب تا اینجا می توان گفت کار به خوبی پیش رفته و تموم هستش برای اینکه ویژگی های دیگری به این جعبه دانلود اضافه کنیم مانند گزارش خرابی لینک برای اینکه این گزیینه و قابلیت رو هم اضافه کنیم به لینک ( گزارش خرابی لینک) مراجعه و مطاله کنید اونجا توضیحات لازم گفته شده و اینجا ما کد css گزارش خرابی لینک رو درون کدها قرار دادیم و نیازی به استایل دیگه ای نیست و کامون راحت تر خواهد بود.

در ادامه فایلی حاوی چند تصویر و همچنین فایل جاوا اسکریپت قرار دادیم آن را دریافت کنید سپس ایکون های مجود در فایل را در پوشه iamges قالب خود کپی کنید و فایل جاوا رو هم به پوشه ای با نام js خب برای این که قالب این فایل رو بتونه بخونه و معرفی شده باشه فایل header.php قالب وردپرس خود را بازکنید و کد </head> را پیدا و کد زیر را قبل از آن اضافه کنید دقت داشته باشید کد رو اشتباهی نگیرین و بهم ریختگی ایجاد کنید.


<script type="text/javascript" src="<?php bloginfo( 'stylesheet_directory' ); ?>/js/wprp.js"></script>

خب کار ایجاد باکی (جعبه) دانلود تمام شده و میتوانید نتیجه را مشاهده و از آن لذت ببرید.

توضیحات تکمیلی جعبه دانلود حرفه ای وردپرس

حتما قسمت جعبه دانلود (زمینه دلخواه) در نوشته را فعال کنید برای این کار باید از قسمت بالای قالب در برگه نوشته نگاه کنید یک فلش وجو داره که تنظیمات نوشته هستش باید اونجا تیک بزنید تا در زیر ویرایشگر وردپرس این بخش ظاهر شود ور برحسب نامهایی که در داخل کد نوشته شده (کد های اضافه شده به single.php) در اینجا وارد و مقدار را تعیین کنید مثلا برای قسمت رمز فایل باید نام رو رمز و در کادر مقدار زمز خود را قرار دهید.به همین شکل موارد دیگر در این زمینه قابل ایجاد می باشد.

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

دانلود فایل عکس و ایگون ها به همراه کد جاوا