Como posso modificar a saída do widget padrão do WordPress?


17

Não quero estilizar o widget padrão apenas com CSS. Quero exibir o conteúdo padrão do widget 'Categorias' com minha própria estrutura HTML.

Existe algum filtro ou gancho disponível para fazer isso?


2
Escreva seu próprio widget que faça o que você deseja. Comece copiando o código do widget de categorias e faça as modificações.
Mark Kaplun

Obrigado, geralmente sigo este truque para fazer minhas modificações no widget. É o método mais fácil para mim.
Eh Jewel

Respostas:


13

Para expandir a resposta de Mark, não há muito (geralmente) disponível na forma de filtros nos widgets padrão do WordPress (exceto talvez widget_text).

Mas é fácil adicionar seu próprio widget personalizado - coloque isso em functions.php:

require_once("my_widget.php");
add_action("widgets_init", "my_custom_widgets_init");

function my_custom_widgets_init(){
  register_widget("My_Custom_Widget_Class");
}

Então, você simplesmente deseja copiar o widget de categorias existente de wp-includes/widgets/class-wp-widget-categories.phppara my_widget.phpno seu tema e alterar o nome da classe para o mesmo nome que o usado na chamada register_widget()acima.

Em seguida, faça as alterações que desejar! Sugiro alterar o título também para que você possa distingui-lo do widget Categorias padrão.


10

Você pode substituir os widgets padrão do WordPress estendendo-os. O código do widget Categorias padrão pode ser encontrado no seguinte link: https://developer.wordpress.org/reference/classes/wp_widget_categories/widget/

e abaixo está um código de exemplo de como você pode substituir a saída do widget.

Class My_Categories_Widget extends WP_Widget_Categories {
    function widget( $args, $instance ) {
        // your code here for overriding the output of the widget
    }
}

function my_categories_widget_register() {
    unregister_widget( 'WP_Widget_Categories' );
    register_widget( 'My_Categories_Widget' );
}
add_action( 'widgets_init', 'my_categories_widget_register' );

1
E a razão pela qual eu não ofereci isso como opção é que você pode querer o comportamento original em algum momento e, com a sua solução, perde a capacidade de obtê-lo.
Mark Kaplun

Sim, se você deseja ter o widget padrão como ele é, é melhor registrar um widget totalmente novo. codex.wordpress.org/Function_Reference/register_widget
Boris Kuzmanov

8

Você não precisa criar um novo widget completo para fazer o que precisa. Enquanto eu leio sua pergunta, você está apenas interessado em alterar a forma como as categorias são exibidas no front end. Existem duas funções que exibem as categorias no front end

Tudo isso depende de qual opção foi selecionada no back-end

Agora, cada uma dessas duas funções possui um filtro específico do widget ( widget_categories_argse widget_categories_dropdown_argsrespectivamente ) que você pode usar para alterar os argumentos que devem ser passados ​​para essas funções. Você pode usar isso para alterar o comportamento da lista / lista suspensa. No entanto, isso pode não ser suficiente para fazer o que você deseja.

Como alternativa, cada função tem seu próprio filtro para alterar completamente a maneira como essas funções devem exibir sua saída.

Eles são respectivamente

Podemos usar o widget_titlefiltro para segmentar especificamente apenas o widget e não outras instâncias dessas funções.

Em resumo, você pode tentar o seguinte: ( TOTALMENTE NÃO ESTADO )

add_filter( 'widget_title', function( $title, $instance, $id_base )
{
    // Target the categories base
    if( 'categories' === $id_base ) // Just make sure the base is correct, I'm not sure here
        add_filter( 'wp_list_categories', 'wpse_229772_categories', 11, 2 );
        //add_filter( 'wp_dropdown_cats', 'wpse_229772_categories', 11, 2 );
    return $title;
}, 10, 3 );

function wpse_229772_categories( $output, $args )
{
    // Only run the filter once
    remove_filter( current_filter(), __FUNCTION__ );

    // Get all the categories
    $categories = get_categories( $args );

    $output = '';
    // Just an example of custom html
    $output .= '<div class="some class">';
    foreach ( $categories as $category ) {
        // Just an example of custom html
        $output .= '<div class="' . echo $category->term_id . '">';
        // You can add any other info here, like a link to the category
        $output .= $category->name;
        // etc ect, you get the drift
        $output .= '</div>';
    }
    $output .= '</div>';

    return $output;
}, 11, 2 );
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.