در وب سایت هایی مثل وب سایت گستران وب که در انتهای مطالب باید فایل هایی را برای دانلود قرار داد یا مثل سایت های دیگر مانند وب سایت های دانلود فیلم و سریال ، موزیک ، نرم افزار و …… که دارای قسمت مخصوص لینک دانلود یا همان جعبه دانلود که به توسط ویژگی های زمینه ی دلخواه سیستم وردپرس اضافه می شوند را در این وب سایت ها دیده اید .
در این مقاله تیم گستران وب قصد دارد تا نحوه چگونگی قرار دادن جعبه دانلود و و همینطور کدهای آن را به شما همراهان همیشگی آموزش دهد . در ادامه با این مقاله با ما همراه باشید .
جعبه دانلود یا زمینه دلخواه (custom field) چیست ؟
در وردپرس وقتی ما مطلبی مینویسیم در انتها می توانیم از ویژگی به نام زمینه دلخواه استفاده کنیم .ما از قبل درون قالبمون جعبه دانلود به همراه قالب آن و نوشته هایی که درون آن هستش را جایگذاری کردیم و فقط در انتهای یک نوشته ما فقط نام اون زمینه دلخواه از پیش تعریف شده را میاوریم بعد بهش مقدار (لینک) میدیم و وردپرس خودش طبق همون چیزایی که گفتیم برای ما کار رو انجام میده ( فکر کنم گیج تر شدید الان ) !!
قالب جعبه دانلود شماره ۱
تیم ما دو قالب برای شما آماده کرده است .
شما باید فایل شیوه نامه خود را باز کنید و کدهای زیر را به انتهای آن اضافه کنید.
#download-links { width: ۴۷۵px; height: auto; background-repeat: repeat; -webkit-border-radius: ۱۰px; -moz-border-radius: ۱۰px; border-radius: ۱۰px; -moz-transition: all ۰.۵s ease-out ۰s; margin-top: ۰px; margin-bottom: ۰px; margin-right: auto; margin-left: auto; font-size: ۱۴px; text-decoration: none; background-image: url(https://GosTaranweb.com/image/background.png); paddin-webkit-border-radius: ۱۰px; -moz-border-radius: ۱۰px; border-radius: ۱۰px; g-right: ۱۰px; padding: ۱۵px; border: ۱px solid #۹۹۹; } #download-links:hover { -moz-transition: all ۰.۵s ease-out ۰s; border-radius: ۳px ۳px ۳px ۳px; text-shadow: ۱px ۱px #FFFFFF; -webkit-border-radius: ۱۰px; -moz-border-radius: ۱۰px; border-radius: ۱۰px; } #download-links ul { text-decoration: none; padding: ۰px; color: #AFAFAF; font-family: B Yekan,Tahoma, Arial, Helvetica, sans-serif; font-size: ۱۴px; text-shadow: ۱px ۱px #FFFFFF; background-image: url(https://GosTaranweb.com/image/download-icon.png); background-position: ۳۰px center; background-repeat: no-repeat; list-style-type: none; height: ۱۲۰px; margin-top: ۰px; margin-right: ۰px; margin-bottom: ۱۰px; margin-left: ۰px; } #download-links ul li { text-decoration: none; margin: ۰px; list-style-type: none; background-image: url(https://GosTaranweb.com/image/li.png); background-repeat: no-repeat; background-position: right; padding-top: ۰px; padding-right: ۱۲px; padding-bottom: ۰px; padding-left: ۰px; } #download-links ul li a { color: #AFAFAF; font-family: B Yekan,Tahoma, Arial, Helvetica, sans-serif; font-size: ۱۴px; text-shadow: ۱px ۱px #FFFFFF; } #download-links ul li a:hover { text-decoration: none; color: #CC۳۳۳۳; -moz-transition: all ۰.۵s ease-out ۰s; }
قالب جعبه دانلود
این دومین قالب جعبه دانلود ، فقط دقت کنید باید فقط یکی از این کدهای مربوط به قالب رو به فایل شیوه نامه اضافه کنید.
#download-links, .mobile-download-links { width: ۵۰۰px; background: #E۶FFB۲; padding: ۱۰px ۱۵px; border-bottom: ۲px solid #B۸EB۵۹; position: relative; color: #۵CA۰۰۰; } #download-links a, .download-links a:link { color: #۰۹۷۰۰B; padding: ۳px ۴px ۴px; } #download-links a:hover { color: #۰۹۷۰۰B; text-shadow: ۰ ۱px ۱px #fff; padding: ۳px ۴px ۴px; background-color: #F۹FFEB; -moz-border-radius: ۳px ۳px ۳px ۳px; /* FF۱+ */ -webkit-border-radius: ۳px ۳px ۳px ۳px; /* Saf۳-۴, iOS ۱+, Android ۱.۵+ */ border-radius: ۳px ۳px ۳px ۳px; /* Opera ۱۰.۵, IE۹, Saf۵, Chrome, FF۴ */ } #download-links h۳ { color: #۸CCD۱۸; } #download-links-style { white-space: nowrap; overflow: auto; width: ۵۴۰px; font-size: ۰.۹۵em; }
تعریف زمینه دلخواه ، لینک ها و توضیحات در قالب
بعد از این که یکی از شیوه نامه های زیر را به فایل شیوه نامتون اضافه کردید به پوشه قالب وردپرس خود رفته و فایل single.php یا هر صفحه دیگر که دوست دارید جعبه دانلود در آن باشد را باز کنید.سپس هر کجای این صفحه که دوست داشتید (البته باید آخر ها یعنی بعد از فراخوانی نوشته توسط php ) این کدهای زیر رو اونجا وارد کنید.
<div id="download-links"> <h۳>قسمت دانلود</h۳> <ul> <?php $mid_var = get_post_meta($post->ID, 'download',true); if(isset($mid_var) && !empty($mid_var)) : ?> <li class="download"><a href="<?php echo get_post_meta($post->ID, 'download',true); ?>">دانلود با لینک مستقیم</a></li> <?php endif; ?> <?php $mid_var = get_post_meta($post->ID, 'download۲',true); if(isset($mid_var) && !empty($mid_var)) : ?> <li class="download"><a href="<?php echo get_post_meta($post->ID, 'download۲',true); ?>">دانلود - لینک کمکی</a></li> <?php endif; ?> <?php $mid_var = get_post_meta($post->ID, 'password',true); if(isset($mid_var) && !empty($mid_var)) : ?> <li class="download">رمز فایل : <?php echo get_post_meta($post->ID, 'password',true); ?></li> <?php endif; ?> </ul> </div>
این کدها فقط یک مثاله ، مثلا من ۳ تا قسمت یکی لینک اصلی ، یکی لینک کمکی ، و یکی برای رمز فایل گذاشتم.دقت کنید برای اولی در دوجا اسم download رو و مثلا برای سومی در دوجا اسم password رو انتخاب کردم.شما با یکم تغییر دادن این کدها و اسامی جعبه دانلود مورد نظر خودتونو ویرایش کنید.
اضافه کردن زمینه های دلخواه در وردپرس
حالا تقریبا همه چیز آمادست یک قالب درست کردیم ، بهش گفتیم چجوری و کجا باشه ، الان فقط باید مقدار ها در وردپرس وارد کنیم. در انتهای هر مطلب در زیر ادیتور شما در وردپرس قسمتی وجود دارد به نام ” زمینه های دلخواه ” که اگر پیداش نکردید باید خودتون اضافش کنید .
طبق شکل بالا به قسمت تنظیمات صفحه ( معمولا بالا سمت چپ ) رفته و تیک زمینه های دلخواه را می زنید. حالا شما باید فقط اسم انگلیسی اون زمینه دلخواه رو که تو قالب جای دادیم رو وارد کنید و مقدار مورد نظرشو وارد کنید مثل شکل زیر.
دقت کنید اسامی طرف راست همیشه ثابت و همونایی هست که قبلا تو قالب تعریف کردیم.دومی هم مقدار هست که انتهای هر پست لینک مورد نظرتونو وارد می کنید.الان دقیقا با این زمینه های دلخواه که وارد کردم اون جعبه دانلود که عکسو اول گذاشتم به انتهای نوشته اضافه شد.