اضافة فورم الاتصال بنا بتقنية Yourcolor – popup
الووردبريس wp
مثال
في الاعلى في شريط القائمة، اضغط على الاتصال بنا ولاحظ تقنية الpopup
قبل ما نبدأ شرح التركيب نزل الملفات (صفحة الPHP وملف الستايل)
أولا
في لوحة التحكم الخاصة في الوورد بريس
نذهب الى المظهر>المحرر>header.php
ونضيف كود الphp في الاعلى بعد اغلاق وسم head
< ?php
//If the form is submitted
if(isset($_POST[´submit´])) {
//Check to make sure that the name field is not empty
if(trim($_POST[´contactname´]) == ´´) {
$hasError = true;
} else {
$name = trim($_POST[´contactname´]);
}
//Check to make sure that the subject field is not empty
if(trim($_POST[´subject´]) == ´´) {
$hasError = true;
} else {
$subject = trim($_POST[´subject´]);
}
//Check to make sure sure that a valid email address is submitted
if(trim($_POST[´email´]) == ´´) {
$hasError = true;
} else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+.[A-Z]{2,4}$", trim($_POST[´email´]))) {
$hasError = true;
} else {
$email = trim($_POST[´email´]);
}
//Check to make sure comments were entered
if(trim($_POST[´message´]) == ´´) {
$hasError = true;
} else {
if(function_exists(´stripslashes´)) {
$comments = stripslashes(trim($_POST[´message´]));
} else {
$comments = trim($_POST[´message´]);
}
}
//If there is no error, send the email
if(!isset($hasError)) {
$emailTo = ´3nkboot.management@gmail.com´; //Put your own email address here
$body = "name: $name nnEmail: $email nnSubject: $subject nnComments:n $comments";
$headers = ´From: My Site <´.$emailTo.´>´ . "rn" . ´Reply-To: ´ . $email;
mail($emailTo, $subject, $body, $headers);
$emailSent = true;
ثـــانيــــاً
نضيف التالي
1.مكتبة الجيكويري
2.اضافة الvalidation
3.اضافة الpopup
4.ملف الستايل
كما أسلفنا في الدرس السابق، سبق وأضفنا 3 نقاط (مكتبة الجيكويري – اضافة الvalidation – ملف الستايل)
باقي اضافة الpopup
انزلها من هنا
اضغط هنا
كيف راح نربط الملفات بالهيدر؟
لربط ملف الستايل
اول شيء، نقوم برفعه الى ملف الCSS الخاص بالقالب المستخدم
ثم نكتب الكود التالي
<link rel="stylesheet" type="tex
t/css" media="all" href="<?php bloginfo(´template_directory´); ?>/css/general.css" /> </link>
لربط اضافة الpopup
نرفعها الى ملف القالب الرئيسي
ونكتب الكود التالي
اخر شيء في المرحلة الاولى
نضيف هذا الكود قبل نهاية وسم الهيد
<script type="text/javascript">
$(document).ready(function(){
$("#contactform").validate();
});
</script>
انتهينا من المرحلة الاولى
في ملف الheader.php
ننزل الى الاسفل حتى نرى هذا الكود
<ul><li><a href="<?php echo home_url(); ?>">الرئيسية</a></li>
< ?php wp_list_categories(´title_li=´); ?></ul>
ليس من الضروري ان يكون الكود مشابه 100%
نضيف عليه التالي
<li><a id="button">الإتصال بنا</a></li>
ليصبح كالتالي
<li><a href="<?php echo home_url(); ?>">الرئيسية</a></li> < ?php wp_list_categories(´title_li=´); ?> <li><a id="button">الإتصال بنا</a></li> </ul>
أخيراً
في آخر ملف الheader.php
نكتب الكود التالي
<div id="popupContact"><a id
="popupContactClose">x</a><div id="contactArea"><div id="contact-wrapper"><
?php if(isset($hasError)) { //If errors are found ?><p class="error">الرجاء التأكد من جميع الفراغات<
/p>< ?php } ?>< ?php if(isset($emailSent) && $emailSent == true) { //If email is sent ?>
<p><strong>تم الارسال</strong></p><p>شكراً <strong>< ?php echo $name;?></strong>
سيتم الرد عليك قريباً</p>< ?php } ?><form method="post" action="<?php echo $_SERVER[
´PHP_SELF´]; ?>" id="contactform"><div><label for="name"><strong>الإسم:</strong></label> <input type="text" size="41" name="contactname" id="contactname" value="" class="required" /> </div><div><label for="email"><strong>البريد الالكتروني:</strong></label> <input type="text" size="41" name="email" id="email" value="" class="required email" /></div> <div><label for="subject"><strong>العنوان:</strong></label> <input type="text" size="41" name="s
ubject" id="subject" value="" class="required" /></div><div><label for="message"><strong
>الرسالة:</strong></label><textarea rows="5" cols="50"
name="message" id="message" class="required"></textarea> </div><input type="submit" value="ارسال" name="submit" /> rm></div></div></div><div id="backgroundPopup"><
التغذية
تويتر
فيسبوك
يوتيوب
الاكاديمية العربية لفنون التصميم و تعليم الجرافيك 
يجب عليك تسجيل الدخول لكتابة تعليق.