Plugin AMP pour SPIP (Accelerated Mobile Pages)

Version 12 — Mai 2017 — JLuc

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 :

https://gist.github.com/nfriedli/6c55bc2ed088037c45299cd6bfbb3a5e
il faut ajouter un appel à la page dans le head du squelette article.html, qui appelle le squelette en question (p.ex. http://mon.site/spip.php?page=amp&id_article=1)

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

https://gist.github.com/nfriedli/ee2f01164262614da6dd1b360843b69b

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 :

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta name="generator" content=
  "HTML Tidy for Linux (vers 25 March 2009), see www.w3.org" />
  <meta name="ROBOTS" content="NOINDEX, NOFOLLOW" />
  <meta charset="utf-8" />
  <meta name="viewport" content=
  "width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />


<BOUCLE_lagrossebcl(ARTICLES){id_article}>&lt;!doctype html><html amp lang="fr-FR"><head>[(#REM) <META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">]  <title>#TITRE &lt;meta  charset="utf-8">&lt;meta  name="viewport "  content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">&lt;title >  #TITRE - #NOM_SITE_SPIP&lt;/title >
   &lt;link  #NOM_SITE_SPIP</title>&lt;link  rel="canonical" href="#URL_SITE_SPIP/#URL_ARTICLE" />
   &lt;style  amp-boilerplate =""  type="text/css ">
 /*&lt;! />&lt;script  src="https://cdn . ampproject.org/v0.&#91;CDATA &#91;*/
   js "  async></script>&lt;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}} 
  /*]] amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript>&lt;style  amp-boilerplate >  body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>&lt;meta  name="description "  content="&#91;(#INTRODUCTION|textebrut )] >*/
   &lt;/style >
   &lt;style  amp-boilerplate =""  type="text/css ">
 /*&lt;! com/chrisgaillard ",  "https://plus . [CDATA[*/
  body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}
  /*]]>*/
  </style>
  &lt;meta name="description" content="[(#INTRODUCTION|textebrut)]" />
   &lt;meta  />&lt;meta  property="og:title" content="#TITRE - #SOUSTITRE" />
   &lt;meta   />&lt; meta  property="og:description" content="[(#INTRODUCTION|textebrut)]" />
   &lt;meta  />&lt;meta  property="og:url" content="#URL_SITE_SPIP/#URL_ARTICLE" />
   &lt;meta  />&lt;meta  property="og:image" content="#URL_SITE_SPIP/[(#LOGO_ARTICLE|image_reduire{300,300}|extraire_attribut{src})]" />
   &lt;meta  />&lt;meta  property="og:site_name" content="Chris Gaillard Webdesign Grenoble" />
   &lt;meta  />&lt;meta  property="fb:app_id" content="185253479000 "  />
   &lt;meta  content="185253479000"/>&lt;meta  property="og:type" content="article" />
   &lt;meta  />&lt;meta  name="twitter:card" content="summary" />
   &lt;meta  />&lt;meta  name="twitter:site" content="@chrisgaillard" />
   &lt;meta  />&lt;meta  name="twitter:title" content="#TITRE - #SOUSTITRE" />
   &lt;meta   />&lt; meta  name="twitter:description" content="[(#INTRODUCTION|textebrut)]" />
   &lt;meta  />&lt;meta  name="twitter:image" content="#URL_SITE_SPIP/[(#LOGO_ARTICLE|image_reduire{180,180}|extraire_attribut{src})]" />
   &lt;meta  />&lt;meta  name="twitter:url" content="#URL_SITE_SPIP/#URL_ARTICLE" />
   &lt;style  amp-custom =""  type="text/css />&lt;script  type="application/ld+json ">
/*&lt;! {  "@context ":  "http://schema . org", "@type": "WebSite", "name": "Chris Gaillard", "url": "#URL_SITE_SPIP/#URL_ARTICLE", "sameAs": &#91; "https://twitter.com/+chrisgaillard/", "https://www.facebook.com/webdesign.grenoble/", "https://www.instagram.com/chris_gaillard_com/", "https://www.linkedin.com/in/webdesigngrenoble" ] &#91;CDATA &#91;*/
   }  &lt;/ script>&lt;style  amp-custom >   /* 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: ; } 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 ; padding: 16px; } blockquote p:last-child { margin-bottom: ; } /* 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  ; width: 100%; } h2{margin:0 0 5px ; 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: ; padding: ; } .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 ; } /* Captions */ .wp-caption { padding: ; } .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: ; padding: .66em 10px .75em; } /* AMP Media */ amp-carousel { background: #c2c2c2; margin:  -16px 1.5em; } amp-iframe, amp-youtube, amp-instagram, amp-vine { background: #c2c2c2; margin:  -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 .2s ease; transition: background-color .2s ease; } /* AMP Footer */ .amp-wp-footer { border-top: 1px solid #c2c2c2; margin: calc(1.5em - 1px) 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  .5em; } .amp-wp-footer p { color: #696969; font-size: .8em; line-height: 1.5em; margin: 0 85px 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; } 
  /*]]>*/
   &lt;/style >
 &lt;/head > google . redige{display:inline; } </style></head><body class=""><header id="#top" class="amp-wp-header"><div><a href="#URL_SITE_SPIP">  Chris Gaillard Webdesigner Grenoble </a></div></header><article class="amp-wp-article"><header class="amp-wp-article-header"><h1 class="amp-wp-title"> #TITRE</h1><h2> #SOUSTITRE</h2><p><small class="redige"> Rédigé par <a href="#URL_ARTICLE{110}" class="animsition-link"> chris</a><time datetime="#DATE">  le [(#DATE|affdate)] </time></small></p></header><figure class="amp-wp-article-featured-image wp-caption">&lt;amp-img width="600" height="300" src="[(#LOGO_ARTICLE|image_passe_partout{600,300}|image_recadre{600,300,center}|extraire_attribut{src})]" class="attachment-large size-large wp-post-image amp-wp-enforced-sizes" alt="#TITRE" srcset="[(#LOGO_ARTICLE|image_passe_partout{600,300}|image_recadre{600,300,center}|extraire_attribut{src})] 600w, [(#LOGO_ARTICLE|image_passe_partout{600,300}|image_recadre{300,150,center}|extraire_attribut{src})] 300w" sizes="(min-width: 600px) 600px, 100vw"></amp-img></figure><div class="amp-wp-article-content">  [<strong> (#CHAPO)</strong> ] #TEXTE [<div class="bouton"><a href="#URL_SITE" target="_blank" itemprop="url" ><strong> Visiter le site</strong>  >  (#URL_SITE|replace{http://, }) </a></div> ] <p><BOUCLE_portfolio(DOCUMENTS){id_article}{extension==jpg|png|gif}><a href="#URL_SITE" target="_blank" itemprop="url" >&lt;amp-img   class="alignnone size-full amp-wp-enforced-sizes"   src="[(#FICHIER|image_passe_partout{600}|extraire_attribut{src})]"   alt="#TITRE"   width="[(#FICHIER|image_passe_partout{600}|extraire_attribut{width})]"   height="[(#FICHIER|image_passe_partout{600}|extraire_attribut{height})]"   srcset=" [(#FICHIER|image_passe_partout{600}|extraire_attribut{src})] 600w,   [(#FICHIER|image_passe_partout{150}|extraire_attribut{src})] 150w,   [(#FICHIER|image_passe_partout{300}|extraire_attribut{src})] 300w "></amp-img></a></BOUCLE_portfolio></p></div></article><footer class="amp-wp-footer"><div><h2> Chris Gaillard</h2><a href="#top" class="back-to-top"> Retour en haut</a></div></footer></body></html></BOUCLE_lagrossebcl>