Como adicionar widgets do WordPress?Área de widgets de integração de temas

Recursos de menu personalizados e widgets da barra lateral, simWordPressRecursos em destaque no tema.

• Fazer um tema, se não incluir essas duas funções, é como uma costela de frango...

Chen Weiliangno anteriorconstruir um siteNeste tutorial, compartilho como dar um tema WordPressAdicionar menu personalizado.

Este artigo descreve como adicionar funções de widget personalizadas ao criar um tema.

Assim como adicionar menus personalizados a temas, adicionar widgets personalizados leva apenas 3 etapas.

A primeira etapa, o registro do gadget

Para usar o widget, você deve primeiro se registrar, abrir o arquivo functions.php no tema WordPress,

No arquivo functions.php, adicione o seguinte código:

<?php

//侧边栏小工具
if ( function_exists('register_sidebar') ) {
    register_sidebar( array(
        'name' => __( 'Top Sidebar' ),
        'id' => 'top-sidebar',
        'description' => __( 'The top sidebar' ),
        'before_widget' => '<li>',
        'after_widget' => '</li>',
        'before_title' => '<h2>',
        'after_title' => '</h2>',
    ) );
}

?>

Modifique as tags li e h2 em functions.php para corresponder às tags em sidebar.php:

Os títulos li e module h2 de 'before_widget' e 'after_widget' modificam o código de acordo com a situação real.

(talvez sem modificação)

        'before_widget' => '<li>',
        'after_widget' => '</li>',

        'before_title' => '<h2>',
        'after_title' => '</h2>',

O código acima registra uma área de widget chamada "top-sidebar":

• O nome exibido é "Barra Lateral Superior".
• Adicione uma tag h2 ao título.
• Os itens de conteúdo são marcados com li.

登录back-end do WordPressPainel, vá para Aparência → Widgets.

Se você puder ver a área do widget da barra lateral superior no lado direito da imagem abaixo, significa que o registro foi bem-sucedido ▼

A segunda etapa, chamada de gadget

Depois que o gadget é registrado, ele pode ser chamado no arquivo de modelo de tema e o código a seguir pode ser chamado no arquivo sidebar.php.

1) No arquivo sidebar.php, abaixo da maior tag li ou div, insira ▼

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(top-sidebar) ) : ?>

2) No arquivo sidebar.php, o maiorouAcima, adicione ▼

<?php endif; ?>

Etapa XNUMX: configurar widgets

1) O gadget é registrado e a posição de exibição também é definida no arquivo do tema.

• Você pode definir a área do grupo de widgets no plano de fundo do WordPress ▼

2) Após salvar, atualize a página inicial.

• A barra lateral do nosso site ficará como a imagem abaixo ▼

Você pode ver a imagem acima, indicando que nosso gadget foi feito e está funcionando normalmente.

Como adicionar vários widgets do WordPress em diferentes áreas?

Repita as etapas XNUMX e XNUMX para fazer com que seu tema WordPress suporte widgets em locais diferentes.

Suponha que você precise adicionar um widget ao cabeçalho, barra lateral e parte inferior do tema.

1) Primeiro, você precisa copiar o seguinte código no arquivo functions.php ▼

if (function_exists('register_sidebar')) {

register_sidebar(array(
'name' => 'Header',
'id' => 'header',
'description' => 'This is the widgetized header.',
'before_widget' => '<div id="%1$s">',
'after_widget' => '</div>',
'before_title' => '<h4>',
'after_title' => '</h4>'
));
register_sidebar(array(
'name' => 'Sidebar',
'id' => 'sidebar',
'description' => 'This is the widgetized sidebar.',
'before_widget' => '<div id="%1$s">',
'after_widget' => '</div>',
'before_title' => '<h4>',
'after_title' => '</h4>'
));
register_sidebar(array(
'name' => 'Footer',
'id' => 'footer',
'description' => 'This is the widgetized footer.',
'before_widget' => '<div id="%1$s">',
'after_widget' => '</div>',
'before_title' => '<h4>',
'after_title' => '</h4>'
));

}

2) Em seguida, adicione o seguinte código aos arquivos header.php, sidebar.php e footer.php, respectivamente.

cabeçalho.php ▼

<div id="widgetized-header">

<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('header')) : else : ?>

<div>
<p><strong>Widgetized Header</strong></p>
<p>This panel is active and ready for you to add some widgets via the WP Admin</p>
</div>

<?php endif; ?>

</div>

barra lateral.php ▼

<div id="widgetized-sidebar">

<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('sidebar')) : else : ?>

<div>
<p><strong>Widgetized Sidebar</strong></p>
<p>This panel is active and ready for you to add some widgets via the WP Admin</p>
</div>

<?php endif; ?>

</div>

rodapé.php ▼

<div id="widgetized-footer">

<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('footer')) : else : ?>

<div>
<p><strong>Widgetized Footer</strong></p>
<p>This panel is active and ready for you to add some widgets via the WP Admin</p>
</div>

<?php endif; ?>

</div>

Isso é um sucesso!

• Claro, você também pode modificar vários detalhes no código de acordo com suas necessidades ^_^
• Os 2 passos acima, permitem que o restante do tema integre a funcionalidade do widget.

Em seguida, continue compartilhando dicas para usar widgets no WordPress.

Dicas de widgets de integração de temas do WordPress

Gerencie widgets personalizados com eficiência:

1) Depois de adicionar widgets ao tema, você pode criar um arquivo separado e nomeá-lowidgets.php.

• Para salvar todo o código de widget personalizado adicionado na etapa 1 a esta pasta.

2) Adicione o código ao arquivo functions.php:

if ($wp_version >= 2.8) require_once(TEMPLATEPATH.’/widgets.php’);

3) Salve todo o código de widget de widgets customizado adicionado na etapa 1 no arquivo widgets.php.

Esse método garante que todos os widgets sejam carregados sem problemas e funcionem em todas as versões do WordPress que suportam widgets.

Dessa forma, você pode gerenciar seus arquivos de tema do WordPress com mais eficiência.