جعبه دانلود حرفه ای برای وردپرس( سازگار با زمینه های دلخواه )
دسته‌ها : کد های کاربردی , متفرقه , وردپرس ۰۷ خرداد ۱۳۹۴ - ۶:۵۶ امیر رضائی نظر ۳
خانه کد های کاربردیمتفرقهوردپرس جعبه دانلود حرفه ای برای وردپرس( سازگار با زمینه های دلخواه )

wp-download-box-cover

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

برای شروع کار با این جعبه دانلود چند مرحله در پیش داریم که به کامل ترین صورت ممکن برای شما مراحل را توضیح خواهیم داد تا در استفاده از این جعبه دانلود به مشکلی بر نخورید !

۱- این جعبه دانلود با افزونه Advanced Custom Fields ست شده و شما برای شروع کار و مرحله اول باید این افزونه را دریافت و نصب کنید

۲- در این مرحله باید استایل های این جعبه دانلود را وارد فایل استایل پوسته خود کنیم هم اکنون استایل های زیر را به فایل style.css پوسته خود اضافه کنید .( برای مراجعه به فایل style.css از قسمت نمایش بر روی ویرایشگر کلیک کنید و سپس از منوی کناری شیوه نامه یا style.css را انتخاب کنید ) اگر با CSS آشنا باشید این استایل ها را میتوانید به دلخواه تغییر دهید .

 

.download-box {

 font: 14px 'b yekan', Tahoma, Arial;
 direction: rtl;

}
.download-box li a:link, .download-box li a:visited {
 text-decoration: none;
}
.download-box li a:active, .download-box li a:hover {
 text-decoration: none;
 color: #FFF;
}
.download-box li img {
 margin-left: 7px;
 vertical-align: middle;
}
.download-box li {
 height: 30px;
 list-style: none;
 border-radius: 5px;
 margin-top: 10px;
}
.download-box li:first-child {
 margin-top: 0;
}
.item_download {
 color: #bf4f00;
 background-image: -o-linear-gradient(top, #e1630e 0, #e48922 50%, #f89926 50%, #fbc13b 100%);
 background-image: -moz-linear-gradient(top, #e1630e 0, #e48922 50%, #f89926 50%, #fbc13b 100%);
 background-image: -webkit-linear-gradient(top, #e1630e 0, #e48922 50%, #f89926 50%, #fbc13b2 50%);
 background-image: -ms-linear-gradient(top, #e1630e 0, #e48922 50%, #f89926 50%, #fbc13b 100%);
 background-image: linear-gradient(to top, #e1630e 0, #e48922 50%, #f89926 50%, #fbc13b 100%);
}
.item_download a:link, .item_download a:visited {
 color: #bf4f00;
}
.item_size {
 color: #095c00;
 background-image: -o-linear-gradient(top, #1d8b11 0, #25a316 50%, #28b419 50%, #30cd1f 100%);
 background-image: -moz-linear-gradient(top, #1d8b11 0, #25a316 50%, #28b419 50%, #30cd1f 100%);
 background-image: -webkit-linear-gradient(top, #1d8b11 0, #25a316 50%, #28b419 50%, #30cd1f 100%);
 background-image: -ms-linear-gradient(top, #1d8b11 0, #25a316 50%, #28b419 50%, #30cd1f 100%);
 background-image: linear-gradient(to top, #1d8b11 0, #25a316 50%, #28b419 50%, #30cd1f 100%);
}
.item_source {
 color: #005bcc;
 background-image: -o-linear-gradient(top, #2374eb 0, #239beb 50%, #26acff 50%, #26d4ff 100%);
 background-image: -moz-linear-gradient(top, #2374eb 0, #239beb 50%, #26acff 50%, #26d4ff 100%);
 background-image: -webkit-linear-gradient(top, #2374eb 0, #239beb 50%, #26acff 50%, #26d4ff 100%);
 background-image: -ms-linear-gradient(top, #2374eb 0, #239beb 50%, #26acff 50%, #26d4ff 100%);
 background-image: linear-gradient(to top, #2374eb 0, #239beb 50%, #26acff 50%, #26d4ff 100%);
}
.item_source a:link, .item_source a:visited {
 color: #005bcc;
}

۳- در مرحله بعد شما باید کد زیر را در مکانی که میخواهید جعبه دانلود به نمایش در آید بگذارید

معمولا وب نویسان جعبه دانلود را در ادامه مطلب هر پست استفاده میکنند شما برای اینکه این جعبه دانلود در ادامه مطالب پست های مورد نظر شما نمایش داده شود باید این کد را در مکان مناسبی در داخل فایل single.php پوسته خود قرار دهید

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

اما چرا ما مکان مشخص شده ای را برای قرار دادن این کد داخل فایل single.php برای شما ارائه نمیکنیم چون فایل سینگل پوسته ها , متفاوت کدنویسی میشود و تشخیص مکان جعبه دانلود قطعا بر عهده ی خود شما میباشد در صورتی که نتوانستید این جعبه دانلود را داخل پوسته خود تعبیه کنید در تالار گفتمان مطرح کنید تا همکاران برای شما این کار را انجام دهند.

در ضمن کد زیر را به هیچ عنوان تغییر ندهید در صورت تغییر هر کدام از قسمت ها جعبه دانلود از کار خواهد افتاد

    <?php
    if ( get_field('dl_title') ) {
        echo '
    <li class="item_download">
        <img src="http://dl.1learn.ir/hakimi/ready-codes/download-box/images/download.png" width="37" height="30" alt="pic1" />
' . get_field('dl_title') . ' : ' . get_field('dl_title_val') . '
    </li>';
    }
    if ( get_field('dl_size') ) {
        echo '
    <li class="item_size">
        <img src="http://dl.1learn.ir/hakimi/ready-codes/download-box/images/size.png" width="37" height="30" alt="pic2" />
' . get_field('dl_size') . ' : ' . get_field('dl_size_val') . '
    </li>';
    }
    if ( get_field('dl_source') ) {
        echo '
    <li class="item_source">
        <img src="http://dl.1learn.ir/hakimi/ready-codes/download-box/images/source.png" width="37" height="30" alt="pic3" />
' . get_field('dl_source') . ' : <a href="' . get_field('dl_source_link') . '">' . get_field('dl_source_val') . '</a>
    </li>';
    }
    if ( get_field('dl_link1') ) {
        echo '
    <li class="item_download">
        <img src="http://dl.1learn.ir/hakimi/ready-codes/download-box/images/download.png" width="37" height="30" alt="pic4" />
        <a href="' . get_field('dl_link1_val') . '">' . get_field('dl_link1') . '</a>
    </li>';
    }
    if ( get_field('dl_link2') ) {
        echo '
    <li class="item_download">
        <img src="http://dl.1learn.ir/hakimi/ready-codes/download-box/images/download.png" width="37" height="30" alt="pic4" />
        <a href="' . get_field('dl_link2_val') . '">' . get_field('dl_link2') . '</a>
    </li>';
    }
    if ( get_field('dl_link3') ) {
        echo '
    <li class="item_download">
        <img src="http://dl.1learn.ir/hakimi/ready-codes/download-box/images/download.png" width="37" height="30" alt="pic4" />
        <a href="' . get_field('dl_link3_val') . '">' . get_field('dl_link3') . '</a>
    </li>';
    }
    ?>
</ul>

۴- با انجام سه مرحله قبلی کار جعبه دانلود تقریبا تمام شده است اما بخش اصلی کار به نام افزودن زمینه های دلخواه مانده است که در این مرحله زمینه های دلخواه را اضافه میکنیم

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

dl-box-wp-1

پس از کلیک بر روی افزودن وارد صفحه ی جدیدی میشوید در قسمت ” عنوان ” , عنوان جعبه دانلود خود را وارد کنید و سپس در قسمت تنظیمات , گزینه ” استایل” را روی گزینه دوم ( standard meta box ) تنظیم کنید .

dl-box-wp-2

خب حالا روی گزینه +افزودن زمینه کلیک کنید . در این قسمت ما با سه گزینه اول کار داریم و باقی گزینه ها دلخواه میباشد و شما میتوانید خودتان مطالعه و در صورت نیاز از آن ها استفاده کنید

گزینه سوم به معنای این میباشد که فیلد ورودی متن به چه صورت باشد و چون کار ما ایجاد جعبه دانلود است در تمامی گزینه ها فیلد سوم ( نوع زمینه ) روی گزینه ” متن ” باید تنظیم شود

و اما گزینه برچسب زمینه و نام زمینه بسیار مهم میباشد و شما باید طبق اطلاعات زیر این دو گزینه را پر کنید

۱- در زمینه شماره ۱ در قسمت برچسب زمینه بنویسید  کلمه ” عنوان دانلود ”  و در قسمت نام زمینه بنویسید dl_title

۲- در زمینه شماره ۲ در قسمت برچسب زمینه بنویسید  عنوان دانلود  و در قسمت نام زمینه بنویسید dl_title_val

۳- در زمینه شماره ۳ در قسمت برچسب زمینه بنویسید  کلمه ” حجم فایل  ” و در قسمت نام زمینه بنویسید dl_size

۴- در زمینه شماره ۴ در قسمت برچسب زمینه بنویسید  حجم فایل  و در قسمت نام زمینه بنویسید dl_size_val

۵- در زمینه شماره ۵ در قسمت برچسب زمینه بنویسید  کلمه ” منبع  ” و در قسمت نام زمینه بنویسید dl_source

۶- در زمینه شماره ۶ در قسمت برچسب زمینه بنویسید  لینک منبع  و در قسمت نام زمینه بنویسید dl_source_link

۷- در زمینه شماره ۷ در قسمت برچسب زمینه بنویسید  منبع  و در قسمت نام زمینه بنویسید dl_source_val

۸- در زمینه شماره ۸ در قسمت برچسب زمینه بنویسید  عنوان لینک دانلود ۱  و در قسمت نام زمینه بنویسید dl_link1

۹- در زمینه شماره ۹ در قسمت برچسب زمینه بنویسید  لینک دانلود ۱ و در قسمت نام زمینه بنویسید dl_link1_val

۱۰- در زمینه شماره ۱۰ در قسمت برچسب زمینه بنویسید  عنوان لینک دانلود ۲ و در قسمت نام زمینه بنویسید dl_link2

۱۱- در زمینه شماره ۱۱ در قسمت برچسب زمینه بنویسید  لینک دانلود ۲ و در قسمت نام زمینه بنویسید dl_link2_val

۱۲- در زمینه شماره ۱۲ در قسمت برچسب زمینه بنویسید  عنوان لینک دانلود ۳  و در قسمت نام زمینه بنویسید dl_link3

۱۳- در زمینه شماره ۱۳ در قسمت برچسب زمینه بنویسید  لینک دانلود ۳ و در قسمت نام زمینه بنویسید dl_link3_val

پس از انجام تنظیمات بالا باید همچنین محیطی را فراهم کرده باشید

dl-box-wp-3

دقت کنید شما میتوانید گزینه برچسب زمینه را مقادیر دلخواه خود وارد کنید اما قسمت نام زمینه به هیچ عنوان قابل تغییر نیست و دقیقا مقادیری که در این آموزش ارائه کردیم باید وارد کنید و قسمت سوم نیز همچنان روی متن باشد بهتر است

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

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

dl-box-wp-4

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

در جعبه دانلود بالا گزینه های (۱,۲) و (۳,۴) و (۵,۶,۷) و (۸,۹) و (۱۰,۱۱) و (۱۲,۱۳) به هم وابسته هستند یعنی اگر شما زمینه شماره ۶ را در قسمت افزودن نوشته پر کردید باید زمینه های داخل پردانتز یعنی ۵ و ۷ را نیز پر کنید در غیر این صورت جعبه دانلود به مشکل بر خواهد خورد  یا هنگامی که زمینه شماره ۱۳ را وارد کردید حتما زمینه شماره ۱۲ را نیز وارد کنید

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

این جعبه دانلود به طور پیشفرض دارای گزینه های ۱- عنوان دانلود ۲- حجم فایل ۳- منبع ۴- لینک دانلود ۱ ۵- لینک دانلود ۲ ۶- لینک دانلود ۳ میباشد که همانطور که در بالا گفتیم هر کدام را نیاز داشتید وارد کنید تا نمایان شود ( به وابسته نیز توجه کنید که در مورد بالا توضیح دادیم )

در اینجا توضیحات اولیه به پایان میرسد و در صورتی که تمام مراحل بالا را بدون اشکال انجام داده باشید جعبه دانلود بدون مشکل نمایش داده میشود این جعبه دانلود با پوسته های استاندارد تست شده است و در صورتی که در پوسته شما با مشکل مواجه شود مشکل از جعبه دانلود نیست .

و اما …

از هر چه بگذریم یک مورد مهم هنوز مانده است که کاملا دلخواه است , اما اگر بخواهید یک فیلد اضافه کنید باید چه کار کنید آیا فقط اضافه کردن در قسمت زمینه های دلخواه کافیست ؟ خیر

اگر میخواهید یک فیلد دیگر اضافه کنید مثلا لینک دانلود ۴ به آموزش زیر توجه کنید

در مرحله اول باید کد زیر را به کدی که در مرحله ۲ به شما ارائه کردیم اضافه کنید ( پس از خط ۴۵ یک اینتر بزنید و کد زیر را اضافه کنید )

if ( get_field('dl_link3') ) {
        echo '
    <li class="item_download">
        <img src="http://dl.1learn.ir/hakimi/ready-codes/download-box/images/download.png" width="37" height="30" alt="pic4" />
        <a href="' . get_field('dl_link3_val') . '">' . get_field('dl_link3') . '</a>
    </li>';
    }

و اما تغییراتی که باید انجام دهید

۱- به جای dl_link3 در خط اول باید بنویسید dl_link4 و در فیلد های بعدی که اضافه میکنید این عدد را افزایش دهید

۲- در خط ۵ به جای dl_link3_val بنویسید dl_link4_val و در فیلدهای بعدی این عدد را افزایش دهید

۳- در خط ۵ به جای dl_link3 همان مقداری را وارد کنید که در خط اول وارد کردید یعنی dl_link4

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

۱۴- در زمینه شماره ۱۴ در قسمت برچسب زمینه بنویسید  عنوان لینک دانلود ۴  و در قسمت نام زمینه بنویسید dl_link4

۱۵- در زمینه شماره ۱۵ در قسمت برچسب زمینه بنویسید  لینک دانلود ۴ و در قسمت نام زمینه بنویسید dl_link4_val

حالا در قسمت افزودن نوشته لینک دانلود ۴ نیز اضافه میشود که در اینجا نیز ۱۴ و ۱۵ به هم وابسته هستند

این آموزش یکی از آموزش های کامل من بود که شامل ۲۰۰۱ کلمه هست و تمامی توضیحات در این آموزش کامل داده شده تا دوستان از مبتدی تا حرفه ای بتونن از این آموزش استفاده کنند

 

منبع این مطلب

 

برچسب ها:

امیر رضائی وبسایت


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

بهترین و راحت ترین راه برای ارتباط با شما کانال تلگرام بلاگ تم

3 دیدگاه برای “جعبه دانلود حرفه ای برای وردپرس( سازگار با زمینه های دلخواه )

  • الیاس بشکنی در تاریخ خرداد ۹, ۱۳۹۴ گفت:

    سلام
    مرسی
    میشه اون کد هارو توی کدگزار بزارید!
    خیلی بهم ریختس!
    مرسی

    • امــــیر رضائـــی در تاریخ خرداد ۲۱, ۱۳۹۴ گفت:

      کد ها داخل کدگذار هستند فقط مشکلی برای قسمت کد ها به وجود آمده بود که برطرف شد

  • پیکاسو در تاریخ خرداد ۳۰, ۱۳۹۴ گفت:

    خیلی خووب بووود….ممنون
    به ما هم سر بزنید
    مدرسه مهندسی پزشکی
    http://www.iranianbme.com/

newslatter

با اشتراک در خبرنامه از آخرین آموزش ها و خدمات مطلع شوید !

از عضویت شما در خبرنامه بلاگ تم متشکریم!
best web design software

امتیاز دهید