Novidades

Inscreva-se em nosso canal no Youtube Daviwp

AMP: Como customizar o template padrão

03/10/2017 Novidades | WordPress (0) comentário

Salve Salve rapaziada aqui é o Daviwp trazendo mais um post para vocês. Desta vez quero mostrar como customizar um template do AMP, para quem ainda não sabe o que é AMP precisa antes ver esse post que fiz aqui no blog explicando tudo. Basta clicar aqui.
Resolvi fazer esse post para ajudar a galera que deseja customizar o template padrão do AMP. Antes de começar você precisa ter instalado o plugin AMP que explico no link acima.

Customizando o icone

Para customizar o icone no template do AMP, copie e cole em seu arquivo functions.php.
onde esta escrito get_stylesheet_directory_uri é o endereço de onde esta o icone.

add_filter ( ' amp_post_template_data ' , ' xyz_amp_set_site_icon_url ' );
 
 função xyz_amp_set_site_icon_url ( $ data ) {
 // Idealmente uma imagem 32x32
 $ data [ ' site_icon_url ' ] = get_stylesheet_directory_uri () .  ' /images/amp-site-icon.png ' ;
 retornar $ dados ;
 }

Customizando a logo no AMP

Esse código você insere uma logo em seu template. Basta copiar o código abaixo colar em seu functions.php trocar o caminho para imagem em seu site.

add_action ( ' amp_post_template_css ' , ' xyz_amp_additional_css_styles ' );
 
 função xyz_amp_additional_css_styles ( $ amp_template ) {
 // apenas CSS aqui por favor ...
	  ?  >
	 header.amp-wp-header {
		 preenchimento: 12px 0;
		 background: # 000;
	 }
	 header.amp-wp-header a {
		 background-image: url ('https://seusite.com/path/to/logo.png');
		 background-repeat: no-repeat;
		 tamanho do fundo: conter;
		 exibição: bloco;
		 altura: 28px;
		 largura: 94px;
		 margem: 0 auto;
		 recuo de texto: -9999px;
	 }
	 <? php 
 }

Removendo imagem destacada

Caso você não queira utilizar imagem destacada em seu template copie e cole o código abaixo em seu arquivo functions.php

add_filter ( ' amp_post_template_data ' , ' xyz_amp_remove_featured_image ' );
 
 função xyz_amp_remove_featured_image ( $ data ) {
 $ data [ ' featured_image ' ] = false ;
 retornar $ dados ;
 }

Ajustando largura do template

Se você quiser aumentar mais a largura do template, basta utilizar o seguinte código abaixo.

 
add_filter ( ' amp_content_max_width ' , ' xyz_amp_change_content_width ' );
 
 função xyz_amp_change_content_width ( $ content_max_width ) {
 retornar 1200 ;
 }

Remover author

As vezes não é necessário manter autor no template, então para remove-lo, basta utilizar o código abaixo.

 
 add_filter ( ' amp_post_article_header_meta ' , ' xyz_amp_remove_author_meta ' );
 
 função xyz_amp_remove_author_meta ( $ meta_parts ) {
 foreach ( array_keys ( $ meta_parts , ' meta-author ' , true ) como $ key ) {
 unset ( $ meta_parts [ $ key ]);
 }
 retornar $ meta_parts ;
 }

Inserindo contagem de comentários

Se você desejar inserir uma contagem para os comentários no template. Crie uma pasta no seu tema chamado templates e um arquivo dentro dela chamado xyz-meta-comment-count.php Feito isso copie e cole o código que indica.

Código para functions.php

add_filter ( ' amp_post_article_footer_meta ' , ' xyz_amp_add_comment_count_meta ' );
 
 função xyz_amp_add_comment_count_meta ( $ meta_parts ) {
 $ meta_parts [] = ' xyz-meta-comment-count ' ;
 retornar $ meta_parts ;
 }
 
 add_filter ( ' amp_post_template_file ' , ' xyz_amp_set_comment_count_meta_path ' , 10 , 3 );
 
 função xyz_amp_set_comment_count_meta_path ( $ file , $ type , $ post ) {
 se ( ' xyz-meta-comment-count ' === $ type ) {
 $ file = dirname ( __FILE__ ) .  ' /templates/xyz-meta-comment-count.php ' ;
 }
 retornar arquivo $ ;
 }

Código para o template xyz-meta-comment-count.php

 < li >
 < ?  php printf (_n ( ' % d comment ' , ' % d comments ' , $ this -> get ( ' post ' ) -> comment_count , ' xyz-text-domain ' ));  ?  >
 </ li >

Customizando CSS do AMP

Com esse código é possível inserir e ajustar qualquer css padrão do template. Talvez seja o que você mais vai utilizar.
Como disse copie cole no arquivo functions.php

add_action ( ' amp_post_template_css ' , ' xyz_amp_my_additional_css_styles ' );
 
 função xyz_amp_my_additional_css_styles ( $ amp_template ) {
 // apenas CSS aqui por favor ...
	  ?  >
	 .amp-wp-byline amp-img {
		 limite de borda: 0;  / * não queremos avatares redondos!  * /
	 }
	 .my-custom-class {
		 cor azul;
	 }
	 <? php 
 }

Bem pessoal é isso! Espero que seja util. Aqui estão só os necessários para ter um template customizado. Se quiser ir bem mais alem disso.
Tem a documentação mais completa no link https://github.com/Automattic/amp-wp

Um forte abraço pra vocês e até o proximo!

daviwp

Meu nome é Davi Alves desenvolvedor web e WordPress developer, residente de Belo Horizonte, sou um dos organizadores do WordCamp evento oficial do WordPress em BH e co-fundador do Belo Horizonte WordPress Group juntamente com o fundador Mateus Neves, sou articulista de alguns sites, e fundador do daviwp.com, aqui compartilho conhecimentos para toda galera aficionada em WordPress.