quarta-feira, 19 de novembro de 2014

Scripts e Templates

http://www.powertecnology.comunidades.net/index.php?pagina=1643244193
Postado por às Nenhum comentário:

terça-feira, 18 de novembro de 2014

Construa Formulario de Contato Enviado para seu Email através de um servidor externo

http://br.foxyform.com/ 
Postado por às Nenhum comentário:

sábado, 15 de novembro de 2014

Front-end concluído, como começar no WordPress? Parte I

A primeira parte do artigo abordará o inicio com desenvolvimento com Wordpress, desde da conclusão do front-end, até de criação da página inicial e sua personalização através de sidebar, menu, loop dos posts, ect.


Imagem post: Front-end concluído, como começar no WordPress? Parte I
Andando pelo fórum do Tableless, me deparei com esta postagem, e pelo que eu vi, essa é uma grande dúvida para todos que estão iniciando no desenvolvimento com WordPress.
O usuário Angelo Lucas do nosso fórum postou a seguinte resposta:
  1. Desenvolva o Front-End do tema (HTML, CSS e Javascript)
  2. Instale o PHP, Mysql na sua máquina. Baixe o WordPress e instale-o, ele vem com alguns temas incluso
  3. Duplique um tema do wordpress e começe a implementar seu HTML na programação já existente, não é difícil, não é chato.
Gostei bastante da resposta, mas o assunto é tão empolgante que merecia um conteúdo mais detalhado. E para melhorar o aprendizado e nos guiar, desenhei um layout bem simples. Não reparem, sou péssimo design.

Iniciando o desenvolvimento

Com o front-end concluído, duplique o tema padrão do WordPress e altere o nome da pasta duplicada para o nome do seu tema. Acho melhor duplicar, pois se perde um tempo criando os arquivos do zero. Se o seu WordPress for a partir da versão 3.2, terás dois temas padrões: o Twenty Ten e o Twenty Eleven. A diferença é que o Twenty Eleven vem programado nas tags do HTML5.
Depois disso, é importante entender a hierarquia de arquivos do WordPress e saber que sem os arquivos index.php e style.css o tema não funciona.
O arquivo style.css, além do estilo do tema, pode-se preencher informações do tema. Adicione no inicio do style.css esses comentários:
    

  1. /*
    2. 

  2. Theme Name: Nome do meu Tema
    3. 

  3. Theme URI: http://meusite.com.br
    4. 

  4. Description: Descrição do meu tema
    5. 

  5. Author: Paulo Rodrigues
    6. 

  6. Author URI: http://meusite.com.br
    7. 

  7. Version: 1.0
    8. 

  8. Tags: branco, vermelho, preto, header, menu, colunas, rodape
    9. 

  9. */
    10.
Personalize a partir das suas informações, mas não é necessário preencher todas elas, colocar o nome do tema e o nome do autor está ótimo.
Dois arquivos do tema possuem importância e servem para aumentar a nossa produtividade, que são: header.php e footer.php e essas páginas são incluidas nas páginas através das funções get_header() e get_footer(), respectivamente.
Vou mostrar um exemplo de meus arquivos header.php e footer.php para vocês terem noção.
Header para desenvolvimento WordPress
header.php
    

  1. <!DOCTYPE html>
    2. 

  2. <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="pt-BR">
    3. 

  3. <head profile="http://gmpg.org/xfn/11">
    4. 

  4. <meta charset="<?php bloginfo( 'charset' ); ?>" />
    5. 

  5. <title><?php bloginfo('name'); ?><?php wp_title('|'); ?></title>
    6. 

  6. <link rel="stylesheet" type="text/css" href="<?php bloginfo( 
    7. 

  7.  'stylesheet_url' ); ?>" /> 
    8. 

  8. <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" /> 
    9. 

  9. <link rel="alternate" type="application/rss+xml" title=" 
    10. 

  10. <?php bloginfo('title');?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
    11. 

  11. <!-- Se você for usar comentário no seu tema, deixe isso! -->
    12. 

  12. <?php if ( is_singular() && get_option( 'thread_comments' ) ) 
    13. 

  13. wp_enqueue_script( 'comment-reply' );?>
    14. 

  14. <!-- Se você for usar comentário no seu tema, deixe isso! -->
    15. 

  15. <?php
    16. 

  16. //Sempre deixa essa função wp_head(); pois alguns plugins utilizam 
    17. 

  17. dela para retornar informação 
    18. 

  18. wp_head(); 
    19. 

  19. ?> 
    20. 

  20. </head>
    21. 

  21. <body <?php body_class(); ?>>
    22. 

  22. <div id="main">
    23. 

  23. <header>
    24. 

  24. <section id="logo">
    25. 

  25. <h2><a href="<?php bloginfo('url'); ?>
    26. 

  26.  " title="<?php bloginfo('title'); ?>">
    27. 

  27.  <span></span><?php bloginfo('title'); ?> - <?php bloginfo('description'); ?>
    28. 

  28.  </a></h2>
    29. 

  29. </section>
    30. 

  30. <?php 
    31. 

  31. //Função para retornar o menu
    32. 

  32. wp_nav_menu(array(
    33. 

  33. 'menu' => 'menu_principal',
    34. 

  34. 'theme_location' => 'menu_principal',
    35. 

  35. 'echo' => true,
    36. 

  36. 'container' => 'nav',
    37. 

  37. 'container_id' => 'menu' 
    38. 

  38. ));
    39. 

  39. ?>
    40. 

  40. </header> 
    41. 

  41. <div id="container">
    42.
Estudem essas funções: bloginfo(), wp_title(), wp_head() e wp_footer().
wp_nav_menu, WTF??? O que é isso, Paulo? Calma, é uma função para retornar menus, confira esse artigo de criação de menus no WordPress, que aí tenho certeza que vai entender tudo.
Personalize essas páginas através do seu front-end, tente explorar o máximo dessas páginas para não perder tempo nas páginas internas.
Finalizando esse inicio, o esqueleto do seu tema está pronto!

Trabalhando com a página inicial e páginas internas

Beleza, concluímos nosso “esqueleto”, e a partir daí vamos criar as páginas do tema. A página índex.php é a página inicial do tema, ela só não é a página inicial, quando adicionamos ao nosso tema a pagina home.php. Mas de inicio, vamos trabalhar com a página índex.php.
Já ouviram falar no Loop do WordPress? Confiram esse artigo pois vão entender para o que ela serve.
Vamos ao exemplo da página inicial:
Conteudo para tema no WordPress
    

  1. <?php get_header(); ?>
    2. 

  2. <div id="blog">
    3. 

  3. <?php while (have_posts()) : the_post(); ?> 
    4. 

  4. <section class="post"> 
    5. 

  5. <h1 class="title-post"><a href="<?php the_permalink(); ?>" 
    6. 

  6. title="<?php the_title(); ?>"><?php the_title(); ?></a></h1>
    7. 

  7. <p>Postado: <?php the_time('F j, Y'); ?> at <?php the_time('g:i a'); ?></p>
    8. 

  8. <?php the_post_thumbnail(); ?>
    9. 

  9. <?php the_content(); ?> 
    10. 

  10. </section>
    11. 

  11. <?php endwhile; ?>
    12. 

  12. </div>
    13. 

  13. <?php get_sidebar(); ?>
    14. 

  14. <?php get_footer(); ?>
    15.
Estude a função the_time() e a forma de customizar data e hora dessa função.
A função the_post_thumbnail serve para retornar os Posts Thumbnails, Caso não tenha interesse, pode remover a função, mas se tiver interesse, aprenda através desse artigo.
A função get_sidebar() serve para retornar o que está no arquivo sidebar.php, e esclareça suas dúvidas nesse artigo para criação de sidebars
Arquivo sidebar.php
    

  1. <div id="sidebar">
    2. 

  2. <ul class="sidebar">
    3. 

  3. <?php if(!function_exists('dynamic_sidebar') || !dynamic_sidebar 
    4. 

  4. ("Blog Sidebar")); ?>
    5. 

  5. </ul>
    6. 

  6. </div>
    7.
Não se limite a esse artigo, aprofunde seu conhecimento através da documentação disponibilizada pelo WordPress. “Futuque” novas funções, pois é assim que se aprende, é quebrando a cara e arriscando. Basta somente ter interesse!
Esperem pelas próximas partes deste artigo, pois vou aprofundar mais esse assunto e pensar no WordPress como um poderoso CMS.
Quero deixar o espaço sempre aberto para quem tiver dúvidas, dar sugestões, criticas construtivas, ect. Podem comentar, enviar email e encher o fórum do Tableless, pois de lá nasceu a idéia para esse artigo e tenho certeza que nascerá os próximos também.



Link da Matéria Completa 



Postado por às Nenhum comentário:
Assinar: Postagens (Atom)