আমি কীভাবে কোনও কাস্টমাইজার সেটিং সহ নির্বাচনী রিফ্রেশটি প্রয়োগ করব?

Question

আমি যে থিমটি তৈরি করছি তাতে একটি পৃষ্ঠা টেম্পলেটটিতে আমার একটি বিভাগ রয়েছে যা ব্যবহারকারীরা ড্রপডাউন-পৃষ্ঠাগুলি নিয়ন্ত্রণ ব্যবহার করে কাস্টমাইজারটিতে নির্বাচন করা কোনও পৃষ্ঠার ভিত্তিতে সামগ্রী প্রদর্শন করে। এই মুহূর্তে এটি কেবলমাত্র স্ট্যান্ডার্ড ডিফল্ট রিফ্রেশ পরিবহন ব্যবহার করছে, তবে যেহেতু এই ধরণের ক্লঙ্কি পুরো ইফ্রেমে পুনরায় লোড করছে তাই আমি ভাবছিলাম যে নতুন নির্বাচিত রিফ্রেশ বৈশিষ্ট্যটি ব্যবহার করা সম্ভব কিনা। তবে কীভাবে এটি বাস্তবায়ন করা যায় তা সম্পর্কে আমি নিশ্চিত নই। কেউ যদি জানেন যে এটি সম্ভব কিনা এবং তা হলে এটি কীভাবে করবেন?

আমার পৃষ্ঠার টেমপ্লেটের কোডটি এখানে লিখিত সামগ্রী প্রদর্শন করে:

<?php if ((get_theme_mod( 'intro_page' )) != '') {

$intro_id = get_theme_mod( 'intro_page' );

$intro_header = get_the_title( $intro_id );

$intro_excerpt = get_the_excerpt( $intro_id );

$intro_link = get_the_permalink( $intro_id );

$intro_linktext = get_post_meta( $intro_id, 'emm_cta_text', true );

echo '<h1>' . esc_html($intro_header) . '</h1>' . '<p>' . esc_html($intro_excerpt) . '</p>';

if( ! get_post_meta( $intro_id, 'emm_cta_text', true ) ) {
echo '<p><a class="cta" href="' . esc_url($intro_link) . '">Learn More</a></p>';
}else{
echo '<p><a class="cta" href="' . esc_url($intro_link) . '">' . esc_html($intro_linktext) . '</a></p>';
}
} ?>

কাস্টমাইজারে সেটিংসের কোড এখানে:

$wp_customize->add_setting( 'intro_page' , array(
'sanitize_callback' => 'absint',
) );

$wp_customize->add_control( 'intro_page', array(
'label'    => __( 'Page to use for intro section', 'veritas' ), 
'section'  => 'intro',
'settings' => 'intro_page',
'type'     => 'dropdown-pages',
'priority' => 1
) );

Answer 1

নির্বাচিতভাবে রিফ্রেশ টেম্পলেট কোড আউটপুট করতে একটি ফাংশন তৈরি করুন

( <div class="cta-wrap">মার্কআপের এই নির্দিষ্ট ব্লকটিকে টার্গেট করা সহজ করার জন্য আমি এইচটিএমএলটি জড়িয়ে রেখেছি ))

function wpse247234_cta_block() {
    if ( ( get_theme_mod( 'intro_page' ) ) != '' ) {
        $intro_id       = get_theme_mod( 'intro_page' );
        $intro_header   = get_the_title( $intro_id );
        $intro_excerpt  = get_the_excerpt( $intro_id );
        $intro_link     = get_the_permalink( $intro_id );
        $intro_linktext = get_post_meta( $intro_id, 'emm_cta_text', true );

        echo '<div class="cta-wrap">';
            echo '<h1>' . esc_html( $intro_header ) . '</h1>' . '<p>' . esc_html( $intro_excerpt ) . '</p>';

            if ( ! get_post_meta( $intro_id, 'emm_cta_text', true ) ) {
                echo '<p><a class="cta" href="' . esc_url( $intro_link ) . '">Learn More</a></p>';
            } else {
                echo '<p><a class="cta" href="' . esc_url( $intro_link ) . '">' . esc_html( $intro_linktext ) . '</a></p>';
            }
        echo '</div>';
    }
}

উপরের সদ্য নির্মিত ফাংশনে একটি কল দিয়ে আপনার টেম্পলেট আপডেট করুন:

wpse247234_cta_block();

কাস্টমাইজার সেট আপ করুন

function wpse247234_customize_register( $wp_customize ) {

    $wp_customize->add_section( 'intro', array (
            'title'    => __( 'intro', 'text-domain' ),
            'priority' => 999,
    ) );

    $wp_customize->add_setting( 'intro_page' , array(
            'sanitize_callback' => 'absint',
            'transport' => 'postMessage'
    ) );

    $wp_customize->add_control( 'intro_page', array(
            'label'    => __( 'Page to use for intro section', 'text-domain' ), 
            'section'  => 'intro',
            'settings' => 'intro_page',
            'type'     => 'dropdown-pages',
            'priority' => 1
    ) );

    $wp_customize->selective_refresh->add_partial( 'intro_page', array(
        'selector'            => '.cta-wrap',
        'container_inclusive' => true,
        'render_callback'     => 'wpse247234_cta_block',
        'fallback_refresh'    => false, // Prevents refresh loop when document does not contain .cta-wrap selector. This should be fixed in WP 4.7.
    ) );
}
add_action( 'customize_register', 'wpse247234_customize_register' );

আইটেমটি রিফ্রেশ হওয়ার সাথে সাথে স্টাইলিং করা

আংশিক সতেজ হওয়া অবস্থায়, প্রভাবিত উপাদানটির customize-partial-refreshingসাথে এটি ক্লাস যুক্ত হবে। আপনি এটির মতো স্টাইল করতে পারেন:

.cta-wrap.customize-partial-refreshing {
    // styles...
}

সাহা্য্যকারী লিংক

• কাস্টমাইজারে নির্বাচনী রিফ্রেশ
• থিম বিকল্পগুলি - কাস্টমাইজার এপিআই
• কেমন কটাক্ষপাত গ্রহণ কুড়ি ষোল v1.3 হ্যান্ডলগুলি নির্বাচনী রিফ্রেশ আপ এবং চলমান এই উদাহরণ পেতে সহায়ক ছিল।

Comments

দেখে মনে হচ্ছে আপনি অনেক বেশি জানেন;) সুতরাং আপনি যদি মনে করেন আপনার পরবর্তী স্তরের একটি উত্তর থাকতে পারে তবে কিছু অ্যাট্রিবিউট চেঞ্জের সাথে একটি মিশ্র সেটিংস হ'ল আংশিক রিফ্রেশ চালু করা হবে অন্যরা সম্পূর্ণ রিফ্রেশ করুন (এই ক্ষেত্রে পূর্ণ জেএস বিকল্পগুলি সেট করার জন্য প্রয়োজন) । আমি কি একটি আনুষ্ঠানিক প্রশ্ন করা উচিত? ;))

— মার্ক কপলুন

@ মার্কক্যাপলুন, আপনি যদি জানতেন যে এই উত্তরটি আমাকে কতক্ষণ লেগে গেছে :-) আমার পরীক্ষার সেটআপে আমার কাছে উপরে নির্বাচিত রিফ্রেশ ছাড়াও পুরো পৃষ্ঠা রিফ্রেশ বিকল্পের মিশ্রণ রয়েছে। ঠিক বাক্সের বাইরে কাজ করে মনে হচ্ছে। আপনি যদি আপত্তি না করেন তবে আমি আপনার নির্দিষ্ট বিবরণ সহ একটি নতুন প্রশ্ন পছন্দ করব এবং সময় অনুমতি দিলে আমি এটিতে একটি ক্র্যাক নিতে পেরে খুশি হব।

— ডেভ রোমসে

fallback_refreshমন্তব্য সম্পর্কে : "নথিতে .cta- মোড়ক নির্বাচক না থাকলে ধ্রুবক রিফ্রেশ প্রতিরোধ করে"। অসীম পুনরায় লোডিং সহ বাগটি 4.7-আরসি 1 এ স্থির করা উচিত।

— ওয়েস্টন রাউটার

@ ডেভ-রোমসে জেএস-এর মূল বক্তব্য কী customize-preview.js? দেখে মনে হচ্ছে এটি পৃষ্ঠার আইডিতে উপাদানটির সামগ্রী সেট করছে? বাছাই করা রিফ্রেশগুলি কি আপনার পরিবর্তে এই সমস্তগুলি পরিচালনা করছে এবং সুতরাং এই জেএস ফাইলের কোনও প্রয়োজন নেই?

— ওয়েস্টন রাউটার

@ ওয়েস্টনআউটার 4.7-আরসি 1-তে অসীম রিফ্রেশের জন্য ঠিক করা সম্পর্কে নোটের জন্য আপনাকে ধন্যবাদ। customize-preview.jsঅপ্রয়োজনীয় হওয়া সম্পর্কে আপনি ঠিক (স্বাভাবিকভাবে: পি) ঠিকই বলেছেন, তাই আমি এটিকে উত্তর থেকে সরিয়েছি।

— ডেভ রোমসে