Version 14 — Mai 2020 — 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
Spécification AMP
- https://www.ampproject.org/
- https://www.ampproject.org/docs/reference/spec
Validateur
https://validator.ampproject.org
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/
Ressources et template
- https://ampbyexample.com
- https://support.google.com/webmasters/answer/6340290?hl=fr
- plugin wordpress https://fr.wordpress.org/plugins/amp - Est est que ce quelqu’un a lancé un dev pour faire la même chose ?
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 :
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
et sauvegardé là : https://gist . Pour qu’il n’y ai pas d’erreurs il ne faut pas d’images dans le champ # TEXTE ou # CHAPO github.com/JLuc/46a95c5021ded1dd67454980b39a93c6
Pour qu’il n’y ai pas d’erreurs il ne faut pas d’images dans le champ # TEXTE ou # CHAPO ,
ce 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" />
<title>#TITRE- #NOM_SITE_SPIP</title>
<link rel="canonical" href="#URL_SITE_SPIP/#URL_ARTICLE" />
<style amp-boilerplate="" type="text/css">
/*<![CDATA[*/
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>
<style amp-boilerplate="" type="text/css">
/*<![CDATA[*/
body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}
/*]]>*/
</style>
<meta name="description" content="[(#INTRODUCTION|textebrut)]" />
<meta property="og:title" content="#TITRE - #SOUSTITRE" />
<meta property="og:description" content="[(#INTRODUCTION|textebrut)]" />
<meta property="og:url" content="#URL_SITE_SPIP/#URL_ARTICLE" />
<meta property="og:image" content="#URL_SITE_SPIP/[(#LOGO_ARTICLE|image_reduire{300,300}|extraire_attribut{src})]" />
<meta property="og:site_name" content="Chris Gaillard Webdesign Grenoble" />
<meta property="fb:app_id" content="185253479000" />
<meta property="og:type" content="article" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@chrisgaillard" />
<meta name="twitter:title" content="#TITRE - #SOUSTITRE" />
<meta name="twitter:description" content="[(#INTRODUCTION|textebrut)]" />
<meta name="twitter:image" content="#URL_SITE_SPIP/[(#LOGO_ARTICLE|image_reduire{180,180}|extraire_attribut{src})]" />
<meta name="twitter:url" content="#URL_SITE_SPIP/#URL_ARTICLE" />
<style amp-custom="" type="text/css">
/*<![CDATA[*/
/* 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; }
/*]]>*/
</style>
</head>
<body>
[(#REM) ] <script src="https://cdn.ampproject.org/v0.js" async="" type=
"text/javascript">
</script><script type="application/ld+json">
<![CDATA[
{ "@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" ] }
]]>
</script>
<div>
<a href="#URL_SITE_SPIP">Chris Gaillard Webdesigner Grenoble</a>
</div>
<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> le [(#DATE|affdate)]</small></p>
<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><a href="#URL_SITE" target="_blank" itemprop="url"></a></p>
</div>
<div>
<h2>Chris Gaillard</h2><a href="#top" class="back-to-top">Retour en haut</a>
</div>
</body>
</html>
</BOUCLE_lagrossebcl>