اضافة فورم الاتصال بنا بتقنية 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"><

الاكاديمية العربية لفنون التصميم و الجرافيك

كيفية عمل شريط ترقيم الصفحات – YourColor

الووردبريس wp

افتح النوت باد
واكتب الكود التالي :

<?php

global $wp_rewrite;
$paginate_base = get_pagenum_link(1);
if (strpos($paginate_base, ´?´) ¦¦ ! $wp_rewrite->using_permalinks()) {
	$paginate_format = ´´;
	$paginate_base = add_query_arg(´paged´, ´%#%´);
} else {
	$paginate_format = (substr($paginate_base, -1 ,1) == ´/´ ? ´´ : ´/´) .
	user_trailingslashit(´page/%#%/´, ´paged´);;
	$paginate_base .= ´%_%´;
}

echo ´<div class="pagenavi">´. "n";
echo paginate_links( array(
	´base´ => $paginate_base,
	´format´ => $paginate_format,
	´total´ => $wp_query->max_num_pages,
	´mid_size´ => 5,
	´current´ => ($paged ? $paged : 1),
        ´type´ => ´list´,
        ´prev_text´ => ´ &laquo; السابق´,
        ´next_text´ => ´التالي &raquo;´,
));
echo "n</div>n";

?>

احفظ الملف في مسار القالب الرئيسي باسم navigation.php

ثم افتح صفحة الاندكس index.php بالنوتباد

واكتب الكود التالي بعد انتهاء لوب المقالات :

<?php if (function_exists(´wp_pagenavi´)) { wp_pagenavi(); } else { include(´navigation.php´); } ?>

	<?php endif; ?>

انتهينا تقريباً

بقي علينا الستايل

افتح ملف الستايل :

.pagenavi {
    margin: auto;
    overflow: hidden;
}
.pagenavi ul {
    margin-bottom: 50px;
    padding: 10px;
}
.pagenavi ul li {
    display: block;
    float: right;
    margin: 3px;
}
.pagenavi ul li a:hover, .pagenavi ul li .current {
    background: none repeat scroll 0 0 #FF9C00;
    border-radius: 5px 5px 5px 5px;
    color: #FFFFFF;
    padding: 10px;
}
.pagenavi ul li a {
    background: none repeat scroll 0 0 #2D2C2C;
    border-radius: 5px 5px 5px 5px;
    color: #FFFFFF;
    padding: 10px;
}

احفظ ملف الاستايل وافتح موقعك

ستظهر بهذا الشكل :

تحديث

لتطبيق هذا الشرح على قالب twenty ten
طبق الخطوة الاولى
ثم افتح ملف الindex.php
بعد div الاغلاق الخاص بالمحتويات

			</div><!-- #content -->

اضف الكود التالي :

		<?php include(´navigation.php´);  ?>

ثم افتح ملف loop.php

وامسح الكود التالي :

<?php /* Display navigation to next/previous pages when applicable */ ?>
<?php if (  $wp_query->max_num_pages > 1 ) : ?>
				<div id="nav-below" class="navigation">
					<div class="nav-previous"><?php next_posts_link( __( ´<span class="

meta-nav">&larr;</span> Older posts´, ´twentyten´ ) ); ?></div>
					<div class="nav-next"><?php previous_posts_link( __( ´Newer posts

 <span class="meta-nav">&rarr;</span>´, ´twentyten´ ) ); ?></div>
				</div><!-- #nav-below -->
<?php endif; ?>

الاكاديمية العربية لفنون التصميم و الجرافيك

[إضافة] عارض الصور اﻷفقي المتحرك – yourcolor

[إضافة] عارض الصور اﻷفقي المتحرك

معلومات اﻹضافة:
الاسم: Horizontal motion gallery
المبرمج: http://gopi.coolpage.biz/demo/about/
متوافقة مع إصدارات الورد بريس: 2.0.2 أو أعلى

يمكن من خلال هذه اﻹضافة , إضافة شريط صور أفقي, يتحرك عند وضع الفأرة عليه يمينا او يسار, و التحكم بسرعة التحريك و فقا لموقع الفأرة على الشريط. و يمكن إضافة هذا الشريط في تدوينة او صفحة او على القائمة الجانبية (Widget) و أيضا في أي موقع في القالب.

كيفية تركيب اﻹضافة:
1/ قم بتحميل الاضافة من هذا الرابط او النسخة المعربة (الاضافة لا تحتاج إلى تعريب, ولكن قمت بتعريب سريع لها).
2/ فعل الاضافة من خلال إدارة الاضافات في لوحة التحكم.

كيفية عمل شريط:
يجب لكل شريط أن يكون له ملف XML يحتوي على تفاصيل الصور المدرجة في الشريط. كل صورة تكون في تاج (image), و البيانات كالتالي:
path: مسار الصورة
title: تسمية الصورة
link: الرابط الذي تؤشر عليه الصورة (اختياري)
target: وضع المتصفح عند النقر على الرابط, فتح بإطار جديد أو على نفس اﻹطار , … الخ. (اختياري)
و تكون كالتالي:
كود PHP:

<gallery>  <image>

<path>مسار الصورة</path>

<title>تسمية الصورة</title>

<link>الرابط</link>

<target>كيفية فتح الرابط</target>

</image>
<image>

<path>مسار الصورة</path>

<title>تسمية الصورة</title>

<link>الرابط</link>

<target>كيفية فتح الرابط</target>

</image>
…
</gallery>

و يتم وضع الملف في مجلد (gallery) في المجلد الخاص باﻹضافة. ومن ثم نذهب إلى لوحة التحكم و نذهب إلى قائمة (Settings) (اﻹعدادات) و نذهب إلى (Horizontal motion gallery). ومن ثم نضيف اسم الملف. ويوجد فيه أمثلة للملف. ولتعديل عرض و ارتفاع الشريط, نقوم بتعين القيم المطلوبة في ملفات (CSS) الموجودة في ملجد الخاص باﻹضافة.
كيفية إضافة الشريط:
1/ في القائمة الجانبية (widget) قم بنقر ومع السحب للـ(Horizontal motion gallery), و ضعها في المكان المناسب.
2/ في التدوينة أو الصفحة نكتب الكود التالي:
كود PHP:

[my_hmg=widget.xml]


حيث ان يتم استبدال كلمة (widget) باسم الملف الخاص بالشريط.
3/ في مكان معين في القالب, نضع الكود التالي:
كود PHP:

<?php if (function_exists (my_hmg_show)) my_hmg_show(); ?>

أرجو من الله أن اكون فقت بتوضيح الصورة لكم.

اضافة شريط الفيديو المرتبط دلاليا بمواضيعك – yourcolor

اضافة شريط الفيديو المرتبط دلاليا بمواضيعك

يمكنك اضافة شريط الفيديو لمدونتك او صفحتك الشخصية
الشريط يجلب الفيديو من اليوتيوب حسب وسوم التدوينة الخاصة بك
فهو يجلب الفيديو من أول 4 تاج لموضوعك