در این ساعت از قلب وردپرس در خدمت شما هستیم با آموزش طراحی باکس دانلود حرفه ای در وردپرس
باکس دانلود در سایت یکی از مهمترین بخش هایی میباشد که باید سایت های دانلود آن را در نظر بگیرند
اهمیت طراحی باکس دانلود در سایت هایی که فایلی را برای دانلود کاربر قرار میدهند آنمقدر زیاد است که
میتوان حتی از این طریق سایت خود را در ذهن کاربر ماندگار کنند چرا که دسترسی به فایل ها برای کاربر
راحت بوده و این موضوع باعث جذب بیشتر کاربران نیز میشود.
این این پست سعی داریم تا با توجه به متدی که در پیش گرفتیم یک باکس دانلود حرفه ای در وردپرس طراحی کنیم
در این آموزش برای اولین بار ما سیستم دانلود فایل به ازای وارد کردن ایمیل رو راه اندازی میکنیم که تا کنون
در همه سایت های آموزشی با معرفی سه افزونه متنوع راهنمایی کرده اند تا سیستم دانلود فایل به ازای وارد کردن ایمیل
را راه اندازی کنید اما در این نوشته قصد داریم تا بدون استفاده از افزونه و با چند خط کدنویسی باکس دانلود حرفه ای
برای سایت خود طراحی کنیم پس با من همراه باشید.
در مرحله اول شروع میکنیم به ایجاد یک فرم html و به اون استایل میدیم :
<div class="downloadbox">
<header class="headerbox"><h2>دانلود فایل</h2>
</header>
<p class="atten">
دانلود فایل " آموزش ارسال لینک دانلود به ایمیل " بدون افزونه
</p>
<img class="mylogo" src="logo.png">
<p class="attention">لطفا قانون کپی رایت را رعایت نمایید!<br>
ایمیل ها صد در صد به دست شما خواهد رسید, ممکن است با توجه به تعداد درخواست های بالا بر روی سرور دریافت ایمیل از سوی شما تا ۱ دقیقه زمانبر باشد.
لطفا شکیبا باشید</p>
<div class="formdiv">
<form action="#" method="post">
<input id="emailfield" type="text" name="user_email" placeholder="ایمیل خود را وارد کنید" required >
<input id="emailsubmit" type="submit" name="submit" value="دریافت لینک دانلود">
</form>
</div>
خب حالا نوبت میرسه به استفاده از کدهای css برای استایل دادن به باکس دانلودمون کد های زیر رو هم به فایل استایل قالب اضافه میکنیم :
.downloadbox{
width: 50%;
height: 500px;
text-align: center;
direction: rtl;
background: #00000029;
padding: 10px;
border-radius: 10px;
}
.mylogo{
width: 50px;
}
.attention{
line-height: 1.7em;
font-weight: bolder;
}
.atten{
background: green;
padding: 5px;
color: white;
font-weight: bold;
font-size: 16px;
}
#emailfield{
width: 70%;
padding: 10px;
border-radius: 5px;
border-style: groove;
box-shadow: 3px 3px 3px #00000038,-3px -3px #00000038;
color: black;
font-weight: bold;
}
#emailfield:focus{
background: #ffd7005c;
transition: ease-in-out;
transform: scale(1.03);
transition-delay: 0.5s;
}
#emailsubmit{
padding: 13px;
width: 25%;
font-weight: bold;
background: green;
border-style: none;
border-radius: 5px;
color: white;
}
.warn h2{
background: red;
background-clip: text;
}
.successsend h3{
color: whitesmoke;
background: green;
padding: 10px;
border-radius: 5px;
}
.successsend p{
color: red;
font-weight: bolder;
font-size: 22px;
}
پس از اضافه کردن کدهای css نوبت به افزودن کدهای php میرسه که کارهای ارسال ایمیل و نمایش فیلد رو داره
پس کد php هم به شکل زیر مینویسیم :
<?php
if(!is_user_logged_in()){?>
<div class="downloadbox">
<header class="headerbox"><h2>دانلود فایل</h2>
</header>
<p class="atten">
دانلود فایل " <?php echo get_the_title();?> " بدون افزونه
</p>
<img class="mylogo" src="<?php echo get_template_directory_uri().'/template-parts/logo.png'?>">
<p class="attention">لطفا قانون کپی رایت را رعایت نمایید!<br>
ایمیل ها صد در صد به دست شما خواهد رسید, ممکن است با توجه به تعداد درخواست های بالا بر روی سرور دریافت ایمیل از سوی شما تا ۱ دقیقه زمانبر باشد.
لطفا شکیبا باشید</p>
<div class="formdiv">
<form action="#" method="post">
<input id="emailfield" type="text" name="user_email" placeholder="ایمیل خود را وارد کنید" required >
<input id="emailsubmit" type="submit" name="submit" value="دریافت لینک دانلود">
</form>
</div>
<?php
$dllink = get_post_meta($post->ID, 'downloadurl' , true);
$headers = "MIME-Version: 1.0" . "\r\n";
$headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";
$headers .= 'From: <info@houniya.ir>' . "\r\n";
$headers .= '<h2>'.get_bloginfo('name').'</h2>';
$headers .= "<style>a{color:red;font-size:26px;background:blue;}</style>";
$email = $_POST['user_email'];
$dlt = 'دانلود * '.get_the_title().' *';
file_put_contents("users/email.txt","\r\n$email", FILE_APPEND);
$dlu = '<a href="'.$dllink.'">دانلود فایل</a>';
$msg = "
کاربر گرامی شما برای دانلود فایل
$dlt
اقدام کرده بودید
این لینک صرفا برای دانلود شما ارسال شده است.
$dlu
";
if(mail($email, "$dlt","$msg",$headers)) {
echo '<div class="successsend"><h3>لینک دانلود فایل با موفقیت برای شما ارسال شد.</h3><br> <p>اکنون در پوشه اینباکس میتوانید لینک را ببینید</p></div>';
}else{
echo '<div class="warn"><h2>برای دانلود فایل ایمیل خود را وارد کنید</h2></div>';
}
?>
</div>
<?php }else{
echo '<a href="'.$dllink.'">دانلود فایل</a>';
}
?>
در این مرحله باکس دانلود ما آماده شده و کاربران با وارد کردن ایمیل میتوانند فایل درج شده در متاباکس را دریافت کنند.
برای بهتر درک کردن موضوع و کدها میتونید ویدیو آموزشی مربوط به این پست رو در کانال یوتیوب در لینک زیر مشاهده کنید :
مشاهده ویدیو آموزشی راه اندازی سیستم دانلود به ازای وارد کردن ایمیل در وردپرس
موفق و پیروز باشید.