Você está procurando uma folha de dicas de temas do WordPress para modificar rapidamente seu tema ou criar um novo tema personalizado? O WordPress vem com muitas tags de modelo incorporadas que você pode usar para começar. Neste artigo, compartilharemos uma folha de dicas de temas do WordPress para iniciantes.
Antes de começar
O WordPress vem com um poderoso mecanismo de modelos que permite que os desenvolvedores de temas criem belos designs para sites com WordPress. Há temas premium e gratuitos do WordPress que você pode instalar em seu site.
Cada tema do WordPress vem com várias opções de personalização. Essas opções permitem que você altere cores, adicione imagens de cabeçalho, configure menus de navegação e muito mais.
Entretanto, você ainda está limitado aos recursos que o tema suporta. Às vezes, você pode querer fazer pequenas alterações em seu tema do WordPress que exijam alguma codificação. Para fazer isso, você precisará conhecer alguns conceitos básicos de PHP, HTML e CSS.
A primeira coisa que você deve fazer é se familiarizar com o funcionamento do WordPress nos bastidores e com os modelos de tema do WordPress.
Depois disso, há algumas práticas recomendadas que você pode querer seguir. Por exemplo, criar um tema filho em vez de fazer as alterações diretamente nos arquivos do tema.
Você também pode praticar em seu tema instalando o WordPress em seu computador.
Dito isso, vamos nos aprofundar em nossa folha de dicas de temas do WordPress para iniciantes.
Modelos básicos de temas do WordPress
Cada tema do WordPress é composto de diferentes arquivos chamados modelos. Todos os temas do WordPress devem ter uma folha de estilo e um arquivo de índice, mas geralmente eles vêm com muitos outros arquivos.
Abaixo está a lista de arquivos básicos que todo tema tem:
- style.css
- header.php
- index.php
- sidebar.php
- rodapé.php
- single.php
- página.php
- comentários.php
- 404.php
- functions.php
- archive.php
- formulário de pesquisa.php
- search.php
Se você estiver criando seu próprio tema, poderá começar com um dos temas iniciais do WordPress. Esses temas vêm com arquivos de modelo do WordPress e CSS prontos para uso, o que lhe dá uma estrutura sobre a qual construir.
Tags de modelo no cabeçalho
O WordPress vem com várias funções úteis que podem ser usadas para gerar diferentes resultados em seu tema. Essas funções são chamadas de tags de modelo.
A primeira função, e provavelmente a mais importante, que é exigida em todos os temas do WordPress em conformidade com o padrão, chama-se wp_head e tem a seguinte aparência:
<?php wp_head(); ?>
Esse código obtém todo o HTML importante que o WordPress precisa adicionar na seção <head> de cada página do seu site. Ele também é essencial para que muitos plug-ins do WordPress funcionem corretamente em seu site.
A seguir, há uma lista de tags de modelo que você normalmente encontrará e usará no arquivo header.php do seu tema. No entanto, elas também podem ser usadas em outros lugares do seu tema quando necessário.
// Title of the Blog, or Blog Name
<?php bloginfo('name'); ?>
// Title of a Specific Page
<?php wp_title(); ?>
// Exact URL for the site
<?php bloginfo('url'); ?>
// Site's Description
<?php bloginfo('description'); ?>
// Location of Site’s Theme File
<?php bloginfo('template_url'); ?>
// Link to the Style.css location
<?php bloginfo('stylesheet_url'); ?>
// RSS Feed URL for the site
<?php bloginfo('rss2_url'); ?>
// Pingback URL for the site
<?php bloginfo('pingback_url'); ?>
// WordPress version number
<?php bloginfo('version'); ?>
Tags de modelo usadas em outros arquivos de tema
Agora vamos dar uma olhada em algumas outras tags de modelo comumente usadas e o que elas fazem.
As tags de modelo a seguir são usadas para chamar e incluir outros modelos. Por exemplo, o arquivo index.php do seu tema as usará para incluir modelos de cabeçalho, rodapé, conteúdo, comentários e barra lateral.
//Displays Header.php file content <?php get_header(); ?> // Displays Footer.php file content <?php get_footer(); ?> // Displays Sidebar.php file content <?php get_sidebar(); ?> // Displays Comment.php file content <?php comments_template(); ?>
As tags de modelo a seguir são usadas dentro do loop do WordPress para exibir o conteúdo, o trecho e os metadados de suas postagens.
// Displays the Content of the Post
<?php the_content(); ?>
// Displays the excerpt that is used in Posts
<?php the_excerpt(); ?>
// Title of the Specific Post
<?php the_title(); ?>
// Link of the Specific Post
<?php the_permalink() ?>
// Category of a Specific Post
<?php the_category(', ') ?>
// Author of the Specific Post
<?php the_author(); ?>
//ID of a Specific Post
<?php the_ID(); ?>
// Edit link for a Post
// Oonly visible to logged in users with editing privileges
<?php edit_post_link(); ?>
// URL of the next page
<?php next_post_link(' %link ') ?>
// URL of the previous page
<?php previous_post_link('%link') ?>
Os temas do WordPress vêm com áreas prontas para widgets chamadas barras laterais. Esses são locais nos arquivos do tema onde os usuários podem arrastar e soltar widgets do WordPress. Geralmente, um tema tem vários locais onde os usuários podem adicionar widgets.
No entanto, o mais comum é que essas áreas de widgets estejam localizadas na barra lateral direita ou esquerda do layout do tema. Para saber mais, consulte nosso guia sobre como adicionar barras laterais dinâmicas prontas para widgets em seu tema do WordPress.
Aqui está o código usado para exibir uma barra lateral em seu tema.
<?php
if ( ! is_active_sidebar( 'sidebar-1' ) ) {
return;
}
?>
<aside id="secondary" class="widget-area" role="complementary">
<?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside><!-- #secondary -->
Você precisará substituir sidebar-1 pelo nome definido pelo seu tema para essa área específica pronta para widget ou para a barra lateral.
Tags de modelo para exibir menus de navegação
O WordPress vem com um poderoso sistema de gerenciamento de menus que permite aos usuários criar menus de navegação para seus sites. Um tema do WordPress pode ter mais de um local de menu de navegação.
Consulte nosso guia sobre como criar seus próprios menus de navegação personalizados em um tema do WordPress.
A seguir está o código que será usado em seu tema para exibir um menu de navegação.
<?php
wp_nav_menu( array(
'theme_location' => 'my-custom-menu',
'container_class' => 'custom-menu-class' ) );
?>
A localização do tema depende do nome que o tema usou para registrar o menu de navegação. A classe de contêiner CSS pode ter o nome que você quiser. Ela envolverá o menu de navegação, para que você possa estilizá-lo de acordo.
Tags de modelo diversas
A seguir estão algumas das tags que você usará normalmente em seu tema do WordPress.
// Displays the date current post was written
<?php echo get_the_date(); ?>
// Displays the last time a post was modified
get_the_modified_time
// Displays the last modified time for a post
<?php echo the_modified_time('F d, Y'); ?>
// Displays post thumbnail or featured image
<?php the_post_thumbnail( ); ?>
// Displays monthly archives
<?php wp_get_archives( ); ?>
// Displays the list of categories
<?php wp_list_categories(); ?>
// Displays the gravatar of a user from email address
// 32 pixels is the size, you can change that if you need
<?php echo get_avatar( 'email@example.com', 32 ); ?>
// Displays gravatar of the current post's author
<?php echo get_avatar( get_the_author_meta( 'ID' ), 32 ); ?>
Tags condicionais em temas do WordPress
As tags condicionais são funções que retornam resultados em True (verdadeiro) ou False (falso). Essas tags condicionais podem ser usadas em todo o seu tema ou plug-in para verificar se determinadas condições são atendidas e, em seguida, fazer algo de acordo.
Por exemplo, se a postagem atual tem uma imagem em destaque ou não. Se ele não tiver uma imagem em destaque, você poderá mostrar uma imagem em destaque padrão.
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
else {
echo '<img src="' . get_bloginfo( 'stylesheet_directory' )
. '/images/thumbnail-default.jpg" />';
}
?>
A seguir, há mais algumas tags condicionais que você pode usar.
// Checks if a single post is being displayed is_single() // Checks if a page is being displayed is_page() // Checks if the main blog page is displayed is_home() // Checks if a static front page is displayed is_front_page() // Checks if current viewer is logged in is_user_logged_in()
Há muitas outras tags condicionais que você pode usar. A lista completa de tags condicionais pode ser encontrada na página de código do WordPress sobre tags condicionais.
O loop do WordPress
O loop ou loop do WordPress é o código usado para buscar e exibir posts no WordPress. Muitas tags de modelo do WordPress só podem funcionar dentro do loop, pois estão associadas aos objetos post ou post_type.
A seguir, um exemplo de um loop simples do WordPress.
<?php
// checks if there are any posts that match the query
if (have_posts()) :
// If there are posts matching the query then start the loop
while ( have_posts() ) : the_post();
// the code between the while loop will be repeated for each post
?>
<h2 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
<p class="date-author">Posted: <?php the_date(); ?> by <?php the_author(); ?></p>
<?php the_content(); ?>
<p class="postmetadata">Filed in: <?php the_category(); ?> | Tagged: <?php the_tags(); ?> | <a href="<?php comments_link(); ?>" title="Leave a comment">Comments</a></p>
<?php
// Stop the loop when all posts are displayed
endwhile;
// If no posts were found
else :
?>
<p>Sorry no posts matched your criteria.</p>
<?php
endif;
?>
Para saber mais sobre o loop, confira O que é um loop no WordPress (infográfico).
Esperamos que este artigo o ajude como a folha de dicas básicas de temas do WordPress para iniciantes. Talvez você também queira ver nossa lista dos truques mais úteis para o arquivo de funções do WordPress.
Se você gostou deste artigo, inscreva-se em nosso canal do YouTube para receber tutoriais em vídeo sobre o WordPress. Você também pode nos encontrar no Twitter e no Facebook.
Marco
This is great article.
But is it still relevant in 2022 with Gutenberg block editor?
WPBeginner your the best!
WPBeginner Support
What we share in this article is still currently relevant.
Administrador
Henry Obilor
I would love to ask when creating a new theme. Can I create my own header.php and use a premium theme footer.php?
Mixing yours with already built template. Will it work?
WPBeginner Support
That would heavily depend on the content of the footer.php and how you have your theme coded. If you have the footer then the best method would be to test on a local installation.
Administrador
Biplob
It’s awesome thing. it’s very useful
Zaki
This is certainly not for beginners. I am afraid I will end up with messing up my website. Coding part is completely unclear. I would appreciate if you can some great screenshots to illustrate “How to add a custom page”.
Sanam
Bro where to paste that code in functions.php
WPBeginner Support
At the bottom. If you have ?> tag as the last line then you need to paste code before that line.
Administrador
Shahbaz Ahmed Bhatti
Very Nice and Goooood Work Keep it up, Very goood information for Basic
Solomon
Thanks very much, i really appreciate.
Pali Madra
Thanks for the great tutorial. I recommend the tutorial to anyone trying to learn WordPress.
Keep up the good work!
Ben
Thanks for a very helpful article. Just want I have been looking for.
Thanks.
Ben
madalinignisca
what is – Site’s Description
I think it is
madalinignisca
what is “<?php bloginfo(%u2019description%u2019); ?> – Site’s Description” ? I think it is “<?php bloginfo(‘description’); ?>”
mirzayasir4
That’s great useful cheet sheet when you are doing editing in themes. Thanks
John
Fantastic, I’ve been looking for an easy Wordpress cheatsheet for a while, thanks for doing this, makes life a lot easier and I can get a bit more creative. Wordpress has such a lot of power under the hood.
mark
this is gr8 for beginner
Russell Poulter
This is SO bookmarked!
Thanks.
asif eminov
Thanks this details.
Ersatzknochen
Yeah, very useful. Thank you.
Delighted
Thank you for the Codes in Header.php part, Very easy to understand and VERY useful! thank you for this.
SleepY
Wow….thats what i was looking for since days.
thanks a lot !
Victor Duwon Jackson
This is great, Thanks.
Manoj
Great info! bookmarked
Obed Ward
Excellent WP theme cheat sheet, going to bookmark it (and of course tweet it). Thanks!
Naeem Noor
Very Useful, just printed it.
Blog2Life
These shortcodes are just what I was looking for to start work on some new themes.. thanks for the post and keep up the good work!
Hami
Yes exactly. This post has solved out and let us (beginners) start working instantly on new ideas
A.D.K.
This is very useful thanks.
Jon Rawlins
Retweeted this for you. Just about to get a blog setup for myself, so this site has been very useful.
Angad Sodhi
Aah! Bookmarking this right away..
Referring the default theme for these small details is now history!
Thank you people.
DaveK
Cool, Thanks for sharing, consider it tweeted