طراحی باکس دانلود حرفه ای ( دانلود با ایمیل )

18 آذر 1402

نویسنده : قلب وردپرس | دسته بندی: آموزشی | ۰ نظر | ۲۵۰ بازدید

چکیــــــده ...

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

طراحی باکس دانلود در وردپرس

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

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

اهمیت طراحی باکس دانلود در سایت هایی که فایلی را برای دانلود کاربر قرار میدهند آنمقدر زیاد است که

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

راحت بوده و این موضوع باعث جذب بیشتر کاربران نیز میشود.

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

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

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

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

برای سایت خود طراحی کنیم پس با من همراه باشید.

همچنین به آموزش طراحی پنل کاربری اختصاصی هم سر بزنید.

 

در مرحله اول شروع میکنیم به ایجاد یک فرم 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>';
}
?>

 

 

در این مرحله باکس دانلود ما آماده شده و کاربران با وارد کردن ایمیل میتوانند فایل درج شده در متاباکس را دریافت کنند.

 

برای بهتر درک کردن موضوع و کدها میتونید ویدیو آموزشی مربوط به این پست رو در کانال یوتیوب در لینک زیر مشاهده کنید :

 

مشاهده ویدیو آموزشی راه اندازی سیستم دانلود به ازای وارد کردن ایمیل در وردپرس

 

موفق و پیروز باشید.

قلب وردپرس

قلب وردپرس نویسنده مقاله

مرتضی دریوژه هستم عضو کوچکی از خانواده بزرگ وردپرس که علاقه بسیار زیادی به وردپرس و نشر دانسته و یادگیری بیشتر وردپرس دارم.
هدف از راه اندازی سایت قلب وردپرس ارائه آموزش های تخصصی در زمینه وردپرس به دوستان علاقه مند هست که امیدوارم در این مسیر با سایر اعضای تیم قلب وردپرس موفق باشیم و نیاز شما کارب

0 0 رای
امتیاز شما به این آموزش
عضویت
اطلاع از

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

0 Comments
Inline Feedbacks
View all comments