Carnet Wiki

Plugin AMP pour SPIP (Accelerated Mobile Pages)

SPIP-Contrib :: Carnet Wiki :: Recherche :

Plugin AMP pour SPIP (Accelerated Mobile Pages)

Erational : Je voudrai savoir si quelqu’un travaille sur un plugin ou squelette pour que mon site devienne compatible au nouveau format AMP ( Accelerated Mobile Pages ) ?

izo : J’ai commencé un truc, mais ça ne sera jamais un plugin « propre » par manque de temps

Plus d’infos :
https://www.ampproject.org/
https://support.google.com/webmasters/answer/6340290?hl=fr

wordpress dispose d’un plugin
https://fr.wordpress.org/plugins/amp/

est que ce quelqu’un a lancé un dev pour faire la même chose ?

Nicolas Friedli

https://www.frdl.ch/amp-instant-articles —> page effacée

Il existe une relique ici :

Il existe aussi un cadavre de flux RSS pour Facebook Instant Articles :

Chris Gaillard

https://www.chrisgaillard.com/spip.php?page=articleamp&id_article=226

Mon squelette est ici (à modifier car plein de références perso en dur)
https://www.chrisgaillard.com/squelettes/articleamp.html
Pour qu’il n’y ai pas d’erreurs il ne faut pas d’images dans le champ #TEXTE ou #CHAPO

Ce qui peut se faire via :

function sans_doc ($texte) {
return propre(preg_replace('#'._RACCOURCI_MODELE.'#', ' ', $texte));
}

Recopie ici :

  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head>
  3. <meta name="generator" content=
  4. "HTML Tidy for Linux (vers 25 March 2009), see www.w3.org" />
  5. <meta name="ROBOTS" content="NOINDEX, NOFOLLOW" />
  6. <meta charset="utf-8" />
  7. <meta name="viewport" content=
  8. "width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  9.  
  10. <title>#TITRE- #NOM_SITE_SPIP</title>
  11. <link rel="canonical" href="#URL_SITE_SPIP/#URL_ARTICLE" />
  12. <style amp-boilerplate="" type="text/css">
  13. /*<![CDATA[*/
  14. 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}}
  15. /*]]>*/
  16. </style>
  17. <style amp-boilerplate="" type="text/css">
  18. /*<![CDATA[*/
  19. body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}
  20. /*]]>*/
  21. </style>
  22. <meta name="description" content="[(#INTRODUCTION|textebrut)]" />
  23. <meta property="og:title" content="#TITRE - #SOUSTITRE" />
  24. <meta property="og:description" content="[(#INTRODUCTION|textebrut)]" />
  25. <meta property="og:url" content="#URL_SITE_SPIP/#URL_ARTICLE" />
  26. <meta property="og:image" content="#URL_SITE_SPIP/[(#LOGO_ARTICLE|image_reduire{300,300}|extraire_attribut{src})]" />
  27. <meta property="og:site_name" content="Chris Gaillard Webdesign Grenoble" />
  28. <meta property="fb:app_id" content="185253479000" />
  29. <meta property="og:type" content="article" />
  30. <meta name="twitter:card" content="summary" />
  31. <meta name="twitter:site" content="@chrisgaillard" />
  32. <meta name="twitter:title" content="#TITRE - #SOUSTITRE" />
  33. <meta name="twitter:description" content="[(#INTRODUCTION|textebrut)]" />
  34. <meta name="twitter:image" content="#URL_SITE_SPIP/[(#LOGO_ARTICLE|image_reduire{180,180}|extraire_attribut{src})]" />
  35. <meta name="twitter:url" content="#URL_SITE_SPIP/#URL_ARTICLE" />
  36. <style amp-custom="" type="text/css">
  37. /*<![CDATA[*/
  38. /* Generic WP styling */ .alignright { float: right; } .alignleft { float: left; } .aligncenter { display: block; margin-left: auto; margin-right: auto; } .amp-wp-enforced-sizes { /** Our sizes fallback is 100vw, and we have a padding on the container; the max-width here prevents the element from overflowing. **/ max-width: 100%; margin: 0 auto; } .amp-wp-unknown-size img { /** Worst case scenario when we can't figure out dimensions for an image. **/ /** Force the image into a box of fixed dimensions and use object-fit to scale. **/ object-fit: contain; } /* Template Styles */ .amp-wp-content, .amp-wp-title-bar div { margin: 0 auto; max-width: 1080px; } html { background: #ff9100; } body { background: #fff; color: #353535; font-family: 'Arial', sans-serif; font-weight: 300; line-height: 1.75em; } p, ol, ul, figure { margin: 0 0 1em; padding: 0; } a, a:visited { color: #ff9100; } a:hover, a:active, a:focus { color: #353535; } /* Quotes */ blockquote { color: #353535; background: rgba(127,127,127,.125); border-left: 2px solid #ff9100; margin: 8px 0 24px 0; padding: 16px; } blockquote p:last-child { margin-bottom: 0; } /* UI Fonts */ /* Header */ .amp-wp-header { background-color: #ff9100; } .amp-wp-header div { color: #000; font-size: 1.2em; font-weight: 400; margin: 0 auto; max-width: calc(840px - 32px); padding: .875em 16px; position: relative; } .amp-wp-header a { color: #000; text-decoration: none; } /* Site Icon */ .amp-wp-header .amp-wp-site-icon { /** site icon is 32px **/ background-color: #fff; border: 1px solid #fff; border-radius: 50%; position: absolute; right: 18px; top: 10px; } /* Article */ .amp-wp-article { color: #353535; font-weight: 400; margin: 1.5em auto; max-width: 840px; overflow-wrap: break-word; word-wrap: break-word; } /* Article Header */ .amp-wp-article-header { margin: 1.5em 16px 1.5em; } .amp-wp-title { color: #353535; display: block; flex: 1 0 100%; font-weight: 900; margin: 0 0 ; width: 100%; } h2{margin:0 0 5px 0; font-weight:normal; font-size:1.2em;} /* Article Meta */ .amp-wp-meta { color: #696969; display: inline-block; flex: 2 1 50%; font-size: .875em; line-height: 1.5em; margin: 0; padding: 0; } .amp-wp-article-header .amp-wp-meta:last-of-type { text-align: right; } .amp-wp-article-header .amp-wp-meta:first-of-type { text-align: left; } .amp-wp-byline amp-img, .amp-wp-byline .amp-wp-author { display: inline-block; vertical-align: middle; } .amp-wp-byline amp-img { border: 1px solid #ff9100; border-radius: 50%; position: relative; margin-right: 6px; } .amp-wp-posted-on { text-align: right; } /* Featured image */ .amp-wp-article-featured-image { margin: 0 0 1em; } .amp-wp-article-featured-image amp-img { margin: 0 auto; } .amp-wp-article-featured-image.wp-caption .wp-caption-text { margin: 0 18px; } /* Article Content */ .amp-wp-article-content { margin: 0 16px; } .amp-wp-article-content ul, .amp-wp-article-content ol { margin-left: 1em; } .amp-wp-article-content amp-img { margin: 0 auto; } .amp-wp-article-content amp-img.alignright { margin: 0 0 1em 16px; } .amp-wp-article-content amp-img.alignleft { margin: 0 16px 1em 0; } /* Captions */ .wp-caption { padding: 0; } .wp-caption.alignleft { margin-right: 16px; } .wp-caption.alignright { margin-left: 16px; } .wp-caption .wp-caption-text { border-bottom: 1px solid #c2c2c2; color: #696969; font-size: .875em; line-height: 1.5em; margin: 0; padding: .66em 10px .75em; } /* AMP Media */ amp-carousel { background: #c2c2c2; margin: 0 -16px 1.5em; } amp-iframe, amp-youtube, amp-instagram, amp-vine { background: #c2c2c2; margin: 0 -16px 1.5em; } .amp-wp-article-content amp-carousel amp-img { border: none; } amp-carousel > amp-img > img { object-fit: contain; } /* Article Footer Meta */ .amp-wp-article-footer .amp-wp-meta { display: block; } .amp-wp-tax-category, .amp-wp-tax-tag { color: #696969; font-size: .875em; line-height: 1.5em; margin: 1.5em 16px; } .amp-wp-comments-link { color: #696969; font-size: .875em; line-height: 1.5em; text-align: center; margin: 2.25em 0 1.5em; } .amp-wp-comments-link a { border-style: solid; border-color: #c2c2c2; border-width: 1px 1px 2px; border-radius: 4px; background-color: transparent; color: #ff9100; cursor: pointer; display: block; font-size: 14px; font-weight: 600; line-height: 18px; margin: 0 auto; max-width: 200px; padding: 11px 16px; text-decoration: none; width: 50%; -webkit-transition: background-color 0.2s ease; transition: background-color 0.2s ease; } /* AMP Footer */ .amp-wp-footer { border-top: 1px solid #c2c2c2; margin: calc(1.5em - 1px) 0 0; } .amp-wp-footer div { margin: 0 auto; max-width: calc(840px - 32px); padding: 1.25em 16px 1.25em; position: relative; } .amp-wp-footer h2 { font-size: 1em; line-height: 1.375em; margin: 0 0 .5em; } .amp-wp-footer p { color: #696969; font-size: .8em; line-height: 1.5em; margin: 0 85px 0 0; } .amp-wp-footer a { text-decoration: none; } .back-to-top { bottom: 1.275em; font-size: .8em; font-weight: 600; line-height: 2em; position: absolute; right: 16px; } .redige{display:inline; }
  39. /*]]>*/
  40. </style>
  41. </head>
  42.  
  43. <body>
  44. [(#REM) ] <script src="https://cdn.ampproject.org/v0.js" async="" type=
  45. "text/javascript">
  46. </script><script type="application/ld+json">
  47. <![CDATA[
  48. { "@context": "http://schema.org", "@type": "WebSite", "name": "Chris Gaillard", "url": "#URL_SITE_SPIP/#URL_ARTICLE", "sameAs": [ "https://twitter.com/chrisgaillard", "https://plus.google.com/+chrisgaillard/", "https://www.facebook.com/webdesign.grenoble/", "https://www.instagram.com/chris_gaillard_com/", "https://www.linkedin.com/in/webdesigngrenoble" ] }
  49. ]]>
  50. </script>
  51.  
  52. <div>
  53. <a href="#URL_SITE_SPIP">Chris Gaillard Webdesigner Grenoble</a>
  54. </div>
  55.  
  56. <h1 class="amp-wp-title">#TITRE</h1>
  57.  
  58. <h2>#SOUSTITRE</h2>
  59.  
  60. <p><small class="redige">R&#233;dig&#233; par <a href="#URL_ARTICLE{110}" class=
  61. "animsition-link">chris</a> le [(#DATE|affdate)]</small></p>
  62.  
  63. <div class="amp-wp-article-content">
  64. [ <strong>(#CHAPO)</strong> ] #TEXTE [
  65.  
  66. <div class="bouton">
  67. <a href="#URL_SITE" target="_blank" itemprop="url"><strong>Visiter le site</strong>
  68. &gt; (#URL_SITE|replace{http://, })</a>
  69. </div>]
  70.  
  71. <p><a href="#URL_SITE" target="_blank" itemprop="url"></a></p>
  72. </div>
  73.  
  74. <div>
  75. <h2>Chris Gaillard</h2><a href="#top" class="back-to-top">Retour en haut</a>
  76. </div>
  77. </body>
  78. </html>
  79. </BOUCLE_lagrossebcl>

Télécharger

Spécification AMP

https://www.ampproject.org/docs/reference/spec

Validateur de page AMP

https://search.google.com/search-console/amp

Ressources et template

https://ampbyexample.com