آموزش طراحی قالب امپ AMP - وردپرس ساز طراحی قالب وردپرس

AMP مخفف Accelerated Mobile Pages به معنای افزایش سرعت لود سایت در موبایل می باشد. اگر شما قصد دارید برای سایت خود یک قالب امپ طراحی کنید باید چند نکته را در نظر بگیرد:

نوع مرورگر بازدیدکننده های سایت شما
نوع گجت بازدید کننده شما (موبال یا رایانه)

تا این لحظه که در حال نگارش این مطلب هستم مرورگر های Chrome Firefox Edge Safari Opera از AMP پشتیبانی می کنند پس اگر بازدیدکننده های سایت شما اکثرا از مروگر دیگری استفاده می کنند استفاده از AMP توصیه نمی شود چرا که سایت شما به درستی برای بازدیدکننده لود نخواهد شد.

نکته دوم گجتی می باشد که بازدید کننده وارد سایت شما می شود، اگر اکثرا با رایانه از سایت شما بازدید میکنند پس نیازی به استفاده از AMP ندارید چرا که AMP بیشتر برای بازدید کننده موبایل می باشد.

حال اگر هر دو مورد بالا را سایت شما دارد و قصد طراحی یک پوسته AMP دارید با ما همراه باشید.

ساختار یک صفحه AMP :

ساختار HTML کلی یک صفحه AMP به صورت زیر می باشد:

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <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>
استیال شما
</style>
</noscript>
  </head>
  <body>
    <h1>Welcome to the mobile web</h1>
  </body>
</html>