كيف تضع وحدة الوصلات لأدسنس في مدونة الووردبريس


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

كيف تضع وحدة الوصلات لأدسنس في مدونة الووردبريس

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

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

قبل البداء في تعديل قالب موقعك خد نسخة احتياطية للملفات التي ستعمل عليها تفاديا للمشاكل

وتلبية لطلب الأخ صاحب موقع PHOTOSHOP brushes نبداء الشرح بأسفل الترويسة بحجم 15×728 حتى يصبح شرح هذا الحجم عام بالنسبة لاغلب القوالب

اولا يجب معرفة أجزاء الترويسة

الترويسة —-> اسم الموقع أو الشعار ——> اعلانات او محرك بحث … ——–> قائمة

لنفترض ان الكود بالشكل التالي

<div id="header">

<div class="logo">
</div>

<div class="serach">
</div>

<div class="menu">
</div>

</div>

كل ما عليك فعله هو إضافة كود html التالي اسفل الترويسة مباشرة

<div id="ads-728x90">
اعلان ادسنس هنا
</div>

اي ان الكود المفترض سوف يصبح على الشكل التالي :

<div id="header">

<div class="logo">
</div>

<div class="serach">
</div>

<div class="menu">
</div>

</div>

<div id="ads-728x90">
اعلان ادسنس هنا
</div>

لاحظ اين تم قفل الترويسة و يمكن وضع الاعلان قبل قفل الترويسة ايضا

ولكن سنحتاج تنسيق للوسم الذي أضفناه وهذا التنسيق على حسب خلفية القالب والألوان المستعملة في الاعلان لكي يدمج بشكل متناسق المهم التنسيق يجب ان يحتوي على التالي :

  1. float  : الاتجاه (يمين أو يسار أو وسط)
  2. padding : المحيط الداخلي للوسم يستحسن ترك قيمته 0
  3. margin : المحيط الخاريجي للوسم نحتاج تعديل المحيط العلوي والسفلي

الان يجب الاشتغال على قالب لكي تكتمل الفكرة اخترت هذا القالب Slick red

بالنسبة للإعلان بمقاس 15×728 في أغلب الأحيان  يدرج في ملف header.php هومكان الترويسة في الغالب

نلقي الان نظرة على كود الترويسة لنرى طريقة عمله

<div id="header">

			<a href="<?php echo get_option('home'); ?>/"><img src="<?php bloginfo('template_url'); ?>/images/<?php if ($sr_color) { echo $sr_color; } else { echo "red"; } ?>/logo.gif" alt="<?php bloginfo('name'); ?>" id="logo" /></a>
<?php if ($sr_remove_ad == "false") { ?>
			<div id="ad">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("Ad") ) : endif; ?>
			</div><!-- End Ad --><?php } ?>

		</div><!-- End Header -->

		<div id="nav">

			<ul>
				<li<?php if (!is_page()) { echo ' class="current_page_item"'; } ?>><a href="<?php echo get_option('home'); ?>/">الرئيسية</a></li>
				<?php wp_list_pages('title_li=&depth=1'); ?>
			</ul>

		</div><!-- End Nav -->

هنا نلاحظ انه تم التفريق بين الوسم (header) و (nav) في هذه الحالة نقوم بادراج الاعلان اسف الوسم (nav) هكذا :

<div id="header">

			<a href="<?php echo get_option('home'); ?>/"><img src="<?php bloginfo('template_url'); ?>/images/<?php if ($sr_color) { echo $sr_color; } else { echo "red"; } ?>/logo.gif" alt="<?php bloginfo('name'); ?>" id="logo" /></a>
<?php if ($sr_remove_ad == "false") { ?>
			<div id="ad">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("Ad") ) : endif; ?>
			</div><!-- End Ad --><?php } ?>

		</div><!-- End Header -->

		<div id="nav">

			<ul>
				<li<?php if (!is_page()) { echo ' class="current_page_item"'; } ?>><a href="<?php echo get_option('home'); ?>/">الرئيسية</a></li>
				<?php wp_list_pages('title_li=&depth=1'); ?>
			</ul>

		</div><!-- End Nav -->

<div id="ads-728x90">
اعلان ادسنس هنا
</div>

بالنسبة لهذا القالب يستعمل صورة في الخلفية (background) لهذا يصعب وضع الاعلان متناسق مع القائمة العلوية ولهذا السبب نسخرج لون الخلفية من الصورة باخد صورة لموقع عن طريق لوحة المفاتيح print screen واستعمال الفوتوشوب

لاحظ استعمال اللون (#EEEEEE)

وهذا مثال للاعلان

في الحقيقة صعب استعمال هذا اللون عند استعمال صورة في الخلفية

هذا التنسيق المستعمل مع الكود المستعمل

اضف التالي الى ملف التنسيق

 #ads-728x90 {
 margin:0;
 padding:0;
 }
 

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

		<div id="header">

			<a href="<?php echo get_option('home'); ?>/"><img src="<?php bloginfo('template_url'); ?>/images/<?php if ($sr_color) { echo $sr_color; } else { echo "red"; } ?>/logo.gif" alt="<?php bloginfo('name'); ?>" id="logo" /></a>
<?php if ($sr_remove_ad == "false") { ?>
			<div id="ad">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("Ad") ) : endif; ?>
			</div><!-- End Ad --><?php } ?>

		</div><!-- End Header -->

		<div id="nav">

			<ul>
				<li<?php if (!is_page()) { echo ' class="current_page_item"'; } ?>><a href="<?php echo get_option('home'); ?>/">الرئيسية</a></li>
				<?php wp_list_pages('title_li=&depth=1'); ?>
			</ul>

		</div><!-- End Nav -->

		<div id="ads-728x90" align="center">

<script type="text/javascript"><!--
google_ad_client = "pub-xxxxxxxxxxxxxxxxx";
/* 728x15, تم إنشاؤها 09/09/10 */
google_ad_slot = "5617381493";
google_ad_width = 728;
google_ad_height = 15;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

</div>

ملحوظة : في حالة وجدت فراغ كبير بين القائمة و الاعلان يجب عليك تعديل margin للقائمة في حالتنا هذه وسم القائمة هو nav تحتاج ان تنقص قيمة ال margin من الاسفل

بالنسبة لوضع الاعلان في أعلى التروسة الطريق لا تختلف كتيرا إلا في المكان والالوان

كود الترويسة يصبح هكذا :

		<div id="header">

		<div id="ads-728x90" align="center">
<script type="text/javascript"><!--
google_ad_client = "pub-6138943747262727";
/* 728x15, تم إنشاؤها 09/09/10 */
google_ad_slot = "5617381493";
google_ad_width = 728;
google_ad_height = 15;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
			<a href="<?php echo get_option('home'); ?>/"><img src="<?php bloginfo('template_url'); ?>/images/<?php if ($sr_color) { echo $sr_color; } else { echo "red"; } ?>/logo.gif" alt="<?php bloginfo('name'); ?>" id="logo" /></a>
<?php if ($sr_remove_ad == "false") { ?>
			<div id="ad">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("Ad") ) : endif; ?>
			</div><!-- End Ad --><?php } ?>

		</div><!-- End Header -->

		<div id="nav">

			<ul>
				<li<?php if (!is_page()) { echo ' class="current_page_item"'; } ?>><a href="<?php echo get_option('home'); ?>/">الرئيسية</a></li>
				<?php wp_list_pages('title_li=&depth=1'); ?>
			</ul>

		</div><!-- End Nav -->

مثال للإعلان في اعلى الترويسة

بالنسبة لتدوينة المنفردة (single.php) ناخد بعض الامثلة على السريع

غالبا ما يستعمل هذا القياس قبل عنوان التدوينة او اسفل التدوينة بالقرب من أوسمة الموضوع او الوسط (تحتاج هاك)

اول شيء الاعلانات يجب وضعها دائما بعد the_loop لأنها لن تظهر عند وضعها قبل the_loop لاحظ معي كيف يتم ادراجها

هنا مثال في أسفل التدوينة

الان مع طريقة الادراج لاحظ الصورة التالية

وهذا الكود الذي اضفناه الى الملف single.php

<div id="adsense-468x15">
<script type="text/javascript"><!--
google_ad_client = "pub-6138943747262727";
/* 468x15, تم إنشاؤها 06/11/10 */
google_ad_slot = "6031713122";
google_ad_width = 468;
google_ad_height = 15;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<br clear="all">

وهذا كود التنسيق

#adsense-468x15 {
float:right;
margin:0px 0 2px 0;
}
اذا صدفتك مشكلة الفراغ الكبير ما بين الاعلان و الاوسمة يستحسن البحث عن الوسم p في ملف التنسيق بالنسبة للمحتوى

على سبيل المثال الكود التالي :

#content .post-content p {
 padding-bottom: 25px;
 }

padding-bottom : تعني المحيط الداخلي السفلي كما تلاحظ حجم كبير 25 بيكسل, أي يجب عليك تقليل القيمة الى 5 او 6 اترك لك حرية الاختيار

بالنسبة لقائمة الجانبية يمكن استعمال هذه الطرق التي تحدثنا عنها في تدوينات سابقة مع مراعات نوع الاعلان وحدة الوصلات

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

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

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

الى هنا اتمنى ان يكون الشرح في المستوى

اذا كانت هناك اي إستفسارات أو نقص في الشرح يمكنك وضع تعليق

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

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

الوسوم : , , , , , , ,


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

  1. PHOTOSHOP brushes ديسمبر 8th, 2010

    شكرا لك أخي الكريم علي موضوعك وعلي جهودك الكبيره في سبيل مساعدة الآخرين
    هذا هو ما نريده
    محتوي حصري غير منسوخ
    أشكرك وأرفع لك القبعه

    • admin ديسمبر 8th, 2010

      شكرا أخي العزيز اذا واجهتك اي مشاكل فلا تترد في مراسلتي

  2. akrasoft أكتوبر 2nd, 2011

    شكرا لك أخي على الشرح القيم إنما كيف تضع الفارق بين الهيدر والإعلان

    • معاذ أكتوبر 4th, 2011

      العفو اخي العزيز وانصح باستعمال الاداة firebug لمتصفح الفيرفوكس
      لنفرض مثلا هذا وسم الهيدر بالكامل

      <div id="header">
      blablablablabal
      </div>//هنا قمنا بقفل وسم الهيدر اذن اسفله نقوم باضافة كود الاعلان
      <div class="ads">
      adsense code
      </div>
      

      لاحظ معي الكلاس ads سوف نقوم باضافة تنسيق له في ملف style.css بالشكل التالي :

      .ads { margin:10px auto; }
      

      هنا في ملف الاستايل قمنا جعل الاعلان في الوسط ومحيط خارجي لاسفل والاعلى بقيمة 10px اذن سيكون هناك فرق بين الاعلان و الهيدر
      تقبل تحياتي


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




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

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