Há muitas razões pelas quais você gostaria de escrever ou incluir código adicional em suas postagens do WordPress. Pode ser necessário exibir anúncios, aplicar estilos exclusivos a determinadas seções do site ou simplesmente marcar algum texto ou conteúdo para chamar a atenção. Ainda assim, você pode adicionar código para obter vários efeitos visuais e oferecer melhor experiência ao usuário.


Todos esses e outros são motivos válidos, mas não importa o que você deseja obter com o código personalizado, o processo de escrever código pode ser estressante ou desafiador! Neste tutorial, abordaremos as seguintes áreas:

  • Adicionando código que se parece com código, mas não se comporta como um código (caso você queira exibir linhas de código ou melhorar a aparência do seu site)
  • A adição de código cujo objetivo é se comportar como código, por exemplo Anúncios com script como o Google Adsense Ads

Nessas duas categorias, vamos nos aprofundar um pouco no código de programação, como HTML, CSS, Javascript e abordar os anúncios e a beleza do

recipiente. Agora, sem mais alarde, vamos ao que interessa e escrevemos algum código.

Adicionando código que se parece com código, mas não se comporta como código

Se você deseja mostrar o código (talvez você seja um web designer ou desenvolvedor) que seus usuários possam copiar e colar, é importante fazer o certo, porque mesmo uma única quebra de linha pode atrapalhar o código, portanto, todo o seu trabalho. A maneira como seu código será interpretado pelo WordPress depende de você usar o editor de HTML ou Visual Post. Inserir seu código diretamente no editor visual não terá o efeito que você deseja criar, pois o editor visual considera o código como texto normal, o que significa que os navegadores da web não interpretarão seu código como “código”, mas como texto comum.

Por outro lado, o HTML Post Editor reconhecerá qualquer marcação HTML ou CSS usada, o que significa que elas serão interpretadas pelo navegador da Web, algo que pode resultar em layouts confusos e conteúdo com aparência estranha. Por exemplo, 

no editor visual será interpretado como texto comum e o resultado será apenas

. Contudo,

 no editor de HTML será interpretado como marcação HTML e o resultado será a criação de um contêiner.

Um exercício em HTML

É realmente um exercício de futilidade, mas você pode tentar para ter uma ideia mais clara do que quero dizer. Basta abrir o seu Editor HTML, tipo

e salve-o como rascunho. Depois que seu rascunho for salvo, clique em “Visualizar postagem” para ver sua site mutilado. Não se preocupe, ele não é permanente e você pode simplesmente eliminar o rascunho. Agora de volta aos negócios.

Geralmente, você pode usar o código de duas maneiras. Primeiro, você pode usar o código dentro de uma linha (ou parágrafo) para esclarecer um ponto sobre o seu código. Em segundo lugar, você pode escrever, destacar e colocar seu código em um bloco como este:



Tutorial para escrever código no WordPress Posts


...

Para alcançar o efeito acima, usamos a tag de código escrita como ... nosso código entra aqui . Setas substitutas (<  >) Com colchetes ([]), dependendo do site do WordPress e do editor de postagem que você está usando (visual ou HTML). O código que você deseja exibir deve estar entre a tag de abertura,   e a tag de fechamento, . Por exemplo, para usar o código em um parágrafo:

Código em um parágrafo

A tag de código faz com que o texto não HTML pareça um código, mas não diz ao navegador da Web para interpretar a marcação HTML ou removê-la da postagem. Isso significa que um navegador ainda pode codificar sua marcação HTML, dificultando a exibição Tags HTML no seu código. No entanto, você pode superar esse problema usando caracteres estendidos ou entidades de caracteres para representar o < > caracteres, que enganarão todos os navegadores. Por exemplo…

As tags HTML podem ser interpretadas como marcação HTML

… Criará um novo contêiner (graças a

) e um cabeçalho (

), o que atrapalhará sua página da web. Mas se você usar entidades de caracteres para substituir o < > setas, você evitará esse comportamento e exibirá seu código conforme desejado. O código acima será, portanto, parecido com este:

Em vez disso, use entidades de caracteres

Criar um bloco de código destacado

Se eu gostaria de destacar um bloco de código (ou mesmo texto) para obter algo como;

Bloco de código

Começo colocando o código (ou texto) em um contêiner da seguinte forma:

Você precisa fazer isso no editor de HTML

Depois, adiciono estilo usando CSS diretamente (como na imagem acima) ou através do style.css arquivo encontrado na pasta principal do seu tema.

Estilize suas tags de código

A tag de código usará o tamanho da fonte do e coloque o texto em uma fonte monoespaçada por padrão. Você pode alterar tudo isso para ter o seu código da maneira que desejar. Tudo que você precisa é adicionar…

 código {tamanho da fonte: 1.2em; cor: # 000; peso da fonte: normal;} 

… ou algo semelhante ao seu style.css. Existem estilos ilimitados e tudo depende de suas preferências pessoais, portanto, não esconda o estilo.

Adicionando código que se comporta como código

Esta seção é especialmente útil se você deseja exibir anúncios ou outros scripts, por exemplo Snippets de Javascript em suas postagens. Enquanto houver plugins, como Quick Adsense, que o ajudarão a gerenciar anúncios em suas postagens, talvez você esteja interessado em instalar scripts independentes sobre os quais você tem controle total.

Se o seu anúncio for uma imagem simples e um link, você poderá adicioná-lo à sua postagem por meio do utilitário de upload. Basta fazer o upload da imagem e inserir seu link (e talvez uma legenda) e seu trabalho está concluído. Esse método é limitado, pois você só pode alinhar seu anúncio à esquerda, à direita ou no centro – como uma imagem típica. Como alternativa, você pode criar um contêiner em sua postagem usando o editor HTML.

Exemplo:


Crie esse contêiner exatamente onde deseja o seu anúncio, o que significa que você precisa ter a postagem pronta antes de adicionar o anúncio. Quando o contêiner estiver pronto, você poderá modelá-lo da maneira que desejar. Você pode movê-lo usando seu style.css usando o posição propriedade. Se você deseja executar um Anúncio do Google Adsense nas suas postagens, você ainda pode usar Quick Adsense – o plug-in – ou crie um contêiner e coloque seu código de anúncio assim:


Nota 1: Os anúncios do Google são baseados em Javascript e podem ser interpretados pelos principais navegadores da Web, desde que o usuário tenha ativado o Javascript em suas máquinas.

Nota 2: Você precisa escolher as dimensões de anúncio corretas para o seu site, para não estragar as postagens e o site.

Se você deseja adicionar um anúncio permanente que será exibido em todas as suas postagens (postagens atuais e futuras) sem nenhum trabalho extra, será necessário editar o Modelo de postagem única (single.php). Coloquei um anúncio de 468 x 60 pixels na parte superior de todas as minhas postagens adicionando o seguinte código ao single.php imediatamente depois < – – END post-entry-meta – ->.


Obviamente, você precisa usar seu próprio Google Ads. É assim que o anúncio do Google Adsense aparece no meu blog:

Escrevendo código no WordPress

Encontrar single.php, vá para sua Painel de Administração – >> Aparência – >> Editor – >> single.php. Depois que o single.php estiver aberto, use a barra de pesquisa (Ctrl + F) localizar < – – END post-entry-meta – ->.

Você pode deixar o contêiner como está ou estilizá-lo usando style.css, conforme entender. E lembre-se de salvar todas as alterações. o

O container é realmente útil e, quando você o associa a CSS e um pouco de criatividade, pode conseguir muito com o seu site WordPress. Pode ajudá-lo a inserir qualquer código (ou qualquer coisa realmente) em qualquer lugar do seu site.

A caixa de ferramentas

Se você quiser saber mais sobre como escrever código personalizado em suas postagens do WordPress, fique à vontade para conferir os seguintes recursos:

Bem, é isso. Conseguimos cobrir as áreas descritas no começo. Mas se você não entende nenhum conceito nesta postagem ou gostaria de adicionar sugestões ou visualizações, compartilhe seus pensamentos na seção de comentários abaixo!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me