Workshop Web e WordPress

Fluxo de Dados:
Client ←→ Internet ←→ Server

Domínio
É o enderço pelo qual o site será acessado pela internet.
Entidade responsável (domínios br): registro.br

Hospedagem
Computador servidor.
Hospedagens recomendadas que suportam WordPress:
● Hostgator
● BlueHost
● DreamHost

Requisitos de uma hospedagem para WordPress:
● Linux
● Suporte a PHP 5 ou superior
● Banco de dados MySQL
● Servidor Apache ou NGINX

O que é Front-end?
(Também chamado de client side, ou apenas client)

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>

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.

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.

O que é Back-end?
(Também chamado de server side, ou apenas server)

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.

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

• Site Institucional
• Hotsite
• Portal
• Sites Sociais
• e-Commerce

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

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

• Conteúdo
– Páginas
– Posts
– Taxonomias
– Custom posts types
– Custom taxonomies
• Aparência e Funcionalidades
– Temas
– Plugins

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

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

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,...)

wordpress.zip
/ wp-admin
/ wp-includes
/ wp-content
/ themes
/ meu_tema
/ plugins
/ meu_plugin
/ uploads
/ languages

É um conjunto de arquivos,
responsáveis pela exibição
e funcionalidades do front
e back-end do site em
WordPress.

/*
Theme Name: Haste Design
Theme URI: http://www.hastedesign.com.br/
Description: Our custom theme.
Author: Haste Design
Author URI: http://www.hastedesign.com.br/
Version: 2.2.0
Tags: gray, theme-options, translation-ready
License: GNU General Public License v2
License URI: http://www.gnu.org/
Text Domain: haste
*/
body {
background: #00ff00;
}
.my-class {
padding: 20px;
}
#content {
color: #fff;
}
wp-content/themes/meutema
/images
/js
/fonts
/languages
style.css
index.php
header.php
footer.php
sidebar.php
comments.php
archive.php
single.php
search.php
404.php
functions.php
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Aenean et nisl urna. Suspendisse mi dolor,
viverra eu sapien id, imperdiet vehicula arcu.
Aenean fermentum convallis orci, ac auctor
erat rhoncus vel. Proin non odio vitae diam
vehicula consequat blandit vitae ligula.
Aenean congue pharetra tortor ut blandit.
Aenean bibendum ante in hendrerit varius.
Comentários
• Donec quis odio vel augue gravida
venenatis. Nam adipiscing arcu sapien,
eu dignissim tortor elementum .

<?php get_header(); ?>
<h2>Error 404 - Not Found</h2>
<p>Talvez a busca possa ajudar:</p>
<?php get_search_form(); ?>
<?php get_template_part(‘content’,‘404’); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

É a regra que define qual template do
tema será chamado para exibir uma
página do site.

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

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.

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.

O Loop principal
também vai exibir o
conteúdo de posts
singulares.

<?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; ?>

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.

O loop encontrou
apenas um post
correspondente: a
página “Empresa”.
E puxou o título e
conteúdo deste
post.

Os Loops secundários vão
exibir posts de acordo com
os critérios de uma Query
personalizada.

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.

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.

Exemplo:
<?php
$query = new WP_Query(
array (
'orderby' => 'title’,
'order' => 'DESC’,
'post_type' => 'product’,
‘category_name’ => ‘vestuario’,
'year' => 2013,
‘posts_per_page' => 6
)
);
?>

<?php
if ( $query->have_posts() ) :
while ( $query->have_posts() ) :
$query->the_post(); ?>
<?php the_title() ?>
<?php the_content() ?>
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your
criteria.'); ?></p>
<?php endif; ?>

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

• Organograma
• Listagem de Conteúdo
• Wireframe
• Layout
• Programação
• Implementação

Define quais tipos de páginas o
site terá (de acordo com a
estrutura do WP), sua hierarquia e
suas relações.

• Draw IO - https://www.draw.io/
• Mind 42 - http://mind42.com/

Define que elementos, textos,
imagens, funcionalidades, etc.
haverá em cada página do site.

• 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

A estrutura base do layout,
definindo o posicionamento,
escala, alinhamento e hierarquia
dos elementos nas páginas.

• InDesign!
– Grid
– Objetos interativos
– Links
– Estilos
– Biblioteca

• Illustrator
– Grid
– Estilos
– Símbolos para objetos comuns
– Camadas

http://www.google.com/fonts
http://www.fontsquirrel.com/

https://kuler.adobe.com/
http://colorschemedesigner.com/
http://colourlovers.com

Parágrafo
Caracteres
Gráficos

• Definir estilos para:
– Headings - H1 - H6
– Parágrafos
– Links
– Listas
– Tabelas
– Formulários
http://html-ipsum.com/

Menu Drop-Down com no
máximo 2 níveis

Like box
Like Button
Twitter
Pinterest
etc.

Discuss
WooCommerce
BuddyPress
https://wordpress.org/plugins/

http://mailchimp.com/
Newsletters bonitonas,
responsivas e que não vão para
o SPAM!

http://trello.com/
Gerenciamento de projetos

Workshop Web e WordPress

Mais conteúdo relacionado

Mais procurados (20)

Semelhante a Workshop Web e WordPress (20)

Último (9)

Workshop Web e WordPress