WPstress.com: WordPress inicial (3/3)

Formação inicial para novos utilizadores WordPress:
– temas e plugins
– plugins essenciais
– notas breves sobre SEO
– otimização
– child-themes

Transcript

1. 
 Nas partes anteriores vimos: ! O que é o WordPress (e o Open Source…) A diferença entre wordpress.com e wordpress.org O que podemos fazer com o WordPress: temas e plugins Como é que se instala o WordPress e se aloja um site Algumas regras de segurança na instalação
   A administração do WordPress
   O que são páginas, artigos, categorias…
   Como criar conteúdo e carregar imagens
2. 
 Nesta parte vamos: ! Conhecer temas e plugins e como os escolher Plugins essenciais:
   segurança, desempenho, etc.
   Otimizar Editar temas Criar temas dependentes (child themes)
3. O local indicado para começar a procurar temas e plugins é o repositório do WordPress.org ! TEMAS – http:/ /wordpress.org/extend/themes/ PLUGINS – http:/ /wordpress.org/extend/plugins/
4. NUNCA NUNCA NUNCA instalar temas ou plugins num site ao vivo 
 sem ter uma cópia de segurança da base de dados.
5. Ao escolher um plugin ou um tema do repositório devemos ter em atenção, além das funcionalidades: ! Quando foi a última atualização (data) Quantas vezes foi descarregado Avaliações feitas pelos utilizadores (não apenas as estrelas, ler também os comentários) Últimas entradas de suporte técnico 
 (e frequência de resposta…)
6. Com tantos plugins disponíveis é fácil instalarmos 
 sem termos em conta o número. ! Alguns plugins exigem muitos recursos do servidor 
 e podem tornar o nosso site muito lento.
7. O ideal é pensar na funcionalidade que se pretende antes de começar a procurar. ! E sempre que possível, instalar o mínimo de plugins.
8. Coleções de plugins que podem ser úteis: ! https:/ /wpcore.com/collections/ 8BiQaK42mVhCFgz0BG2O ! https:/ /wpcore.com/collections/ FvdZwPS1pLPRMThWxCVX ! https:/ /wpcore.com/collections/ wlUtCuOi5tMfL5mqV7f2
9. Um site com curadoria 
 e avaliação de plugins: ! http:/ /tidyrepo.com/ ! ! Um bom exercício pode ser criar um site de testes onde podemos brincar com os plugins 
 e as suas diferentes funcionalidades.
10. Exemplo de plugins para cópias de segurança 
 e para migração de site WordPress: ! WP Sync DB – plugin para sincronização das bases 
 de dados de duas instalações, disponível no GitHub ! UpdraftPlus – plugin para backup e migração, disponível no repositório wordpress.org/plugins ! BackupBuddy – solução premium para backup 
 e reposição automática
11. Como medir
    o desempenho do site?
    ! A experiência de utilização e até a classificação
    em motores de pesquisa são influenciadas
    pelo desempenho do site, sobretudo
    a velocidade de carregamento.
12. http:/ /gtmetrix.com
    ! É uma ferramenta acessível que carrega o site
    e faz um relatório das áreas em que podemos melhorar a experiência de utilização.
13. Otimização de imagens
    ! Devemos otimizar as imagens antes de as carregar, colocando-as num formato adequado, o tamanho máximo necessário no site, e passá-las por uma aplicação de otimização:
    ! • https:/ /imageoptim.com/pt.html (mac) • http:/ /luci.criosweb.ro/riot/ • http:/ /caesium.sourceforge.net/
14. Exemplo de plugins para medir o desempenho 
 ou para otimização de sites WordPress: ! P3 – plugin para avaliar o desempenho 
 do site e dos plugins ativos ! Autoptimize – plugin para otimização 
 do carregamento dos vários scripts e folhas de estilos ! WP Fast Cache – plugin para implementação simples de cache do site (só no fim do desenvolvimento!)
15. O WordPress é uma das plataformas mais amigáveis para os motores de pesquisa, mesmo sem plugins para SEO. Como é que podemos melhorar? ! Ligações permanentes “amigáveis”, 
 i.e., definidas para “título do artigo” (%postname%) ! Eliminar “stop words” (de, do, a, as…) dos URL ! Palavras-chave nos títulos, URL e texto ! Otimizar imagens: tamanho, nome, descrição e texto alternativo (bónus de pontos pela acessibilidade!)
16. Ligações permanentes
    ! Ligações permanentes (permalinks) referem-se ao tipo de URL criado pelo WordPress
    para cada artigo ou página.
    ! Pretty permalinks (URL bonitinhos) são úteis para
    o utilizador mas também para os motores de pesquisa.
17. Ligações permanentes
    ! Os permalinks podem ser alterados em:
    Opções > Ligações permanentes
    ! A definição mais “amigável” será optar por
    nome do artigo
18. Temas dependentes (child themes)
    ! Temas dependentes são a forma mais segura 
 e aconselhável de editar temas WordPress. ! Os child themes permitem usar as funcionalidades e design do parent theme (tema principal), sobre as quais podemos fazer alterações, sem correr o risco de estragar o trema principal ou perder essas alterações quando há uma actualização do tema.
19. 1. Criar uma pasta com o nome do child theme, na pasta themes 2. Criar um ficheiro em branco style.css 3. Nesse ficheiro inserir o código: ! /* Theme Name: Nome do tema Theme URI: http://example.com/twenty-fourteen-child/ Description: Descrição do tema que é visível na administração do WordPress Author: Nome do Autor Author URI: http://example.com Template: twentyfourteen [refere-se ao nome EXATO da pasta do tema principal] Version: 1.0.0 Tags: light, dark, two-columns, right-sidebar, responsive-layout,
20. 4. Criar um ficheiro em branco functions.php 
 na pasta do child theme 5. Nesse ficheiro inserir o código: ! <?php ! add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style' ); function enqueue_parent_theme_style() { wp_enqueue_style( 'parent-style', get_template_directory_uri().'/ style.css' ); } ! Mais em: http:/ /codex.wordpress.org/Child_Themes
21. Os estilos que colocamos na folha CSS do child theme (style.css) sobrepõem-se aos do tema principal. Dessa forma, usando uma ferramenta para identificar os estilos em utilização, podemos 
 alterá-los e personalizar a apresentação do site. ! Se copiarmos do tema principal um ficheiro PHP que controle a apresentação de conteúdo, podemos editá-lo e adaptá-lo às nossas necessidades. Esse ficheiro também vai sobrepor-se ao do parent theme.
22. Ferramentas: ! Plugin What Template, para identificarmos que template de páginas está a ser usado. ! Extensão Firebug para o browser, para identificarmos partes do código que são necessárias alterar. ! Editor de HTML como o Brackets (open source). ! Em opção, um editor de CSS como o CSS Edit.
23. 
 Exercícios: ! 1. Procurar e carregar um tema (p.e., que seja responsive)
    2. Ativar o novo tema
    3. Procurar e carregar o plugin
    WordPress SEO do Yoast
    4. Adicionar um widget de texto
    a uma barra lateral com o texto:
    Editar conteúdo no WordPress é uma tarefa divertida.