¿Cómo añadir las últimas entradas y botones de redes en AMP?

Categorías: WordPress
Etiquetas: ,
¿Cómo personalizar el pie de página de las páginas AMP?

Después de las entradas de hace un rato sobre: Añadir los últimos posts publicados al final de páginas AMP y ¿Cómo añadir botones para compartir en redes sociales en páginas AMP?, ahora un post con la combinación de ambos.

Para ello añadimos en el archivo functions.php del tema activo el siguiente código al final:

 function my_amp_social_media_share_latest_posts_bottom( $amp_template ) {
	if ( shortcode_exists( 'amp-recent-posts' ) ) {
		?>
			<div class="amp-wp-content">
				<?php echo do_shortcode( "[amp-recent-posts append='amp' heading='Nuestras últimas publicaciones:' max='5']" ); ?>
			</div>
		<?php
	}
	?>
		<div class="amp-share">
	 
		<!-- Twitter -->
		<a target="_blank" href="https://twitter.com/share?text=<?php the_title_attribute(); ?>&amp;url=<?php echo urlencode(get_permalink()); ?>" class="as-twitter" title="Tuitear">Tuitear</a>
	 
		<!-- Facebook -->
		<a target="_blank" href="http://www.facebook.com/sharer.php?u=<?php echo urlencode(get_permalink()); ?>" class="as-facebook" title="Compartir en Facebook">Compartir en Facebook</a>
	 
		<!-- Google+ -->
		<a target="_blank" href="https://plus.google.com/share?url=<?php echo urlencode(get_permalink()); ?>" class="as-gplus" title="Compartir en G+">Compartir en G+</a>
	 
		<!-- Linkedin -->
		<a href="https://www.linkedin.com/shareArticle?mini=true&url=<?php echo urlencode(get_permalink()); ?>" class="as-linkedin">Compartir en LinkedIn</a>
	 
		</div>
    <?php
}
add_action( 'amp_post_template_footer', 'my_amp_social_media_share_latest_posts_bottom' );

Y para darle formato a los botones de compartir en redes sociales, añadimos en el archivo style.php que deberíamos tener en la carpeta /amp/ del tema activo las siguientes líneas (si nos sabes de qué te estoy hablando, lee esto primero: ¿Cómo personalizar el pie de página de las páginas AMP?):

.amp-share{
	max-width: 678px;
	margin: 36px auto;
}
.amp-share a {
	margin:10px 5px;
	line-height: 1;
	color:#fff;
	padding:3px 6px;
	text-decoration:none;
}
.amp-share a:hover{
	color:#fff;
	text-decoration:none;
}

.amp-share .as-facebook {
	background-color: #3B5998;
}
.amp-share .as-twitter {
	background-color:#00aced;
}
.amp-share .as-gplus {
	background-color:#dd4b39;
}
.amp-share .as-linkedin {
	background-color:#0077b5;
}

Aunque si no tenéis un archivo style.php personalizado, en el post ¿Cómo añadir botones para compartir en redes sociales en páginas AMP? está explicado como añadir los estilos también directamente en el functions.php.

Salir de la versión móvil