Articles

MarkoSaric

este artigo é um balcão único para os seus códigos HTML WordPress. Aqui está a lista de tags e códigos HTML WordPress mais comumente usados para criar conteúdo. Salve a lista e usá-lo como sua referência ao compor suas publicações e páginas do blog WordPress.WordPress HTML no editor Gutenberg

WordPress é uma das melhores plataformas de blogs. Milhões de pessoas e marcas usá-lo para criar sites de grande aparência.Este guia é válido tanto para a versão hospedada como para a hospedada do WordPress. Ver a diferença entre WordPress.com ou WordPress.org.

WordPress 5.0 com o novo editor Gutenberg lançado em dezembro de 2018 melhorou drasticamente e facilitou a forma como você trabalha com tags HTML dentro de suas posts e páginas do blog.

como você mostra o código HTML nos posts editados de Gutenberg? Basta adicionar o bloco “código” e digitar o seu código. Vai mostrar o código aos seus visitantes.

como editar as suas publicações de Gutenberg usando HTML? Basta carregar em” Editar como HTML ” no menu Opções do bloco em particular que deseja editar.

você também pode adicionar o bloco “clássico” ou o plugin “Editor clássico” para ter o antigo editor WYSIWYG que eu descrevo mais abaixo neste post.

Editor clássico: Qual é a diferença entre Visual e texto?

você tem duas opções de edição ao compor um post ou página no editor WordPress clássico. Você pode usar a vista “Visual” padrão ou o modo” texto”.

no modo visual, você pode ver o seu conteúdo como ele é. O modo visual é chamado WYSIWYG que representa EXATAMENTE o que o modo visual faz: o que você vê é o que você obtém.

você vê o seu conteúdo da forma como os seus visitantes o verão nos seus navegadores e tem botões simples para o ajudar a editar. A maioria das pessoas usam este editor de post” Visual ” no WordPress quando criam o seu conteúdo.

no modo texto, você vê o código e as tags HTML. Este modo de texto permite-lhe adicionar qualquer código HTML a qualquer uma das suas publicações ou páginas do seu blog. O editor de texto baseado em HTML parece mais assustador e não é tão popular com os iniciantes.

mas e se você souber codificar ou quiser um pouco mais de controle sobre o layout e estrutura ao criar seus posts ou páginas? Você deve usar o editor de “texto”.

como editar HTML no editor clássico WordPress?

como chegar ao editor de texto HTML? Em seu post WordPress admin ou página de escrita, clique na página” Texto”. É no editor de texto que você adiciona e edita todas as suas tags HTML.

como adicionar código HTML a um post ou página WordPress?

você pode simplesmente escrever ou colar qualquer código HTML diretamente em seu editor de “texto” WordPress. Experimente com qualquer uma das etiquetas mais usadas da minha lista abaixo.

Copie-o aqui no site, cole-o no editor de texto e “antevisão” o seu post ou página para ver como os seus visitantes irão vê-lo.

às vezes acontece que o código é retirado quando se muda de modo texto para modos visuais.Tenha cuidado e verifique se isto não lhe aconteceu. Ou tente ficar com o editor de texto apenas se você planeja escrever código para não encontrar este problema.

para aqueles confortáveis com codificação, você pode até mesmo desativar o editor “visual”. Vá para ” usuários “em seu menu de navegação WordPress, clique em” seu perfil “e selecione”Desativar o editor visual ao escrever”.

copiar e colar entre o Google Docs, Microsoft Word e WordPress

lançamento WordPress 5.0 tornou fácil e suave copiar qualquer conteúdo do Google Docs ou Microsoft Word e colá-lo em suas mensagens e páginas WordPress.Isto nem sempre foi fácil. Quando você trabalha com HTML no Editor clássico, você pode notar alguns caracteres sem nexo às vezes.

isto pode acontecer se você copiar/colar do Microsoft Word para o WordPress. Uma fonte útil ao colar o código HTML do Word no editor WordPress é Postável.

copie / cole o seu HTML do Word (ou de outra fonte) na ferramenta para obter uma versão amigável e limpa WordPress do código que você pode então inserir no seu conteúdo.

Como posso mostrar códigos HTML nas minhas publicações do blog como texto normal?

e se você quisesse inserir e exibir tags HTML e outros códigos dentro de seu post para que seus visitantes os vejam como texto normal?Como estou a fazer aqui no meu artigo? Você ainda usa o editor de texto, mas você quebrar seu código como este:

<code><div class="header"></code> 

WordPress sintaxe HTML plugins para uma melhor visualização de código

Existem alguns plugins que podem ajudar você com esse processo e também permite que você edite o layout e a forma como o código é apresentado no seu blog para que seus visitantes.

recomendo os dois seguintes. SyntaxHighlighter Evolved é a opção mais popular, enquanto Pastacode é a que funciona melhor para aqueles que usam construtores de páginas ao projetar um blog.

Mais comumente usado WordPress códigos HTML e tags

Inserir uma imagem

<img src="https://markosaric.com/essential-html-tags-wordpress/Image-URL" alt="Description of the image">

Fazer a imagem clicável para um novo destino

<a href="Destination-URL"><img alt="Description of the image" src="https://markosaric.com/essential-html-tags-wordpress/Image-URL" /></a>

Inserir um link

Observe que o texto âncora é a parte visível de seu link. É a palavra ou frase em que os seus visitantes irão clicar para chegar à página a que está a ligar.

<a href="Destination-URL">Anchor text</a>

faça a ligação seguir

para efeitos de SEO poderá ter de fazer parte da sua ligação a seguir. Aqui está como:

<a href="Destination-URL" rel="nofollow">Anchor text</a>

torne a ligação aberta numa nova janela de navegação

<a href="Destination-URL" target="_blank">Anchor text</a>

Link para uma secção específica numa página longa

estes são chamados saltos de página. Seus visitantes podem clicar em um link e ser movidos em algum lugar mais abaixo ou acima do artigo.

isto é especialmente útil para aqueles guias mais longos que você quer dividir em diferentes capítulos usando a tabela de conteúdos.

a primeira parte da criação de um salto de página é atribuir uma secção (ou alvo) para a qual deseja ligar.

coloque este código na secção da sua página para a qual deseja ligar. A segunda parte é realmente ligar para essa seção atribuída a partir de sua introdução ou do seu índice.

<a></a><a href="#Specific-section">Anchor text</a>

isto também funciona se quiser ligar-se a uma secção específica da sua página a partir de outro artigo no seu blog. Você pode inserir um link para este alvo: https://yourblog.com/yourpost/#Specific-section.

esta é também a forma como as ligações “de volta ao topo” funcionam. Atribua um nome de secção ao topo do seu post e inclua um botão “Ir para o topo” na parte inferior do seu post ligando-se à secção superior.

Criar proeminente títulos e subtítulos

<h1>This is a heading H1</h1> <h2>This is a heading H2</h2> <h3>This is a heading H3</h3>

Inserir uma quebra de linha

<p>This is<br>a paragraph</br> with a line break</p>

Criar um novo parágrafo

<p>This is the first paragraph</p> <p>This is the second paragraph</p>

criar uma lista de ponto de bala

<ul> <li>list item with a bullet point</li><li>another item with a bullet point</li></ul>

criar uma lista numerada

<ol><li>list item with number 1</li><li>list item with number 2</li></ol>

Realçar o texto em um post com o amarelo (ou qualquer outra cor) fundo

<span style="background-color:yellow;">Your text</span>

Atribuir o número de um item na sua lista numerada

<ol start="7"><li>List item number 7</li></ol>

Faça uma lista letras

<ol type="A"><li>Item A</li><li>Item B</li><li>Item C</li><li>Item D</li></ol>

Tornar um Romano lista de números

<ol type="I"><li>Item I</li><li>Item II</li><li>Item III</li><li>Item IV</li></ol>

Centro de seu texto

<center>to be centered</center>

Fazer o seu texto em negrito

<strong>to be bold</strong>

Fazer o seu texto em itálico

<em>to be italic</em>

Alterar a cor do texto

<span style="color: #000000;">Your text</span>

Inserir um blockquote

<blockquote>Your quote</blockquote>

Criar uma tabela

Deixe uma resposta

O seu endereço de email não será publicado.