मैं एक कस्टमाइज़र सेटिंग के साथ चयनात्मक ताज़ा कैसे लागू कर सकता हूं?

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">मार्कअप के इस विशेष ब्लॉक को लक्षित करना आसान बनाने के लिए HTML को लपेटा ।)

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

सहायक लिंक्स

• Customizer में सेलेक्टिव रिफ्रेश
• थीम विकल्प - कस्टमाइज़र एपीआई
• इस बात पर एक नज़र रखना कि ट्वेंटी सोलह v1.3 चयनात्मक ताज़ा कैसे इस उदाहरण को ऊपर और चलाने में मददगार था।

Comments

ऐसा लगता है कि आप बहुत अधिक जानते हैं;) इसलिए यदि आपको लगता है कि आपके पास एक उत्तर हो सकता है कि अगले स्तर के लिए कुछ मिश्रित परिवर्तन के साथ एक मिश्रित सेटिंग हो, तो आंशिक रूप से ताज़ा हो, जबकि अन्य पूर्ण ताज़ा (इस मामले में वैश्विक JS विकल्प सेट करने के लिए आवश्यक है) । क्या मुझे एक औपचारिक सवाल करना चाहिए? ;))

— मार्क कपलुन

@MarkKaplun, अगर आप जानते हैं कि यह उत्तर मुझे कितना समय लगा, तो ऐसा बिल्कुल नहीं लगेगा :-) मेरे परीक्षण सेटअप में, मेरे पास ऊपर चयनात्मक ताज़ा करने के अलावा पूर्ण पृष्ठ ताज़ा विकल्पों का मिश्रण है। बॉक्स के ठीक बाहर काम करने लगता है। यदि आपको कोई आपत्ति नहीं है, तो मैं आपके विशिष्ट विवरण के साथ एक नया प्रश्न पसंद करूंगा, और जब समय की अनुमति होगी, तो मुझे इस पर एक दरार लेने में खुशी होगी।

— डेव रोमसे

fallback_refreshटिप्पणी के बारे में : "जब दस्तावेज़ में .cta-आवरण चयनकर्ता नहीं होता है तो लगातार ताज़ा होने से रोकता है"। अनंत पुनः लोडिंग वाला बग 4.7-आरसी 1 में तय किया जाना चाहिए।

— वेस्टन रटर

@ dave-romsey जेएस की बात क्या है customize-preview.js? ऐसा लगता है कि यह तत्व की सामग्री को पेज आईडी पर सेट कर रहा है? चयनात्मक रिफ्रेश नहीं होना चाहिए इसके बजाय आपके लिए यह सब संभालना चाहिए और इसलिए इस जेएस फ़ाइल की कोई आवश्यकता नहीं है?

— वेस्टन रटर

@WestonRuter 4.7-RC1 में अनंत ताज़ा करने के लिए नोट के बारे में धन्यवाद। आप customize-preview.jsअनावश्यक होने के बारे में सही (स्वाभाविक रूप से :-p) हैं, इसलिए मैंने इसे उत्तर से हटा दिया है।

— डेव रोमसे