WordPress autores têm a opção de criar páginas e postagens em um Editor Visual ou um Editor de texto. Embora o Editor Visual faça um trabalho razoavelmente bom com suas opções de barra de ferramentas e ambiente de edição fácil, o uso do editor de texto permite a máxima flexibilidade sobre como organizar o conteúdo.

deixe-me explicar não apenas por que você gostaria de usar o Editor de texto (no lugar do Editor Visual), mas como ele pode ser fácil de usar.

por que você pode preferir o Editor de texto?

• seu conteúdo fará mais sentido para seus leitores e mecanismos de pesquisa.
• você só precisa conhecer algumas tags HTML para tornar o Editor de texto muito útil.
• você pode aplicar propriedades de estilo CSS diretamente ao seu código HTML.

O Que Acontece Quando Você Usa O Editor Visual?

quando você adiciona cópia, mídia ou links ao seu Editor Visual, você está realmente adicionando HTML à sua página ou postagem. Tudo acontece sob o capô.

Não tenho certeza do que quero dizer? Experimentar.

adicione alguma cópia no Editor Visual. Em seguida, selecione a guia Texto. O que você vai ver é HTML. Assim como com o editor Visual, você pode editar seu código HTML diretamente com o editor de texto.

na verdade, você pode fazer muito mais com o Editor de texto do que com o Editor Visual. Isso torna o trabalho no modo texto não apenas mais produtivo, mas também mais satisfatório. Você poderá marcar com mais precisão seu conteúdo, o que beneficiará seus leitores e aumentará seus esforços de SEO.

HTML é tão simples quanto possível. Todas as páginas da Web, incluindo aquelas geradas pelo WordPress, o usam.

aprender HTML terá benefícios muito além de usá-lo com WordPress!

o que é HTML?

conhecida como lingua franca da web, HyperText Markup Language (HTML) é um sistema que permite aos autores atribuir significado ao conteúdo. Usando elementos HTML (mais conhecidos como tags), você pode definir o conteúdo como parágrafos, títulos, listas, links e outras estruturas.

HTML é muito parecido com gramática.

não tem nada a ver com a aparência de uma página da web ou com o estilo dela. A questão do design de página da web-layout, tipografia e cor – é abordada com CSS (Cascading Style Sheets), a linguagem do estilo de design da web.

HTML está sendo desenvolvido pelo World Wide Web Consortium (W3C). A versão mais atual é HTML5.

as Tags que você provavelmente usará

HTML é um sistema de marcação em contêiner. Para cada tag aberta, há uma tag de fechamento correspondente.

por exemplo, para o conteúdo mais importante de uma página ou seção de uma página, você usaria uma tag de Título 1 como esta.

< >Tudo Sobre HTML</h1>
open tag é< >e o recipiente é fechado com</h1>

da mesma forma, aqui é a forma como um parágrafo é marcado:

<p>Vários anos atrás, um cliente e um bom amigo sugeriu que eu saiba o WordPress. Na época eu era contra qualquer tipo de CMS. Mal sabia eu que viria a amá-lo e ensiná-lo a muitas pessoas nas salas de aula da cidade de Nova York e via webinar.</p>

tudo o que você precisa fazer é escrever seu conteúdo no Editor de texto, adicionando suas tags conforme você avança ou depois de digitar a cópia.

aqui está uma explicação das tags mais comuns que você usará ao escrever HTML. Eles são o Título, lista, link, agrupamento e algumas tags diversas.

TAGS de TÍTULO

<h1></h1>

<h2></h2>

<h3></h3>

• existem também tags de cabeçalho h4, h5 e h6 que, na prática, raramente são usadas.
• Nunca use uma tag de cabeçalho com a finalidade de alterar o tamanho da fonte.

LIST TAGS

você pode criar 3 tipos de listas com HTML. OS 2 mais populares são listas ordenadas e não ordenadas.

uma lista não ordenada é usada quando a ordem dos itens não é importante.

<ul>

<li>flores</li>

<li>legumes</li>

<li>árvores</li>

</ul>

• flores
• legumes
• árvores

Uma lista ordenada é usado quando a ordem dos itens é relevante.

<ol>

<li>Califórnia</li>

<li>Texas</li>

<li>Flórida</li>

</ol>

1. Califórnia
2. Texas
3. Flórida

(neste exemplo, a ordem é relevante e determinado pelas maiores populações dos estados unidos.)

Nota: As listas também podem ser aninhadas para criar uma hierarquia de itens de lista. Isso é difícil de fazer ao usar o Editor Visual.

tag LINK

você pode transformar texto ou uma imagem em um link envolvendo o texto ou imagem dentro de qualquer tag âncora (link). Embora a sintaxe para criar um link seja sempre a mesma (<a href=”url”>link text</a >), existem 2 maneiras muito comuns de fazer isso.

Para um link para uma página do WordPress, o uso:

<a href=”http://domain.com/this-is-the-page-title”>link para uma página do WordPress</a>

Para um link para qualquer página ou recurso, não apenas uma página do WordPress, o uso:

<a href=”http://domain.com/about.html”>link para uma página HTML</a>

NOTA: na verdade, Há um terceiro caminho. Você pode usar a maneira especial como o WordPress cria links com a seguinte sintaxe:

<a href = ” índice.php?page_id = 356 ” > link para uma página em seu site</a

nesse caso, você precisará saber a página ou o ID da postagem da Página à qual está vinculando em seu site. (Cada página ou postagem TEM um número de identificação exclusivo).

agrupar TAGS

tecnicamente, não existe “agrupar tags”, mas é a melhor maneira de descrever um conjunto de tags HTML que contêm outros elementos. O objetivo dessas tags é descrever com mais precisão o significado do seu conteúdo.

Por exemplo, <cabeçalho> tag pode ser usada para definir a parte da página que contém as principais informações de como este:

<cabeçalho>

<h1>Um Líder de Linha de Título</h1>

<img src=”url do arquivo de imagem”>

<p>Um parágrafo de informações seguintes o título e a imagem que logicamente mantém juntos como um grupo de informações.</p>

</cabeçalho>

Aqui estão alguns muito comum o agrupamento de tags

<main>

<section>

<article>

<aside>

<header>

<footer>

<nav>

<div>

além da tag, você achará essas tags muito úteis ao trabalhar com o Editor de texto.

<img src="url of image file">

<br>

<!-- hidden code or info here -->

<blockquote> or <q>

embora essas tags o levem a um longo caminho, aqui estão alguns recursos para ajudá-lo.

● Você Só Precisa de 10 Tags de HTML (tutorial)
● Elemento HTML de Referência, em Ordem Alfa
● Elemento HTML de Referência

Regras

A beleza do HTML é a de que existem apenas algumas regras a seguir e são fáceis de lembrar.

* HTML não diferencia maiúsculas de minúsculas

maiúsculas, minúsculas ou mistas – escreva HTML da maneira que quiser. A prática comum é minúscula.

* para cada Tag aberta, deve haver uma tag fechada

há exceções a isso, mas para torná-la realmente fácil, adquira o hábito de fechar todas as tags abertas.

* as Tags são fechadas na ordem inversa em que são abertas dentro de um bloco

isso pode ser um pouco difícil de entender, então aqui está um exemplo.

<p>Aqui é um <forte>parágrafo <a href=”url aqui”>link</a></strong> dentro e uma parte do texto é enfatizada.</p>

Observe a ordem: <p><forte><um>….</a></strong></p>

* Alguns Elementos não Têm Uma Tag de Fechamento

Tags como <br> e <img> ter nenhuma tag de fecho, como não há nenhuma razão para um.

* use HTML corretamente e não estilize sua página

por exemplo, não use <br> tags quando você tiver uma lista. Ou não use< Table > tags para criar uma grade para layout.

a barra de ferramentas do editor de texto

porque acho eficiente escrever código no Editor de texto, geralmente não USO a barra de ferramentas. No entanto, se você está começando com HTML, você pode encontrar algumas das ferramentas úteis como uma maneira de ensinar-se algum HTML. Em última análise, você perceberá que há mais tags que você pode usar para marcar corretamente seu conteúdo do que o que a barra de ferramentas permite.

Plugins HTML

mais cedo ou mais tarde, você notará que, se criar um parágrafo no editor Visual, não verá uma tag <p> envolvendo sua cópia ao vê-la no Editor de texto. Não deixes que isso te incomode. O WordPress ainda gerará uma tag< p > quando a cópia aparecer em sua página.

se você está tendo este ou outros problemas com o seu código, você pode gostar de usar esses plugins.

sempre Edite em HTML

isso garante que, quando você for criar ou editar Página ou postar conteúdo, seu editor sempre será aberto como um Editor de texto e não como um Editor Visual. Isso pode ser muito útil, pois o WordPress pode remover suas tags em algumas circunstâncias em que o Editor Visual é usado.

Preserve HTML Editor Markup Plus

se você estiver tendo problemas com a remoção de tags, esta pode ser sua solução.

marcador de sintaxe do editor HTML

este é um plugin maravilhoso que transforma o editor de texto sem graça EM UMA cornucópia codificada por cores. Ele também pode mudar para um fundo preto e fontes maiores. É melhor usar este plugin com a opção de Tela cheia.

nota: eu não testei dois ou mais desses plugins ao mesmo tempo, então incompatibilidades poderiam existir.

como os códigos de acesso se encaixam na imagem

os códigos de acesso são o que muitos plug-ins usam para adicionar um formulário, Configurar colunas ou adicionar algum outro recurso a uma página ou postagem. É uma maneira fácil de adicionar código como HTML, javascript, CSS e PHP sem ter que saber nada sobre essas linguagens.

use códigos de acesso no Editor de texto, assim como você faria no Editor Visual.

para os não iniciados, os códigos de acesso podem parecer HTML, mas não são.

Você pode colar em um shortcode desta forma, se você estiver adicionando um formulário de contato, por exemplo, com o popular Formulário de Contato 7 plugin,

ou você pode usá-lo como este para um plugin,

Conteúdo para o lado esquerdo da coluna

Conteúdo para o lado direito da coluna

Que cria duas colunas em uma página.

Que shortcode parece HTML com um abrir e fechar a tag, mas não é

Adicionando Estilo CSS Usando O Editor de Texto

Você pode fornecer CSS propriedades de estilo para o conteúdo que você adicionar no Editor de Texto. Isso não pode ser feito com o Editor Visual padrão.

com o editor de texto, isso pode ser feito de duas maneiras.

uma maneira é adicionar um ID ou um atributo de classe a um elemento HTML como neste exemplo:

<P id= “lead” >este é o parágrafo lead no meu post.< / p>

então, no seu estilo.arquivo css você adicionaria as propriedades de estilo para # lead. Talvez algo parecido com isso:

#chumbo

{font-weight:bold;

” text-align:center;

color:#f00;}

A segunda maneira é adicionar estilo inline. (No entanto, a melhor abordagem é manter seu HTML e CSS separados, como no cenário acima.) Você pode adicionar estilo embutido como este:

<p style = “font-family: arial, helvetica, sans-serif” >a fonte para este parágrafo é Arial.</p>

nota: isso substituiria qualquer regra de estilo de família de fontes para este parágrafo que possa estar presente em um arquivo externo ou dentro do contêiner <head> da página.

conclusão

o Editor de texto lhe dará controle total sobre como você deseja formatar sua página ou postar conteúdo. Você pode usar qualquer tag HTML, não apenas aqueles na barra de ferramentas do editor de texto. O resultado será um conteúdo mais fácil de ler e entender por pessoas e aranhas de mecanismos de pesquisa. Pode levar um pouco de tempo para se acostumar a escrever HTML, mas no final, você achará muito satisfatório.

autor Bio

Bud Kraus [email protected] é um veterano instrutor WordPress na cidade de Nova York e ensina WordPress para indivíduos e grupos via webinar. Ele também trabalha em sites para pequenas empresas. http://joyofwp.com