WordPress में डायनामिक पेज टेम्पलेट, भाग 3

इस ट्यूटोरियल श्रृंखला के पहले दो हिस्सों में, हमने देखा की डायनामिक पेज टेम्प्लेट क्या थे और वे क्यों आवश्यक थे। हमने उन्हें इम्प्लीमेंट करने के लिए आवश्यक कोड को भी देखा।

श्रृंखला में इस तीसरे और अंतिम ट्यूटोरियल में, मैं पूरी तरह से काम कर रहे डायनामिक पेज टेम्प्लेट के दो उदाहरण तैयार करूँगा जो आप अपने प्रोजेक्ट्स में उपयोग कर सकते हैं। ये विशेष रूप से अपनी आवश्यकताओं के अनुरूप आसानी से एक्सपैंड होने के लिए था, और किसी भी अन्य प्रकार के डायनामिक पेज टेम्पलेट्स के बारे में जिसे आप बनाना चाहते हैं उसके लिए प्रेरणा देता है।

दो डायनामिक पेज टेम्पलेट्स पर हम शीघ्र ही एक नज़र डालेंगे:

• साधारण कांटेक्ट फॉर्म
• ब्लॉग पोस्ट आर्काइव (Archive)

साथ ही साथ हमारे पेज टेम्पलेट्स को इम्प्लीमेंट करने के साथ-साथ, आपको अंतिम यूज़र्स को एक अच्छी इंटरेक्शन करने के लिए कस्टम CSS और JavaScript के माध्यम से अतिरिक्त पॉलिश करने का तरीका भी दिखेगा।

इसके साथ ही, हम देखेंगे कि आप किसी भी प्रकार के पोस्ट के लिए पेज टेम्प्लेट का उपयोग कैसे कर सकते हैं। WordPress 4.7 के बाद से, आप पोस्ट टाइप को एक पेज टेम्पलेट के साथ एसोसिएट कर सकते हैं। हम देखेंगे कि आप इस नई सुविधा का लाभ उठाने के लिए एक मौजूदा डायनामिक पेज टेम्पलेट को कैसे मॉडिफाई कर सकते हैं, तो यह किसी भी पोस्ट टाइप के साथ काम करता है।

इस ट्यूटोरियल में हमारे पास बहुत कुछ है, तो चलो शुरू करो!

थीम सेटअप

हम WordPress Twenty Seventeen चाइल्ड थीम का उपयोग फिर से करेंगे, जैसे हमने इस ट्यूटोरियल श्रृंखला के भाग 2 में किया था, ताकि हमारे डायनामिक पेज टेम्पलेट कोड को जोड़ा जा सके। चलो एक खाली चाइल्ड थीम से शुरू करें

twentyseventeen-child के नाम से चाइल्ड थीम फ़ोल्डर बनाएं और निम्न फ़ाइलें जोड़ें:

• functions.php
• style.css

style.css के अंदर, जोड़े:

1

/*

2

 Theme Name:   Twenty Seventeen Child

3

 Description:  Twenty Seventeen Child Theme

4

 Author:       David Gwyer

5

 Template:     twentyseventeen

6

 Version:      0.1

7

 License:      GNU General Public License v2 or later

8

 License URI:  https://www.gnu.org/licenses/gpl-2.0.html

9

 Text Domain:  twenty-seventeen-child

10

*/

और functions.php के अंदर, जोड़े:

1

<?php

2

3

/**

4

 * Twenty Seventeen child theme class.

5

 *

6

 * DPT = D[ynamic] P[age] T[emplates].

7

 */

8

9

class DPT_Twenty_Seventeen_Child {

10

11

    /**

12

    * Register hooks.

13

    */

14

    public function init() {

15

        add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_parent_theme_styles' ) );

16

    }

17

18

    /* Enqueue parent theme styles. */

19

    public function enqueue_parent_theme_styles() {

20

        wp_enqueue_style( 'twenty-seventeen-css', get_template_directory_uri() . '/style.css' );

21

    }

22

}

23

24

$ts_child_theme = new DPT_Twenty_Seventeen_Child();

25

$ts_child_theme->init();

अपनी WordPress थीम डायरेक्टरी में चाइल्ड थीम जोड़ें जैसा कि हमने पहले किया था। यदि आप इस बारे में निश्चित नहीं हैं कि यह कैसे करें, तो इस ट्यूटोरियल श्रृंखला में भाग 2 पर वापस जाएं।

अब हमारे पास एक काम करती हुई (blank) चाइल्ड थीम है जिसमें हमारे डायनामिक पेज टेम्पलेट कोड जुड़ने के लिए तैयार है।

डायनामिक फॉर्म पेज टेम्पलेट

हमारी डायनामिक पेज टेम्पलेट का पहला वास्तविक इम्प्लीमेंटेशन एक सरल कांटेक्ट फ़ॉर्म है। हम निम्नलिखित फ़ील्ड जोड़ देंगे:

• Heading
• Name
• Subject
• Email
• Phone number

ये टेक्स्ट इनपुट फ़ील्ड हैं, हैडिंग के अलावा, जो एक स्टैण्डर्ड HTML हैडिंग टैग है।

वास्तविक पेज टेम्पलेट को इम्प्लीमेंट करने से पहले, हालांकि, हमें पेज एडिटर में कस्टम कण्ट्रोल जोड़ने की आवश्यकता है जो हमें पेज टेम्पलेट आउटपुट को संशोधित करने की अनुमति देगा। फिर, जब हम पेज टेम्पलेट बनाते हैं, तो यह पेज एडिटर कण्ट्रोल सेटिंग्स के अनुसार प्रस्तुत किया जाएगा।

इस ट्यूटोरियल श्रृंखला के भाग 2 में, मैंने उल्लेख किया है कि कस्टम कण्ट्रोल सीधे 'Page Attributes' मेटा बॉक्स में जोड़ने का कोई आसान तरीका नहीं है, जहां पेज टेम्पलेट ड्रॉप-डाउन स्थित है।

इसका मतलब यह है कि हमें अपने डायनामिक पेज टेम्पलेट कण्ट्रोल को अभी के लिए कहीं और जोड़ना होगा। मैं आपको थोड़ी देर में दिखाता हूँ की इस लिमिटेशन पर कैसे कार्य करें, थोड़ी सी CSS और JavaScript के जादू के साथ। लेकिन अभी के लिए, हमें अपने कस्टम कंट्रोल्स को एक अलग मेटा बॉक्स में जोड़कर करना होगा।

DPT_Twenty_Seventeen_Child class में, init मेथड में दो नए एक्शन हुक रजिस्टर करें, और एक नया मेथड जिसे page_template_meta_boxes कहेंगे।

1

<?php

2

3

/**

4

 * Register hooks.

5

 */

6

public function init() {

7

    add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_parent_theme_styles' ) );

8

    add_action( 'load-post.php', array( $this, 'page_template_meta_boxes' ) );

9

    add_action( 'load-post-new.php', array( $this, 'page_template_meta_boxes' ) );

10

}

11

12

/* Add meta box hook. */

13

public function page_template_meta_boxes() {

14

    add_action( 'add_meta_boxes', array( $this, 'add_page_template_meta_boxes' ) );

15

}

load-post.php और load-post-new.php एक्शन हुक रन करते हैं जब भी कोई पोस्ट (किसी भी टाइप का) एडिट या क्रिएट किया जाता है। ऐसा होने पर, हम एक और एक्शन हुक जोड़ने के लिए add_meta_boxes रजिस्टर करते हैं जो हमारे कस्टम मेटा बॉक्स के निर्माण को ट्रिगर करेगा, जो कि add_page_template_meta_boxes कॉलबैक फ़ंक्शन के माध्यम से किया जाता है। चलिए अब उस फ़ंक्शन को इम्प्लीमेंट करते हैं।

1

<?php

2

3

/* Register meta box. */

4

public function add_page_template_meta_boxes() {

5

    // Create meta box for our form dynamic page template

6

    add_meta_box(

7

        'form-page-template-meta-box',

8

        esc_html__( 'Form Page Template Meta Box', 'twenty-seventeen-child' ),

9

        array( $this, 'display_form_page_template_meta_box' ),

10

        'page',

11

        'side',

12

        'default'

13

    );

14

}

मेटा बॉक्स कंट्रोल्स का वास्तविक रेंडर display_form_page_template_meta_box कॉलबैक फ़ंक्शन के माध्यम से किया जाएगा, जो कि add_meta_box() के लिए एक आर्गुमेंट के रूप में ऊपर निर्दिष्ट किया गया था।

1

<?php

2

3

/* Render form meta box on the page editor. */

4

public function display_form_page_template_meta_box( $object ) {

5

    ?><p>Add controls here...</p><?php

6

}

अभी के लिए, मैंने कुछ प्लेसहोल्डर टेक्स्ट जोड़ दिया है ताकि हम पेज एडिटर पर हमारा नया मेटा बॉक्स देख सकें।

पहले से याद रखें कि हमारे फॉर्म पेज टेम्पलेट में एक हैडिंग और चार टेक्स्ट फ़ील्ड होंगे। कई तरह से हम फॉर्म आउटपुट को कस्टमाइज़ करने के लिए चुन सकते हैं, लेकिन हमारे मामले में हम प्रत्येक फ़ील्ड के लिए चेक बॉक्स जोड़ते हैं जो हमें अपनी visibility को टॉगल करने की अनुमति देगा। निम्न कोड को शामिल करने के लिए display_form_page_template_meta_box() को अपडेट करें।

1

<?php

2

3

public function display_form_page_template_meta_box( $object ) {

4

    wp_nonce_field( basename( __FILE__ ), 'page_template_meta_box_nonce' );

5

    $heading = get_post_meta( $object->ID, 'pt_chk_form_heading', true );

6

    $name = get_post_meta( $object->ID, 'pt_chk_form_name', true );

7

    $subject = get_post_meta( $object->ID, 'pt_chk_form_subject', true );

8

    $email = get_post_meta( $object->ID, 'pt_chk_form_email', true );

9

    $phone = get_post_meta( $object->ID, 'pt_chk_form_phone', true );

10

    ?>

11

12

    <div id="form_pt_wrapper">

13

        <p>

14

            <input type="checkbox" name="pt_chk_form_heading" id="pt_chk_form_heading" value="1" <?php checked( $heading, true ); ?> />&nbsp;<label for="pt_chk_form_heading"><?php _e( "Display Heading", 'twenty-seventeen-child' ); ?></label><br>

15

        </p>

16

        <p>

17

            <input type="checkbox" name="pt_chk_form_name" id="pt_chk_form_name" value="1" <?php checked( $name, true ); ?> />&nbsp;<label for="pt_chk_form_name"><?php _e( "Display Name", 'twenty-seventeen-child' ); ?></label><br>

18

        </p>

19

        <p>

20

            <input type="checkbox" name="pt_chk_form_subject" id="pt_chk_form_subject" value="1" <?php checked( $subject, true ); ?> />&nbsp;<label for="pt_chk_form_subject"><?php _e( "Display Subject", 'twenty-seventeen-child' ); ?></label><br>

21

        </p>

22

        <p>

23

            <input type="checkbox" name="pt_chk_form_email" id="pt_chk_form_email" value="1" <?php checked( $email, true ); ?> />&nbsp;<label for="pt_chk_form_email"><?php _e( "Display Email", 'twenty-seventeen-child' ); ?></label><br>

24

        </p>

25

        <p>

26

            <input type="checkbox" name="pt_chk_form_phone" id="pt_chk_form_phone" value="1" <?php checked( $phone, true ); ?> />&nbsp;<label for="pt_chk_form_phone"><?php _e( "Display Phone Number", 'twenty-seventeen-child' ); ?></label><br>

27

        </p>

28

    </div>

29

    <?php

30

}

हम सुरक्षा के लिए एक nonce फ़ील्ड को शामिल करते हैं जिसे बाद में वैलिडेट किया जाएगा, इससे पहले कि हम फ़ॉर्म की वैल्यूज को डेटाबेस में सेव कर लें।

नोट: यदि किसी कारण से nonce वेल्यू को वेरीफाई नहीं किया जा सकता है तो सेटिंग्स सेव नहीं की जाएंगी।

उसके बाद, मेटा बॉक्स के अंदर कस्टम फॉर्म फ़ील्ड आउटपुट किए जाने से पहले डेटाबेस से मौजूदा फॉर्म वैल्यू पुनर्प्राप्त किए जाते हैं।

वर्तमान में, हमारे चेक बॉक्स सेव नहीं किये जाते, जब पोस्ट अपडेट किया जाता है। फ़ॉर्म सेटिंग्स को जारी रखने के लिए, हमें init() मेथड में एक नया हुक रजिस्टर करना होगा जो कि save_post एक्शन के दौरान ट्रिगर करता है, और फिर पोस्ट मेटा सेटिंग मैन्युअल रूप से अपडेट करने के लिए कॉलबैक इम्प्लीमेंट करें।

1

<php

2

3

/**

4

 * Register hooks.

5

 */

6

public function init() {

7

    add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_parent_theme_styles' ) );

8

    add_action( 'load-post.php', array( $this, 'page_template_meta_boxes' ) );

9

    add_action( 'load-post-new.php', array( $this, 'page_template_meta_boxes' ) );

10

    add_action( 'save_post', array( $this, 'save_page_template_meta' ), 10, 2 );

11

}

1

<?php

2

3

/* Save meta box data. */

4

public function save_page_template_meta( $post_id, $post ) {

5

    if ( ! ( isset( $_POST[ 'page_template_meta_box_nonce' ] ) && wp_verify_nonce( $_POST[ 'page_template_meta_box_nonce' ], basename( __FILE__ ) ) ) ) {

6

        return $post_id;

7

    }

8

9

    if ( ! current_user_can( 'edit_post', $post_id ) ) {

10

        return $post_id;

11

    }

12

13

    if( 'page' != $post->post_type ) {

14

        return $post_id;

15

    }

16

17

    $heading = isset( $_POST[ 'pt_chk_form_heading' ] ) ? $_POST[ 'pt_chk_form_heading' ] : '';

18

    update_post_meta( $post_id, 'pt_chk_form_heading', $heading );

19

20

    $name = isset( $_POST[ 'pt_chk_form_name' ] ) ? $_POST[ 'pt_chk_form_name' ] : '';

21

    update_post_meta( $post_id, 'pt_chk_form_name', $name );

22

23

    $subject = isset( $_POST[ 'pt_chk_form_subject' ] ) ? $_POST[ 'pt_chk_form_subject' ] : '';

24

    update_post_meta( $post_id, 'pt_chk_form_subject', $subject );

25

26

    $email = isset( $_POST[ 'pt_chk_form_email' ] ) ? $_POST[ 'pt_chk_form_email' ] : '';

27

    update_post_meta( $post_id, 'pt_chk_form_email', $email );

28

29

    $phone = isset( $_POST[ 'pt_chk_form_phone' ] ) ? $_POST[ 'pt_chk_form_phone' ] : '';

30

    update_post_meta( $post_id, 'pt_chk_form_phone', $phone );

31

}

एक बार फॉर्म nonce वैल्यू और यूज़र पेर्मिशन्स वेरिफ़िएड कर ली जाए, यह चेक करके की हम सही पोस्ट टाइप पर हैं, हम पोस्ट किए गए फॉर्म वैल्यूज की जांच कर सकते हैं और डेटाबेस में वैल्यूज को सेव कर सकते हैं।

हमारे चेक बॉक्स अब पूरी तरह फंक्शनल हैं, इसलिए हम वास्तविक पेज टेम्पलेट को आगे और इम्प्लीमेंट कर सकते हैं! चाइल्ड थीम फ़ोल्डर के अंदर, page-templates नामक एक नया फ़ोल्डर जोड़ें, और इसमें एक नयी फ़ाइल form-page-template.php जोड़ दें।

ब्लैंक पेज टेम्पलेट बनाने के लिए नई फ़ाइल में निम्न कोड जोड़ें।

1

<?php

2

3

/**

4

 * Template Name: Form Page Template

5

 *

6

 * @package WordPress

7

 * @subpackage Twenty_Seventeen

8

 * @since 1.0

9

 */

10

11

get_header(); ?>

12

13

<div class="wrap">

14

15

    <div id="primary" class="content-area">

16

17

        <main id="main" class="site-main" role="main">

18

19

            <!-- Add page template code here. -->

20

21

        </main><!-- #main -->

22

23

    </div><!-- #primary -->

24

25

</div><!-- .wrap -->

26

27

<?php get_footer();

कोड जटिलता को कम करने के लिए, हमारा कांटेक्ट फ़ॉर्म यूज़र इनपुट को वैलिडेट नहीं करता है, और हमने सामान्य रूप से चेक और वेलिडेशन किया है, क्योंकि हम शुद्ध कोड के बिना फ़ॉर्म आउटपुट डायनामिक बनाने पर ध्यान केंद्रित करना चाहते हैं।

सबसे पहले, हमें डायनामिक कांटेक्ट फ़ॉर्म चेक बॉक्स वैल्यू प्राप्त करने की आवश्यकता है।

1

<?php

2

3

$heading = get_post_meta( get_the_ID(), 'pt_chk_form_heading', true );

4

$name = get_post_meta( get_the_ID(), 'pt_chk_form_name', true );

5

$subject = get_post_meta( get_the_ID(), 'pt_chk_form_subject', true );

6

$email = get_post_meta( get_the_ID(), 'pt_chk_form_email', true );

7

$phone = get_post_meta( get_the_ID(), 'pt_chk_form_phone', true );

तब हम फॉर्म कोड में जोड़ सकते हैं। यह each फॉर्म फ़ील्ड के लिए बिलकुल ही समान है। चलो name फील्ड कोड पर एक नज़र डालें।

1

<?php if ( ! empty ( $name ) ) : ?>

2

    <label for="cf_name"><?php _e( 'Name', 'twenty-seventeen-child' ); ?></label>

3

    <input type="text" name="cf_name" id="cf_name"><br>

4

<?php endif; ?>

हम पेज टेम्प्लेट सेटिंग्स से चेक बॉक्स की वैल्यूज का परीक्षण करते हैं और फ़ील्ड को केवल तभी आउटपुट करते हैं अगर यह चेक होता है। अन्यथा, कुछ भी आउटपुट नहीं होगा। यह प्रत्येक फॉर्म फ़ील्ड के लिए दोहराया जाता है।

फ़ॉर्म सबमिट होने के बाद, हम साइट एडमिन को एक ईमेल भेजते हैं और स्क्रीन पर एक संदेश प्रदर्शित करते हैं। यह सब एक साथ रखकर, हमारे पास अपना अंतिम पेज टेम्पलेट कोड है।

1

<?php

2

3

/**

4

 * Template Name: Form Page Template

5

 *

6

 * @package WordPress

7

 * @subpackage Twenty_Seventeen

8

 * @since 1.0

9

 */

10

11

get_header(); ?>

12

13

<div class="wrap">

14

15

    <div id="primary" class="content-area">

16

17

        <main id="main" class="site-main" role="main">

18

19

        <?php

20

        while ( have_posts() ) : the_post();

21

22

            $heading = get_post_meta( get_the_ID(), 'pt_chk_form_heading', true );

23

            $name = get_post_meta( get_the_ID(), 'pt_chk_form_name', true );

24

            $subject = get_post_meta( get_the_ID(), 'pt_chk_form_subject', true );

25

            $email = get_post_meta( get_the_ID(), 'pt_chk_form_email', true );

26

            $phone = get_post_meta( get_the_ID(), 'pt_chk_form_phone', true );

27

28

            // Form submission handler

29

            if ( isset( $_POST['cf_submitted'] ) ) {

30

                $admin_email = get_bloginfo( 'admin_email' );

31

                $cf_subject = trim( $_POST['cf_subject'] );

32

                $headers = "From: me@mysite.com\r\n";

33

                mail( $admin_email, $subject, 'Dynamic contact form submitted!', $headers );

34

                echo "<p>Mail sent successfully!</p>";

35

            }

36

            ?>

37

38

            <form action="<?php the_permalink(); ?>" method="post">

39

40

                <?php if ( ! empty( $heading ) ) : ?>

41

                    <h2>Dynamic Form Page Template!</h2>

42

                <?php endif; ?>

43

44

                <?php if ( ! empty( $name ) ) : ?>

45

                    <label for="cf_name"><?php _e( 'Name', 'twenty-seventeen-child' ); ?></label>

46

                    <input type="text" name="cf_name" id="cf_name"><br>

47

                <?php endif; ?>

48

49

                <?php if ( ! empty( $subject ) ) : ?>

50

                    <label for="cf_subject"><?php _e( 'Subject', 'twenty-seventeen-child' ); ?></label>

51

                    <input type="text" name="cf_subject" id="cf_subject"><br>

52

                <?php endif; ?>

53

54

                <?php if ( ! empty( $email ) ) : ?>

55

                    <label for="cf_email"><?php _e( 'Email', 'twenty-seventeen-child' ); ?></label>

56

                    <input type="email" name="cf_email" id="cf_email"><br>

57

                <?php endif; ?>

58

59

                <?php if ( ! empty( $phone ) ) : ?>

60

                    <label for="cf_phone"><?php _e( 'Phone Number', 'twenty-seventeen-child' ); ?></label>

61

                    <input type="tel" name="cf_phone" id="cf_phone"><br>

62

                <?php endif; ?>

63

64

            <p><input type="hidden" name="cf_submitted" id="cf_submitted" value="true"><input class="submit button" type="submit" value="<?php _e( 'Submit Form', 'twenty-seventeen-child' ); ?>"></p>

65

66

            </form>

67

68

        <?php

69

        endwhile; // End of the loop.

70

        ?>

71

72

        </main><!-- #main -->

73

74

    </div><!-- #primary -->

75

76

</div><!-- .wrap -->

77

78

<?php get_footer();

सब कुछ ठीक से काम करें इसके लिए यह सुनिश्चित करें कि सभी फॉर्म पेज टेम्प्लेट चेक बॉक्स चेक किए गए हों और पोस्ट को अपडेट करें। फिर फ्रंट एन्ड पर पेज टेम्प्लेट पर एक नज़र डालें।

अब फॉर्म पेज टेम्प्लेट चेक बक्से में से कुछ को अनचेक करने का प्रयास करें। केवल specify की गयी फ़ील्ड आउटपुट हैं आपके पास फॉर्म कैसे प्रदर्शित होता है पर कुल कण्ट्रोल है! नीचे दिए गए स्क्रीन शॉट में, मैंने केवल ईमेल और फोन चेक बॉक्स को अनचेक कर दिया है।

नोट: यदि आप लोकल WordPress एनवायरनमेंट पर काम कर रहे हैं तो mail फ़ंक्शन वास्तव में ईमेल नहीं भेज सकता है। यह केवल तभी काम करेगा जब आपके पास एक मेल सर्वर को सेट अप और चालू हो।

किसी भी प्रकार के कण्ट्रोल को जितने चाहे जोड़ने के लिए फ़ॉर्म को आसानी से बढ़ाया जा सकता है। उदाहरण के लिए, आप अपने फ़ॉर्म में एक वैकल्पिक CAPTCHA field जोड़ सकते हैं, या आउटपुट की गयी फ़ील्ड्स के आर्डर को स्पेसिफी करने के योग्य हो सकते हैं या फ़ॉर्म हैडिंग/लेबल के लिए टेक्स्ट भी कर सकते हैं। यहां बताया गया है कि आप अपने फॉर्म को कस्टमाइज करने के लिए डायनामिक पेज टेम्पलेट का उपयोग कर सकते हैं, हालांकि आप चाहें तो। संभावनाएं सचमुच अनंत हैं!

अपने पेज टेम्पलेट कण्ट्रोल को व्यवस्थित करना

हो सकता है कि आपने देखा हो कि हमारे डायनामिक पेज टेम्पलेट के लिए एडमिन कंट्रोल्स के साथ कुछ उपयोग करने में समस्याएं हैं। फ़ंक्शनैली रूप से यह ठीक है, लेकिन आदर्श रूप से डायनामिक पेज टेम्पलेट कण्ट्रोल एक ही मेटा बॉक्स में होना चाहिए जैसा की पेज टेम्पलेट ड्रॉप-डाउन।

याद रखें कि हमारे पेज टेम्पलेट कंट्रोल्स को पहली जगह में एक अलग मेटा बॉक्स में जोड़ने का कारण था क्योंकि वर्तमान में कस्टम कण्ट्रोल को पेज टेम्पलेट मेटा बॉक्स में सीधे जोड़ने के लिए कोई WordPress हुक उपलब्ध नहीं है।

साथ ही, जब एक डायनामिक पेज टेम्पलेट चुना जाता है, तो हम केवल उस टेम्पलेट से संबंधित कण्ट्रोल विज़िबल करना चाहते हैं। पेज एडिटर में कुछ कस्टम CSS और JavaScript जोड़कर हम दोनों आवश्यकताओं को पूरा कर सकते हैं।

विशेष रूप से, हमें इसकी आवश्यकता है:

• फ़ॉर्म मेटा बॉक्स छुपाएं।
• पूरी तरह से लोड करने के लिए एडमिन एडिटर पेज की प्रतीक्षा करें।
• फॉर्म कण्ट्रोल को 'Page Attributes' मेटा बॉक्स पर ले जाएं।
• एसोसिएटेड पेज टेम्पलेट सेलेक्ट होने पर केवल एडमिन फ़ॉर्म कण्ट्रोल डिस्प्ले करें।

अपने चाइल्ड थीम रूट फ़ोल्डर में css और js फ़ोल्डर्स जोड़कर शुरू करें। css फ़ोल्डर के अंदर एक style.css फ़ाइल बनाएँ, और js फ़ोल्डर में एक script.js फ़ाइल बनाएँ। आप इन चीजों को जो चाहे कह सकते हैं, हालांकि, बस याद रखें कि फ़ाइल नामों को नोट करें यदि ऐसा है, और enqueue स्क्रिप्ट कोड में उन्हें रीप्लेस करें।

फिर, हमें दोनों फाइलें केवल page editor स्क्रीन पर enqueue करने की आवश्यकता है। हम उन्हें सभी एडमिन पेज में शामिल नहीं करना चाहते। एडमिन पेज पर स्क्रिप्ट लोड करने के लिए init() मेथड में एक नया एक्शन हुक रजिस्टर करें, और स्क्रिप्ट फ़ाइलों को enqueue करने के लिए कॉलबैक फ़ंक्शन जोड़ें।

1

<?php

2

3

/**

4

 * Register hooks.

5

 */

6

public function init() {

7

    add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_parent_theme_styles' ) );

8

    add_action( 'load-post.php', array( $this, 'page_template_meta_boxes' ) );

9

    add_action( 'load-post-new.php', array( $this, 'page_template_meta_boxes' ) );

10

    add_action( 'save_post', array( $this, 'save_page_template_meta' ), 10, 2 );

11

    add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_editor_scripts' ) );

12

}

13

14

public function enqueue_editor_scripts($hook) {

15

    global $post_type;

16

17

    if ( 'page' != $post_type ) {

18

        return;

19

    }

20

21

22

    if ( 'post-new.php' != $hook && 'post.php' != $hook) {

23

        return;

24

    }

25

26

    wp_enqueue_script( 'dpt_script', get_stylesheet_directory_uri() . '/js/script.js', array( 'jquery' ) );

27

    wp_enqueue_style( 'dpt_styles', get_stylesheet_directory_uri() . '/css/style.css' );

28

}

ध्यान दें कि हम page पोस्ट टाइप को कैसे टारगेट कर रहे हैं और फिर या तो post-new.php या post.php एडमिन पेज में से किसी को। इसलिए, मूल रूप से, जब तक कि हम पेज एडिटर पर न हों, हमारी स्क्रिप्ट लोड नहीं हो जाएंगी, जो कि हम चाहते हैं।

आइए अब आगे बढ़ें और फॉर्म पेज टेम्पलेट कंट्रोल्स को कस्टमाइज़ करने के लिए CSS और JavaScript को जोड़ना शुरू करें। सबसे पहले, CSS के साथ पूरे फॉर्म मेटा बॉक्स को यह style.css में जोड़कर छिपाएं:

1

#form-page-template-meta-box {

2

    display: none;

3

}

हम JavaScript के साथ ऐसा कर सकते थे, लेकिन हम फार्म मेटा बॉक्स को तुरंत छिपाना चाहते हैं। अगर हमने JavaScript के माध्यम से इसे किया, तो हमें पेज लोड होने तक इंतजार करना होगा, और आपको स्क्रीन पर दिए गए मेटा बॉक्स के रूप में एक छोटी सी फ्लैश दिखाई देगी और फिर JavaScript के साथ छिपा हुआ होगा। तो इस मामले में CSS का उपयोग करना बेहतर है।

अब JavaScript के लिए, इसे script.js में जोड़ें।

1

jQuery(document).ready(function ($) {

2

3

    var pt = $( "#page_template" );

4

    var form_controls = $( "#form_pt_wrapper" );

5

6

    // Move form controls to 'Page Attributes' meta box and hide them by default

7

    form_controls.insertAfter( '#page_template' ).hide();

8

9

    function displayControls( ptStr, sel ) {

10

        if ( ptStr !== pt.val() ) {

11

            sel.hide();

12

        } else {

13

            sel.toggle();

14

        }

15

    }

16

17

    // Call on page load

18

    displayControls( 'page-templates/form-page-template.php', form_controls );

19

20

    // Call every time drop down changes

21

    pt.on( 'change', function () {

22

        displayControls( this.value, form_controls );

23

    });

24

25

});

मैं JavaScript के बारे में विस्तार से नहीं जा रहा हूं, लेकिन यहां पर ओवरव्यू है।

हम पहले कुछ CSS सेलेक्टर्स को cache करते हैं और एडमिन फॉर्म कंट्रोल्स को Page Attribute मेटा बॉक्स में ले जाते हैं। उसके बाद, हमारे पास एक displayControls() फ़ंक्शन है, जो पेज टेम्पलेट ड्रॉप-डाउन की मौजूदा वैल्यू के आधार पर या तो छिपाता है या फॉर्म कण्ट्रोल दिखाता है। हम पेज लोड पर displayControls() को कॉल करते हैं, और फिर हर बार ड्रॉप-डाउन बदल दिया जाता है, यह सुनिश्चित करने के लिए कि हम हमेशा सिंक (sync) में होते हैं।

CSS और JavaScript के साथ जोड़ा गया, फॉर्म पेज टेम्पलेट कण्ट्रोल अब सही मेटा बॉक्स में प्रदर्शित किया जाते हैं, और केवल तभी दिखाई देता है जब संबंधित पेज टेम्पलेट को सेलेक्ट किया जाता है।

यह बेहतर दिखता है और यूज़र के लिए रास्ता अधिक सहज है। चूंकि मेटा बॉक्स WordPress एडमिन स्क्रीन के चारों ओर ले जाया जा सकता है, हमारा डायनामिक पेज टेम्पलेट कण्ट्रोल आवश्यक रूप से पेज टेम्पलेट ड्रॉप-डाउन के पास कहीं भी नहीं होगा! हमने इस समस्या को एक एलिगेंट तरीके से हल किया है ताकि यह सुनिश्चित हो सके कि हमारे कण्ट्रोल हमेशा पेज टेम्पलेट ड्रॉप-डाउन के नीचे सीधे दिखाई देते हैं!

ब्लॉग पोस्ट डायनामिक पेज टेम्पलेट

हमारा अगला डायनामिक पेज टेम्पलेट आपके लेटेस्ट ब्लॉग पोस्ट की एक लिस्ट प्रदर्शित करता है। लेकिन सभी पोस्ट्स की लिस्ट के बजाय, हम आपको पोस्ट केटेगरी चुनने की अनुमति देने के लिए एक लिस्ट बॉक्स (ड्रॉप-डाउन के समान) को इम्प्लीमेंट करेंगे। इतना ही नहीं, आप मल्टीपल पोस्ट काटेगोरिएस का सिलेक्शन भी कर सकेंगे।

add_page_template_meta_boxes() में एक नया मेटा बॉक्स जोड़कर प्रारंभ करें।

1

<?php

2

3

// Create meta box for our blog posts dynamic page template

4

add_meta_box(

5

    'blog-page-template-meta-box',

6

    esc_html__( 'Blog Page Template Meta Box', 'twenty-seventeen-child' ),

7

    array( $this, 'display_blog_page_template_meta_box' ),

8

    'page',

9

    'side',

10

    'default'

11

);

और अब हमें हमारे मेटा बॉक्स को रेंडर करने के लिए कॉलबैक फ़ंक्शन को इम्प्लीमेंट करने की आवश्यकता है।

1

<?php

2

3

/* Render form meta box on the page editor. */

4

public function display_blog_page_template_meta_box( $object ) {

5

6

    $blog_category = get_post_meta( $object->ID, 'blog_category', true );

7

    $categories = get_categories();

8

    ?>

9

10

    <div id="blog_pt_wrapper">

11

        <label for="blog_category[]"><?php _e( 'Choose categories', 'twenty-seventeen-child' ); ?>:</label>

12

        <select style="height:inherit;" name="blog_category[]" multiple="multiple" size="10">

13

        <?php

14

            foreach ( $categories as $category ) {

15

                printf(

16

                    '<option value="%1$s" %2$s>%3$s (%4$s)</option>',

17

                    esc_attr( $category->cat_ID ),

18

                    esc_attr( selected( $category->cat_ID, $this->q($category->cat_ID, $blog_category) ) ),

19

                    esc_html( $category->cat_name ),

20

                    esc_html( $category->category_count )

21

                );

22

            }

23

        ?>

24

        </select>

25

    </div>

26

27

<?php

28

}

चलो इसे नीचे टुकड़ो में देखें। हम सबसे पहले वेरिएबल को डिफाइन करते हैं, जो पिछली बार पोस्ट को अपडेट किया गया था, से सिलेक्टेड पोस्ट केटेगरी की लिस्ट (यदि कोई हो) रखने के लिए किया गया था। एक अन्य वेरिएबल सभी मौजूदा केटेगरी की एक array में स्टोर करता है।

नोट: हमारे पहले फॉर्म पेज टेम्प्लेट से हमारे पास पहले से एक nonce फ़ील्ड है, इसलिए हमें यहां दूसरे का उपयोग करने की आवश्यकता नहीं है, क्योंकि हम उसी एडमिन पेज पर हैं।

हम तब साइट केटेगरी की लिस्ट में लूप करते हैं, जैसे ही हम एक ड्रॉप-डाउन कण्ट्रोल करते हैं कोई भी केटेगरी जिसे पहले चुना गया था वह sync में सब कुछ रखने के लिए फिर से चुना जाता है।

आपने शायद देखा होगा, हालांकि, selected() का एक आर्गुमेंट एक फ़ंक्शन कॉल है। आम तौर पर हम केवल selected() का उपयोग करते हैं, यह निर्धारित करने के लिए कि क्या वर्तमान आइटम को सिलेक्शन के रूप में मार्क करना है या नहीं। हालांकि, क्योंकि हम एक से अधिक केटेगरी का सिलेक्शन कर सकते हैं, हमारी डेटाबेस सेटिंग हमेशा एक वैल्यू है (भले ही हम वास्तव में केवल एक केटेगरी का सिलेक्शन करें)।

फ़ंक्शन q() एक सहायक फ़ंक्शन है जो हमें सेव की गयी केटेगरी के array के विरुद्ध वर्तमान लिस्ट आइटम की जांच करने की अनुमति देता है।

1

<?php

2

3

public function q($sel, $opt) {

4

    if( is_array($opt) && in_array($sel, $opt) ) {

5

        return $sel;

6

    }

7

}

प्रत्येक केटेगरी के लिए, केटेगरी आईडी को सेव किये गए केटेगरी के array के साथ q() में पास किया जाता है। यदि वर्तमान केटेगरी, सेव की गई केटेगरी की लिस्ट में है तो वर्तमान केटेगरी को selected() पर लौटा दिया जाएगा और पहले आर्गुमेंट के साथ मैच करेगा। इससे selected() करंट केटेगरी को सिलेक्टेड मार्क कर देगा। यह सिंगल कण्ट्रोल के लिए कई ऑप्शन्स को हैंडल करने का एक शानदार तरीका है।

ब्लॉग पोस्ट की केटेगरी को सेव करने के लिए हमें अभी save_page_template_meta() को अपडेट करना है। ऐसा करने के लिए इस कोड को जोड़ें।

1

<?php

2

3

// Save blog page template controls

4

$category = isset( $_POST[ 'blog_category' ] ) ? $_POST[ 'blog_category' ] : '';

5

update_post_meta( $post_id, 'blog_category', $category );

अब, हमें ब्लॉग पोस्ट पेज टेम्प्लेट बनाना होगा। अपने चाइल्ड थीम page-templates फ़ोल्डर के अंदर, एक नयी फ़ाइल बनाओ blog-page-template.php के नाम से, और निम्न कोड जोड़ें।

1

<?php

2

3

/**

4

 * Template Name: Blog Page Template

5

 *

6

 * @package WordPress

7

 * @subpackage Twenty_Seventeen

8

 * @since 1.0

9

 */

10

11

get_header(); ?>

12

13

<div class="wrap">

14

15

    <div id="primary" class="content-area">

16

17

        <main id="main" class="site-main" role="main">

18

19

        <?php

20

        $paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;

21

        $category = get_post_meta( get_the_id(), 'blog_category', true );

22

23

        if( is_array($category) ) {

24

            $category = implode(",", $category);

25

        }

26

27

        if( !empty($category) ) {

28

            $cat = $category;

29

        } else {

30

            $cat = 0;

31

        }

32

33

        $query_args = array(

34

            'paged' => $paged,

35

            'cat' => $cat,

36

            'orderby' => 'date',

37

            'order' => 'DESC',

38

            'post_type' => 'post'

39

        );

40

41

        $blog_posts = new WP_Query($query_args);

42

        ?>

43

44

        <?php if ( $blog_posts->have_posts() ) : ?>

45

46

            <?php while ( $blog_posts->have_posts() ) : $blog_posts->the_post(); ?>

47

                <?php get_template_part( 'template-parts/post/content', get_post_format() ); ?>

48

            <?php endwhile; // end of the loop. ?>

49

50

        <?php endif; ?>

51

52

        </main><!-- #main -->

53

54

    </div><!-- #primary -->

55

56

</div><!-- .wrap -->

57

58

<?php get_footer();

हमारे पिछले डायनामिक पेज टेम्पलेट से एकमात्र वास्तविक अंतर यह है कि <main> HTML टैग के अंदर कोड है, तो आइए अब उस पर करीब से विचार करें।

हमने सबसे पहले paged query वैरिएबल की वैल्यू निर्धारित की है, जिसका इस्तेमाल हमारे WordPress query से दिए गए पेजों की संख्या के आधार पर कई पेजेज पर पोस्ट प्रदर्शित करने के लिए किया जाता है। उसके बाद, हम पेज एडिटर मेटा बॉक्स पर सिलेक्टेड सभी केटेगरी प्राप्त करते हैं। केटेगरी के array को एक स्ट्रिंग में कनवर्ट किया जाता है और यदि खाली हो तो एक डिफ़ॉल्ट वैल्यू दी जाती है। एक नयी WordPress query बनाई जाती है और एक स्टैण्डर्ड loop में परिणाम आउटपुट होता है।

यहाँ मुख्य बात यह है कि पेज एडिटर मेटा बॉक्स पर किए गए सेलेक्शंस के माध्यम से, हम query ऑब्जेक्ट पर कौन सी केटेगरी पास की जाती हैं, यह वास्तव में नियंत्रित करने में सक्षम हैं।

अब हमें जो करना है, वह ब्लॉग केटेगरी के मेटा बॉक्स को छिपाना है और Page Attributes मेटा बॉक्स में लिस्ट कण्ट्रोल को मूव करना है। जैसे हमने पहले किया।

style.css के अंदर ब्लॉग पोस्ट मेटा बॉक्स को छिपाने के लिए स्टाइल्स को अपडेट करें:

1

#form-page-template-meta-box, #blog-page-template-meta-box {

2

    display: none;

3

}

script.js फ़ाइल को जोड़ने के लिए थोड़ी अधिक कोड की आवश्यकता होती है। यहां पूरी तरह से अपडेट की गई फ़ाइल है।

1

jQuery(document).ready(function ($) {

2

3

    var pt = $( "#page_template" );

4

    var form_controls = $( "#form_pt_wrapper" );

5

    var blog_post_controls = $( "#blog_pt_wrapper" );

6

7

    // Move form controls to 'Page Attributes' meta box and hide them by default

8

    form_controls.insertAfter( '#page_template' ).hide();

9

    blog_post_controls.insertAfter( '#page_template' ).hide();

10

11

    function displayControls( ptStr, sel ) {

12

        if ( ptStr !== pt.val() ) {

13

            sel.hide();

14

        } else {

15

            sel.toggle();

16

        }

17

    }   

18

19

    // Call on page load

20

    displayControls( 'page-templates/form-page-template.php', form_controls );

21

22

    displayControls( 'page-templates/blog-page-template.php', blog_post_controls );

23

24

    // Call every time drop down changes

25

    pt.on( 'change', function () {

26

27

        var controls;

28

29

        if( this.value === 'page-templates/form-page-template.php' ) {

30

            controls = form_controls;

31

            blog_post_controls.hide();

32

        } else if( this.value === 'page-templates/blog-page-template.php' ) {

33

            controls = blog_post_controls;

34

            form_controls.hide()

35

        } else {

36

            // hide all

37

            blog_post_controls.hide()

38

            form_controls.hide();

39

        }

40

41

        displayControls( this.value, controls );

42

    });

43

44

});

अधिकांश ध्यान देने लायक परिवर्तन है .on('change') फ़ंक्शन। क्योंकि अब हमारे पास एक से अधिक डायनामिक पेज टेम्पलेट हैं, हमें यह देखने के लिए टेस्ट करना होगा कि ड्रॉप-डाउन से कौन सा चुना गया था, और फिर इसे संगंधित एलिमेंट सिलेक्टर के पास भेजना चाहिए displayControls() में।

हमें सिलेक्टेड सभी के अलावा अन्य सभी पेज टेम्पलेट कंट्रोल्स को भी छिपाना होगा। और अगर डिफ़ॉल्ट पेज टेम्पलेट प्रदर्शित किया जाता है, तो हम सभी पेज टेम्पलेट कंट्रोल्स को छिपाते हैं। JavaScript कोड को और भी ऑप्टिमाइज़ किया जा सकता है, लेकिन जैसा कि हमारे पास केवल दो डायनामिक पेज टेम्पलेट्स एक्टिव हैं, यह हमारी ज़रूरतों के लिए एक अच्छा काम करता है।

जगह में इन संशोधनों के साथ, अब हमारे पास दो फंक्शनिंग डायनामिक पेज टेम्पलेट्स हैं, जिनमें से प्रत्येक के साथ सीधे संबंधित पेज प्रदर्शित होता है, जो पेज टेम्पलेट ड्रॉप-डाउन के नीचे प्रदर्शित होते हैं।

सभी के लिए पेज टेम्पलेट्स

इससे पहले मैंने WordPress 4.7+ में कैसे, आप अब किसी भी पोस्ट टाइप के पेज टेम्प्लेट को असाइन कर सकते हैं। WordPress 4.7 से पहले, आप उन्हें केवल पेजेज पर ही असाइन कर सकते हैं, लेकिन अब और नहीं!

आपको बस इतना करना है कि पेज टेम्पलेट हेडर में कमेंट ब्लॉक में एक अतिरिक्त लाइन जोड़नी है, और उन पोस्ट टाइप्स की कॉमा-सेपरेटेड की गई लिस्ट को स्पेसिफ़ाय करें, जिन्हें आप पेज टेम्पलेट पर उपलब्ध करना चाहते हैं।

1

<?php

2

3

Template Post Type: page, movie, notes

पोस्ट टाइप का नाम उसी तरह होना चाहिए, जब पोस्ट टाइप सबसे पहले दर्ज किया गया था, अन्यथा इसे अनदेखा कर दिया जाएगा।

इसलिए, हम किसी पोस्ट टाइप के लिए पेज टेम्पलेट प्रदर्शित कर सकते हैं, लेकिन डायनामिक पेज टेम्पलेट्स के बारे में क्या? कुछ मॉडिफिकेशन्स के साथ, इन्हें भी सपोर्ट किया जा सकता है। आइए देखें कि क्या जरूरत है।

सौभाग्य से, आपके पेज टेम्पलेट के ऊपर कोड की एक लाइन जोड़ने के अलावा, सभी आवश्यक परिवर्तन एक फ़ाइल में हैं: functions.php।

सबसे पहले, हमें डायनामिक पेज टेम्पलेट CSS और JavaScript पेज पर नहीं बल्कि सभी पोस्ट टाइप्स के लिए enqueue करना होगा, जो हम डायनामिक पेज टेम्पलेट्स को सपोर्ट करना चाहते हैं। इसलिए, enqueue_editor_scripts() में, हम ऐसा कुछ कर सकते हैं।

1

<?php

2

3

if ( 'page' != $post_type && 'movie' != $post_type ) {

4

    return;

5

    }

अब, डायनामिक पेज टेम्पलेट स्क्रिप्ट पेजेज और मूवी कस्टम पोस्ट टाइप पर लोड किए जाएंगे।

अगला, add_page_template_meta_boxes() में, add_meta_box() के प्रत्येक इंस्टैंस को अपडेट करें, जिसे आप कस्टम पोस्ट टाइप पर दिखाना चाहते हैं। page स्पेसिफ़ाय करने के बजाय, हम आवश्यक पोस्ट टाइप्स के एक array में पास कर सकते हैं।

1

<?php

2

3

add_meta_box(

4

    'form-page-template-meta-box',

5

    esc_html__( 'Form Page Template Meta Box', 'twenty-seventeen-child' ),

6

    array( $this, 'display_form_page_template_meta_box' ),

7

    Array( 'page', 'movie' ),

8

    'side',

9

    'default'

10

);

अंत में, save_page_template_meta() को कई पोस्ट टाइप्स का सपोर्ट करने के लिए अपडेट करें जैसा कि हमने enqueue_editor_scripts() के लिए किया था। और बस!

बस इन कुछ छोटे स्टेप्स का अनुसरण करके, आप अपने डायनामिक पेज टेम्पलेट को किसी भी पोस्ट टाइप के लिए काम करने के लिए मॉडिफाई कर सकते हैं।

नोट: संस्करण 4.7 से कम चलने वाले किसी भी WordPress साइट्स के लिए, टेम्पलेट पोस्ट टाइप हैडर टेक्स्ट को अनदेखा कर दिया जाएगा, और सभी पेज टेम्पलेट डिफ़ॉल्ट रूप से पेजेज के लिए प्रदर्शित होंगे। यदि यह वांछनीय (desirable) नहीं है, तो आप अपने पेज टेम्पलेट्स को बैकवर्ड कम्पैटिबल बनाने के लिए कस्टम कोड जोड़ सकते हैं।

1

<?php

2

3

function makewp_exclude_page_templates( $post_templates ) {

4

5

    if ( version_compare( $GLOBALS['wp_version'], '4.7', '<' ) ) {

6

        unset( $post_templates['templates/my-full-width-post-template.php'] );

7

    }

8

9

    return $post_templates;

10

}

11

add_filter( 'theme_page_templates', 'makewp_exclude_page_templates' );

यह स्निपेट को Make WordPress ब्लॉग से लिया गया है, जहां आप बैकवर्डस कम्पेटिबिलिटी के बारे में और अधिक जानकारी पा सकते हैं और नए पेज टेम्पलेट्स की अधिक जानकारी में सुविधा होती है।

निष्कर्ष

हमने इस ट्यूटोरियल सीरीज़ के अंतिम भाग में बहुत सी जमीन को कवर किया है। विशेष रूप से, हमने दो पूरी तरह से काम कर रहे डायनामिक पेज टेम्पलेट्स को इम्प्लीमेंट किया है और यूज़र एक्सपीरियंस में कुछ पॉलिश जोड़ने के लिए कस्टम CSS और JavaScript का इस्तेमाल किया है।

हालांकि इस ट्यूटोरियल श्रृंखला में शुरू की गई डायनामिक पोस्ट टाइप अपेक्षाकृत सरल हैं, फिर भी शक्तिशाली और लचीले पेज टेम्पलेट्स बनाने के लिए उन्हें विस्तारित करना बहुत आसान होगा। कुछ अगली-स्तरीय (next-level) फंक्शनलिटी जोड़ने की बहुत अधिक संभावनाएं हैं और, WordPress 4.7 से, आप केवल पेजेज के लिए उन्हें विकसित करने तक सीमित नहीं हैं।

अगर आप अपने WordPress के टूल्स के बढ़ते हुए सेट को बनाने के लिए कोई दूसरी यूटिलिटी ढूंढ रहे हैं या उन कोड्स की स्टडी करना चाहते हैं जिससे आप WordPress में और माहिर हो जाएँ, तो देखना ना भूलें हमारे पास Envato Market में क्या उपलब्ध हैं।

क्या इस ट्यूटोरियल श्रृंखला ने आपको डायनामिक पेज टेम्पलेट्स बनाने के लिए प्रेरित किया है? यदि हां, तो मुझे नीचे दिए गए कमैंट्स में बताएं। मुझे आपके विचार सुनना अच्छा लगेगा की आप अपनी प्रोजेक्ट्स में उनका उपयोग कैसे कर सकते हैं।