Como criar um tema no WordPress
Na dica de hoje, vamos ensinar a criar um tema básico para seu WordPress. Com estas dicas você conseguirá entender a estrutura do WordPress e assim construir temas personalizados para você desenvolver o site com a estrutura ideal para seu cliente.
Precisando de ajuda no seu WordPress? Fale conosco soloweb.com.br
Passo 1
Para começar a criar seu tema no WordPress, você deverá possuir acesso ftp ao sistema de arquivos do WordPress. Então para começar crie uma pasta com o nome do tema que você deseja criar vamos chamar aqui de “tutorial” e em seguida crie o sistema de arquivos nela.
Lembre de criar a pasta “tutorial” dentro da pasta de temas do WordPress que é a wp-content/themes/
Agora crie as seguintes estruturas:
index.php
header.php
single.php
comments.php
footer.php
sidebar.php
page.php
functions.phpobs: lembrando aqui que vamos criar a estrutura básica para o funcionamento. Para mais arquivos de estrutura acesse a página do Manual do desenvolvedor WordPress.
Passo 2
Para iniciar o processo agora vamos criar a folha de estilo css(style.css), após criado vamos inserir informações iniciais no arquivo no qual o WordPress precisa para definir informações sobre seu tema:
/*
Theme Name: Tutorial
Author: Tutorial-Soloweb
Author URI: http://www.soloweb.com.br/blog
Description: Meu primeiro tema wordpress
Version: 1.0
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
*/Após configurar o style.css você vai ver seu tema já na tela de temas para ativação:
Agora vamos inserir algumas configurações no css importante para a responsividade e a outra apenas para mudar a cor do corpo do html.
* {
box-sizing: border-box;
}
body {
background-color: #dfdfdf;
font-family: arial;
}Passo 3
Vamos preencher agora o arquivo functions.php.
?php
// This function enqueues the Normalize.css for use. The first parameter is a name for the stylesheet, the second is the URL. Here we
// use an online version of the css file.
function add_normalize_CSS() {
wp_enqueue_style( 'normalize-styles', "https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css");
}
// Register a new sidebar simply named 'sidebar'
function add_widget_Support() {
register_sidebar( array(
'name' => 'Sidebar',
'id' => 'sidebar',
'before_widget' => '<div>',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>',
) );
}
// Hook the widget initiation and run our function
add_action( 'widgets_init', 'add_Widget_Support' );
// Register a new navigation menu
function add_Main_Nav() {
register_nav_menu('header-menu',__( 'Header Menu' ));
}
// Hook to the init action hook, run our navigation menu function
add_action( 'init', 'add_Main_Nav' );
?>Em resumo praticamente fiz a chamada das funções do sidebar e dos menus de navegação. Inicialmente fiz também a chamada de um arquivo normalize.css esse arquivo faz com que seu site tenha o mesmo padrão para todos os navegadores.
Passo 4
Configuramos agora o arquivo sidebar.php:
<?php if ( is_active_sidebar( 'sidebar' ) ) : ?>
<aside id="primary-sidebar" class="primary-sidebar widget-area" role="complementary">
<?php dynamic_sidebar( 'sidebar' ); ?>
</aside>
<?php endif; ?>Isso faz com que a barra lateral e os widgets apareçam no seu tema sempre que get_sidebar() é inserido.
Passo 5
Agora vamos configurar o arquivo header.php o cabeçalho do seu tema.
<!DOCTYPE html>
<html <?php language_attributes(); ?>
<head>
<title><?php bloginfo('name'); ?> » <?php is_front_page() ? bloginfo('description') : wp_title(''); ?></title>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header class="my-logo">
<h1><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo('name'); ?></a></h1>
</header>
<?php wp_nav_menu( array( 'header-menu' => 'header-menu' ) ); ?>
Como pode ser visto, praticamente é uma configuração de um arquivo padrão html com elementos php e chamadas padrões do WordPress.
Passo 6
Vamos configurar agora o arquivo index.php
<?php get_header(); ?>
<main class="wrap">
<section class="content-area content-thin">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<article class="article-loop">
<header>
<h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
By: <?php the_author(); ?>
</header>
<?php the_excerpt(); ?>
</article>
<?php endwhile; else : ?>
<article>
<p>Sorry, no posts were found!</p>
</article>
<?php endif; ?>
</section><?php get_sidebar(); ?>
</main>
<?php get_footer(); ?>Na página index, criamos um loop de posts com várias tags modelos onde explicarei mais a frente.
O loop de inicia <?php if (have_posts() ) : while ( have_posts() ) : the_post(); ?> e termina em <php endif; ?> as tags adicionais utilizadas são:
<?php the_permalink(); ?> – exibe o URL correto da postagem atual
<?php the_title_atribute(); ?> – exibe o título dessa postagem num formato seguro para o atributo do título do link
<?php the_tigle(); ?> – produz o título da postagem
<?php the_author(); ?> – exibe o trecho da postagem que é gerado automaticamente caso você não tenha escrito
<?php the_excerpt(); ?> – exibe o trecho da publicação, que é gerado automaticamente caso você não tenha escrito nada.Passo 7
Este passo vamos configurar o rodapé(footer.php), vamos configurar com algo simples apenas para não deixar o arquivo em branco.
<footer>
<p>Copyright © 2017</p>
</footer>
<?php wp_footer(); ?>
</body>
</html>Passo 8
O single.php é o arquivo que define o layout da página de post, já o page.php é o layout das páginas do seu site, vamos mostrar modelo de configuração deles:
<?php get_header(); ?>
<main class="wrap">
<section class="content-area content-full-width">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<article class="article-full">
<header>
<h2><?php the_title(); ?></h2>
By: <?php the_author(); ?>
</header>
<?php the_content(); ?>
</article>
<?php endwhile; else : ?>
<article>
<p>Sorry, no post was found!</p>
</article>
<?php endif; ?>
</section>
</main>
<?php get_footer(); ?>Acima é o single.php, abaixo agora vamos para o page.php.
<?php get_header(); ?>
<main class="wrap">
<section class="content-area content-thin">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<article class="article-full">
<header>
<h2><?php the_title(); ?></h2>
By: <?php the_author(); ?>
</header>
<?php the_content(); ?>
</article>
<?php endwhile; else : ?>
<article>
<p>Sorry, no page was found!</p>
</article>
<?php endif; ?>
</section><?php get_sidebar(); ?>
</main>
<?php get_footer(); ?>Passo 8
Por último aqui vamos mostrar tags modelos para você poder trabalhar melhor seu tema:
get_header() – inclui o modelo header.php
get_sidebar() – inclui o modelo sidebar.php
get_footer() – inclui o modelo footer.php
get_search_form() – inclui o modelo searchform.php
bloginfo() – mostra a informação solicitada como parâmetro, se não bloginfo(“nome”) apareça no nome do seu website como definido no painel de controle do administrador (como definido na lista de parâmetros)
single_post_title() – mostra o título da publicação atualmente exibida em single.php
the_author() – mostra o autor da publicação atualmente exibida
the_content() – mostra o texto principal de um post ou página.
the_exerpt() – o trecho do post ou página.
A lista completa de Tags modelo WordPress podem ser encontradas aqui.
E lembrando que a SOLOWEB além de oferecer Hospedagem de Sites, Servidores Dedicados, Servidores VPS com o menor custo do Brasil, também desenvolve soluções de software e realiza gerenciamento e monitoramento de servidores para sua empresa, faça uma cotação sem custo, acesse: www.soloweb.com.br
