terça-feira, 28 de junho de 2016

Como mudar o lugar das informações do autor no Wordpress?

Oi...

Em um blog que estou trabalhando, o autor do post aparecia beeem lá em baixo, no fim do post.

Para dar mais visibilidade ao autor... eu coloquei ele no lado do texto...

Bom, isso vai depender de cada tema, mas o que eu fiz foi esconder a caixa original:

/* escondendo a caixa de informacoes do autor, pois sera usada outra */
#content .post_content .post-author {
 display: none!important;
 visibility: hidden!important;
}

Talvez seja um pouco diferente par você, mas a ideia é essa ali.

E para eu exibir as informações do autor no lado do texto, no meu template tinha um widget onde eu podia colocar HTML.
Então eu instalei o plugin Author Bio Shortcode:
https://br.wordpress.org/plugins/author-bio-shortcode/installation/

E no Widget eu botei isso:
[author_bio name="yes" avatar="yes" ]

Além disso, criei esse CSS:

/* alterando o estilo do novo box de informacoes do autor, na pagina de post de blog */
.author_bio_shortcode .avatar img {
    float: left;
    margin: 5px 10px 0px 10px;
    border-radius: 150px;
    border: 2px solid #981258;
    height: 96px;
    width: 96px;
}

Mas quando é celular, esse widget vai lá pra baixo... então fiz um menorzinho para celular...

Para isso editei o código fonte do tema, alterei o "Post único (single.php)" e adicionei o código abaixo antes do início do conteudo:

<div class="author-info-mobile">
 <?php echo get_avatar( get_the_author_meta( 'ID' ), 40 ); ?>
 Por <?php the_author_link()?>
</div>

E adicionei o CSS abaixo para customizar o estilo e para só aparecer em celulares e tablets:

/* estilo do nome do autor para mobile, na pagina de post de blog */
@media (min-width: 768px) {
 .author-info-mobile {
  display: none;
  visibility: hidden;
 }
}

.author-info-mobile {
 margin-left: 11px;
 font-size: 14px;
 color: white;
}

.author-info-mobile img {
 border-radius: 150px;
 border: 2px solid #981258;
 margin-right: 5px;
 height: 40px;
 width: 40px;
}

Provavelmente pra vc vai ser um pouco diferente... mas a ideia é essa aí :D


---------------------------

Depois que escrevi o post, precisei achar um plugin pra poder colocar fotos pra cada usuário (para que o próprio usuário ou o admin setasse uma foto para o usuário, por padrão pega do gravatar).

Usei esse plugin:
https://wordpress.org/plugins/user-photo/

Em configurações > User Photo vc pode mexer nas configurações se quiser.

Pra usar só tem q chamar userphoto_the_author_thumbnail() q vem a foto... mas no meu widget não dava pra colocar código PHP.

Então tive que instalar esse plugin para ter um widget q eu pudesse colocar código PHP:
https://wordpress.org/plugins/php-code-widget/

E montei tudo na mão:

<div class="author_bio_shortcode">
  <div class="avatar">

      <?php userphoto_the_author_thumbnail() ?>

      <h3 class="name"><?php the_author()?></h3>

      <div class="bio"><p>
        <?php the_author_description() ?>
         Para saber mais: <?php the_author_link()?>
      </p>
   </div>
</div>

E no single-post ao invés de usar
echo get_avatar( get_the_author_meta( 'ID' ), 40 );
eu usei
userphoto_the_author_thumbnail()

Abraço!
Adriano Schmidt

Nenhum comentário:

Postar um comentário