Read the Docs Documentation

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


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

https://codex.wordpress.org/pt-br:Instalando_o_WordPress


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

http://www.apachefriends.org/pt_br/xampp-windows.html

http://www.profissionaisti.com.br/2012/03/instalando-apache-php-mysql-no-windows-com-wamp/

http://www.profissionaisti.com.br/2012/04/instalando-apache-php-mysql-no-mac-os-com-mamp/

http://www.profissionaisti.com.br/2012/03/instalando-apache-php-mysql-no-windows-com-wamp/


• 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


– 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


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


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


• 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


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


– 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




• 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


• 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




• 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




Cada item pode ser cutsomizado, como ícone por exemplo, selecionar a página, abrir em umanova aba.

Seção: Video Lightbox/Showreel




• Seção com texto que aparecerá sobre o video

• Video url

• Imagem de Background.

Seção: Galeria




8.4. Seção: Serviços 19


• 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.




• 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




• Título,

• Subtítulo,

• Descrição,

• Configuração do Layout: 4, 3 ou 2 colunas.



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




• 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

CHAPTER 9

CSS Adicional

Espaço reservado para caso quisermos adicionar nosso próprio estilo, requerindo um pouco de esperiênciacom CSS.

23


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


• 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


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


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


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

https://www.linkedin.com/in/fabianarroliveira/

https://github.com/faahbih/

mailto:[email protected]

Read the Docs Documentation

Documents

Transcript of Read the Docs Documentation