কাস্টম লোগোতে সিএসএস ক্লাস যুক্ত করবেন কীভাবে?

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

আমি মনে করি আমি একটি উত্তর খুঁজে পেয়েছি। তবে আমি সত্যিই ভাবছি যদি এটি সঠিক উপায় হয়? এটি কিছুটা নোংরা অনুভব করে: আমি কেবলমাত্র আমার থিমের ফাংশন.এফপি-র মধ্যে ডাব্লুপি-অন্তর্ভুক্ত / জেনারেল-টেম্পলেট.এফপি থেকে লোগো সম্পর্কিত অংশগুলি অনুলিপি করেছি এবং কিছু কাস্টম ক্লাস যুক্ত ফাংশনগুলির নাম পরিবর্তন করেছি:

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