✅ WEB- ja WordPress -uutiset, -teemat, -laajennukset. Täällä jaamme vinkkejä ja parhaita verkkosivustoratkaisuja.

Kuinka mukauttaa kommenttilomaketta WordPressissä

20

WordPressin ytimessä on kommenttilomake. Tämä kommenttilomake näkyy yleensä viesteissäsi. Vierailijat voivat jättää palautteensa kommenttilomakkeella. Kommenttiominaisuuden antaminen vierailijoille auttaa sinua ymmärtämään, mitä he ajattelevat sisällöstäsi. Se auttaa parantamaan sisältöäsi ja käsittelemään myös muuta palautetta.

Oletusarvoisesti WordPress tarjoaa kommenttilomakkeella kentät, kuten viesti, nimi, sähköpostiosoite, verkkosivusto ja valintaruutu (tallentaaksesi tietosi selaimeen seuraavaa kommenttia varten). Vaatimuksestasi riippuen saatat joutua lisäämään tai poistamaan kenttiä kommenttilomakkeista.

Voi myös haluta lisätä tyylin renderoidulle kommenttilomakkeelle. WordPress tarjoaa ainutlaatuisen luokan lomake- ja kommenttikentille. Näiden luokkien avulla käyttäjät voivat soveltaa omaa tyyliään.

Tässä artikkelissa aiomme nähdä, kuinka lisätä vielä yksi kenttä olemassa olevaan kommenttilomakkeeseen. Otan esimerkkinä matkapuhelinnumerokentän ja lisää sen lomakkeeseen. Joten kommentointilomakkeen mukauttamiseksi aiomme suorittaa seuraavat vaiheet yksi kerrallaan.

  • Lisää kenttä kommenttilomakkeeseen
  • Tarkista, onko kenttä tyhjä
  • Tallenna tämä kenttä kommenttimenetelmänä
  • Näytä metakenttä kommentin muokkauslomakkeessa (taustalla)
  • Tallenna kommentti Meta (taustasta)

Tämän lisäksi aion myös näyttää, kuinka kenttä poistetaan WordPress-kommenttilomakkeesta.

Lisää kenttä kommenttilomakkeeseen

Kommenttilomake renderöidään WordPressin ydintiedostoista, eikä meidän pitäisi koskea ydintiedostoja. Onneksi WordPress tarjoaa koukkuja ydintoimintojen laajentamiseksi. Tämän sanottuaan WordPress tarjoaa toimintakoukun, comment_form_after_fieldsjonka avulla voimme lisätä kenttiä kommenttilomakkeeseen.

Lisätään matkapuhelinnumero käyttämällä tätä toimintokoukkua. Lisää alla oleva koodi functions.phptiedostoon.

add_action( 'comment_form_after_fields', 'additional_fields' );
function additional_fields() {
    echo '<p class="comment-form-mobile-number">'.     '<label for="mobile-number">'. esc_html__( 'Mobile Number' ). '<span class="required">*</span></label>'.     '<input id="mobile-number" name="mobile-number" type="text" size="30" tabindex="5" /></p>';
}

Siirry nyt verkkosivullesi ja lataa se uudelleen. Sinun pitäisi nähdä uusi kenttä "Matkapuhelinnumero", joka on lisätty kommenttilomakkeeseesi.

Kuinka mukauttaa kommenttilomaketta WordPressissä

Tarkista, onko kenttä tyhjä

Tämä vaihe on valinnainen. Jos et halua pitää mobiilikenttää pakollisena, ohita tämä vaihe. Jos tämä kenttä vaaditaan, meidän on tarkistettava, täyttivätkö kävijät tämän kentän vai eivät. Jos haluat lisätä nämä tarkastukset ajon aikana, käytämme suodatinta preprocess_comment. Kun käyttäjä napsauttaa Lähetä-painiketta, tämä suodatin tarkistaa, onko tietty kenttä tyhjä vai ei. Jos se on tyhjä, se pysäyttää suorituksen ja näyttää viestin käyttäjille.

Käytä suodatinta preprocess_commentseuraavan koodin mukaisesti. Tämä koodi menee myös functions.phptiedostoon.

add_filter( 'preprocess_comment', 'verify_comment_mobile_number' );
function verify_comment_mobile_number( $commentdata) {
    if (empty( $_POST['mobile-number'])) {
        wp_die( esc_html__( 'Error: You did not add a mobile number. Please resubmit your comment with a mobile number.') );
    }
 
    return $commentdata;
}

Tallenna uusi kenttä kommenttia vastaan

Aikaisemmissa vaiheissa olemme lisänneet uuden kentän ja nähneet myös, kuinka tehdä siitä pakollinen. Nyt meidän pitäisi tallentaa tämä kenttä tietokantaan samaa kommenttia vastaan. Tämän saavuttamiseksi käytämme toimintoa comment_post. Tämä toiminto antaa meille tällä hetkellä lähetetyn kommentin tunnuksen. Kommenttitunnuksen avulla voimme tallentaa mobiilikenttämme add_comment_metatoiminnolla.

add_action( 'comment_post', 'save_comment_mobile_number' );
function save_comment_mobile_number( $comment_id) {
    if (( isset( $_POST['mobile-number'])) && (! empty( $_POST['mobile-number']) )) {
        $mobile_number = wp_filter_nohtml_kses($_POST['mobile-number']);
        add_comment_meta( $comment_id, 'mobile-number', $mobile_number );
    }
}

Tässä olen käyttänyt wp_filter_nohtml_ksestoimintoa puhdistamaan syötetyt tiedot.

Näytä metakenttä kommentin muokkauslomakkeessa (taustalla)

Toistaiseksi olemme lisänneet uuden kentän käyttöliittymän kommenttilomakkeeseen ja tallentaneet tämän vasta lisätyn kentän. Nyt järjestelmänvalvojana sinun pitäisi nähdä tämä kenttä taustalla.

Jos siirryt backendin kommenttiluetteloon, näet, että jokaisella kommentilla on oma muokkauslomake. Tällä lomakkeella järjestelmänvalvoja voi muokata kommenttia. Seuraava tavoitteemme on näyttää matkapuhelinnumero tässä kommentin muokkauslomakkeessa.

Tätä varten aion lisätä metakentän, johon sijoitamme matkapuhelinnumeron. Käytä alla olevaa koodia, functions.phpjoka lisää metakentän, jossa on matkapuhelinnumero.

add_action( 'add_meta_boxes_comment', 'comment_add_meta_box' );
function comment_add_meta_box() {
    add_meta_box( 'title', __( 'Comment Metadata' ), 'comment_meta_box', 'comment', 'normal', 'high' );
}
 
function comment_meta_box( $comment) {
    $mobile_number = get_comment_meta( $comment->comment_ID, 'mobile-number', true );
    wp_nonce_field( 'comment_update', 'comment_update_nonce', false );
    ?>
    <p>
        <label for="mobile-number"><?php esc_html_e( 'Mobile Number' ); ?></label>
        <input type="text" name="mobile-number" value="<?php echo esc_attr( $mobile_number ); ?>" class="widefat" />
    </p>
    <?php
}

Tallenna kommenttimeta (taustakuvasta)

Olemme melkein valmiit tehtävään. Viimeinen asia on muokata matkapuhelinnumeroa, kun järjestelmänvalvoja päivittää sen. Se voidaan tehdä helposti edit_commenttoiminnan avulla seuraavasti.

add_action( 'edit_comment', 'comment_edit_metafields' );
function comment_edit_metafields( $comment_id) {
    if (! isset( $_POST['comment_update_nonce']) ||! wp_verify_nonce( $_POST['comment_update_nonce'], 'comment_update')) {
        return;
    }
  
    if (( isset( $_POST['mobile-number'])) && (! empty( $_POST['mobile-number'])) ):         $mobile_number = wp_filter_nohtml_kses( $_POST['mobile-number'] );
        update_comment_meta( $comment_id, 'mobile-number', $mobile_number );
    else:         delete_comment_meta( $comment_id, 'mobile-number' );
    endif;
}

Kyse on uuden kentän lisäämisestä muokkaamalla kommentointilomake WordPressissä. Katsotaan nyt, kuinka kentät voidaan poistaa kommenttilomakkeesta.

Poista kenttä WordPressin kommenttilomakkeesta

Kuten me kaikki tiedämme, WordPress tarjoaa muutamia kenttiä (viesti, nimi, sähköposti, verkkosivusto ja valintaruutu) kommenttilomakkeessa. Voit halutessasi poistaa minkä tahansa niistä. Oletetaan, että haluat poistaa verkkosivustokentän lomakkeesta. Voimme tehdä tämän käyttämällä suodatin comment_form_default_fields. Sinun pitäisi tietää verkkosivustokentän avain. Nyt on kysymys siitä, kuinka saada kommenttilomakekenttien avaimet.

Teen sen kirjoittamalla kentät nuken tekstitiedostoon.

add_filter('comment_form_default_fields', 'remove_comment_form_fields');
function remove_comment_form_fields($fields) {
    file_put_contents('test.txt', print_r($fields, true));
}

Jos lataat nyt sivun, jolla on kommenttilomake, tiedosto test.txtluodaan juurikansioon. Minun tapauksessani tällä tiedostolla on seuraava sisältö.

Array (    [author] => <p class="comment-form-author"><label for="author">Name <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" required='required' /></p>
    [email] => <p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" required='required' /></p>
    [url] => <p class="comment-form-url"><label for="url">Website</label> <input id="url" name="url" type="url" value="" size="30" maxlength="200" /></p>
    [cookies] => <p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes" /> <label for="wp-comment-cookies-consent">Save my name, email, and website in this browser for the next time I comment.</label></p>
)

Se antaa sinulle selkeästi lomakekenttien avaimet. Verkkosivustokentän avain on "url". Joten muokkaan yllä olevaa koodia seuraavasti, mikä poistaa verkkosivustokentän kommenttilomakkeesta.

add_filter('comment_form_default_fields', 'remove_comment_form_fields');
function remove_comment_form_fields($fields) {
    if(isset($fields['url'])) {
       unset($fields['url']);
    }
 
    return $fields;
}

Samalla menetelmällä voit poistaa myös muut kommenttilomakkeen kentät.

Toivon, että ymmärrät kuinka muokata kommenttilomaketta WordPressissä. Jaa ajatuksesi ja ehdotuksesi alla olevassa kommenttiosassa.

Aiheeseen liittyvät artikkelit

Tämä verkkosivusto käyttää evästeitä parantaakseen käyttökokemustasi. Oletamme, että olet kunnossa, mutta voit halutessasi kieltäytyä. Hyväksyä Lisätietoja