कस्टम लोगो में CSS क्लास कैसे जोड़ें?

Question

मैंने custom-logoअपनी थीम के लिए सक्षम किया और इसे <?php the_custom_logo(); ?>हेडर में प्रिंट किया । क्या इस छवि में सीधे कुछ और वर्गों को जोड़ने का कोई मौका है? डिफ़ॉल्ट रूप से यह केवल साथ आता है custom-logo।

Answer 1

वर्डप्रेस कस्टम लोगो अनुकूलन के लिए एक फिल्टर हुक प्रदान करते हैं। हुक get_custom_logoफिल्टर है। लोगो वर्ग बदलने के लिए, यह कोड आपकी मदद कर सकता है।

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

संदर्भ: वर्डप्रेस कस्टम लोगो और लोगो लिंक क्लास कैसे बदलें

Answer 2

यहाँ एक सुझाव दिया गया है कि हम wp_get_attachment_image_attributesफ़िल्टर के माध्यम से कक्षाएं कैसे जोड़ सकते हैं (अप्रयुक्त):

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

जहाँ आप अपनी आवश्यकताओं के अनुसार कक्षाओं को समायोजित करते हैं।

Answer 3

जैसा कि आपने पाया कि आप खुद the_custom_logoपर निर्भर हैं get_custom_logo, जो खुद wp_get_attachment_imageको custom-logoक्लास जोड़ने के लिए कहता है । बाद के फ़ंक्शन में एक फ़िल्टर है,wp_get_attachment_image_attributes जिसका उपयोग आप छवि विशेषताओं में हेरफेर करने के लिए कर सकते हैं।

तो आप क्या कर सकते हैं एक फिल्टर का निर्माण करें जो यह जांचता है कि क्या custom-logoवर्ग है और यदि हां और कक्षाएं जोड़ते हैं।

Answer 4

मुझे लगता है कि मुझे एक उत्तर मिला। लेकिन मैं वास्तव में आश्चर्यचकित हूं कि क्या यह सही तरीका है? यह किसी भी तरह से थोड़ा गंदा लगता है: मैंने बस अपने विषय के कार्यों में wp- शामिल / सामान्य-टेम्पलेट.php से लोगो संबंधित भागों की नकल की।

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

Answer 5

बस किसी और के लिए जो समाधान की तलाश में है। मुझे यह मिला , जो मुझे स्वीकृत उत्तर की तुलना में बहुत स्पष्ट लगता है।

इसके अलावा यह लिंक पर भी यूआरएल को बदलने के लिए सरल तरीके देता है! स्वीकृत उत्तर की तुलना में थोड़ा अधिक विस्तृत है।

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