Após alguns anos (ou mesmo meses) de criação e desenvolvimento de temas do WordPress, especialmente para clientes, você começa a perceber que muitas das funcionalidades podem ser padronizadas ou reduzidas a um “tema ou kit inicial”. Isso ajuda a iniciar o processo de desenvolvimento e a avançar rapidamente.
O melhor primeiro passo para fazer isso, descobri, é descobrir a maioria das funções comuns e incluí-las no functions.php . este functions.php O arquivo precisará ser estendido para atender às necessidades específicas do tema à medida que novos projetos surgirem, mas fornecerá um ponto de partida mais do que impressionante para o desenvolvimento.
Existem cerca de 13 funções-chave que eu gosto de começar e adicionarei a elas conforme necessário ...
O recurso de menu de navegação, introduzido no WordPress 3.0, permite a criação e manutenção intuitiva de menus de navegação em temas.
No mínimo, um tema padrão precisará de um menu de navegação principal, talvez no cabeçalho e um menu de navegação secundário no rodapé. Para fazer isso, vamos registrar os dois menus “Main Menu” e “Secondary Menu”
Enquanto isso não é um recurso particularmente novo, ainda é bom para envolvê-lo em um if function_exists() apenas no caso de o usuário estar preso em uma instalação pré-3.0:
No functions.php arquivo, inclua o seguinte:
if ( function_exists( 'register_nav_menus' ) ) {register_nav_menus(array('main_menu' => __( 'Main Menu', 'cake' ),'secondary_menu' => __( 'Secondary Menu', 'cake' ),));} Agora que os Menus estão registrados, precisamos informar ao tema onde gerá-los. Gostaríamos que o menu principal aparecesse em nosso cabeçalho. Então, no nosso header.php arquivo, incluímos o seguinte código:
'main_menu','menu' => '','container' => false,'echo' => true,'fallback_cb' => false,'items_wrap' => ' %3$s
','depth' => 0 );wp_nav_menu( $defaults );?>
Primeiro, verificamos se temos um menu chamado 'main_menu' definido e, se o fizermos, inseriremos seu conteúdo aqui, senão voltaremos ao padrão wp_list_pages() que podemos personalizar ainda mais para exibir os links conforme necessário.
Se você quiser personalizar ainda mais o menu, consulte o Página do códice WordPress em wp_nav_menu() função.
Queremos que o menu secundário apareça no rodapé, então abrimos o footer.php e inclua o seguinte código:
'secondary_menu','menu' => '','container' => false,'echo' => true,'fallback_cb' => false,'items_wrap' => ' %3$s
','depth' => 0 );wp_nav_menu( $defaults );?>
Esta função permite que você use CSS personalizado para estilizar o editor visual WordPress TinyMCE.
Crie um arquivo CSS chamado editor-style.css e cole seus estilos dentro. Como espaço reservado, gosto de começar com estilos no editor-style.css arquivo do tema Twenty Twelve.
No functions.php adicione o seguinte:
add_editor_style();Se você não quiser usar o nome “editor-style” para o seu arquivo CSS e também quiser mover o arquivo para outro lugar, por exemplo, dentro de um diretório css, então modifique a função.
Por exemplo, quero nomear meu arquivo tiny-mce-styles.css e eu quero dentro do meu diretório CSS; então minha função ficará assim:
add_editor_style('/css/editor-style.css'); Enquanto estamos nisso, podemos também estilizar o editor para idiomas da direita para a esquerda. No diretório do tema, crie um arquivo CSS chamado editor-style-rtl.css e, no mínimo, inclua o seguinte:
html .mceContentBody {direction: rtl;unicode-bidi: embed;}li {margin: 0 24px 0 0;margin: 0 1.714285714rem 0 0;}dl {margin: 0 24px;margin: 0 1.714285714rem;}tr th {text-align: right;}td {padding: 6px 0 6px 10px;text-align: right;}.wp-caption {text-align: right;}Novamente, como um espaço reservado, os estilos acima são do tema Twenty Twelve. Restyle e estender conforme necessário.
A maioria das pessoas comentando em blogs on-line tem um avatar associado a elas. Se, no entanto, eles não o fazem e você não gosta particularmente das opções de avatar padrão do WordPress, você pode definir o seu próprio.
Para fazer isso, inclua o seguinte código no seu functions.php :
if ( !function_exists('cake_addgravatar') ) {function cake_addgravatar( $avatar_defaults ) {$myavatar = get_template_directory_uri() . '/images/avatar.png';$avatar_defaults[$myavatar] = 'avatar';return $avatar_defaults;} add_filter ('avatar_defaults', 'cake_addgravatar');} O que estamos fazendo aqui primeiro é verificar se a função existe. Em caso afirmativo, adicionamos um filtro que diz ao WordPress para usar nosso avatar definido como padrão.
Estamos dizendo ao WordPress para encontrar este avatar em nosso diretório “images” dentro do diretório do tema. O próximo passo, obviamente, é criar a própria imagem e enviá-la para a pasta “images”.
O recurso de formatos de postagem permite personalizar o estilo e a apresentação de postagens. No momento em que escrevo, existem 9 formatos de postagem padronizados que os usuários podem escolher: além de galeria, link, imagem, citação, status, vídeo, áudio e bate-papo. Além desses, o formato de postagem padrão “Padrão” indica que nenhum formato de postagem é especificado para a postagem específica.
Para adicionar essa funcionalidade ao seu tema, inclua o seguinte código no seu functions.php , especificando os formatos de postagem dos quais você estará aproveitando. Por exemplo, se você quer apenas o aparte, imagem, link, citação e status de pós-formatação, seu código deve ficar assim:
add_theme_support( 'post-formats', array( 'aside', 'image', 'link', 'quote', 'status' ) );A função de imagem em destaque, como o códice explica, permite ao autor escolher uma imagem representativa para Postagens, Páginas ou Tipos de Postagens Personalizadas.
Para habilitar essa funcionalidade, inclua o seguinte código no seu functions.php :
add_theme_support( 'post-thumbnails' );Poderíamos parar por aí e deixá-lo no WordPress para definir os tamanhos das miniaturas ou poderíamos assumir o controle e defini-los nós mesmos. Nós vamos fazer o último, obviamente!
Digamos que estamos administrando um site de revista em que a imagem em destaque aparecerá em pelo menos três tamanhos diferentes. Talvez uma imagem grande, se a postagem é destaque ou é a mais nova, uma imagem de tamanho médio, se é apenas um post entre o resto e um tamanho normal, talvez para aparecer em outro lugar.
Aproveitamos o add_image_size() função que instrui o WordPress a fazer uma cópia da nossa imagem em destaque em nossos tamanhos definidos.
Para fazer isso, adicionamos o seguinte ao functions.php :
// regular sizeadd_image_size( 'regular', 400, 350, true );// medium sizeadd_image_size( 'medium', 650, 500, true );// large thumbnailsadd_image_size( 'large', 960, '' ); Veja como trabalhar com o add_image_size() função para o corte suave ou difícil cortar suas imagens no Página do códice WordPress.
Depois de definirmos os tamanhos de imagem acima (regular, médio e grande) - e, como padrão, o WordPress não faz isso por nós -, adicionaremos a capacidade de selecionar esses tamanhos de imagem na interface Configurações de exibição de anexos .
Seria bom se, ao escrever um post, você pudesse inserir a imagem de tamanho desejada selecionando-a no menu suspenso, como faria normalmente nos tamanhos padrão do WordPress.
Para fazer isso, adicionamos o seguinte ao nosso functions.php :
// show custom image sizes on when inserting mediafunction cake_show_image_sizes($sizes) {$sizes['regular'] = __( 'Our Regular Size', 'cake' );$sizes['medium'] = __( 'Our Medium Size', 'cake' );$sizes['large'] = __( 'Our Large Size', 'cake' );return $sizes;} add_filter ('image_size_names_choose', 'cake_show_image_sizes'); Com isso, podemos selecionar nossos tamanhos de imagem.
Este é simples. Se você cria temas do WordPress há algum tempo, você se lembrará dos dias em que precisou incluir manualmente o código para gerar o feed RSS diretamente no header.php. Essa abordagem é mais limpa e depende da wp_head() gancho de ação para gerar o código necessário.
No functions.php arquivo, inclua o seguinte:
// Adds RSS feed links to for posts and comments.add_theme_support( 'automatic-feed-links' ); Certifique-se de que você tem it in the , right before end of header.php it in the , right before end of &rgt;/head&lgt;
Com esta função, você dá o primeiro passo para tornar seu tema disponível para tradução.
É melhor chamar essa função de dentro do after_setup_theme() ação gancho ou seja, após as ações de configuração, registro e inicialização do seu tema terem sido executadas.
add_action('after_setup_theme', 'my_theme_setup');function my_theme_setup(){load_theme_textdomain('my_theme', get_template_directory() . '/languages');} Agora adicione um diretório chamado ' languages 'no diretório do seu tema.
Você pode aprender mais sobre a função load_theme_textdomain () no Página do códice WordPress .
A largura do conteúdo é um recurso em temas que permite definir a largura máxima permitida para vídeos, imagens e outros conteúdos da oEmbed em um tema.
Isso significa que, quando você cola o URL do YouTube no editor e o WordPress exibe automaticamente o vídeo real no front end, esse vídeo não excederá a largura definida usando o URL $content_width variável.
if ( ! isset( $content_width ) )$content_width = 600;O WordPress também recomenda a adição do seguinte CSS:
.size-auto,.size-full,.size-large,.size-medium,.size-thumbnail {max-width: 100%;height: auto;} Enquanto isso é útil, é um pouco pesado entregue. Define a largura do conteúdo para todo o conteúdo. E se você quisesse vídeos de uma largura maior em páginas do que em postagens e um tamanho ainda maior em um tipo de postagem personalizada? Atualmente, não há como definir isso. Existe no entanto um pedido de recurso propondo a inclusão do $content_width variável para o built-in add_theme_support() .
Seu tema típico terá pelo menos uma barra lateral. O código para definir a barra lateral é bastante simples.
Adicione o seguinte ao seu functions.php :
if(function_exists('register_sidebar')){register_sidebar(array('name' => 'Main Sidebar','before_widget' => '','after_widget' => '','before_title' => '','after_title' => '
',));} Isso registra e define uma barra lateral chamada "Barra lateral principal" e sua marcação HTML.
Você pode aprender mais sobre o register_sidebar() função na página do códice WordPress.
Você encontrará rotineiramente a necessidade de ter mais do que uma barra lateral para que você possa simplesmente copiar / colar o código acima e alterar o nome.
Há também um register_sidebars() função que lhe permitirá registrar e definir múltiplas barras laterais de uma só vez, mas não lhe dá a flexibilidade de dar a cada nova barra lateral um nome único.
Se você está exibindo trechos de suas postagens em uma página de índice do blog, por padrão o WordPress mostrará [...] para indicar que há mais "depois do salto".
Você provavelmente vai querer adicionar um "link mais" e definir como isso se parece.
Para fazer isso, precisamos adicionar o seguinte código ao nosso functions.php :
function new_excerpt_more($more) {global $post;return '...
function cake_content_nav( $nav_id ) {global $wp_query;if ( $wp_query->max_num_pages > 1 ) : ?>Se você tiver instruções especiais em seu tema, por exemplo. na página de opções do seu tema que você gostaria que o usuário visse quando ativasse o tema pela primeira vez, você pode usar a seguinte função para redirecioná-lo para lá:
if (is_admin() && isset($_GET['activated']) && $pagenow == "themes.php")wp_redirect('themes.php?page=themeoptions'); Preste atenção especial ao wp_redirect() função. Certifique-se de substituir o ' themes.php?page=themeoptions 'com o URL da sua página.
Durante o desenvolvimento, às vezes, acho que a barra de ferramentas (ferramentas) do WordPress é bastante distrativa.
Está em uma posição fixa no topo da janela e, dependendo do meu layout, pode cobrir alguns elementos do cabeçalho.
Apesar de ainda projetar e desenvolver, eu gosto de esconder a barra de administração com esta função útil.
show_admin_bar( false );Você tem alguma função favorita para iniciar o desenvolvimento de modelos do WordPress? Quais funções você gostaria de ver? Deixe-nos saber nos comentários.
Imagem em destaque / miniatura, imagem multi-ferramenta via Shutterstock.