Read the Docs DocumentationRelease 1.0
Eric Holscher, Charlie Leifer, Bobby Grace
Apr 05, 2018
Índice
1 Requisitos 3
2 Instalação 52.1 Modo local . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52.2 WordPress local para Site Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
3 Apresentação do Tema 7
4 Título, Subtítulo e Logo 9
5 Opções do tema 11
6 Menus 13
7 Página Inicial Estática 15
8 Ordem e Estilo da seção 178.1 Seção: Hero . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178.2 Seção: Features . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188.3 Seção: About . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188.4 Seção: Serviços . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198.5 Seção: Video Lightbox/Showreel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198.6 Seção: Galeria . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198.7 Seção: Contador . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208.8 Seção: Equipe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208.9 Seção: Notíciais . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218.10 Seção: Contato . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
9 CSS Adicional 23
10 Páginas 2510.1 Criar página . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
11 Posts 27
12 Plugins 29
13 Links 31
i
14 Author 33
ii
Read the Docs Documentation, Release 1.0
• Este tutorial apresenta passo a passo da instalação do WordPress em modo localhost, hospedado e manutençãobásica.
Índice 1
Read the Docs Documentation, Release 1.0
2 Índice
CHAPTER 1
Requisitos
Para utilizar do WordPress recomenda-se que a sua hospedagem suporte:
• Servidor baseado em UNIX/Linux1
• PHP na versão 7 ou superior;
• MySQL na versão 5.6 ou superior OU MariaDB na versão 10.0 ou superior;
• Suporte a HTTPS.1Servidores Microsoft funcionam com algumas limitações e/ou dependência de recursos específicos porparte do servidor. referência: Site do WordPress.
3
Read the Docs Documentation, Release 1.0
4 Chapter 1. Requisitos
CHAPTER 2
Instalação
Modo local
É interessante primeiro testar localmente, sem ter que enviá-las para um servidor remoto toda a vez, paraisso, você pode instalar o WordPress localmente.
Existem aplicativos que podemos baixar e configurar para executar um web site em nosso próprio com-putador.
Esses programas servem para criar servidores independente da plataforma e consistem principalmente nabase de dados MySQL, o servidor web Apache e os interpretadores para linguagens de script: PHP e Perl,além do WordPress, você poderá instalar qualquer software que use estas linguagens.
• XAMPP.
• WAMP.
• MAMP (para Mac).
no meu caso, utilizei o WAMP, pois com alguns poucos passos, você consegue testar seu site.
Passo a passo:
• faça o download do WAMP.
• configure o arquivo php.ini no diretório: C:wamp64\bin\apache\apache2.4.27\bin(onde normalmente fica instalado)
• Abra o arquivo php.ini no bloco de notas ou qlqr outro editor
– edite as variáveis: memory_limit = 128M e upload_max_sizing = 2M para 750M
– salvar
• Start o Wampserver,
• Digite no browser localhost e aperte enter,
• Baixe o zip WordPress no site oficial em seguida recorte e cole no diretório: C:wamp64www
5
Read the Docs Documentation, Release 1.0
• Extraia os arquivos baixados dentro do diretorio www
• Renomeie de acordo com o nome do seu site,
• Acesse localhost/phpmyadmin/
• Crie um banco de dados (preferência com o mesmo nome que do seu site)
• Acesse pelo o browser localhost/nome da pasta do seu site/
• Será direcionado para página de instalação do WordPress
– digite o nome do banco de dados criado anteriormente
– digite o usuario: por padrão é root
– o campo de senha: deixe em branco
– servidor do bd: localhost
– prefixo da tabela: wp
• Clique em enviar, depois instalar, pronto!
Depois disso basta escolher usuário, senha e email para poder acessar o painel de acesso do WordPress.
WordPress local para Site Web
Após ter criado um site local, é possível importá-lo para um site web, os passos são os mesmo de importaro WordPress entre servidores:
Instale o WordPress no seu servidor web, pode ser manualmente ou através das ferramentas do serviço dehospedagem, geralmente você pode escolher entre instalar na raiz do site ou em uma pasta blog ou site.
Usando um cliente FTP ou o gerenciador de arquivos do serviço de hospedagem, exclua a pasta wp-content da instalação web e em seguida envie a mesma pasta da sua instalação local. Isso vai manter seutema e plugins.
No servidor web, crie um banco de dados vazio com o mesmo nome e senha do banco de dados local,estas informções ficam no arquivo wp-config.php.
Exporte os dados do banco de dados local, de preferência em formato .zip.
Importe o arquivo .zip em seu banco de dados web.
Acesse a tabela com sufixo </tt>_options</tt> e mude os URLs em siteurl e home para o URL de seusite web.
Tente acessar seu site e observe se consegue acessar os links normamente no site.
Note: Há sites de hospedagem que já possuem wordpress configurado, basta apenas instalá-lo e seguiros passos que o site disponibiliza.
6 Chapter 2. Instalação
CHAPTER 3
Apresentação do Tema
Após feito a instalação e ter logado no painel do wordpress, ele virá por padrão um tema.
Para alterar, basta ir em Aparência > Temas > escolher uma opção de tema ou importar.
Neste tutorial irei apresentar a manutenção básica usando o tema OnePress.
• Pesquise OnePress, instale e ative.
• Em seguida, depois de ativo, clique em Tema OnePress > One click demo import > Start Import
– Ele irá importar o tema por completo, só aguardar até o final da importação.
Depois da importação, podemos personalizar o tema de acordo com o site ou blog que pretendemosdesenvolver.
Para isso devemos conhecer melhor os recursos que possuímos, neste caso o do OnePress:
• Vá em Aparência > Personalizar, feito isso o site será direcionado para outra tela.
• Aparecerá no lado esquerdo um menu com itens que podemos modificar/personalizar, neste caso:
1. Título do site, subtítulo e logo
2. Opções do tema
3. Menus
4. Widgets
5. Página inicial estática
6. Ordem e estilo da seção
– Seção: Hero
– Seção: Features
– Seção: About
– Seção: Services
7
Read the Docs Documentation, Release 1.0
– Seção: Showreel
– Seção: Gallery
– Seção: Team
– Seção: News
– Seção: Contact
– Seção: Shop
7. CSS adicional
Falaremos mais detalhamente a seguir.
8 Chapter 3. Apresentação do Tema
CHAPTER 4
Título, Subtítulo e Logo
Neste módulo podemos:
• Adicionar/alterar logo se houver,
• Título do site,
• Descrição,
• Ocultar o título do site e a Descrição,
• Adicionar ícone do site para que apareça na barra de navegação juntamente com o título.
9
Read the Docs Documentation, Release 1.0
10 Chapter 4. Título, Subtítulo e Logo
CHAPTER 5
Opções do tema
Vá em aparência > personalizar > opções do tema
Aparecerá no lado esquerdo um menu com as opções:
• Padrão,
• Cores do site,
• Header,
• Perfis das redes sociais,
• Boletim Informativo,
• Página do post.
Em Padrão:
• Nesta opção, pode ser alterado o estilo do site, com ou sem barra lateral, cabeçalho fixo, etc.
Em Cores do site:
• Aqui você pode alterar a cor principal, rodapé, fundo das informações de rodapé;
Header
• Possível editar cor de fundo do cabeçalho, título, link, botão etc. além de outros recursos.
Perfis das redes sociais
• Opção de ocultar ou manter redes sociais aparecendo no site.
Boletim Informativo
• Também com opção de ocultar ou mostrar no rodapé do site.
Página do post
• Opção de mostrar metadados em post
• Mostrar ou ocultar imagem destacada na página inicial do site.
11
Read the Docs Documentation, Release 1.0
12 Chapter 5. Opções do tema
CHAPTER 6
Menus
Neste módulo, por padrão, no tema OnePress, aparece duas opções:
• Menu locations
• Primary
Note: Não precisamos nos preocupar com o primeiro item apenas com o segundo.
No menu primary aparecerá todos itens que ficam no menu ao lado do logo.
• Features
• About
• Services
• Showreel
• Gallery
• Team
• News
• Contact
• Shop
Note: No momento em que importamos o tema onepress, pode acontecer de duplicar os itens,basta excluir um de cada.
Clicando em cada um deles, é possível customizar:
• URL
• Título
13
Read the Docs Documentation, Release 1.0
• Abrir em nova aba
• Título do atributo
• CSS
• Descrição
• etc.
• além de poder remover, reodenar.
14 Chapter 6. Menus
CHAPTER 7
Página Inicial Estática
O tema OnePress suporta uma páginal inicial estática, podemos definir aqui se a página inicial mostraráuma página estática ou posts recentes.
Aparece dois campos já definidos:
• Página Inicial: Home
• Página de posts: News
Neste módulo não necessitamos alterar.
15
Read the Docs Documentation, Release 1.0
16 Chapter 7. Página Inicial Estática
CHAPTER 8
Ordem e Estilo da seção
Neste módulo, para este tema, foi dividido por seções que formam a página principal do site, que são:
Seção: Hero
Parte superior do site que contém:
• Hero Settings
Oferece a opção de ocultar seção,
Section ID: nome da seção,
Outras configurações como Padding Top, Padding Bottom ( configurados por padrão )
Estilo de animação do texto central, sendo possível alterá-lo ( configurado com flipInX )
Tempo do texto da e da animação
Tempo de transição do slider.
• Hero Background Media
Opção de alteração das imagens de Background.
• Hero Content Layout
Em display layout apresenta duas opção de exibição da animação, neste caso, está configuradoLayout 1.
Logo abaixo é possível inserir Texto em tamanho grande ou pequeno, basta clicar na opção dese-jada que ele aparecerá uma caixa de texto para edição, sendo possível alternar em modo Visual ouTexto (HTML).
Em seguida podemos configurar dois botões caso necessário:
– Texto do botão
– Link do botão
17
Read the Docs Documentation, Release 1.0
– Estilo do botão (Primary, Secondary, Success, Info etc.)
Seção: Features
Em Section Settings:
• Oferece a opção de ocultar seção,
• Section ID: nome do seção,
• Título,
• Subtítulo,
• Descrição,
• Configuração do Layout: 4, 3, 2 colunas.
Em Section Content por padrão do Tema, aparece 4 itens:
• Responsive Design
• Parallax Effect
• WooCommerce
• Content Blocks
Sendo que cada um dos itens acima oferecem opção de customização de:
• Título,
• Custom icon: opção de alterar ícone ou imagem,
• Icon,
• Descrição,
• Custom link.
Seção: About
Em Section Settings:
• Oferece a opção de ocultar seção,
• Section ID: nome do seção,
• Título,
• Subtítulo,
• Descrição.
Em Section Content:
Aparece por padrão 2 itens:
• Our History
18 Chapter 8. Ordem e Estilo da seção
Read the Docs Documentation, Release 1.0
• Our Vision
Neste caso, podemos alterar estes dois conteúdos, porém é necessário criar uma página con-tendo algum conteúdo, para conseguir adicionar pelo botão “Add an item”
Logo abaixo aparece o item Item content source, onde tem a opção de deixar o conteúdoresumido ou por completo.
Seção: Serviços
Em Section Settings:
• Oferece a opção de ocultar seção,
• Section ID: nome do seção,
• Título,
• Subtítulo,
• Descrição,
• Configuração do Layout: 4, 3, 2 ou 1 coluna(s).
Em Section Content:
Há 4 itens:
• Service Title #1
• Service Title #2
• Service Title #3
• Service Title #4
Cada item pode ser cutsomizado, como ícone por exemplo, selecionar a página, abrir em umanova aba.
Seção: Video Lightbox/Showreel
Em Section Settings:
• Oferece a opção de ocultar seção,
• Section ID: nome do seção,
• Seção com texto que aparecerá sobre o video
• Video url
• Imagem de Background.
Seção: Galeria
Em Section Settings:
• Oferece a opção de ocultar seção,
• Section ID: nome do seção,
8.4. Seção: Serviços 19
Read the Docs Documentation, Release 1.0
• Título,
• Subtítulo,
• Descrição.
Em Section Content:
Primeiro item seleciona a página da Galeria de Imagens,
Em Layout, contém opção de Full Width e padrão (dentro do container)
Display: opções de Grid, Carousel, Slider, Justified e Masonry.
Item Spacing por padrão: 2
Número de colunas: opção de 1 a 6 colunas.
Número de itens: 10 (por padrão)
Opção de campo para url/diretório
Opção de campo de texto que será exibido como botão.
Seção: Contador
Seção onde mostram os dados estatísticos de seus projetos etc.
Em Section Settings:
• Oferece a opção de ocultar seção,
• Section ID: nome do seção,
• Título,
• Subtítulo,
• Descrição.
Em Section Content:
Há 4 itens: Projects completed, positive feedback, pizzas ordered e average cost per hour.Lembrando que é possível alterar Título e os demais atributos.
Note: Está seção não aparece no menu primary, mas sim na página inicial do site.
Seção: Equipe
Em Section Settings:
• Oferece a opção de ocultar seção,
• Section ID: nome do seção,
• Título,
• Subtítulo,
• Descrição,
• Configuração do Layout: 4, 3 ou 2 colunas.
20 Chapter 8. Ordem e Estilo da seção
Read the Docs Documentation, Release 1.0
Em Section Content:
Nesta seção aparecem 4 itens, sendo possível a customização do User Media (imagem dousuário) e Custom Link (url do portfólio, website etc.).
Seção: Notíciais
Nesta seção podemos configurar a opção para ocultar a seção na página inicial, modificar o ID da seção,Título, Subtítulo, Descrição, configurar o número de posts que aparecerá na página, link do botão e otexto do botão.
Seção: Contato
Em Section Settings:
• Oferece a opção de ocultar seção,
• Section ID: nome do seção,
• Título,
• Subtítulo,
• Descrição.
Em Section Content:
Nesta seção haverá um campo de configuração do formulário de contato que está pre-definido como [contact-form-7 title="Frontpage contact"], tendo comoopção para ocultá-lo.
Há um campo de Texto de contato, basta clicar em cima do campo para poder editá-lo.
Título da caixa de contato, Endereço, Telefone, E-mail, Fax.
O formulário de contato pode ser editado também, para isso vá na pagina inicial do wordpress, clique emcontato, haverá 3 itens, basta editar um dos itens, salvar e copiar o shortcode e colar na seção de contato.
8.9. Seção: Notíciais 21
Read the Docs Documentation, Release 1.0
22 Chapter 8. Ordem e Estilo da seção
CHAPTER 9
CSS Adicional
Espaço reservado para caso quisermos adicionar nosso próprio estilo, requerindo um pouco de esperiênciacom CSS.
23
Read the Docs Documentation, Release 1.0
24 Chapter 9. CSS Adicional
CHAPTER 10
Páginas
O tema OnePress disponibiliza de páginas predefinadas como podemos ver se formos em painel do word-press > páginas > todas as páginas:
Cart, Checkout, Gallery, Home (Página principal), My Account, News (Página de posts) etc.
Aqui devemos tomar alguns cuidados, pois existem páginas que não são possíveis de editarapenas usando o editor de texto.
Exemplo, Home:
Quando clicamos na página da Home, não conseguiremos ver seu conteúdo, maspor quê? Por que como ela é a página inicial do nosso site, ela composta pordiversas seções, então não conseguimos apenas editar no modo de texto e simeditar cada seção (Hero, Services, News, Contact etc.).
Outro exemplo é a Gallery:
Quando acessamos a página da Galeria, possivelmente veremos um short-code como este [gallery ids="1246,36,35,34,1179,1247,1248,1249,15,1250"]
Para podermos ver as imagens que contemplam a galeria, basta alternar o modode texto para visual (canto direito do editor). Aí é só clicar em cima da galeria eeditar as imagens normalmente.
Haverá páginas que conseguiremos editar normalmente no editor, por exemplo a página pre-definada pelo tema OnePress Sample Page, sendo possível alternar entre modo visual emodo de texto (modo html).
Criar página
Para criar uma página, basta ir em Páginas > Adicionar nova:
• Há os campos de Título (lembre-se que o título provavelmente será o nome da url) e do próprioeditor de texto.
25
Read the Docs Documentation, Release 1.0
• Há o botão de Adicionar mídia e nela contém outros itens como: criar galeria, criar lista de repro-dução de áudio, criar lista de reprodução de vídeo, Imagem destacada e inserir a partir do URL.
No lado direito aparece Publicar com as informações do:
• Status: Rascunho, Revisão Pendente ...
• Visibilidade: Público, Protegido por senha, Privado.
• Publicar imediatamente: campos de data e hora.
Logo abaixo aparece Atributos da página:
• Mãe: se está ou não vinculada a outra página;
• Modelo: Modelo padrão, barra lateral na esquerda, largura completa, página inicial.
Por fim tem Imagem destacada
• Possível definir uma imagem de destaque caso seja necessário.
26 Chapter 10. Páginas
CHAPTER 11
Posts
Em painel do wordpress, há o item Posts, onde existem alguns predefinidos por padrão.
Lembra basicamente uma página, porém com algumas diferenças como:
• Categorias: predefinadas por padrão, mais usadas e adicionar nova categoria.
• Tags: adicionar novas tags
27
Read the Docs Documentation, Release 1.0
28 Chapter 11. Posts
CHAPTER 12
Plugins
Há uma lista de Plugins que já vem instalado, basta ativar conforme a necessidade de uso.
Para adicionar, clique em adicionar novo, a página irá carregar plugins em destaque, mas há opção dosmais populares, recomendados, favoritos, pesquisar o plugin ou fazer upload do plugin.
29
Read the Docs Documentation, Release 1.0
30 Chapter 12. Plugins
CHAPTER 13
Links
Antes de mais nada, precisamos definir o esboço do nosso site, ou seja, que tipo de site (pessoal, comercial,vendas etc.), depois definir o conteúdo, como será distribuído este conteúdo, e por último mas o maisimportante, os links.
Através dos links que conseguiremos direcionar nossos conteúdos.
A princípio, ir em aparência > personalizar ** > **menus > primary
• Os links do menu estão configurados como link personalizado
– se clicarmos por exemplo em Features a url apresentada é https://demos.famethemes.com/onepress/#features por padrão.
31
Read the Docs Documentation, Release 1.0
32 Chapter 13. Links
CHAPTER 14
Author
Este tutorial foi preparado por Fabiana Rodrigues Rolim de Oliveira
Versão: 0.0.1
Social Networks
Linkedin | Github
Contato
email: [email protected]
33