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



هنا سنذكر أربع طريق مختلفة لـ إضافة أدسنس لصفحات AMP :

المثال الأول كود إضافة اعلانات أدسنس لصفحات AMP خاصتك أعلى المحتوى .

المثال الثاني كود إضافة اعلانات أدسنس لصفحات AMP أعلى المحتوى ، وأيضا ً ضمن المحتوى بعد عدد محدد من الفقرات.

المثال الثالث كود إضافة اعلانات أدسنس لصفحات AMP ضمن المحتوى بعد عدد معين من الفقرات .

المثال الرابع هو مختلف كليا ً ، وفيه سننشئ كود مختصر يعمل في كل من AMP والصفحات العادية لكي يعرض إعلانات جوجل أدسنس الخاصة بك .

المثال الثاني والثالث مفيدان في حال أردت أن تدخل إعلانا ً بشكل تلقائي بين الفقرات ( بعد عدد محدد من الفقرات ) في محتوى منشور AMP الخاص بك .

أمّا المثال الرابع فيعطيك تحكما ً كاملا ً بالمكان الذي تريد فيه عرض إعلاناتك ضمن المحتوى الذي يخصّك.

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

قبل أن نبدأ بسرد الطريق هنالك خطوتان إلزاميتان عليك القيام بهما :

كود إضافة اعلانات أدسنس لصفحات AMP في ووردبرسكود إضافة اعلانات أدسنس لصفحات AMP في ووردبرس
الخطوة الإلزامية الأولى :

أولا ً ستحتاج لوحدة إعلان جوجل أدسنس سريعة التجاوب ، وفي حال لا تملك واحدة عندها أنشئ وحدة إعلان جديدة كما يلي :

سجل دخول إلى حساب جوجل أدسنس < انقر على “ Ad Units “ < انقر على “ New ad Unit “ < اختر “ Text & display ads “ .
أعط لوحدة الإعلان الجديدة اسما ً ما .
من أجل حجم الإعلان ، يجب أن تختار الحجم السريع التجاوب “ Responsive “ .
انقر على “ Save and get code “ ، ودوّن المعلومات التالية من كود الإعلان السريع التجاوب خاصتك :
ID الناشر الخاص بك ( data-ad-client ) ، مثلا ً : ca-pub-1234567891234567 .
ID لوحدة الإعلان خاصتك ( data-ad-slot ) ، مثلا ً : 1234567890 .
ستحتاج أن تدوّن هذه القيم السابقة لكي تلصقها في الأمثلة التي في الأسفل .

الخطوة الإلزامية الثانيّة :

أيضا ً سواء كنت تستخدم المثال 1 ، 2 ، 3 ، أو 4 ، فإنّه في كل طريقة يجب أن تضيف نص برمجي هو .js لإعلان AMP لكي تضيف دعما ً لعنصر amp-ad . وهذا الأمر من السهل القيام به فقط أضف النص البرمجي لإعلان AMP إلى موقع ووردبرس خاصتك من خلال إضافة الكود التالي إلى وظائفك :

/**

* Add the AMP Ad script to AMP pages.

*/

function isa_load_amp_adsense_script( $data ) {

$data[‘amp_component_scripts’][‘amp-ad’] = ‘https://cdn.ampproject.org/v0/amp-ad-0.1.js’;

return $data;

}

add_filter( ‘amp_post_template_data’, ‘isa_load_amp_adsense_script’ );

والآن أنت جاهز لتنتقل إلى الأمثلة لكي تبدأ إضافة أكواد أدسنس فعلية .

المثال 1 : كود إضافة اعلانات أدسنس لصفحات AMP أعلى المحتوى
هذه الطريقة تقوم بإضافة الأدسنس أعلى محتوى منشور AMP ، ولكن تحت الصورة المميزة ( في حال لا يوجد صورة مميّزة عندها سوف يبقى الإعلان ببساطة أعلى المحتوى ) .

لإضافة جوجل أدسنس لأعلى محتوى AMP في وردبرس ، فقط أضف النص البرمجي التالي إلى وظائفك، ولكن يجب أن تحرّر السطر 12 لتستبدل “ ca-pub-1234567891234567 “ بمعرف ID للناشر الخاص بك ، كذلك يجب أن تحرّر السطر 14 لتستبدل “ 1234567890 “ بمعرف ID لوحدة الإعلان الخاصة بك .



/**
* Add Google Adsense code to AMP above the content
*/
add_action( 'pre_amp_render_post', 'isa_amp_add_content_filter' );
function isa_amp_add_content_filter() {
add_filter( 'the_content', 'isa_amp_adsense_above_content' );
}
function isa_amp_adsense_above_content( $content ) {
$publisher_id = 'ca-pub-1234567891234567';
$ad_slot = '1234567890';
// Add Adsense ad above AMP content
$ad_code = '<amp-ad layout="fixed-height" height="100" type="adsense" data-ad-client="' . $publisher_id . '" data-ad-slot="' . $ad_slot . '"></amp-ad>';
return $ad_code . $content;
}
المثال الثاني : كود إضافة اعلانات أدسنس لصفحات AMP أعلى و ضمن المحتوى
هذا المثال سيشرح كيفية إضافة إعلان أدسنس أعلى المحتوى ، وإضافة إعلان أدسنس آخر ضمن المحتوى بعد الفقرة الثانية . وفي حال أردت أن تعرض الإعلان بعد فقرة لاحقة بدلا ً من الفقرة الثانية يمكنك ذلك من خلال استبدال الرقم “2” في السطر البرمجي 25 الموجود في الأسفل ، وتضع رقم الفقرة التي تريدها بدلا ً منه ، وفي حال كان منشورك لا يحتوي على رقم الفقرة هذه التي أضفتها فسوف لن يتم إظهار أي إعلان ضمن المنشور ولكن سيبقى الإعلان في أعلى المنشور يظهر .

يجب أن تقوم بتحرير السطرين 12 و14 في النص البرمجي الموضح في الأسفل ، حيث يجب أن تحرّر السطر 12 لتستبدل “ca-pub-1234567891234567” بمعرف ID للناشر الخاص بك ، وكذلك تحرّر السطر 14 لتستبدل “1234567890” بمعرف ID لوحدة الإعلان الخاصة بك .

/**
* Add Google Adsense code to AMP above the content, and within the content
*/
add_action( 'pre_amp_render_post', 'isa_amp_add_content_filter' );
function isa_amp_add_content_filter() {
add_filter( 'the_content', 'isa_amp_adsense_above_within_content' );
}
function isa_amp_adsense_above_within_content( $content ) {
$publisher_id = 'ca-pub-1234567891234567';
$ad_slot = '1234567890';
$ad_code_end = ' type="adsense" data-ad-client="' . $publisher_id . '" data-ad-slot="' . $ad_slot . '"></amp-ad>';
// Above the fold ad code. This is fixed height as per Google guidelines for Adsense for AMP.
$atf_ad_code = '<amp-ad layout="fixed-height" height="100"' . $ad_code_end;
// Below the fold ad code. This is responsive as per Google guidelines for Adsense for AMP.
$btf_ad_code = '<amp-ad layout="responsive" width="300" height="250"' . $ad_code_end;
// Insert Adsense ad between the content, after paragraph 2
$new_content = isa_insert_after_paragraph( $btf_ad_code, 2, $content );
// Insert Adsense ad above AMP content
return $atf_ad_code . $new_content;
}
function isa_insert_after_paragraph( $insertion, $paragraph_id, $content ) {
$closing_p = '</p>';
$paragraphs = explode( $closing_p, $content );
foreach ($paragraphs as $index => $paragraph) {
if ( trim( $paragraph ) ) {
$paragraphs[$index] .= $closing_p;
}
if ( $paragraph_id == $index + 1 ) {
$paragraphs[$index] .= $insertion;
}
}
return implode( '', $paragraphs );
}
المثال الثالث : كود إضافة اعلانات أدسنس لصفحات AMP ضمن المحتوى
هذا المثال يضيف إعلان جوجل أدسنس لمنشورات AMP ضمن المحتوى ، لكن لا يضيف إعلان أدسنس أعلى المحتوى . وهو سيضيف إعلان أدسنس بعد الفقرة الثانية ، وفي حال أردت عرض الإعلان بعد فقرات أخرى لاحقة بدلا ً من الفقرة الثانية ، قم بتغيير الرقم “ 2 “ في السطر 20 من الكود الذي في الأسفل وضع بدلا ً منه رقم الفقرة المرغوبة . لكن إذا كان المنشور لا يحتوي على رقم الفقرة التي أضفتها فعندها لن يظهر أي إعلان في ذلك المنشور .

إقرأ ايضاً: تثبيت إضافة وردبرس تعلم كيف تفعل ذلك خطوة بخطوة شرح بالصور
يجب أن تحرّر أيضا ً الكود البرمجي في كل من السطرين 12 و 14 ، حيث يجب أن تحرّر السطر 12 لتستبدل “ca-pub-1234567891234567” بمعرف ID للناشر الخاص بك ، وأيضا ً تحرّر السطر البرمجي 14 لتستبدل “1234567890” بمعرف ID لوحدة الإعلان خاصتك .

/**
* Add Google Adsense code to AMP within the content, but <strong>not</strong> above.
*/
add_action( 'pre_amp_render_post', 'isa_amp_add_content_filter_within' );
function isa_amp_add_content_filter_within() {
add_filter( 'the_content', 'isa_amp_adsense_within_content' );
}
function isa_amp_adsense_within_content( $content ) {
$publisher_id = 'ca-pub-1234567891234567';
$ad_slot = '1234567890';
// Below the fold ad code. This is responsive as per Google guidelines for Adsense for AMP.
$btf_ad_code = '<amp-ad layout="responsive" width="300" height="250" type="adsense" data-ad-client="' . $publisher_id . '" data-ad-slot="' . $ad_slot . '"></amp-ad>';
// Insert Adsense ad between the content, after paragraph 2
$new_content = isa_insert_after_paragraph( $btf_ad_code, 2, $content );
return $new_content;
}
function isa_insert_after_paragraph( $insertion, $paragraph_id, $content ) {
$closing_p = '</p>';
$paragraphs = explode( $closing_p, $content );
foreach ($paragraphs as $index => $paragraph) {
if ( trim( $paragraph ) ) {
$paragraphs[$index] .= $closing_p;
}
if ( $paragraph_id == $index + 1 ) {
$paragraphs[$index] .= $insertion;
}
}
return implode( '', $paragraphs );
}
المثال الرابع : عرض جوجل أدسنس مع كود مختصر يعمل على صفحات AMP والصفحات العادية
هنا سنريكم طريقة مختلفة كليّا ً لإضافة جوجل أدسنس إلى صفحات الموبايل السريعة على ووردبرس الخاص بك ، حيث أنّ هذه الطريقة مختلفة عن الأمثلة السابقة بأمرين :

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



الثاني : هذا الكود المختصر سيجعل إعلانات جوجل أدسنس تظهر على كل من المنشورات العادية والمنشورات التي بميزة AMP ( صفحات الموبايل السريعة ) . ويحدد الكود المختصر فيما إذا كانت صفحة AMP تم رؤيتها ، وفي حال تمّ ذلك فعندها سوف يستخدم كود إعلان متوافق مع صفحة AMP، أمّا إذا كانت الصفحة ليست بميزة AMP عندها سوف يستخدم كود الإعلان العادي . لذا فهذا الكود المختصر يضمن أن جوجل أدسنس سيعمل على كل من الصفحات التي بميزة AMP والصفحات العادية.

لإنشاء كود مختصر أضف الكود التالي إلى الوظائف لديك ، لكن أولا ً يجب أن تحرّر السطر 6 وتستبدل ca-pub-1234567891234567 بمعرف ID للناشر خاصتك ، وتحرّر أيضا ً السطر 8 لتستبدل 1234567890 بمعرف ID لوحدة الإعلان خاصتك .

/**
* Shortcode To Display Google Adsense ads on regular posts and and AMP (Accelerated Mobile Pages)
*/
function isa_get_amp_and_regular_adsense( $atts ) {
$publisher_id = 'ca-pub-1234567891234567';

$ad_slot = '1234567890';

if ( is_amp_endpoint() ) {
return '<amp-ad layout="responsive" width="300" height="250" type="adsense" data-ad-client="' . $publisher_id . '" data-ad-slot="' . $ad_slot . '"></amp-ad>';
} else {
return '<ins class="adsbygoogle" style="display:block" data-ad-client="' . $publisher_id . '" data-ad-slot="' . $ad_slot . '" data-ad-format="auto"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script>';
}
}
add_shortcode( 'isa_amp_and_regular_adsense', 'isa_get_amp_and_regular_adsense' );
/**
* Add the regular Adsense script to regular single posts.
*/
function isa_load_regular_adsense_script() {
wp_register_script( 'google-adsense', '//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js', '', null, true );
if ( is_single() ) {
wp_enqueue_script( 'google-adsense' );
}
}
add_action( 'wp_enqueue_scripts', 'isa_load_regular_adsense_script' );
/**
* Add async attribute to the regular Adsense script.
*/
function isa_adsense_async_script( $tag, $handle, $src ) {
if ( 'google-adsense' == $handle ) {
return '<script async src="' . $src . '"></script>';
}
return $tag;
}
add_filter( 'script_loader_tag', 'isa_adsense_async_script', 10, 3 );
الكود السابق يهتم بتحميل النص البرمجي لإعلان AMP الضروري إلى صفحات AMP ، وكذلك بتحميل النص البرمجي لأدسنس عادي ( adsbygoogle.js ) على كل منشور من المنشورات العادية .

استخدام الكود المختصر
الكود المختصر يبدو كما في الشكل التالي :

[isa_amp_and_regular_adsense]

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

ملاحظة : إذا ما أردت أن تستعرض كيف ستبدو إعلاناتك وكيف ستظهر ضمن صفحات AMP لديك ، يجب أن تتوجه إلى أحد عناوين AMP خاصتك على جهاز موبايل ، لأنّه في حال استعرضت صفحة AMP على متصفح مكتبي عادي فإنّه على الأرجح لن ترى الإعلانات ، وهو أمر طبيعي لأنّ صفحات AMP سوف تظهر فقط للمستخدمين على أجهزة الموبايل .

ملاحظة أخرى : في حال أردت زيادة المساحة البيضاء حول الإعلان عليك أن تستهدف الإعلان في صفحات AMP ضمن كود البرمجة الذي تقوم بكتابته وذلك من خلال الكود amp-ad بدلا من ins.adsbygoogle ، وعوضا ً من إدخاله ضمن single.php يمكنك أن تضيف الكود البرمجي التالي إلى الوظائف لديك ، وبالتالي سوف يتم إدخال CSS إلى صفحات AMP . ويمكنك أن تضيف العديد من أنماط CSS الخاصة بحسب ما ترغب وذلك ضمن السطر 5 :

add_action( ‘amp_post_template_css’, ‘my_amp_css_styles’ );

function my_amp_css_styles( $amp_template ) {

?>

amp-ad { margin: 30px auto; }



<?php

}

الكود السابق يضيف هوامش لأعلى وأسفل بمقدار 30 بيكسل ، ويمكنك أن تغير الرقم 30 إلى الإرتفاع الذي تريده للهوامش في الأعلى والأسفل .

وهكذا نكون وصلنا لنهاية مقالنا نرجو أن يكون حقق المفائدة المرجوة منه وحاز على إعجابكم .