خلاصة المدونة وحرية الاختيار – YourColor

الووردبريس wp

السلام عليكم ورحمة الله وبركاته

في هذه التدوينة احببت ان اتحدث عن الخلاصات والقوائم البريدية نظرا لقلت المشتركين في هذ الخدمة اما لكثرة المواضيع التي يستقبلها بريد الزائر او خوف الزائر من ان يقوم اصحاب الموقع بارسال رسائل مزعجة او اسباب اخرى , هنا قد توصلت الى طريقة ربما تعجب الزوار خصوصا عن طريق القوائم البريدية و حتى الخلاصات العادية , وهي ان تدع الزائر يختار اي تصنيف يريد الاشتراك فيه وخصوصا عن طريق البريد

اول شيئ يجب عليك الاشتراك في موقع  FeedBurner اصبح تابعا لخدمات جوجل ويعتبر هذا الموقع من أكبر المواقع التي توفر لمدونتك او منتداك خدمة الـ RSS لما يقدمه الموقع من خدمات كثيرة تهدف جميعها إلى جلب أكبر عدد من الزوار لمدونتك والحصول على زوار دائمين يتابعون جديد مدونتك دون عناء أو نسيان،على فكرة تحتاج حساب (Gmail) قم بزيارة موقع FeedBurner وقم بتسجيل الدخول عن طريق حسابك Gmail

ندخل الان في صلب الموضوع , بعد اشتراكك في موقع FeedBurner نقوم بانشاء خلاصات لجميع التصنيفات

ملحوظة :

سوف نشرح طريقة عمل خلاصات لتصنيف واحد والتصنيفات الاخرى نقوم بنفس الطريقة

نقوم باخد رابط التصنيف مثلا :

http://yourcolor.net/category/adsense/

لاحظ الصورة التالية :

بعد اخد رابط التصنيف نضيف اليه الكلمة التالية feed بالشكل التالي :

http://yourcolor.net/category/adsense/feed/

الان نقوم بانشاء خلاصات من موقع FeedBurner لجميع التصنيفات المتواجدة في الموقع

قم باضافة رابط خلاصات التصنيف واضغط على Next

لاحظ معي في هذه الصورة قمت باضافة اسم الموقع واسم التصنيف بجانبه ضروري حروف باللاتينية واضغط على Next

الان ستظهرلك رسالة نجاح انشاء الخلاصة لتصنيف الذي اضفناه

هنا تضيف بعض الخصائص للخلاصات

الان نقوم بتفعيل خاصية لتفعيل خدمة الاشتراك عن طريق البريد

 الان نسخ هذا الكود ولاحظ الكلمة المشار اليها بالاحمر هي التي تهمنا

الان ننتقل للمرحلة المهمة وهي تعديل كود الخلاصات لإضافة خاصية الإختيار وهي عبارة عن قائمة منسدلة لخلاصات التصنيفات التي قمنا بإنشائها

لدينا كود الخلاصات بالشكل التالي :

<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open(´http://feedburner.google.com/fb/a/mailverify?uri=wpportal-adsense´, ´popupwindow´, ´scrollbars=yes,width=550,height=520´);return true"><p>Enter your email address:</p><p><input type="text" style="width:140px" name="email"/></p><input type="hidden" value="wpportal-adsense" name="uri"/><input type="hidden" name="loc" value="en_US"/><input type="submit" value="Subscribe" /><p>Delivered by <a href="http://feedburner.google.com" target="_blank">FeedBurner</a></p></form>

اولا نقوم باضافة دالة (categoryfeed$) الى الرابط التالي في الكود اعلاه:

onsubmit="window.open(´http://feedburner.google.com/fb/a/mailverify?uri=$categoryfeed´

الان نحتاج مصفوفة لتعامل مع الخلاصات التي قمنا بإنشائها بالشكل التالي :

<?php
$cast = array(´wpportal´ => ´الخلاصات كاملة´,
              ´wpportal-plugins´ => ´تركيب الاضافات´,
              ´wpportal-adsense´ => ´أدسنس´,
			  ´wpportal-install-upgrad´ => ´تركيب وترقية´,
              ´wpportal-lessons´ => ´دروس´,
			  ´wpportal-general´ => ´عام´,
			  ´wpportal-problem-and-solution´ => ´مشاكل وحلول´,
			  ´wpportal-tips´ => ´نصائح´,
			  ´wpportal-articles´ => ´مقالات´);
foreach($cast as $categoryname => $categoryfeed) {
  echo "<option value="$categoryname">$categoryfeed</option>n";
}
?>

هذه المصفوفة تحتاج تعديل يدوي على حسب الخلاصات التي قمت بانشائها من موقع feedburnner
ولكي تتضح فكرة عمل هذه المصفوفة انظر الى الخلاصات التي قمت بانشائها

http://feeds.feedburner.com/wpportal

http://feeds.feedburner.com/wpportal-plugins

http://feeds.feedburner.com/wpportal-adsense

http://feeds.feedburner.com/wpportal-install-upgrad

http://feeds.feedburner.com/wpportal-lessons

http://feeds.feedburner.com/wpportal-general

http://feeds.feedburner.com/wpportal-problem-and-solution

http://feeds.feedburner.com/wpportal-tips

http://feeds.feedburner.com/wpportal-articles

الكود يصبح بالشكل التالي :

<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify"
method="post" target="popupwindow" onsubmit="window.open(´http://feedburner.google.com/fb/a/mailverify?uri=$categoryfeed´, ´popupwindow´, ´scrollbars=yes,width=550,height=520´);return true">
<p>يمكنك الاشتراك في التصنيف الذي تحب : <select name="uri">
<?php
$cast = array(´wpportal´ => ´الخلاصات كاملة´,
              ´wpportal-plugins´ => ´تركيب الاضافات´,
              ´wpportal-adsense´ => ´أدسنس´,
			  ´wpportal-install-upgrad´ => ´تركيب وترقية´,
              ´wpportal-lessons´ => ´دروس´,
			  ´wpportal-general´ => ´عام´,
			  ´wpportal-problem-and-solution´ => ´مشاكل وحلول´,
			  ´wpportal-tips´ => ´نصائح´,
			  ´wpportal-articles´ => ´مقالات´);
foreach($cast as $categoryname => $categoryfeed) {
  echo "<option value="$categoryname">$categoryfeed</option>n";
}
?>
</select></p>
<p>أدخل بريدك الاإلكتروني : <input type="text" style="width:140px" name="email"/></p>
<input type="hidden" name="loc" value="en_US"/>
<input type="submit" value="اشترك الان" />
</form>

وهذا مثال على عمل الكود :

هناك طريقة اخرى عوض القائة المنسدلة وهى (checkbox)

<p class="post-share">
<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify"
method="post" target="popupwindow" onsubmit="window.open(´http://feedburner.google.com/fb/a/mailverify?uri=$categoryfeed´, ´popupwindow´, ´scrollbars=yes,width=550,height=520´);return true">
<p>يمكنك الاشتراك في التصنيف الذي تحب :<br>
<?php
$cast = array(´wpportal-plugins´ => ´تركيب الاضافات´,
              ´wpportal-adsense´ => ´أدسنس´,
			  ´wpportal-install-upgrad´ => ´تركيب وترقية´,
              ´wpportal-lessons´ => ´دروس´,
			  ´wpportal-general´ => ´عام´,
			  ´wpportal-problem-and-solution´ => ´مشاكل وحلول´,
			  ´wpportal-tips´ => ´نصائح´,
			  ´wpportal-articles´ => ´مقالات´);
echo "<input type="radio" name="uri" value="wpportal" checked>الخلاصات كاملةn";
foreach($cast as $categoryname => $categoryfeed) {
  echo "<input type="radio" name="uri" value="$categoryname">$categoryfeedn";
}
?></p>
<p>أدخل بريدك الاإلكتروني : <input type="text" style="width:140px" name="email"/></p>
<input type="hidden" name="loc" value="en_US"/>
<input type="submit" value="اشترك الان" />
</form>

وهذا مثال :

الى هنا نكن قد انتهينا والى اللقاء في تدوينة جديدة انشاء الله

اذا كان هناك اي استفسار يرجى وضع تعليق

والسلام عليكم ورحمة الله وبركاته

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

لايفوتكم إظافة لتكبير الصور – yourcolor

لايفوتكم إظافة jQuery Colorbox لتكبير الصور بطريقه رائعه (Localization)

لايفوتكم إظافة jQuery Colorbox لتكبير الصور بطريقه رائعه
من خلال بحثي عن jQuery وجدت هذه الاظافه واندهشت لعدم تواجدها هنا
حبيت أقدمها لكم وأحب لكم ماحب لنفسي مع انى متحامل كثيرا لعدم الرد على موضوع في الدعم الفني المتقدم

أمثله
مثال تكبير الصور وعرضها شرائح
http://www.techotronic.de/index.php/…e-images-demo/
http://www.techotronic.de/index.php/…-gallery-demo/
مثال تكبير صوره واحده فقط
http://www.techotronic.de/index.php/…le-image-demo/
من المميزات الى اعجبتني فيه انه يحتوي على 5 ثيمات يمكنك اختيار مايعجبك منها
كذالك يحتوي على ملف للترجمه بصيغة po <<  افهموا يعني الى يعرف يترجمه لايطول علينا
وايضا يعرض صور الموضوع على شكل سلايدات
هنا خيارين رئيسيين
الأول (Automate jQuery Colorbox for all images) وهو لتكبير جميع صور المدونه بشكل تلقائي
الثاني (Automate jQuery Colorbox for images in WordPress galleries) وهو لتكبير صور محدده وذالك عن طريق تعديل كلاس الصوره (يدوي)
تحميل الاظافة
http://wordpress.org/extend/plugins/jquery-colorbox/
لمعرفة المزيد راجع الرابط التالي
http://www.techotronic.de/index.php/…uery-colorbox/

شرح إستخدام الحقول الخاصة في ووردبريس – yourcolor

شرح إستخدام الحقول الخاصة في ووردبريس

إحدى الخواص الهامة التي توفرها ووردبريس و التي تهمنا نحن كمصممين .. فهي تمنحنا القدرة على زيادة خواص التدوينات و اضافة خواص كثيرة للقوالب التي نقوم بتصميمها … سأشرح في هذه التدوينة فكرة و طريقة عملها و كيفية إستغلالها في تصميم القوالب مع شرح مثال بسيط لإنشاء مصغرات للتدوينات بإستخدامها ..

مواقع إستخدمت فيها الحقول الخاصة …
متابعات عقبة إظهار فيديو في السايد بار الجانبي
مجموعة تايم كود إظهار صور مصغرة بجانب التدوينات
مدونة شبايك عن شبايك في فوتر المدونة للتحكم فيها من لوحة التحكم
حسناً لنبدأ …

من لوحة تحكم المدونة ومن صفحة اضافة تدوينة جديدة ستجد في الاسفل .. صندوق ” خصائص إضافية ” او ” Custom fields ” .. سنقوم بإنشاء حقل جديد … في مثالنا هنا سنقوم بإضافة حقل لإستخدامة لوضع رابط مرجع التدوينة .. سنضع في حقل الاسم (key) اسم هذا الحقل وليكن في مثالنا references و في حقل القيمة (value) سنضع رابط هذا المرجع وليكن http://ar.wikibooks.org .. لا تنسى الضغط على زر “ اضف حقل مخصص ” … شاهد الصورة :

الأن إلى القوالب …
لنتعرف على شكل الدالة التي سنستخدمها :

get_post_meta($post_id, $key, $single);

و تأخذ ثلاث بارامترات ..
$post_id : معرف التدوينة ID
$key : إسم الحقل الذي تريد إستخدامه
$single : وتأخذ إحدى القيمتين :
true لعرض أول حقل عند إستخدام اكثر من حقل بنفس الأسم
false لعرض الحقول كمصفوفة كما سنشرح لاحقا

حسنا داخل حلقة عرض التدوينة أضف التالي :

<h3>مراجع التدوينة</h3>
<?php echo get_post_meta($post->ID, "references",true); ?>

$post->ID : لجلب المعرف الخاص بالتدوينة .. ID
references : إسم الحقل الخاص الذي أضفناه
true : لا أملك سوى حقل references و حيد و بالتالي اريد عرضه هو فقط …

احفظ القالب و اذهب و شاهد التدوينة .. ستجد http://ar.wikibooks.org/ ظهرت في نهاية التدوينة … كما في الصورة

ما رأيك أن نجعلها كرابط بدلاً من ظهورها كنص .. إستخدم التالي :

<h3>مراجع التدوينة</h3>
<?php $references = get_post_meta($post->ID, "references",true); ?>
<a href="<?php echo $references ?>"><?php echo $references ?></a>

الأن أصبح لدينا رابط لمرجع التدوينة … لنفرض الأن أن لدينا تدوينة لم أقم بإضافة مراجع لها … سيظهر في نهاية التدوينة ” مراجع التدوينة “ دون أن يظهر تحتها أي مراجع لاني لم اقم باضافتها .. لاخفاء ” مراجع التدوينة “ عند عدم وجود مراجع سنستخدم شرط if للتحقق من وجود مراجع أم لا … شاهد الكود

<?php if(get_post_meta($post->ID, "references", $single = true)!="") :?>
   <h3>مراجع التدوينة</h3>
   <?php $references = get_post_meta($post->ID, "references",true); ?>
   <a href="<?php echo $references ?>"><?php echo $references ?></a>
<?php endif; ?>

تدوينة متعددة المراجع !
الأن نريد اضافة أكثر من مرجع للتدوينة .. من لوحة التحكم من جديد قم بإضافة المراجع الأخرى و بنفس key أو الإسم وهو references الأن إلى القوالب من جديد .. في هذه الحالة سنستخدم foreach لجلب كافة الحقول الاضافية التي تحمل الاسم references … شاهد الكود :

<?php if(get_post_meta($post->ID, "references", $single = true)!="") :?>
   <h3>مراجع التدوينة</h3>
   <?php $references_field = get_post_meta($post->ID, "references",false);
   foreach ( $references_field as $references ) { ?>
   <a href="<?php echo $references ?>"><?php echo $references ?></a> <br />
<?php } endif; ?>

احفظ القالب و قم بمعاينة التدوينة ستجد بقية المراجع قد ظهرت

لنقوم بعمل تطبيق صغير على الدرس .. تطبيقنا هنا هو اضافة صورة مصغرة للتدوينة تظهر بجوارها في الصفحة الرئيسية و في الأرشيف بينما لا تظهر مثلا في صفحة العرض الكامل للتدوينة …

من لوحة التحكم وكما شرحنا سابقاً قم باضافة حقل جديد وليكن بإسم post-image ثم نضع في القيمة عنوان الصورة .. في قالب index.php و archive.php و search.php و قبل سطر إستدعاء الدالة the_content سنقوم بإضافة الكود التالي :

<?php if(get_post_meta($post->ID, "post-image", $single = true)!="") :?>
   <div>
      <?php $post_image = get_post_meta($post->ID, "post-image",true); ?>
      <img src="<?php echo $post_image ?>" alt="" />
   </div>
<?php endif; ?>

و هذا هو كود CSS الذي أستخدمته في المثال الموجود في الصورة بالأعلى :

.post-image{
	float:left;
	margin:0 10px 0 10px;
	padding:2px;
	border:1px #CCC solid;
}

إذا اردت أن تظهر الصورة المصغرة في صفحة عرض التدوينة مفردة فاضف الكود أيضاً في القالب single.php و إذا اردت إستخدمها مع الصفحات فأضف الكود لقالب page.php

هناك دوال أخرى غير الدالة التي شرحتها ولكنها كلها تقوم بنفس الوظيفة مع اختلافات بسيطة في طريقة الاستخدام .. يمكنك مراجعة صفحة الحقول الخاصة على WordPress Codex