اضافة AMP للووردبريس صفحات الجوال Accelerated Mobile Pages

LSG-alraih2017-03-19اخر تحديث : 2019-11-15

0 163 2 دقائق

AMP هيا إختصار لـ طريقة تسريع تصفح الصفحات في الموقع لأجهزة المحمول الذكية, وهيا خدمة متاحة ومفتوحة المصدر تستخدم HTML 5.

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

ويأتي هذا القرار من قبل قوقل الرائدة في مجالها, بعد دخول تصفح المواقع عبر الهواتف الذكية لأكثر من 80% من التصفحات اليومية.

كما تحدثت قوقل بأنه تم من يوم الإربعاء 24 فبراير 2016, البدء في عملية إظهار علامة البرق بجوار المواقع المتوافقة والمبنية بخدمة AMP.

وفعلاً تم البدء مع مواقع عملاقة في البدء في تطبيق HTML 5 على مواقعها كما هو الحال في Pinterest و BuzzFeed و LinkedIn و Guardian بالإضافة إلى New York Times .

إيضاً الووردبريس بدأت في الشروع بها أيضاً, وقد قامت بعمل صب دومين خاص بشرح الخاصية لـ AMP لتحسين أداء وفتح المواقع على الجوالات.

مثال على طريقة عمل AMP

هنا نعرض مثال مبسط لطريقة عمل الخدمة على الإحصائيات تابع التالي

<amp-analytics>

{
    “transport”: {“xhrpost”: false, “beacon”: true},
    “requests”: {
      “base”: “https://${trackingServer}/b/ss/${accounts}/1/AMP-0.1/s${random}”,
      “pageView”: “${base}?AQB=1&vid=CLIENT_ID(adobe_amp_id)&pageName=${pageName}&j=amp&AQE=1”,
      “buttonClick”: “${base}?AQB=1&vid=CLIENT_ID(adobe_amp_id)&pageName=${pageName}&j=amp&pe=lnk_o&v1=${eVar1}&AQE=1”
},
“vars”: {
      “trackingServer”: “metrics.example.com”,
      “accounts”: “reportSuiteID”,
      “pageName”: “Adobe Analytics Using amp-analytics tag”
},
    “triggers”: {
      “pageLoad”: {
        “on”: “visible”,
        “request”: “pageView”
      },
      “click”: {
        “on”: “click”,
        “selector”: “button”,
        “request”: “buttonClick”,
        “vars”: {
          “eVar1”: “button clicked”
        }
      }
    }
}

</amp-analytics>

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

كيف يمكنني أن أنشيء صفحة بإستخدام AMP

يمكنكم بكل سهولة إنشاء صفحة منفردة لـ مواقعكم بإستخدام شفرة وكود AMP بطريقة سهله وسلسلة كما هو التالي:.

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello, AMPs</title>
    <link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    </script>
    <style 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>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  </head>
  <body>
    <h1>Welcome to the mobile web</h1>
  </body>
</html>

بهذا نكون صنعنا صفحة بطريقة الخاصية المسرعة للهواتف النقالة, ولكن كيف يمكننا إضافتها على الصور المتواجدة في الموقع؟!.

إذا عليك متابعة التالي في الكود

<amp-img src="welcome.jpg" alt="Welcome" height="400" width="800"></amp-img>

هذه فقط بطريقة مبسطة للأكواد وكيفة إضافة الكود في التصميم الخاص بنا, ولتجربة المستخدم بطريقة اسرع, يمكنكم متابعة الموقع الخاص بالخدمة من التالي “ampproject.

إضافة AMP لمنصة الووردبريس

تم إطلاق قبل أشهر إضافة مجانية على منصة الووردبريس, ويمكنكم تحميلها من الرابط الموضح تحت وتنصيبها فقط.

الجميل بأنه تم تحديثها قبل يومين وذلك لحل مشاكل الرومز وغيرها, وبعد التحديث بدأت تعمل بشكلها الصحيح بدون أخطاء حالياً.

لا يجب عليك عمل شيء فالإضافة قادرة على إضافة الأكواد وتحسين موقعك وطريقة عمله بشكل سلسل بدون التدخل منك.

ومازال التطوير قائم على تحسين الإضافة للتوافق مع الخدمة والمشروع من قبل قوقل في صفحات الجوال المسرعة.

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

يمكنكم تحميل الإضافة من الرابط التالي ” AMPWORDPRESS“.

نتمنى أن نكون قد وفقنا في وضع شرح بسيط عن الخدمة الجديدة من قبل قوقل والمميزه لأصحاب المواقع لتحسين من تصفح مواقعهم على الهواتف النقالة, وأصحاب الإنترنت البطيء.

المصدر: LSG