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

18

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.

leymannx
quelle

Antworten:

16

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

Dhinju Divakaran
quelle
14

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.

birgire
quelle
7

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.

cjbj
quelle
2

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 );
}
leymannx
quelle
1

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;   
} 
Fred Bradley
quelle