سبق أن تحدثنا عن مشروع AMP ووضحنا أنه مشروع قامت برعايته جوجل بعد أن أظهرت الإحصائيات أن معظم عمليات البحث تتم عبر أجهزة الهواتف الذكية مما يستلزم أن تكون عملية تحميل المواقع التي تظهر بالنتائج أسرع بكثير من ذي قبل , فقامت بتطوير مشروع AMP بدعم من الكثير من المواقع العالمية الضخمة مثل تويتر ولينكدإن وبينتريست وغيرها.
للمزيد من المعلومات تفضل بقراءة المقال كاملاً: ما هو AMP
وقد وعدناكم بأن نضع بين أيديكم طريقة إضافة AMP إلى مدونات بلوجر , واليوم نوفي بوعدنا ونقدم إليكم في أول شرح عربي على الإطلاق وفقط على روميسيا للخدمات الإلكترونية طريقة تركيب AMP على بلوجر.
 |
| طريقة تركيب AMP على بلوجر |
حتى لحظة كتابتنا لهذا الموضوع لم تسمح جوجل بوضع AMP على منصات مدوناتها بلوجر , ولكن يمكنك أنت أن تقوم ببعض التعديلات بجعل قالب مدونتك مركب به ميزة AMP يدوياً , فإتبع هذه الخطوات بدقة من الألف للياء:
1 - قم بحفظ قالب مدونتك القديم أولاً , وهي نقطة هامة جداً تفادياً لأية أخطاء وحتى يمكن أن يكون إسترجاع قالبك سهلاً.
2 - قم بالدخول على القالب Template ومنها تعديل Edit HTML.
3 - قم بالبحث داخل مربع أكواد القالب عن الكود التالي:
<html>
في حالة لم تجده قم بالبحث عن :
<html
فقد يكون بهذا الكود بعض الأكواد الأخرى قبل رمز إغلاقه مثلاً:
<html b:version='2' class='v2' dir='rtl' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
في جميع الحالات نحن بحاجة إلى وضع الكود التالي بداخل وسم الهتمل مباشرة , بمعنى أنه في حالة إنك وجدت الكود <html> مباشرة فقم بوضع هذا الكود بداخله:
amp='amp'
ليصبح الشكل النهائي:
<html amp='amp'>
وفي حالة وجدت أكواد إضافية مثل مثالنا بالأعلى يكون الشكل النهائي للكود:
<html amp='amp' b:version='2' class='v2' dir='rtl' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
فكل ما يهمنا هو وضع هذا الكود amp='amp' بداخل الوسم <html>
ملحوظة هامة: بعد تنفيذ كل خطوة بدءاً من الخطوة بالأعلى قم بعمل Save Template لتتأكد أن هذه الخطوة تعمل بدون أية مشاكل على قالبك , أما إذا وجدت مشكلة فقم بالتوقف لتعلم ما هي الخطوة التي بها مشكلة وقم بإلغائها وتقييدها جانباً والعودة إلينا هنا بتعليق لنقوم بحلها معك فوراً أو بالبحث عنها على جوجل وستجد الكثير من المواقع الأجنبية التي تواجه نفس المشكلة. ولكننا سنكون بجانبك لو حدثت أي مشكلة فلا تقلق وأكمل وتعدى هذه المشكلة وقم بتسجيلها لنقوم بحلها فيما بعد.
4 - قم بالبحث عن هذه الأكواد في قالبك فإن وجدتها فلا تضيفها مرة أخرى أما لو لم تجدها فقم بإضافتها أسفل الوسم <head>
<meta charset='utf-8'> <meta name='viewport' content='width=device-width,minimum-scale=1,initial-scale=1'>
بالنسبة للكود بالأعلى نحن أنفسنا لاحظنا مشكلة عندما قمنا بوضعه في قالب مدونة بلوجر وهي أن القالب يؤكد علينا أنه هناك كود meta مفقود ويجب علينا وضعه , قمنا بحل هذه المشكلة كالتالي:
قمنا بالبحث مرة أخرى عن كل من الكودين السابقين على حدى ووجدنا الكود التالي:
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
وهو الكود الخاص بجعل مدوناتنا متجاوبة Responsove في حجمها مع حجم الشاشة التي يتم عرضها عليها , وبما إنه متاح بقالب مدونتنا بالفعل فقد إكتفينا بوضع الكود الخاص بالترميز <meta charset='utf-8'> أسفل وسم الهيد <head>
ومع محاولة الحفظ تمت عملية الحفظ بناجح , ولكن لا تنسى أن تقومب البحث عن هذا الكود أيضاً مرة أخرى.
5 - بعد أن وضعت أو تأكدت من أن الكود الخاص بجعل قالب مدونة بلوجر الخاص بك متجاوبة في مدونتك ولتتذكره فقد كان:
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
قم بإضافة هذا الكود أسفله مباشرة
<link expr:href='data:blog.url' rel='canonical'/>
, ولكن تأكد أولاً إنه غير متاح بأي مكان أخر في قالبك , وإن كان متاحاً فقم بحذفه ووضعه أسفل الكود بالأعلى.
6 - قم بالبحث عن الكود:
</head>
وقم بإستبداله بالكود التالي:
<style amp-boilerplate='amp-boilerplate'>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate='amp-boilerplate'>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript> <script async='async' src='https://cdn.ampproject.org/v0.js'></script> </head>
7 - والأن مع خطوة التعامل مع الصور الخاصة بالقالب لجعلها متوافقة مع AMP , قم بالبحث عن وسوم الصور img وإستبدلها ب amp-img كمثال قم بإستبدال التالي:
<img src="AmpImage.jpg" alt="img" height="500" width="500"></img>
بهذا الكود:
<amp-img src="AmpImage.jpg" alt="amp-img" height="500" width="500"></amp-img>
مبروك .. الأن أنت قمت بتركيب AMP على مدونة بلوجر الخاصة بك , يمكنك فحصها الأن بعدة طرق للتأكد من أن تركيبك صحيح وسليم مائة بالمائة.
طرق الكشف على توافق القوالب مع AMP:
1 - وهي أصعب طريقة وخاصة بالمبرمجين من خلال فتحك لصفحة مدونتك في متصفح كروم وإضافة هذا الكود:
#development=1
كمثال: سيصبح رابط موضوعنا هذا كما يلي:
http://www.romisya.com/2016/11/create-amp-blogger.html#development=1
بدلاً من:
http://www.romisya.com/2016/11/create-amp-blogger.html
بعدها قم بالضغط بزر الفأرة الأيمن وقم بفتح Chrome DevTools console وإفحص أخطاء الصلاحية Validation Errors.
2 - الطريقة الثانية أسهل كثيراً وهي من خلال موقع فحص الأخطاء الخاصة بمشروع AMP من الرابط الرسمي:
validator.ampproject.org
وبعد الدخول إليه قم بوضع رابط مدونتك في مربع URL وإضغط على Validate , لا تنصدم في حالة وجود أخطاء فذلك من الطبيعي على بلوجر وخاصة إننا جميعاً نضع إعلانات أدسنس وغيرها من الإضافات التي لا تعمل بشكل جيد مع AMP وتحتاج لبعض الحيل لتعمل بكفاءة , لذا ونظراً لكثرة هذه الأخطاء ونظراً لأنها أخطاء مشتركة حتى مع منصة Wordpress وبرغم أن إضافة AMP جاهزة لها فسنتحدث عن هذه وطريقة تصحيحها بالتفصيل في مقالاتنا القادمة , فتابعونا وساعدونا لنصل بكم إلى بداية الطريق الصحيح كمدونين محترفين على بلوجر.
مع تحيات روميسيا للخدمات الإلكترونية
0 التعليقات