طريقة إدراج إعلانات أدسنس في القائمة الجانبية لمدونة الووردبريس (الجزء 1)


مصنفة في قسم  : أدسنس
كتبت بتاريخ  : 21 نوفمبر 2010
عدد المشاهدات  : 
عدد التعليقات  : 6 تعليقات 

طريقة إدراج إعلانات أدسنس في القائمة الجانبية لمدونة الووردبريس (الجزء 1)

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

اليوم سوف نتكلم عن طريقة ادراج اعلانات ادسنس بمقاسات 300×250, 250×250, 200×200, 150×180, 160×600, 120×600 في مدونة الووردريس وهذه المقاسات يمكن ادراجه في اماكن متعددة  و لكن احسن مكان لها هو  القائمة الجانبية (sidebar.php) وبما ان مدونة الووردبريس تستعمل ملف الاستايل فاننا سوف نضطر لاستعملها لوضع الاعلان بشكل انيق و ملائم لشكل المدونة في بعض المقاسات

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

ملاحظة الدرس سوف نطبقه على هذا القالب gray gets green

لتحميل القالب من هنا Download

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

[pro-player width=’530′ height=’400′ type=’video’]http://www.youtube.com/watch?v=lMv-Giucapk[/pro-player]

ملحوظة : الشرح ينطبق على جميع القياسات المذكورة اعلاه

اذا كان عرض القائمة اكبر من 250 بقليل اي 260 فسوف تكون ملائمة بالنسبة للمقاس 250×250 اما اذا كانت اكبر بكتير فيستحسن استعمال وحدة اعلانية اخرى بمقاس 300×250 اما اذا كان عرض القائمة اصغر من 250 فيجب عليك استعمال مقاس اصغر مثل 200×200

نفتح ملف الاستايل style.css لنحصل على لون الخلفية المناسب سوف تجده في اغلب في الاحيان يكون لون الخلفية في الوسم pages او post وقد يصادفك بعض القوالب تستعمل صور صغيرة في هذه الحالة سوف تحتاج لمعرفة اللون باستعمال الفوتوشوب,

لاحظ لون الخلفية background في الكود التالي الماخود من ملف الستايل لقالب gray gets green

div#pages {
 height: 40px;
 margin: 0px auto 0px;
 width:800px;
 background: #2d2d2d;
}

الان ننتقل للحصول على وحدة اعلانية وطريقة التعديل عليها بعد تسجيل الدخول قم بالخطوات التالية لاحظ الصورة التالية

  1. إعداد AdSense
  2. الحصول على إعلانات
  3. الوحدة الإعلانية قم بوضع علامة عليها
  4. اختر نوع الاعلانات التي تريد صورية فقط او نصية فقط او دعها على الحالة الافتراضية
  5. اضغط تابع لننتقل الى المرحلة التانية

الان سوف نختار القياس الذي سوف يناسب القائمة الجانبية

وهذه صورة لجميع المقاسات المتوفرة

هنا سوف اخترت 200×200 لانه تبين ان عرض القائمة الجانبية هو 220px وانسب مقاس هو 200×200 وهذا كود القائمة الجانبية في ملف التنسيق للقالب الذي نشتغل عليه الان gray gets green

#sidebar {
 width: 220px;
 float: right;
 line-height: 1.5em;
 display:inline;
 margin: 8px 8px 8px 0px;
 padding: 10px;
 font-size:10px;
}

اما الان فسوف نحتاج الاداة FireBug مرة اخرى لمعرفة لون الروابط اما بالنسبة للخلفية فكما تعرفون هو لون الخلفية لموقع الذي استخرجناه عن طريق الوسم pages من ملف التنسيق style.css لاحظ معي الصورة التالية

اضغط على الصور لمشاهدتها بالحجم الطبيعي

اللون الذي استخرجناه من الروابط هو 99CC33

ولون الخلفية هو 2d2d2d

لاحظ كيف تم ادراجهم

بالنسبة للخطوط قم باختيار الخط الذي يناسبك او استخدم الاعداد الذي يناسبك اما بالنسبة لنمط الاركان فلن يفيد في حالتنا بشئ لاننا استعملنا في الخلفية لون خلفية الموقع ولن يظهر اي تغيير

ملحوظة : نمط الاركان نتسعمله فقط في بعض الحالات القليلة سوف أذكرها في شرح منفصل وعلى حسب القوالب المستعملة

الان معليك سوى القيام بالضغط على تابع تابع

مثال  للاعلان بعد تغيير الالوان

اما بالنسبة لطريقة الادراج نقوم بفتح ملف القائمة الجانبية (sidebar.php) بأي محرر مثل notepad أو من لوحة التحكم > المظهر > محرر

<div id="sidebar">
 <h2>مواقع صديقة</h2>
 <script type="text/javascript"><!--
google_ad_client = "pub-xxxxxxxxxxxxxxxx";
/* 200x200, تم إنشاؤها 20/11/10 */
google_ad_slot = "9305478770";
google_ad_width = 200;
google_ad_height = 200;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
 <h2>ابحث في هذه المدونه</h2>
 <div id="searchdiv">
 <form id="searchform" method="get" action="<?php echo $_SERVER['PHP_SELF']; ?>">
 <input type="text" name="s" id="s" size="20"/>
 <input name="sbutt" type="submit" value="اذهب" alt="بحث"  />
 </form>
 <ul>
 </div>
 <h2>

 </h2>
 <ul>
 <?php get_links_list(); ?>
 </ul>
 <h2>
 <?php _e('التصنيفات'); ?>
 </h2>
 <ul>
 <?php list_cats(0, '', 'name', 'asc', '', 1, 0, 0, 1, 1, 1, 0,'','','','','') ?>
 </ul>
 <h2>
 <?php _e('أُخرى'); ?>
 </h2>
 <ul>
 <?php wp_register(); ?>
 <li><a href="<?php bloginfo('rss2_url'); ?>" title="<?php _e('Syndicate this site using RSS'); ?>">
 <?php _e('<abbr title="Really Simple Syndication">RSS</abbr>'); ?>
 </a></li>
 <li>
 <?php wp_loginout(); ?>
 </li>
 <li><a href="http://validator.w3.org/check/referer" title="<?php _e('This page validates as XHTML 1.0 Transitional'); ?>">
 <?php _e('Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr>'); ?>
 </a></li>

 <?php wp_meta(); ?>
 </ul>

</div>

لاحظ كيف تم اضافة اعلان ادسنس في الكود باسم مواقع صديقة يمكن ايضا ان تزيل اسم (مواقع صديقة) او ان تقوم بتعديله ويمكنك وضعه في اي مكان في الاسفل في الاعلى

هنا مثال على وضع الاعلان وسط القائمة الجانبية و بدون عنون

وهذا كود ادراج الاعلان بالوسط

<div id="sidebar">
 <h2>ابحث في هذه المدونه</h2>
 <div id="searchdiv">
 <form id="searchform" method="get" action="<?php echo $_SERVER['PHP_SELF']; ?>">
 <input type="text" name="s" id="s" size="20"/>
 <input name="sbutt" type="submit" value="اذهب" alt="بحث"  />
 </form>
 <ul>
 </div>
 <h2>

 </h2>
 <ul>
 <?php get_links_list(); ?>
 </ul>
 <h2>
 <?php _e('التصنيفات'); ?>
 </h2>
 <ul>
 <?php list_cats(0, '', 'name', 'asc', '', 1, 0, 0, 1, 1, 1, 0,'','','','','') ?>
 </ul>

 <ul><!--open <ul> for add ads -->
 <script type="text/javascript"><!--
google_ad_client = "pub-xxxxxxxxxxxxxxxxxxxx";
/* 200x200, تم إنشاؤها 20/11/10 */
google_ad_slot = "9305478770";
google_ad_width = 200;
google_ad_height = 200;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</ul><!--close </ul> for add ads -->

 <h2>
 <?php _e('أُخرى'); ?>
 </h2>
 <ul>
 <?php wp_register(); ?>
 <li><a href="<?php bloginfo('rss2_url'); ?>" title="<?php _e('Syndicate this site using RSS'); ?>">
 <?php _e('<abbr title="Really Simple Syndication">RSS</abbr>'); ?>
 </a></li>
 <li>
 <?php wp_loginout(); ?>
 </li>
 <li><a href="http://validator.w3.org/check/referer" title="<?php _e('This page validates as XHTML 1.0 Transitional'); ?>">
 <?php _e('Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr>'); ?>
 </a></li>

 <?php wp_meta(); ?>
 </ul>

</div>

ملحوظة : الاعلانات تظهر بالانجليزية لا تبدو مناسبة لانني اقوم بالشرح من localhost يعني اغلب الاعلانات تظهر تبع الاستضافات او الووردبريس وهذا سبب عدم التناسق

سوف نكتفي بهذا القدر من الشرح الى الجزء الثاني انشاء الله والسلام عليكم ورحمة الله وبركاته

طريقة إدراج إعلانات أدسنس في القائمة الجانبية لمدونة الووردبريس (الجزء 1) بواسطة مجلة ووردبريس, يمكنك نقل ومشاركة التدوينة مع ذكر المصدر الأصلي للموضوع ، مع رابطه, والتدوينة مرخصة بموجب المشاع الابداعي Creative Commons A-NC-SA 3.0.

الوسوم : , ,


عدد التعليقات على هذه التدوينة : 6 تعليقات

  1. PHOTOSHOP brushes نوفمبر 22nd, 2010

    شكرا لك علي المجهود الجبار
    ولكن أنا أتمني أن تضيف موضوع عن كيفيه إضافه الإعلانات أسفل الهيدر مباشره بحجم 728*15
    ولك جزيل الشكر

    • admin نوفمبر 22nd, 2010

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

      أخي العزيز اخلص بس الوحداة الاعلانية وسوف امر مباشرة الى وحدة الوصلات وسف اقوم بشرحها جيدا ان شاء الله

  2. عبدالعزيز نوفمبر 29th, 2010

    مشكور على التدوينة الرئعة..
    يوجد اضافات تقوم بهذا الامر

    شكر لك

    • admin نوفمبر 30th, 2010

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

  3. أحمد الجهني سبتمبر 19th, 2011

    بارك الله في مجهودك أخي الحبيب معاذ

    ولكن هناك طريقة أسهل بكثير وأريد تعليقك عليها وهي وضع text widget في ال sidebar ثم لصق كود الإعلان في هذا ال widget وبذلك يظهر الإعلان في القائمة الجانبية

    قي انتظار ردك


  • مجلة الوردبريس
    سبتمبر 19th, 2011




1. المرجوا الابتعاد عن كتابة تعليقات بنمط (يعطيك العافية)، (روعة)، (ممتاز)، (مشكوووور)، (ابداع).

2. زاوية التعليقات هي جزء مكمّل للموضوع الذي قرأته للتو. حاول أن تحصر تعليقك في صلب الموضوع حتى نستثمر هذا التعليق لكسب المزيد من الفائدة سواءً عن طريق مناقشة الموضوع أو عن طريق إضافة معلومات مكمّلة أو إبداء ملاحظات أخرى في نفس السياق.