Posted on dezembro 11, 2020
Centralizar conteúdo embed em posts do WordPress
Esteticamente, eu não sei se ficar centralizando conteúdos é bom. Como eu já disse algumas vezes, eu não tenho lá muito senso estético para pensar em layouts de páginas, posts, imagens… Faço o que eu posso e acho que tenho me saído bem dentro das minhas capacidades 😅 O xis da questão é que: eu gosto das coisas centralizadas! Pelo menos nos meus posts, acho que o conteúdo embed e imagens, por exemplo, deixam a “diagramação” do post mais fluida. E confesso que sofri um pouquinho para lidar com isso no começo do blog. Por isso vim aqui documentar e te ajudar em como centralizar conteúdo embed em posts do WordPress!
Antes de mais nada: o que é conteúdo embed?
A palavra embed vem do inglês e significa incorporar, embutir. Ou seja, todo tipo de conteúdo de terceiros que você consegue incorporar no seu blog ou site via um bloco de código HTML pode ser considerado um conteúdo embed. É uma maneira muito mais dinâmica e visualmente agradável de citar o argumento de alguém sem ser copiando e colando o texto ou imagem e dando os devidos créditos.
Por exemplo: quando você incorpora o conteúdo de uma rede social no seu post, como um tweet ou algum texto do Facebook, seus leitores poderão interagir com aquele conteúdo diretamente através do seu post, além de perceber imediatamente a sua origem.
Além disso, o conteúdo embed também traz algumas vantagens como divulgação das redes sociais (através de uma amostra do conteúdo que lá existe) e aumento da relevância e da credibilidade do que você está escrevendo – afinal de contas, você precisou, além de escrever, selecionar conteúdos que complementem e/ou baseiem aquela temática sobre a qual você está falando.
E como eu incorporo um conteúdo embed nos meus posts?
Grande parte das redes sociais e das plataformas de vídeos e/ou fotos já tem a opção de incorporar em seus conteúdos, facilitando muito a vida de quem está escrevendo e/ou diagramando um post. Vou explicitar aqui as duas redes sociais de onde eu costumo incorporar conteúdo, que são o Twitter e o Instagram. Para ver como incorporar conteúdo de outras redes sociais (como Facebook, LinkedIn e YouTube, por exemplo), vou deixar esse link do Rockcontent, que dá um passo a passo de cada um deles.
Já escolheu o tweet que você quer incorporar no seu post? Então vá até o sinal de reticências que fica no canto superior direto do tweet em questão, clique nele e selecione a opção Embed Tweet.
Essa opção vai abrir uma nova aba no seu navegador, com o endereço publish.twitter.com. Você vai cair direto na parte onde já está o código que você deve incorporar no seu site. A única ação que você precisa fazer nessa página é copiar o código que aparece (através do botão Copy Code).
De volta ao seu post ou página WordPress, você precisa criar um novo bloco HTML Personalizado e, lá dentro, colar o código que você copiou. Vai parecer uma grande bagunça dentro do seu post pois ele não vai renderizar de imediato. Para ver o resultado da incorporação, há dois métodos: ir até o botão de Visualizar, no canto superior direito da página, e acessar o link Pré-visualizar em nova aba.
Outra maneira de ver o conteúdo incorporado é: depois de inserido o bloco de HTML personalizado e o código embed ter sido colado lá dentro, escolher a opção Visualizar em vez de HTML. Com isso, o tweet vai aparecer bonitinho dentro do seu post.
Vá até o post do Instagram que você deseja incorporar no seu conteúdo e, novamente, clique no botão de reticências no canto superior direito. Um menuzinho com opções vai abrir-se para você e você vai escolher a opção Incorporar.
Ao clicar nessa opção, uma nova popup vai se abrir, com um campo de texto e um trecho de código. Você tem a opção de escolher se quer incluir a legenda daquele post na incorporação ou não. Depois disso, é só seguir os mesmos passos que eu descrevi para o Twitter: copie o código, crie o bloco de HTML Personalizado, copie o código ali e prontinho, conteúdo incorporado com sucesso! O resultado fica (quase) assim:
Voltemos ao título do post: como centralizar conteúdos embed em posts WordPress?
Portanto, problema que temos nas mãos é este: o bloco HTML personalizado, por padrão, não tem a opção de alinhamento. Sempre que formos publicar um conteúdo embed através dele, o alinhamento ficará à esquerda, como um texto qualquer. Como podemos, então, centralizá-lo?
Pesquisando, encontrei duas maneiras diferentes para alinhar o conteúdo do Twitter e uma para o Instagram. Vou mostrar as que eu implementei aqui no meu blog.
A do Twitter parece um pouco mais difícil (não é!) mas é extremamente prática: eu incluí no CSS personalizado do layout do meu blog uma tag que sempre vai centralizar os tweets incorporados; logo, eu não preciso me preocupar com esse alinhamento durante a escrita do meu post.
Vamos à um passo a passo: já logado no WordPress, vá até a página inicial do seu site e clique no botão Personalizar. Está no canto superior esquerdo.
A página vai se dividir em duas: de um lado, um menu com diversas opções de personalização; do outro, o seu site. Role esse menu até encontrar a opção CSS adicional. Clique nela e verá que vai abrir uma caixa de texto para que você insira código CSS.
Nessa caixa de texto, o código que você precisa incluir é bem simples:
.twitter-tweet {
margin: auto;
}
E prontinho! Não precisa se preocupar mais em tentar centralizar cada tweet nos seus posts WordPress.
Com o Instagram, infelizmente, o trabalho é um pouco maior, visto que a cada publicação que você incorporar, se faz necessário inserir a centralização “na mão”. Não é difícil, só é chato de ficar lembrando. Fora que parece um pouco gambiarra (e talvez seja, mas funciona).
Depois que você copiar o código da publicação que você deseja incorporar e colá-lo em um bloco de HTML personalizado, você vai precisar adicionar uma nova tag nesse código. Logo antes do primeiro <blockquote>, você vai adicionar uma div alinhando ao centro:
<div align="center">
Assim como você abriu essa <div>, você precisa fechá-la depois do último <blockquote> para que seu código não quebre. Como código final de uma publicação incorporada, você vai ter algo parecido com isso:
<div align="center"><blockquote class="instagram-media" data-instgrm-captioned data-instgrm-permalink="https://www.instagram.com/p/CH_VT-OHYQN/?utm_source=ig_embed&utm_campaign=loading" data-instgrm-version="13" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:540px; min-width:326px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);"><div style="padding:16px;"> <a href="https://www.instagram.com/p/CH_VT-OHYQN/?utm_source=ig_embed&utm_campaign=loading" style=" background:#FFFFFF; line-height:0; padding:0 0; text-align:center; text-decoration:none; width:100%;" target="_blank"> <div style=" display: flex; flex-direction: row; align-items: center;"> <div style="background-color: #F4F4F4; border-radius: 50%; flex-grow: 0; height: 40px; margin-right: 14px; width: 40px;"></div> <div style="display: flex; flex-direction: column; flex-grow: 1; justify-content: center;"> <div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; margin-bottom: 6px; width: 100px;"></div> <div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; width: 60px;"></div></div></div><div style="padding: 19% 0;"></div> <div style="display:block; height:50px; margin:0 auto 12px; width:50px;"><svg width="50px" height="50px" viewBox="0 0 60 60" version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-511.000000, -20.000000)" fill="#000000"><g><path d="M556.869,30.41 C554.814,30.41 553.148,32.076 553.148,34.131 C553.148,36.186 554.814,37.852 556.869,37.852 C558.924,37.852 560.59,36.186 560.59,34.131 C560.59,32.076 558.924,30.41 556.869,30.41 M541,60.657 C535.114,60.657 530.342,55.887 530.342,50 C530.342,44.114 535.114,39.342 541,39.342 C546.887,39.342 551.658,44.114 551.658,50 C551.658,55.887 546.887,60.657 541,60.657 M541,33.886 C532.1,33.886 524.886,41.1 524.886,50 C524.886,58.899 532.1,66.113 541,66.113 C549.9,66.113 557.115,58.899 557.115,50 C557.115,41.1 549.9,33.886 541,33.886 M565.378,62.101 C565.244,65.022 564.756,66.606 564.346,67.663 C563.803,69.06 563.154,70.057 562.106,71.106 C561.058,72.155 560.06,72.803 558.662,73.347 C557.607,73.757 556.021,74.244 553.102,74.378 C549.944,74.521 548.997,74.552 541,74.552 C533.003,74.552 532.056,74.521 528.898,74.378 C525.979,74.244 524.393,73.757 523.338,73.347 C521.94,72.803 520.942,72.155 519.894,71.106 C518.846,70.057 518.197,69.06 517.654,67.663 C517.244,66.606 516.755,65.022 516.623,62.101 C516.479,58.943 516.448,57.996 516.448,50 C516.448,42.003 516.479,41.056 516.623,37.899 C516.755,34.978 517.244,33.391 517.654,32.338 C518.197,30.938 518.846,29.942 519.894,28.894 C520.942,27.846 521.94,27.196 523.338,26.654 C524.393,26.244 525.979,25.756 528.898,25.623 C532.057,25.479 533.004,25.448 541,25.448 C548.997,25.448 549.943,25.479 553.102,25.623 C556.021,25.756 557.607,26.244 558.662,26.654 C560.06,27.196 561.058,27.846 562.106,28.894 C563.154,29.942 563.803,30.938 564.346,32.338 C564.756,33.391 565.244,34.978 565.378,37.899 C565.522,41.056 565.552,42.003 565.552,50 C565.552,57.996 565.522,58.943 565.378,62.101 M570.82,37.631 C570.674,34.438 570.167,32.258 569.425,30.349 C568.659,28.377 567.633,26.702 565.965,25.035 C564.297,23.368 562.623,22.342 560.652,21.575 C558.743,20.834 556.562,20.326 553.369,20.18 C550.169,20.033 549.148,20 541,20 C532.853,20 531.831,20.033 528.631,20.18 C525.438,20.326 523.257,20.834 521.349,21.575 C519.376,22.342 517.703,23.368 516.035,25.035 C514.368,26.702 513.342,28.377 512.574,30.349 C511.834,32.258 511.326,34.438 511.181,37.631 C511.035,40.831 511,41.851 511,50 C511,58.147 511.035,59.17 511.181,62.369 C511.326,65.562 511.834,67.743 512.574,69.651 C513.342,71.625 514.368,73.296 516.035,74.965 C517.703,76.634 519.376,77.658 521.349,78.425 C523.257,79.167 525.438,79.673 528.631,79.82 C531.831,79.965 532.853,80.001 541,80.001 C549.148,80.001 550.169,79.965 553.369,79.82 C556.562,79.673 558.743,79.167 560.652,78.425 C562.623,77.658 564.297,76.634 565.965,74.965 C567.633,73.296 568.659,71.625 569.425,69.651 C570.167,67.743 570.674,65.562 570.82,62.369 C570.966,59.17 571,58.147 571,50 C571,41.851 570.966,40.831 570.82,37.631"></path></g></g></g></svg></div><div style="padding-top: 8px;"> <div style=" color:#3897f0; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:550; line-height:18px;"> Ver essa foto no Instagram</div></div><div style="padding: 12.5% 0;"></div> <div style="display: flex; flex-direction: row; margin-bottom: 14px; align-items: center;"><div> <div style="background-color: #F4F4F4; border-radius: 50%; height: 12.5px; width: 12.5px; transform: translateX(0px) translateY(7px);"></div> <div style="background-color: #F4F4F4; height: 12.5px; transform: rotate(-45deg) translateX(3px) translateY(1px); width: 12.5px; flex-grow: 0; margin-right: 14px; margin-left: 2px;"></div> <div style="background-color: #F4F4F4; border-radius: 50%; height: 12.5px; width: 12.5px; transform: translateX(9px) translateY(-18px);"></div></div><div style="margin-left: 8px;"> <div style=" background-color: #F4F4F4; border-radius: 50%; flex-grow: 0; height: 20px; width: 20px;"></div> <div style=" width: 0; height: 0; border-top: 2px solid transparent; border-left: 6px solid #f4f4f4; border-bottom: 2px solid transparent; transform: translateX(16px) translateY(-4px) rotate(30deg)"></div></div><div style="margin-left: auto;"> <div style=" width: 0px; border-top: 8px solid #F4F4F4; border-right: 8px solid transparent; transform: translateY(16px);"></div> <div style=" background-color: #F4F4F4; flex-grow: 0; height: 12px; width: 16px; transform: translateY(-4px);"></div> <div style=" width: 0; height: 0; border-top: 8px solid #F4F4F4; border-left: 8px solid transparent; transform: translateY(-4px) translateX(8px);"></div></div></div> <div style="display: flex; flex-direction: column; flex-grow: 1; justify-content: center; margin-bottom: 24px;"> <div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; margin-bottom: 6px; width: 224px;"></div> <div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; width: 144px;"></div></div></a><p style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;"><a href="https://www.instagram.com/p/CH_VT-OHYQN/?utm_source=ig_embed&utm_campaign=loading" style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none;" target="_blank">Uma publicação compartilhada por Rita | Desenvolvedora FrontEnd (@ritapontodev)</a></p></div></blockquote></div> <script async src="//www.instagram.com/embed.js"></script>
Dessa forma, o resultado vai ser o seguinte:
E aí? Ajudou? Já está conseguindo centralizar seu conteúdo incorporado tranquilamente? Espero que essas dicas facilitem a sua vida se você, assim como eu, adora um destaquezinho centralizado em um post. Até a próxima!
📚 Links consultados
📕 Embed: você sabe o que é isso? Descubra agora mesmo – por Mateus Chiavassa
📗 Embed code: o que é, quais as aplicações e como usar – por Thiago Xavier
📘 How to center a Twitter embed in your WordPress post – por Brian Jackson
📜 Posts relacionados
💻 Plugins para WordPress que vão facilitar sua vida
📋 Recursos legais pra te ajudar com o frontend
💌 Recadinhos
Gostou do texto? Tem algo a adicionar? Alguma crítica construtiva? Feedbacks? Sugestões? Pedidos? Fique à vontade para me contatar via email (oli.pmatt@gmail.com), Twitter (@oliviamattiazzo), LinkedIn (/oliviamattiazzo) ou pela caixa de comentários aqui embaixo! Vai ser um prazer conversar contigo! ✨
Novidades!
Eu tenho uma série de posts semanais! Eu tinha pensado em fazer uma newsletter, mas confesso que fiquei com medinho de ninguém querer ler 😅 Essa série de posts atende pelo nome Et Cetera, e é um resumo dos conteúdos que eu consumi naquela semana (ou antes) e que eu gostaria muito de indicar, para que você também consumisse. Ah, e tudo isso em inglês, porque eu estava precisando muito praticar. O post mais recente foi ao ar dia 07/12/2020 e você pode acessá-lo neste link. E fique à vontade para me mandar feedback ou sugestões! 💕
Ahh me ajudou demais. Obrigada!!