تعد هذه المقالة فريدة، إذ أن المحتوى العربي نادرا ما تجد فيه مقالات تتحدث حول كيفية دمج قوالب بلوجر واستخدام أساسيات (AMP) والتي هي اختصار لجملة Accelerated Mobile Pages والتي تعني تسريع صفحات الجوال، وذلك دون المساس بأكبر قدر ممكن من وظائف بلوجر الحالية.
ملاحظة:بعض وظائف الأدوات التي تدعمها بلوجر على المدونات لن تكون متاحة ويتم تعطيلها للسماح بتنفيذ AMP HTML. بشكل عام، يعد تخصيص السمة ونشر القالات من بين أمور أخرى مثل أي صفحة ويب HTML أخرى.
إضافة مكونات AMP على قوالب بلوجر
أولا، سنقوم بتعطيل ملفات CSS الخارجية وكذا ملفات جافا سكريبت الخارجية والتي يتم جلبها تلقائيا بواسطة خوادم بلوجرإلى بعض القوالب. سيؤدي هذا الإجراء أيضا إلى تعطيل أي نصوص برمجية خارجية في القالب إضافة إلى مكونات بلوجر المقدمة بواسطة <b: include data='blog' name='all-head-content'/>
إضافة مكونات AMP
سنختار قالب بلوجر البسيط (Simple Bold) للقيام بهذه التعديلات، لهذا لن أحتاج لأخذ نسخة احتياطية للقالب.
أولا قم بتثبيت القالب على مدونة تجريبية، ثم توجه إلى أداة التحقق من صفحات AMP للقيام بتحقق أولي قبل إجراء أي تعديلات. أدخل رابط مدونتك التجريبية ثم أنقر على validate، وستلاحظ أن هناك كمية كبيرة من عناصر HTML لا يسمح بها عند استخدام تقنية AMP.
ثانيا توجه إلى تعديل HTML للقالب وقم بمسح الجزء العلوي من القالب كاملا وبالتحديد من البداية إلى غاية إنتهاء قسم </head> ثم انسخ الكود هذا الكود ولصقه مكان الجزء الذي حذفناه من القالب وذلك لاستخدام مكونات AMP المطلوبة.
...<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE html><HTML amp='amp' expr:dir='data:blog.languageDirection' expr:lang='data:blog.locale'><head><meta charset='utf-8'/><meta content='width=device-width,minimum-scale=1,initial-scale=1' name='viewport'/><link expr:href='data:blog.url' rel='canonical'/><b:if cond='data:blog.pageType == "index"'><title><data:blog.pageTitle/></title><b:else/><b:if cond='data:blog.pageType == "error_page"'><title>404: Page Not Found | <data:blog.title/></title><b:else/><title><data:blog.pageName/></title></b:if></b:if><b:if cond='data:blog.metaDescription'><meta expr:content='data:blog.metaDescription' name='description'/></b:if><!-- <b:skin><![CDATA[]]></b:skin><b:if cond='data:blog.pageType != "static_page" and data:blog.pageType != "item" and data:blog.pageType != "error_page"'><style amp-custom='amp-custom'>أدخل أكواد CSS الخاصة بالصفحة الرئسية</style></b:if><b:if cond='data:blog.pageType == "item" and data:blog.pageType != "error_page"'><style amp-custom='amp-custom'>أدخل أكواد CSS الخاصة بالمشاركات</style></b:if><b:if cond='data:blog.pageType == "static_page" and data:blog.pageType != "error_page"'><style amp-custom='amp-custom'>أدخل أكواد CSS الخاصة بالصفحات</style></b:if><b:if cond='data:blog.pageType == "error_page"'><style amp-custom='amp-custom'>أدخل أكواد CSS الخاصة بصفحة الخطأ 404</style></b:if><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 async='async' custom-element='amp-sidebar' src='https://cdn.ampproject.org/v0/amp-sidebar-0.1.js'/><script async='async' custom-element='amp-form' src='https://cdn.ampproject.org/v0/amp-form-0.1.js'/><script async='async' custom-element='amp-social-share' src='https://cdn.ampproject.org/v0/amp-social-share-0.1.js'/><script async='async' custom-element='amp-iframe' src='https://cdn.ampproject.org/v0/amp-iframe-0.1.js'/><script async='async' custom-element='amp-youtube' src='https://cdn.ampproject.org/v0/amp-youtube-0.1.js'/><script async='async' custom-element='amp-image-lightbox' src='https://cdn.ampproject.org/v0/amp-image-lightbox-0.1.js'/><script async='async' custom-element='amp-list' src='https://cdn.ampproject.org/v0/amp-list-0.1.js'/><!-- AMP Analytics --><script async='async' custom-element='amp-analytics' src='https://cdn.ampproject.org/v0/amp-analytics-0.1.js'/><script async='async' custom-element='amp-carousel' src='https://cdn.ampproject.org/v0/amp-carousel-0.1.js'/><script async='async' custom-element='amp-ad' src='https://cdn.ampproject.org/v0/amp-ad-0.1.js'/></head><!--<head/>-->
في قالب AMP السريع سيتم وضع أنماط CSS لصفحات المدونة الجديدة ضمن <style amp-custom='amp-custom'> </style>، كما هو مطلوب في AMP HTML، وذلك من خلال إضافة amp-js.
توجه إلى أسفل القالب حتى تجد علامة </body> أو يمكنك نسخها والبحث عنها عن طريق الضغط على Ctrl+F في لوحة المفاتيح. ثم بعد ذلك قم باستبدالها بالكود الموجود أدناه.
...<!--</body>--></body>
الخطوة الثالثة: التنظيف
عند تثبيتك لقالب بلوجر إفتراضي، فإن معظم القوالب تتضمن عناصر واجهة مستخدم افتراضية أو macro:include لإدراج عناصر واجهة مستخدم بلوجر في التخطيط الخاص بك. ويمكنك إعادة إدراج هذه الأدوات الإفتراضية من الواجهة الرئيسية لمدونتك لاحقا عند الحاجة.
قم بإزالة macro:include من محتويات أقسام بلوجر
إزالة macro:include
قم بنسخ macro:include والبحث عنها في القالب عن طريق الضغط على Ctrl+F في لوحة المفاتيح لإرشادك إلى كل macro:include المتواجدة في القالب.
أولا حدد من <macro:include id=...> إلى </macro:include> ثم قم بحذفها. وقم بحذف كل أكواد macro:include المتواجدة في القالب، ثم قم بحفظ القالب.
إزالة عناصر تخطيط بلوجر
تأتي قوالب بلوجر الافتراضية مع العديد من العناصر الإضافية والتي تسمح بعرض القوالب باستخدام مصمم نماذج بلوجر. وبما أننا سنقوم بتعطيل هذه الميزة بسبب إعدادنا للقالب الجديد، يمكننا تنظيف العناصر غير المستخدمة. وذلك عن طريق إزالة جميع أكواد <div class='faux...'> الموجود على القالب.
إزالة سمات الإسم
باستخدام البحث السريع Ctrl+F، قم بمسح كل سمات الإسم name='...' المتواجدة ضمن عنصر <div> والتي لا يسمح بها على صفحات AMP (بالنسبة لقالب بلوجر البسيط توجد سمة إسم واحدة ضمن عنصر div، وهي تحمل اسم Navbar).
قم بحفظ القالب، ثم توجه إلى أداة التحقق من صفحات AMP، وقم باختبار جديد، ستلاحظ أنه قد تم إزالة كل عناصر HTML الغير مسموح بها على صفحات AMP، وبخصوص javascript المتبقي يمكنك استبداله بـ JavaScript مخصص، وهذا الموضوع يحتاج إلى عدة دروس لوحده لتفهم كيفية إضافة سكريبتات بالصيغة المسموح بها على صفحات AMP.
تبديل السكريبتات
بالنسبة لتقنية AMP فإنها لا تدعم السكريبتات المكتوبة من قبل المؤلف و السكريبتات من المصادر الخارجية كالتي تكون بصيغة javascript/text. لكن يمكنك إضافة JavaScript مخصص إلى صفحات AMP، وذلك باستخدام مكون amp-script لتمكين تفاعلات المستخدم ومشاركة التعليمات البرمجية عبر كل الصفحات التي تدعم AMP (يمكنك معرفة المزيد عبر زيارتك لهذا الموقع).
أنا محمد، مالك مدونة صور نت للمعلوميات والرقمنة، أمتلك خبرة واسعة في تحسين محركات البحث (السيو)، ومهتم بشكل خاص بمجالات التسويق الرقمي والتكنولوجيا المالية الرقمية.