Wie füge ich dem benutzerdefinierten Logo eine CSS-Klasse hinzu?

Ich habe custom-logofür mein Theme aktiviert und habe es mit <?php the_custom_logo(); ?>in die Kopfzeile gedruckt . Gibt es eine Möglichkeit, diesem Bild einfach direkt weitere Klassen hinzuzufügen? Standardmäßig kommt es nur mit custom-logo.

WordPress bietet einen Filter-Hook für die Anpassung von benutzerdefinierten Logos. Der Haken get_custom_logoist der Filter. Zum Ändern der Logo-Klasse kann dieser Code hilfreich sein.

add_filter( 'get_custom_logo', 'change_logo_class' );


function change_logo_class( $html ) {

    $html = str_replace( 'custom-logo', 'your-custom-class', $html );
    $html = str_replace( 'custom-logo-link', 'your-custom-class', $html );

    return $html;
}

Referenz: Ändern des benutzerdefinierten WordPress-Logos und der Logo-Link-Klasse

Hier ist ein Vorschlag, wie wir versuchen könnten, Klassen durch den wp_get_attachment_image_attributesFilter hinzuzufügen (ungetestet):

add_filter( 'wp_get_attachment_image_attributes', function( $attr )
{
    if( isset( $attr['class'] )  && 'custom-logo' === $attr['class'] )
        $attr['class'] = 'custom-logo foo-bar foo bar';

    return $attr;
} );

wo Sie die Klassen an Ihre Bedürfnisse anpassen.

Da bist du auf sich the_custom_logoangewiesen get_custom_logo, der selbst ruft wp_get_attachment_image, um die custom-logoKlasse hinzuzufügen . Die letztere Funktion verfügt über einen Filter, mit wp_get_attachment_image_attributesdem Sie die Bildattribute bearbeiten können.

Sie können also einen Filter erstellen, der prüft, ob die custom-logoKlasse vorhanden ist, und wenn ja, weitere Klassen hinzufügen.

Ich glaube, ich habe eine Antwort gefunden. Aber ich frage mich wirklich, ob das der richtige Weg ist? Es fühlt sich irgendwie ein bisschen schmutzig an: Ich habe einfach die Logo-bezogenen Teile von wp-includes / general-template.php in die functions.php meines Themes kopiert und die Funktionen umbenannt, wobei einige benutzerdefinierte Klassen hinzugefügt wurden:

function FOOBAR_get_custom_logo( $blog_id = 0 ) {
    $html = '';

    if ( is_multisite() && (int) $blog_id !== get_current_blog_id() ) {
        switch_to_blog( $blog_id );
    }

    $custom_logo_id = get_theme_mod( 'custom_logo' );

    if ( $custom_logo_id ) {
        $html = sprintf( '<a href="%1$s" class="custom-logo-link" rel="home" itemprop="url">%2$s</a>',
            esc_url( home_url( '/' ) ),
            wp_get_attachment_image( $custom_logo_id, 'full', false, array(
                'class'    => 'custom-logo FOO-BAR FOO BAR', // added classes here
                'itemprop' => 'logo',
            ) )
        );
    }

    elseif ( is_customize_preview() ) {
        $html = sprintf( '<a href="%1$s" class="custom-logo-link" style="display:none;"><img class="custom-logo"/></a>',
            esc_url( home_url( '/' ) )
        );
    }

    if ( is_multisite() && ms_is_switched() ) {
        restore_current_blog();
    }

    return apply_filters( 'FOOBAR_get_custom_logo', $html );
}

function FOOBAR_the_custom_logo( $blog_id = 0 ) {
    echo FOOBAR_get_custom_logo( $blog_id );
}

Nur für alle, die nach Lösungen suchen. Ich habe das gefunden , was ich viel klarer finde als die akzeptierte Antwort.

Außerdem gibt es einfache Möglichkeiten, die URL des Links zu ändern! Nur ein bisschen detaillierter als die akzeptierte Antwort.

add_filter( 'get_custom_logo', 'add_custom_logo_url' );
function add_custom_logo_url() {
    $custom_logo_id = get_theme_mod( 'custom_logo' );
    $html = sprintf( '<a href="%1$s" class="custom-logo-link" rel="home" itemprop="url">%2$s</a>',
            esc_url( 'www.somewhere.com' ),
            wp_get_attachment_image( $custom_logo_id, 'full', false, array(
                'class'    => 'custom-logo',
            ) )
        );
    return $html;   
}