Apresentação sobre os fundamentos da plataforma WordPress, passando dos fundamentos das tecnologias web envolvidas, arquitetura da plataforma e metodologia e técnicas de desenvolvimento de sites profissionais com a plataforma.
6. Requisitos de uma hospedagem para WordPress:
● Linux
● Suporte a PHP 5 ou superior
● Banco de dados MySQL
● Servidor Apache ou NGINX
7. O que é Front-end?
(Também chamado de client side, ou apenas client)
8. HTML - Hypertext Markup Language
<!DOCTYPE html>
<html>
<head><title>Meu Site</title><head>
<body><p>Bem vindo ao meu site!</p></body>
</html>
Tags: <h1>Título</h1>, <p>Parágrafo</p>,
<header>Cabeçalho</header>
9. CSS - Cascading Stylesheet
p {
font-size: 12px;
color: #00AAAA;
}
No CSS são definidos atributos como cores, fontes, formas, bordas,
espaçamentos e disposição dos elementos.
10. JavaScript
function hello() {
alert("Bem-vindo à Wikipédia");
}
document.getElementById("hello").addEv
entListener("click", hello, false);
Com ela é possível a aplicação de efeitos, realização de operações
matemáticas, modificações de elementos do HTML e CSS.
11. O que é Back-end?
(Também chamado de server side, ou apenas server)
12. PHP - Hypertext Preprocessor
<?php
// Number comparison
$a="C";
$b="X";
if ($a<$b)
{
echo $a."is smaller than".$b;
}
// Result : C is smaller than X
?>
Com ela é possível tornar as páginas HTML dinâmicas, gerando
conteúdo no servidor, realizando consultas ao banco de dados, e uma
série de outras tarefas antes de enviar o conteúdo HTML ao client.
13. Databases
Os bancos de dados são onde as informações são
armazenadas. No caso de um site e mais
especificamente do WordPress, todo o conteúdo do
site, posts, links, dados de usuários, são armazenados
no banco de dados. O banco de dados utilizado pelo
WordPress é o: MySQL
15. A sigla CMS significa Content Management System
(Sistema Gerenciador de Conteúdo). Sendo assim, o
seu propósito é o de gerenciar conteúdo, seja ele
texto, imagem, vídeos, produtos, etc., auxiliando no
desenvolvimento de sites dinâmicos. Principais CMS’s:
• Joomla!
• Drupal
• WordPress
17. • O WordPress é a plataforma de publicação de conteúdo mais
popular do mundo, sendo usada por 18,9% dos websites.
• Open Source e gratuita
• Interface amigável
• A famosa instalação de 5 minutos
• Comunidade ampla e ativa
• Traduções para diversos idiomas
• Diversos plugins e temas disponíveis (pagos e gratuitos)
23. Todo conteúdo inserido no painel do
WordPress é um post.
• Post (Post Type: 'post')
• Page (Post Type: 'page')
• Attachment (Post Type: 'attachment')
• Revision (Post Type: 'revision')
• Navigation menu (Post Type: 'nav_menu_item')
• Custom posts types
24.
25. Todo conteúdo (post) possui meta
dados e metafields
Os meta dados são informações extras sobre os
posts, como:
• Data de postagem
• Autor
• Imagem destacada
• Custom fields
26.
27. Os conteúdos (posts) podem ser
organizados por taxonomias
As taxonomias são formas de organizar e categorizar
os conteúdos.
• Categorias
• Tags
• Custom taxonomy (Altura, Peso, Cargo, Material,...)
33. É a regra que define qual template do
tema será chamado para exibir uma
página do site.
34.
35. O Loop é o principal processo do WP.
É o código responsável pela exibição de
posts. Ele verifica se há posts disponíveis
para exibição, seleciona os posts certos
baseado em uma query e mostra o
conteúdo de cada um, se repetindo até
que a lista acabe.
http://codex.wordpress.org/pt-br:O_Loop
http://code.tutsplus.com/tutorials/a-beginners-guide-to-the-wordpress-loop--wp-20241
36. O Loop pode chamar uma
lista de itens, como no caso
das páginas de arquivos, ou
apenas um único post, como
no caso das páginas
singulares.
37. O Loop principal vai
exibir X posts (do tipo
“post”), do mais recente
para o mais antigo.
X = número definido em Configurações > Leitura.
Inicialmente seu valor é 10.
39. <?php
if ( have_posts() ) :
while ( have_posts() ) :
the_post(); ?>
[template tags – tags para serem chamadas dentro
do loop, para exbir o conteúdo do post atual]
<?php the_title() ?>
<?php the_content() ?>
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your
criteria.'); ?></p>
<?php endif; ?>
40. O loop encontrou
vários posts do tipo
padrão.
E para cada um deles
está exibindo sua
imagem destacada,
título e resumo do
conteúdo.
41. O loop encontrou
apenas um post
correspondente: a
página “Empresa”.
E puxou o título e
conteúdo deste
post.
42. Os Loops secundários vão
exibir posts de acordo com
os critérios de uma Query
personalizada.
43. Uma Query é um código que
define critérios para uma
consulta ao banco de dados.
Estes critérios podem ser qualquer propriedade dos
posts, como tipo do post, meta dados (data, autor,
custom fields) e taxonomias (categoria, tags, custom
taxonomies), entre outros.
44. Exemplo:
Quero 6 posts do tipo Produtos
(custom post type que eu criei), na
ordem descendente alfabética, que
pertençam à categoria “Vestuário” e
tenham sido publicados em 2013.
48. Para desenvolver um tema
temos que pensar, desde o
inicio em:
• Padronização → limitar variações
• Modularidade → reaproveitamento
• Simplificação → redução
• Otimização → performance
53. Define que elementos, textos,
imagens, funcionalidades, etc.
haverá em cada página do site.
54. • Header
– Logo
– Rastreie seu veículo - Login do
Sistema
– Menu Principal
– Telefone da central de vendas
– Telefone da central de
rastreamento
• Sidebar Principal
– Serviços
– Últimos posts
• Footer
– Dados de contato AC Global
– Crédito Haste Design
• Home
– Boxes com chamadas para as
páginas
• Central 24 horas,
• Assistência Técnica,
• Posicionamento,
• Pronta Resposta
– Boxes de Serviços
– Jumbotron + Call to Action
• Páginas comuns
– Texto
– Imagem destacada
– Sidebar Principal
• Single Serviços
– Descrição
– Benefícios (antigo “Serviços”)
– Contrate já!
• Contato
– Telefone vendas
– Telefone rastreamento
– Atendimento Online
– Formulário de contato
55. A estrutura base do layout,
definindo o posicionamento,
escala, alinhamento e hierarquia
dos elementos nas páginas.