Verificações importantes antes de lançar um tema WordPress
Como eu estava terminando meu tema premium para enviar para revisão no ThemeForest, eu estava fazendo meus testes finais e percebi que poderia escrever um post sobre algumas das verificações mais importantes e gerais que se deve fazer antes de lançar o tema. Claro que há muitas coisas para verificar, mas abaixo estão 20 do que considero algumas das verificações mais importantes antes de lançar seu tema.
Incluir wp_footer & wp_head
Este é um material bastante básico, mas muito importante. Certifique-se de ter incluído o gancho wp_head no arquivo header.php e o gancho wp_footer no arquivo footer.php. Esses ganchos são muito importantes para que os plugins funcionem com seu tema. Além disso, se você estiver incluindo quaisquer funções anexadas a esses ganchos, obviamente precisará delas.
Tire sua captura de tela.png
Muitas vezes fico tão ansioso para lançar meu tema que esqueci de incluir o arquivo screenshot.png básico com o tema. Esta é a imagem que aparecerá no seu WP admin sob sua tag Appearance.
Basicamente, tire uma captura de tela do seu tema, corte-a para cerca de 300px por 225px, salve-a como um png e nomeie-a como “captura de tela”. Em seguida, solte esse bebê direto na raiz da pasta do seu tema.
Ativar suporte ao tema principal do WordPress
Existem muitos recursos incríveis no WordPress que não são ativados por padrão e devem ser ativados usando a função add_theme_support em seu tema. Alguns desses recursos incluem miniaturas de postagem, meta tag de título, suporte a html5, cabeçalho personalizado, logotipo personalizado etc. Abaixo está um exemplo de como habilitar esses recursos (observe que você precisa se conectar ao gancho de ação after_setup_theme).
// Add theme support
function themename_add_theme_support() {
add_theme_support( ‘post-formats’, array( ‘aside’, ‘video’, ‘image’, ‘gallery’, ‘quote’ ) );
add_theme_support( ‘post-thumbnails’ );
add_theme_support( ‘automatic-feed-links’ );
add_theme_support( ‘html5’, array( ‘comment-list’, ‘comment-form’, ‘search-form’, ‘gallery’, ‘caption’ ) );
add_theme_support( ‘title-tag’ );
add_theme_support( ‘custom-header’ );
add_theme_support( ‘custom-logo’ );
add_theme_support( ‘customize-selective-refresh-widgets’ );
}
add_action( ‘after_setup_theme’, ‘themename_add_theme_support’ );
Nota : No trecho de exemplo, estamos apenas adicionando suporte básico a temas, mas para a maioria dos recursos, você também pode passar uma lista de argumentos. Por exemplo, para o logotipo personalizado, você pode passar um array com a largura, altura, texto do cabeçalho, etc. Portanto, verifique cada recurso e veja se deseja passar argumentos personalizados.
Certifique-se de que a paginação funciona
Especialmente se você estiver usando tipos de postagem personalizados, é importante garantir que a paginação funcione não apenas na página do blog, categorias e tags, mas também nos arquivos de tipo de postagem personalizados e em quaisquer taxonomias personalizadas. Dê uma olhada no nosso guia para adicionar paginação no WordPress se você não souber como.
Definir fallback do menu do WordPress
Uma das perguntas mais comuns que recebo das pessoas, além de como configurar suas imagens, é como configurar seu menu. Quando você está usando o sistema de menu de arrastar e soltar do WP, é sempre ideal definir um fallback para o seu menu com um link para o painel de administração para que os usuários possam ver como configurar seu menu. Não deixe seus usuários adivinhando!
Dê uma olhada em nosso guia sobre como adicionar um fallback de menu no WordPress se você não souber como.
Enfileirar script para comentários encadeados
Quando os usuários ativam comentários encadeados em seu administrador do WordPress, isso permite que as pessoas respondam aos seus comentários em seu blog. Você provavelmente já notou como alguns temas recarregam a página quando um usuário clica no botão “responder”, o que não é muito amigável ou profissional. Felizmente, o WordPress vem com um script embutido para que os comentários encadeados possam funcionar sem recarregar a página. Para ativá-lo, basta adicionar o seguinte código ao seu arquivo functions.php:
<?php
function themename_comment_reply_js() {
if ( is_singular() && comments_open() && get_option( ‘thread_comments’ ) ) {
wp_enqueue_script( ‘comment-reply’ );
}
}
add_action( ‘wp_enqueue_scripts’, ‘themename_comment_reply_js’ );
Certifique-se de que o Javascript foi adicionado corretamente
É importante incluir Javascript corretamente em seus temas para que não entre em conflito com nenhum plugin. Eu escrevi um post um tempo atrás mostrando como adicionar Javascript através do seu arquivo functions.php. Se você ainda estiver adicionando seu JS no arquivo header.php, certifique-se de ler nosso post sobre Adicionando Javascript ao WordPress do jeito certo .
Teste seu tema em todos os navegadores “principais”
Infelizmente, as pessoas ainda usam navegadores mais antigos, como o Internet Explorer 10. Se você está desenvolvendo temas do WordPress, é muito importante testá-lo em todos os principais navegadores e ter certeza de que está bom. Se o seu site parecer ruim no Firefox, Safari ou IE (não apenas verifique no Chrome), as pessoas podem não fazer o download ou comprá-lo e, se o fizerem, você poderá receber muitos tíquetes de suporte solicitando que você corrija o tema e o faça funcionar . Confira alguns ótimos sites de teste de navegador abaixo:
Incluir um arquivo 404.php
Isso é muito fácil de fazer e também muito importante. Se você não incluir um arquivo 404.php em seu tema quando um usuário navegar no site e terminar em uma página de erro 404, ele poderá mostrar o conteúdo de seu arquivo index.php ou exibir uma página 404 gerada pelo servidor que não combinar com o design do seu site ou fornecer links úteis para o visitante. Isso pode ser ruim para o SEO, mas também é muito hostil ao usuário. Pessoalmente, gosto de incluir um título, uma lista de páginas e talvez até meu formulário de pesquisa. Depende de você o que você inclui, mas certifique-se de ter o arquivo.
Crie páginas únicas para seus tipos de postagem
Se você tiver algum tipo de postagem sendo usado em seu tema, você precisa criar páginas únicas para cada uma, caso contrário, o arquivo single.php padrão será usado. e todos os seus tipos de postagem se parecerão com um blog. Por exemplo, se você tiver um tipo de postagem personalizada de portfólio, deverá ter um arquivo single-portfolio.php para mostrar as postagens de portfólio único.
Se você tiver tipos de postagem personalizados para os quais não deseja necessariamente postagens únicas (como um slider ou um tipo de postagem específico da página inicial), você deve definir esses tipos de postagem com o parâmetro public definido como false e o parâmetro show_ui definido como true ( veja a função register_post_type para mais informações),
Incluir detalhes do tema na folha de estilo
Não se esqueça de incluir os detalhes do tema no seu tema! Você não apenas precisa de um nome para que o tema apareça na guia Aparência, mas também deve mostrar aos usuários qual versão do tema eles estão usando e dar a si mesmo algum crédito pelo tema. Abaixo está uma amostra dos detalhes do tema para o meu Tema WordPress Total .
/*
Theme Name: Total
Version: 4.6
Description: Premium WordPress theme by WPExplorer
Author: WPExplorer
Theme URI: https://themeforest.net/item/total-responsive-multipurpose-wordpress-theme/6339019
Author URI: https://themeforest.net/user/wpexplorer
License: Custom license
License URI: http://themeforest.net/licenses/terms/regular
Text Domain: total
Tags: custom-colors, accessibility-ready, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, theme-options, threaded-comments, translation-ready
Estilos de alinhamento/estilos de imagem padrão
Não se esqueça de estilizar os alinhamentos e estilos de imagem padrão no WordPress. Como você sabe, você pode alinhar imagens à esquerda, direita ou centro em seu editor de postagem, mas você precisa incluir os estilos correspondentes em seu tema para que ele realmente funcione. Abaixo estão apenas o CSS básico para alinhamentos de imagem, blockquote e texto, legendas e algumas redefinições para os rostos sorridentes. Você pode copiá-lo e colá-lo diretamente no seu tema e editar de acordo.
/*————————–*
/* WordPress Alignments
/*————————–*/
.aligncenter{ display:block; margin:0 auto}
.alignright{ float:right; margin:10px 0 10px 10px}
.alignleft{ float:left; margin:10px 10px 10px 0}
.floatleft{ float:left}
.floatright{ float:right}
.textcenter{ text-align:center}
.textright{ text-align:right}
.textleft{ text-align:left}
Widgets padrão de estilo
O WordPress inclui muitos widgets integrados. Se você estiver criando um tema, você deve estilizá-los para combinar com seu site e torná-los mais bonitos. Abaixo está uma lista de todos os diferentes widgets que você deseja estilizar.
/*————————–*
/* WordPress Widget Styles
/*————————–*/
.widget {}
/* links widget */
.widget_links {}
.widget_links ul {}
.widget_links ul li {}
.widget_links ul li a {}
/* meta widget */
.widget_meta {}
.widget_meta ul {}
.widget_meta ul li {}
.widget_meta ul li a {}
/* pages widget */
.widget_pages {}
.widget_pages ul {}
.widget_pages ul li {}
.widget_pages ul li a {}
/* recent-posts widget */
.widget_recent_entries {}
.widget_recent_entries ul {}
.widget_recent_entries ul li {}
.widget_recent_entries ul li a {}
/* archives widget */
.widget_archive {}
.widget_archive ul {}
.widget_archive ul li {}
.widget_archive ul li a {}
.widget_archive select {}
.widget_archive option {}
/* tag-cloud widget */
.widget_links {}
.widget_links li:after {}
.widget_links li:before {}
.widget_tag_cloud {}
.widget_tag_cloud a {}
.widget_tag_cloud a:after {}
.widget_tag_cloud a:before {}
/* calendar widget */
.widget_calendar {}
#calendar_wrap {}
#calendar_wrap th {}
#calendar_wrap td {}
#wp-calendar tr td {}
#wp-calendar caption {}
#wp-calendar a {}
#wp-calendar #today {}
#wp-calendar #prev {}
#wp-calendar #next {}
#wp-calendar #next a {}
#wp-calendar #prev a {}
/* category widget */
.widget_categories {}
.widget_categories ul {}
.widget_categories ul li {}
.widget_categories ul ul.children {}
.widget_categories a {}
.widget_categories select{}
.widget_categories select#cat {}
.widget_categories select.postform {}
.widget_categories option {}
.widget_categories .level-0 {}
.widget_categories .level-1 {}
.widget_categories .level-2 {}
.widget_categories .level-3 {}
/* recent-comments widget */
.recentcomments {}
#recentcomments {}
#recentcomments li {}
#recentcomments li a {}
.widget_recent_comments {}
/* search widget */
#searchform {}
.widget_search {}
.screen-reader-text {}
/* text widget */
.textwidget {}
.widget_text {}
Verificar links de saída
Isso não se aplica muito a temas premium, pois você não deve incluir nenhum link em seu tema (exceto talvez um link para os documentos ou changelog), mas para aqueles que criam temas gratuitos, certifique-se de que os links fornecidos na área de administração e mais importante, o rodapé do site, na verdade vai para algum lugar. E, por favor, não inclua links para sites com spam nem inclua links patrocinados em seus temas. Se você realmente deseja criar um tema gratuito, faça-o para retribuir à comunidade ou aumentar sua exposição. Você não deve criar temas apenas com o objetivo de obter ou vender backlinks.
Certifique-se de que seu formulário de pesquisa está configurado
Mesmo que seu tema não inclua uma barra de pesquisa embutida no tema, em algum lugar as pessoas ainda podem querer adicionar uma à sua barra lateral ou qualquer outra área de widget através do widget da barra de pesquisa, então certifique-se de ter incluído seu arquivo searchform.php em seu tema. Abaixo está um exemplo de como pode ser o código em seu arquivo searchform.php:
<?php
/**
* The template for displaying search forms.
*
* @package Total WordPress Theme
* @author Alexander Clarke
* @copyright Copyright (c) 2017, WPExplorer.com
* @link http://www.wpexplorer.com
* @since 1.0
*/
// Exit if accessed directly
if ( ! defined( ‘ABSPATH’ ) ) {
exit;
} ?>
<form method=”get” class=”myprefix-site-searchform” action=”<?php echo esc_url( home_url( ‘/’ ) ); ?>”>
<input type=”search” name=”s” placeholder=”<?php esc_html_e( ‘Search…’, ‘text_domain’ ); ?>” />
<button type=”submit”><?php esc_html_e( ‘Search’, ‘text_domain’ ); ?></button>
</form>
Teste todas as suas opções de tema
Se você criou um painel de tema personalizado para o seu tema ou adicionou opções personalizadas por meio do WordPress Customizer, é muito importante garantir que todas as suas opções funcionem corretamente. Seria muito frustrante para um usuário que está tentando definir uma opção e não consegue fazê-la funcionar. Portanto, passe por cada opção/configuração e verifique se ela funciona corretamente.
Embelezar os arquivos CSS do seu tema
Outra coisa que gosto de fazer antes de terminar meu tema é executar meu CSS através de um “gerador de CSS” para ter certeza de que todas as minhas indentações estão perfeitas e que não há erros. Às vezes também gosto de compactar meu CSS, dependendo do foco do tema. Eu pessoalmente comprei um aplicativo para o mac chamado “Procssor” que eu uso, mas você pode pesquisar no Google “pretty css” ou “css beautifier” e existem muitas ferramentas online para isso.
Verifique a validação em w3.org
Obviamente você quer que seu tema não tenha nenhum erro de sintaxe de código. Não apenas para que você possa se orgulhar do seu trabalho, mas também porque as pessoas podem não comprar seu tema se encontrarem muitos erros. Um tema válido mostra profissionalismo e experiência, portanto, certifique-se de executar algumas validações simples para garantir que ele saia verde. Vá até o W3 Online Validator e insira o URL da demonstração do seu tema para verificar se há erros. Certifique-se de verificar todas as páginas principais (página inicial, arquivos, pesquisa, postagens únicas, tipos de postagem única, 404, etc).
Teste usando o “teste de unidade de tema” do WordPress.org
Embora este seja um dos passos mais importantes, adicionei-o no final porque muitos desenvolvedores usam o Teste Unitário durante o processo de desenvolvimento. Basicamente o WordPress tem um arquivo xml que você pode importar para o seu site com vários “ testes ” para checar formatação, widgets, alinhamentos, imagens, formatos de post, paginação, etc. ele está pronto para ser lançado ao público e você não tem problemas com as funções e estilos principais do WordPress.
