مرجع تخصصی آموزش های فارسی

با سلام خدمت تمامی کاربران گرامی سایت یک لرن

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

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

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

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

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

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

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

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

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

2- در این مرحله باید استایل های این جعبه دانلود را وارد فایل استایل پوسته خود کنیم هم اکنون استایل های زیر را به فایل 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;
}

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

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

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

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

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

        <!-- dl-box by 1learn.ir-->
        <ul class="download-box">
            <?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 by 1learn.ir-->

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

در جعبه دانلود بالا گزینه های (1,2) و (3,4) و (5,6,7) و (8,9) و (10,11) و (12,13) به هم وابسته هستند یعنی اگر شما زمینه شماره 6 را در قسمت افزودن نوشته پر کردید باید زمینه های داخل پردانتز یعنی 5 و 7 را نیز پر کنید در غیر این صورت جعبه دانلود به مشکل بر خواهد خورد  یا هنگامی که زمینه شماره 13 را وارد کردید حتما زمینه شماره 12 را نیز وارد کنید

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

این جعبه دانلود به طور پیشفرض دارای گزینه های 1- عنوان دانلود 2- حجم فایل 3- منبع 4- لینک دانلود 1 5- لینک دانلود 2 6- لینک دانلود 3 میباشد که همانطور که در بالا گفتیم هر کدام را نیاز داشتید وارد کنید تا نمایان شود ( به وابسته نیز توجه کنید که در مورد بالا توضیح دادیم )

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

و اما …

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

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

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

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>';
    }

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

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

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

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

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

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

15- در زمینه شماره 15 در قسمت برچسب زمینه بنویسید  لینک دانلود 4 و در قسمت نام زمینه بنویسید dl_link4_val

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

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

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

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