Baixado 13 vezes
![<?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; ?>](https://image.slidesharecdn.com/workshopwebewordpress-slideshare-140417145200-phpapp02/85/Workshop-Web-e-WordPress-39-320.jpg)
Carregado porHaste Design
Workshop Web e WordPress
O documento aborda os fundamentos e tecnologias do fluxo de dados em desenvolvimento web, enfocando aspectos de front-end e back-end, além de discutir a hospedagem adequada para WordPress. Ele detalha a estrutura de CMS, os componentes essenciais do WordPress, tipos de postagens e a importância do loop para exibição de conteúdo dinâmico. O material também oferece dicas de desenvolvimento de temas e design gráfico, destacando ferramentas e boas práticas para otimização e organização de conteúdos.
Workshop Web e WordPress
- 1.
- 2.
- 3. Fluxo de Dados: Client←→ Internet ←→ Server
- 4. Domínio É o enderçopelo qual o site será acessado pela internet. Entidade responsável (domínios br): registro.br
- 5. Hospedagem Computador servidor. Hospedagens recomendadasque suportam WordPress: ● Hostgator ● BlueHost ● DreamHost
- 6. Requisitos de umahospedagem 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 - HypertextMarkup 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 - CascadingStylesheet 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 - HypertextPreprocessor <?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 dedados 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
- 14. • Site Institucional •Hotsite • Portal • Sites Sociais • e-Commerce
- 15. A sigla CMSsignifica 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
- 16.
- 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)
- 18. • Conteúdo – Páginas –Posts – Taxonomias – Custom posts types – Custom taxonomies • Aparência e Funcionalidades – Temas – Plugins
- 22.
- 23. Todo conteúdo inseridono 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
- 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
- 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,...)
- 28. wordpress.zip / wp-admin / wp-includes /wp-content / themes / meu_tema / plugins / meu_plugin / uploads / languages
- 29. É um conjuntode arquivos, responsáveis pela exibição e funcionalidades do front e back-end do site em WordPress.
- 30. /* Theme Name: HasteDesign 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 .
- 32. <?php get_header(); ?> <h2>Error404 - 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(); ?>
- 33. É a regraque define qual template do tema será chamado para exibir uma página do site.
- 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 podechamar 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 principalvai 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.
- 38. O Loop principal tambémvai exibir o conteúdo de posts singulares.
- 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áriosposts 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 apenasum post correspondente: a página “Empresa”. E puxou o título e conteúdo deste post.
- 42. Os Loops secundáriosvã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 postsdo 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.
- 45. Exemplo: <?php $query = newWP_Query( array ( 'orderby' => 'title’, 'order' => 'DESC’, 'post_type' => 'product’, ‘category_name’ => ‘vestuario’, 'year' => 2013, ‘posts_per_page' => 6 ) ); ?>
- 46. <?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; ?>
- 47.
- 48. Para desenvolver umtema temos que pensar, desde o inicio em: • Padronização → limitar variações • Modularidade → reaproveitamento • Simplificação → redução • Otimização → performance
- 49. • Organograma • Listagemde Conteúdo • Wireframe • Layout • Programação • Implementação
- 50. Define quais tiposde páginas o site terá (de acordo com a estrutura do WP), sua hierarquia e suas relações.
- 52. • Draw IO- https://www.draw.io/ • Mind 42 - http://mind42.com/
- 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 basedo layout, definindo o posicionamento, escala, alinhamento e hierarquia dos elementos nas páginas.
- 57. • InDesign! – Grid –Objetos interativos – Links – Estilos – Biblioteca
- 58. O design gráficodo site.
- 60. • Illustrator – Grid –Estilos – Símbolos para objetos comuns – Camadas
- 61.
- 63.
- 64.
- 65.
- 66. • Definir estilospara: – Headings - H1 - H6 – Parágrafos – Links – Listas – Tabelas – Formulários http://html-ipsum.com/
- 67. Menu Drop-Down comno máximo 2 níveis
- 68.
- 69.
- 70. http://mailchimp.com/ Newsletters bonitonas, responsivas eque não vão para o SPAM!
- 71.