profburnes/Criacao_Tema_Simples_Wordpress.md

## Criacao_Tema_Simples_Wordpress.md

      
    Raw
  

              Criacao_Tema_Simples_Wordpress.md
            
          
    Criação de Tema Simples para Wordpress

Primeiros Passos

O Wordpress é uma ótima ferramenta de gestão de conteúdo, uma das mais utilizadas.
O sistema possui sites com plugins, widgets e themas prontos, muitas vezes "free".
Vamos aprender como desenvolver um tema simples utilizando as funções do Wordpress e gerar um site instituional, utilizando Bootstrap e jQuery.
Estrutura de pastas

Os temas do Wordpress ficam dentro da pasta wp-content -> themes. Normalmente a instalação já possui dois ou três temas para uso.
Esta pasta deverá conter:

style.css (com este nome e na raiz do tema, não dentro de uma pasta css)
index.php (controla a home e a página principal)
404.php (página de erro)
header.php (cabeçalho)
footer (rodapé)
page.php (páginas internas)

Outros Arquivos

Existem outrops arquivos que armazenam outras funções que não sero utilizadas no exemplo, porém podem ser utilizadas para outros fins, como contrução de sites que contenham Blogs por exemplo:

archive.php (controle o histórico de postagens)
archives.php (index de histórico de postagens)
category.php (página que lista posts de uma categoria)
comments.php (comentários)
links.php (listagem de links)
single.php (mostra um post único)
search.php (resultados da busca)
searchform.php (formulário de busca)
sidebar.php (contedo de sidebar, utilizado por plugins e widgets)

style.css

Este aquivo deverá conter o seu css e as informações sobre o tema, como nome do tema, autor, site do autor, descrição e tags.
Funçes básicas do Wodpress

Algumas funçes básicas que sero utilizadas na contrução do tema


esc_url( get_template_directory_uri() ); diretório do tema, necessário para referenciar arquivos de imagens, js, css e etc.


bloginfo( 'name' ); o nome do blog, conforme configurado no painel de controle


bloginfo( 'stylesheet_url' ) o arquivo da folha de estilos principal (style.css)


bloginfo( 'charset' ); charset da codificação do blog


bloginfo( 'pingback_url' ); São uma forma de comentário automatizado para uma página ou postagem, criada quando outro blog do WordPress liga a essa página ou publicação. Quando você publica uma nova postagem no blog, o WordPress tenta "pingar" todos os sites que foram vinculados em sua postagem.


bloginfo( 'description' ); descrição do blog


wp_head() adiciona scripts dos plugins ao cabeçalho do html


is_singular() verificar se um post ou uma página está sendo exibido (is_single() e is_page())


get_option( 'thread_comments' ) verifica e testa a possibilidade da instalação de atualizações de plugins


has_custom_logo() verifica se o logo está customizado


**wp_nav_menu( array( 'theme_location' => 'primary'	) ) ** recupera o menu primary.


body_class() adiciona uma classe ao body, permitindo configurar pela personalização o fundo da página


has_custom_logo() verifica se o logo está customizado


has_custom_logo() verifica se o logo está customizado


functions.php

O arquivo functions.php guarda configurações adicionais ao seu tema, como suporte a imagem de logo, imagem de fundo do site, cor de fundo, tamanho de thumbnail e registro de locais para inserção de plugins (sidebars) e menus configuráveis.
Essas opções permitem que essas configurações apareçam no menu Personalizar do Wodpress, tornando a troca fácil para o usuário que é leigo, através do painel de pesonalização.

register_nav_menus registra menus de navegação. No painel o usuário poder gerar esses menus e configurá-los, adicionando ou retirando os links que devem ser exibidos
add_theme_support adiciona suporte ao tema a vários elementos (explicados mais abaixo)
register_sidebar registra locais que possam ser adicionados widgets e plugins com suas devidas configurações

add_theme_support

Esta função (Documentação Wordpress) permite adicionar ao tema suporte a algumas configurações que serão customizáveis através do Personalizar no painel de controle do WP.
Abaixo seguem algumas opções de configuração:

post-formats altera formato de visualização dos posts, podendo ser aside ou galery ou outro presenta na Documentação:

add_theme_support( 'post-formats', array( 'aside', 'gallery' ) );


post-thumbnails altera configuração dos thumbnails, podendo adicionar tamanhos específicos, verifique os tipos na Documentação. Segue exemplo de como adicionar novo tamanho:

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 250, 250 ); 


custom-background altera configuração do fundo da página, como cor e imagem. Verifique os tipos na Documentação.

add_theme_support( 'custom-background', apply_filters( 'args', array(
	'default-color' => 'ffffff',
	'default-image' => '',
) ) );


custom-logo altera configuração do logo da página, permitindo upload de uma imagem. Aqui podemos definir o tamanho para a logo, que permitirá ao usuário realizar o recorte na inserção. Verifique mais na Documentação.

add_theme_support( 'custom-background', apply_filters( 'args', array(
	'default-color' => 'ffffff',
	'default-image' => '',
) ) );

Outros elementos podem ser estudados através da Documentação Oficial do WP

  
## footer.php
	</div> <!-- // container //-->
	<footer>
		<p class="text-center">Desenvolvido por Seu Nome - Todos os direitos reservados</p>
	</footer>
</body>
</html>

## functions.php
<?php

//registrar o menu primario para ser mostrado no nav do header
register_nav_menus( array(
	'primary' => esc_html__( 'Primary Menu', 'total' ),
) );

//adiciona um tamanho de thumbnail personalizado
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 250, 250 ); // largura x altura

//adiciona suporte ao tema a cor e imagem de fundo (aparece no personalizar)
add_theme_support( 'custom-background',
   apply_filters( 'args',
     array(
	    'default-color' => 'ffffff', //cor de fundo
	    'default-image' => '', //imagem de fundo
     )
    )
 );

//adiciona suporte a logo customizado (aparece no personalizar)
add_theme_support( 'custom-logo', array(
	'height'      => 100, //define altura
	'width'       => 247, //define largura
	'flex-height' => true,
	'flex-width'  => true,
) );

## header.php
<?php
  //variável com o nome do diretório do template na instalação do wordpress
  $pasta = esc_url( get_template_directory_uri() );

?>
<!DOCTYPE html>
<html>
<head>
	<title><?php bloginfo( 'name' ); ?></title>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="stylesheet" type="text/css" href="<?php bloginfo( 'stylesheet_url' ); ?>">

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

	<script type="text/javascript" src="<?php echo $pasta;?>/js/jquery-3.1.1.min.js"></script>

	<?php
	//utilizada por plugins
	if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' ); wp_head();
	?>

</head>
<body <?php body_class(); ?>>
<header>
	<?php
	if ( function_exists( 'has_custom_logo' ) && has_custom_logo() ) {
	?>

		<a href="index.php" title="<?php bloginfo('name'); ?>">
			<?php the_custom_logo();?>
		</a>

	<?php
	} else {

		bloginfo( 'name' );

	}
	?>
	<nav>

		<?php
			wp_nav_menu( array(
				'theme_location' => 'primary',
			) );
		?>
	</nav>
</header>

## index.php
<?php get_header(); ?>

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<article>
    <?php
    $titulo = get_the_title();
    if ($titulo == "Home") {
        the_content();
    } else {

    ?>

    <h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
    <p>Postado por <?php the_author() ?> em <?php the_time('d/M/Y') ?> - <?php comments_popup_link('Sem Comentários', '1 Comentário', '% Comentários', 'comments-link', ''); ?> <?php edit_post_link('(Editar)'); ?></p>
    <p><?php the_content(); ?></p>

    <?php

    }
    ?>
</article>
<?php endwhile?>
    <div class="navegacao">
        <div class="recentes"><?php next_posts_link('&laquo; Artigos Anteriores') ?></div>
        <div class="anteriores"><?php previous_posts_link('Artigos Recentes &raquo;') ?></div>
    </div>
<?php else: ?>
    <article>
        <h2>Nada Encontrado</h2>
        <p>Erro 404</p>
        <p>Lamentamos mas não foram encontrados artigos.</p>
    </article>
<?php endif; ?>

<?php get_footer(); ?>

## style.css
/*
Theme Name: Nome do Tema
Theme URI: https://gist.github.com/profburnes
Author: Professor Burnes
Description: Tema para Wordpress
License: GNU General Public License v2 or later
Tags: tema, livre, teste, wordpress
*/

header {
  width: 100%;
  text-align: center;
}

nav, footer {
  width: 100%;
  padding: 10px;
  background: #333;
  color: #FFF;
}

nav a {
  color: #FFF;
}

article {
  padding: 0px 10px;
  width: 100%;
}

.navegacao {
  width: 100%;
  text-align: center;
}

.navegacao a {
  color: #333;
}
	<?php

	//registrar o menu primario para ser mostrado no nav do header
	register_nav_menus( array(
	'primary' => esc_html__( 'Primary Menu', 'total' ),
	) );

	//adiciona um tamanho de thumbnail personalizado
	add_theme_support( 'post-thumbnails' );
	set_post_thumbnail_size( 250, 250 ); // largura x altura

	//adiciona suporte ao tema a cor e imagem de fundo (aparece no personalizar)
	add_theme_support( 'custom-background',
	apply_filters( 'args',
	array(
	'default-color' => 'ffffff', //cor de fundo
	'default-image' => '', //imagem de fundo
	)
	)
	);

	//adiciona suporte a logo customizado (aparece no personalizar)
	add_theme_support( 'custom-logo', array(
	'height' => 100, //define altura
	'width' => 247, //define largura
	'flex-height' => true,
	'flex-width' => true,
	) );
	<?php get_header(); ?>

	<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
	<article>
	<?php
	$titulo = get_the_title();
	if ($titulo == "Home") {
	the_content();
	} else {

	?>

	<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
	<p>Postado por <?php the_author() ?> em <?php the_time('d/M/Y') ?> - <?php comments_popup_link('Sem Comentários', '1 Comentário', '% Comentários', 'comments-link', ''); ?> <?php edit_post_link('(Editar)'); ?></p>
	<p><?php the_content(); ?></p>

	<?php

	}
	?>
	</article>
	<?php endwhile?>
	<div class="navegacao">
	<div class="recentes"><?php next_posts_link('« Artigos Anteriores') ?></div>
	<div class="anteriores"><?php previous_posts_link('Artigos Recentes »') ?></div>
	</div>
	<?php else: ?>
	<article>
	<h2>Nada Encontrado</h2>
	<p>Erro 404</p>
	<p>Lamentamos mas não foram encontrados artigos.</p>
	</article>
	<?php endif; ?>

	<?php get_footer(); ?>
	/*
	Theme Name: Nome do Tema
	Theme URI: https://gist.github.com/profburnes
	Author: Professor Burnes
	Description: Tema para Wordpress
	License: GNU General Public License v2 or later
	Tags: tema, livre, teste, wordpress
	*/

	header {
	width: 100%;
	text-align: center;
	}

	nav, footer {
	width: 100%;
	padding: 10px;
	background: #333;
	color: #FFF;
	}

	nav a {
	color: #FFF;
	}

	article {
	padding: 0px 10px;
	width: 100%;
	}

	.navegacao {
	width: 100%;
	text-align: center;
	}

	.navegacao a {
	color: #333;
	}