¿Cómo puedo modificar la salida del widget predeterminado de WordPress?

No quiero diseñar el widget predeterminado solo con CSS. Quiero mostrar el contenido predeterminado del widget 'Categorías' con mi propia estructura HTML.

¿Hay algún filtro o gancho disponible para hacer eso?

Para ampliar la respuesta de Mark, no hay mucho (en general) disponible en la forma de filtros en los widgets predeterminados de WordPress (excepto quizás widget_text).

Pero agregar su propio widget personalizado es fácil: ponga esto en su 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");
}

Luego, simplemente desea copiar el widget de categorías existentes de wp-includes/widgets/class-wp-widget-categories.phpa my_widget.phpen su tema y cambiar el nombre de la clase al mismo nombre que el utilizado en la llamada register_widget()anterior.

¡Entonces haz los cambios que quieras! Sugiero cambiar el título también para que pueda distinguirlo del widget de Categorías predeterminado.

Puede anular los widgets predeterminados de WordPress extendiéndolos. El código para el widget de Categorías predeterminado se puede encontrar en el siguiente enlace: https://developer.wordpress.org/reference/classes/wp_widget_categories/widget/

y debajo hay un código de ejemplo de cómo puede anular la salida del 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' );

No necesita crear un nuevo widget completo para hacer lo que necesita hacer. Mientras leo su pregunta, le interesa cambiar cómo se muestran las categorías en el front-end. Hay dos funciones que muestran las categorías en el front-end.

• wp_list_categories() que muestra las categorías en una lista

• wp_dropdown_categories() que muestra categorías en una lista desplegable

Todo esto depende de la opción seleccionada en el backend

Ahora, cada una de estas dos funciones tiene un filtro específico de widget ( widget_categories_argsy widget_categories_dropdown_argsrespectivamente ) que puede usar para alterar los argumentos que se deben pasar a estas funciones. Puede usar esto para alterar el comportamiento de la lista / menú desplegable. Sin embargo, esto puede no ser suficiente para hacer lo que quieres.

Alternativamente, cada función tiene su propio filtro para alterar por completo la forma en que estas funciones deberían mostrar su salida.

Respectivamente son

• wp_list_categories

• wp_dropdown_cats

Podemos usar el widget_titlefiltro para apuntar específicamente solo al widget y no a otras instancias de estas funciones.

En resumen, puede intentar lo siguiente: ( TOTALMENTE NO PROBADO )

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 );