كيفية إعداد WordPress و AMP: Accelerated Mobile Pages: إعداد التحليلات ، AdSense ، دليل الوسائط الاجتماعية مرفق

نشرت: 2016-09-25
setup-amp-and-wordpress-all-in-one-دليل

كانت هناك ضجة كبيرة حول Google AMP في الأيام الأخيرة. أعلنت Google رسميًا عن دعم صفحات AMP كجزء من صفحة بحث الجوال. انها مثيرة للاهتمام حقا. لقد تجنبت حتى الآن تطبيق AMP على Crunchify لسبب ما ولم أشعر أبدًا بأي أهمية لها.

ولكن بعد النظر إلى تغريدة Barry ، قررت أن AMPlify Crunchify أيضًا.

هل تبحث عن نصائح حول AMP و Wordpress؟ هل ترغب في رفع مستوى AMP إلى موقع WordPress الخاص بك باستخدام صفحات الجوّال المتسارعة من Google؟ أو هل تريد تثبيت AMP في WordPress؟ سننتقل في هذا البرنامج التعليمي إلى خطوات حول كيفية AMPlify لموقع WordPress الخاص بك بكل الخطوات التفصيلية.

ما هي Accelerated Mobile Pages (AMP)؟

مشروع Accelerated Mobile Pages (AMP) هو مشروع مفتوح المصدر تم إنشاؤه مع مراعاة السرعة ، مما يؤدي إلى إنشاء محتوى محسّن للجوّال مرة واحدة وتحميله على الفور في كل مكان. لا يوجد تحميل جافا سكريبت على الإطلاق في الصفحة. يوجد حد أدنى جدًا من تحميل CSS مع قيود صارمة. إحدى الملاحظات التي لاحظتها أنه لا يمكنك حتى استخدامها !important في CSS.

هل لديك أي من الأسئلة أدناه؟

  • Google AMP: ما هو وهل هو مناسب لموقع الويب الخاص بك على WordPress
  • أفضل طريقة لإعداد WordPress لـ AMP
  • كيف تبدأ مع صفحات Google AMP و WordPress
  • تسريع صفحات المحمول وورد البرنامج المساعد
  • صفحات ووردبريس أمبير
  • استعلامات Yoast amp Glue و Wordpress

لنبدأ: تمكين AMP لمنشورات WordPress الخاصة بك

الخطوة 1

قم بتثبيت البرنامج المساعد AMP الرسمي.

install-official-amp-plugin-crunchify-tips
  • بمجرد التفعيل تكون جاهزًا. لن ترى أي قائمة خيار.
  • عليك أن تذهب إلى Settings -> قائمة Permalinks . انقر فوق Save Changes دون إجراء أي تغييرات.

يوفر المكون الإضافي AMP الرسمي وظائف أساسية وستكون جميع مشاركاتك تلقائيًا AMPlify. يمكنك زيارة إصدار AMPlified لمنشوراتك عن طريق إضافة /amp/ في نهاية أي عنوان URL للنشر.

ألق نظرة على مثال:

  • عنوان URL المنشور Original : https://crunchify.com/how-to-sort-hashmap-by-key-and-value-in-java8-complete-tutorial/
  • عنوان URL AMPlify : https://crunchify.com/how-to-sort-hashmap-by-key-and-value-in-java8-complete-tutorial/amp/

الخطوة 2

قم بتثبيت البرنامج الإضافي Glue for Yoast SEO & AMP. بدءًا من الإصدار 0.4 AMP WordPress version ، أعتقد أنك لست بحاجة إلى أي مكون إضافي متعلق بـ AMP.

حاليا:

  • انتقل إلى Appearance -> AMP .
  • قم بتوفير لون Header Background وانقر فوق Save .
amp-wordpress-plugin-customization option

الخطوه 3

المشكلة الوحيدة التي أراها مع هذا البرنامج المساعد هي أنه يضيف رابطًا Powered by WordPress في أسفل الصفحة. لتغييره قد ترغب في تغيير صفحة footer.php مع الكود أدناه.

  • انتقل إلى Plugins -> Editor
  • حدد Plugin AMP
  • حدد ملف amp / قوالب / footer.php
1
2
3
4
5
6
7
8
9
< footer class = "amp-wp-footer" >
< div >
< h2 > <?php echo esc_html ( $this - > get ( 'blog_name' ) ) ; ?> < / h2 >
< p >
Copyright < i class = "fa fa-copyright" aria - hidden = "true" > < / i > 2012 - 16 < a href = "https://crunchify.com" > Crunchify , LLC . < / a > &nbsp; • &nbsp; < a href = "https://crunchify.com/sitemap/" target = "_blank" > Archives < / a > &nbsp; • &nbsp; < a href = "https://crunchify.com/advertise/" target = "_blank" > Advertise < / a >
< / p >
< a href = "#top" class = "back-to-top" > <?php _e ( 'Back to top' , 'amp' ) ; ?> < / a >
< / div >
< / footer >

تعديل كود خط حقوق التأليف والنشر حسب حاجتك

الأزرار المشاركة الاجتماعية

الخطوة 4

أضف رموز Analytics Social Media إلى صفحات AMP الخاصة بك.

  1. ستضيف وظيفة crunchify_amp_add_analytics_social_ads_js التحليلات المطلوبة وشفرة javascript لوسائل التواصل الاجتماعي إلى صفحة الأمبير الخاصة بك.
  2. ستضيف وظيفة crunchify_amp_add_analytics_social_code رمز التحليلات الفعلي وأيقونات الوسائط الاجتماعية.
  3. تأكد من تحديث Google Analytics Universal tracking ID Facebook App ID أدناه.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
// ~~~~~~~~~~~~~~~~~~~~~ AMP Changes Start ~~~~~~~~~~~~~~~~~~~
add_action ( 'amp_post_template_head' , 'crunchify_amp_add_analytics_social_ads_js' ) ;
function crunchify_amp_add_analytics_social_ads_js ( $ amp_template ) {
$ post_id = $ amp_template - > get ( 'post_id' ) ;
? >
<script async custom-element = "amp-analytics" src = "https://cdn.ampproject.org/v0/amp-analytics-0.1.js" > </script>
<script async custom-element = "amp-social-share" src = "https://cdn.ampproject.org/v0/amp-social-share-0.1.js" > </script>
<?php
}
add_action ( 'amp_post_template_footer' , 'crunchify_amp_add_analytics_social_code' ) ;
function crunchify_amp_add_analytics_social_code ( $amp_template ) {
     $post_id = $amp_template - > get ( 'post_id' ) ;
     ?>
< amp - analytics type = "googleanalytics" id = "analytics1" >
<script type = "application/json" >
{
   "vars" : {
"account" : "UA-43876549-1"      // Modify universal tracking ID
   } ,
   "triggers" : {
"trackPageview" : {
   "on" : "visible" ,
   "request" : "pageview"
}
   }
}
</script>
< / amp - analytics >
 
   // Social Media Code
   < div align = "center" >
     < amp - social - share type = "twitter"
         width = "30"
         height = "30" > < / amp - social - share >
     < amp - social - share type = "gplus"
         width = "30"
         height = "30" > < / amp - social - share >
     < amp - social - share type = "facebook"
         width = "30"
         height = "30"
         data - param - app_id = "509582389234904" > < / amp - social - share >    // Modify your App ID
   < / div >
     < ? php
}
// ~~~~~~~~~~~~~~~~~~~~~ AMP Changes End ~~~~~~~~~~~~~~~~~~~

الخطوة 5

أضف كود Google Adsense إلى صفحة AMP الخاصة بك. في حالتي ، أردت إضافة شفرة Adsense 300x250 أسفل الصورة المميزة. لا يوجد أي خطاف رسمي متاح للاستخدام ، لذا قمت بتعديل ملف single.php الموجود في <دليل البرنامج المساعد AMP> / amp/templates/single.php .

تعديل-amp-plugins-single-php-file
  • انتقل إلى قائمة Plugins
  • انقر فوق Editor
  • اختر البرنامج المساعد AMP
  • انتقل إلى ملف single.php
  • أضف كود Adsense كما هو موضح في مقتطف الشفرة أدناه. ما عليك سوى look for line featured-image وإضافة رمز Adsense بعد ذلك.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php $this - > load_parts ( array ( 'featured-image' ) ) ; ?>
 
// Adsense code START
< br > < div align = "center" >
< amp - ad width = 300 height = 250
type = "adsense"
data - ad - client = "ca-pub-xxxxxxxxxxxxxxxx"
data - ad - slot = "0110036438" >
< div placeholder > < / div >
< div fallback > < / div >
< / amp - ad >
< / div >
// Adsense code END
 
< div class = "amp-wp-article-content" >

وأنت على أتم استعداد. فقط قم بتنظيف ذاكرة التخزين المؤقت لموقعك وتحقق من صفحة AMP الحية. سترى جميع أيقونات Google Analytics و Adsense والوسائط الاجتماعية تعمل بشكل صحيح

ماذا الآن؟

دعنا نتحقق من صفحة AMP الخاصة بك ونتحقق منها بحثًا عن أي مشكلة. اذهب إلى https://validator.ampproject.org/ وتحقق من النتيجة.

ampproject-validation-page-crunchify-tips

كيف ستزحف Google إلى صفحات نشر AMP؟

الآن لديك AMP and non-AMP versions لصفحاتك ، سيضيف AMP Plugin العلامة الوصفية للعلاقة أدناه إلى كلتا الصفحتين تلقائيًا.

تحقق من هذا على صفحة ليست بتنسيق AMP

يجب أن ترى مرجعًا لنسخة AMP من الصفحة للسماح لـ Google والأنظمة الأساسية الأخرى بمعرفة ذلك:

<link rel="amphtml" href="https://crunchify.com/how-to-sort-hashmap-by-key-and-value-in-java8-complete-tutorial/amp/">

rel-amphtml-html-tage-for-non-amp-page-crunchify-tips

تحقق من هذا على صفحة AMP

يجب أن ترى نصًا يشير إلى نسخته الأساسية بخلاف AMP:

<link rel="canonical" href="https://crunchify.com/how-to-sort-hashmap-by-key-and-value-in-java8-complete-tutorial/">

rel-canonical-html-meta-tag-in-amp-page-crunchify-tips

الآن دعنا ننتظر يومين أو على الأقل أسبوعًا وسترى صفحات AMPlify في Google Search Console. بالنسبة لي ، إنها 4 أيام فقط وأرى ما يقرب من 500 صفحة مفهرسة بالفعل لنتائج AMP

wordpress-and-amp-setup-guide-by-crunchify-stats

كيفية التحقق من النتيجة الحية؟

ما عليك سوى البحث عن منشور في Google على متصفح الهاتف المحمول وسترى AMP result في صفحة نتائج البحث.

crunchifys-amp-result-in-google-mobile-search-page

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