WordPressin oletuskommenttilomake koostuu neljästä harmaasta kentästä ja tylsästä "Lähetä"-painikkeesta. Käyttäjät näkevät sen kymmeniä kertoja eri sivustoilla ja selaavat yksinkertaisesti ohi. Samaan aikaan vilkkaat kommentit ovat yksi vahvimmista signaaleista hakukoneille: sivu saa säännöllisiä päivityksiä, vastaanottaa tuoretta käyttäjien tuottamaa sisältöä ja pitää vierailijat pidempään sitoutuneina.

Ongelmana on, että vakiolomakkeen muotoilu tappaa halun kirjoittaa. "Nimi", "Sähköposti" ja "Verkkosivusto" -kentät tuntuvat byrokratialta eivätkä kutsu keskusteluun. Hyvä uutinen: WordPress antaa täyden pääsyn lomakkeen merkintäkieleen. Suodattimien, koukkujen ja CSS:n avulla voit muuttaa sen miksi tahansa koskematta ydinmoottoriin.

Tässä oppaassa käymme läpi KAIKKI kommenttien mukautusmenetelmät syötekenttien fontin vaihtamisesta reCAPTCHA:n lisäämiseen ja lisäosiin, jotka muuttavat lomakkeen lähes sosiaaliseksi verkoksi. Kaikki koodi toimii nykyisillä WordPress-versioilla tavallisten ydinsuodattimien kautta, ilman hakkereita tai suoria moottorimuutoksia.

💡 Pikakatsaus:

• Syötekenttien tyylien muuttaminen CSS:llä (fontti, väri, täyte), ei lisäosia, vain style.css-tiedosto
• Lähetä-painikkeen uudelleensuunnittelu: väri, reunuksen pyöristys, teksti, comment_form_defaults-suodattimen kautta
• Verkkosivusto-kentän poistaminen, jolloin roskapostittajilla ei ole paikkaa pudottaa linkkejä ja käyttäjien on helpompaa
• Mukautettujen kenttien lisääminen (ikä, arvosana, puhelin) comment_form_default_fields-suodattimen kautta
• Google reCAPTCHA:n määrittäminen, bottien estäminen samalla kun oikeat ihmiset pääsevät läpi huomaamatta
• Lohkon otsikon ja kenttien järjestyksen muuttaminen, tekstialueen asettaminen ensimmäiseksi tai viimeiseksi
• Vastaustilausten, Quicktagsien ja koko lohkon CSS-tyylien lisääminen
• Lomakkeen laajentaminen lisäosilla (Disqus, Jetpack, Simple Comment Editing), kun koodi ei riitä

Syötekenttien tyylien muuttaminen CSS:llä

Yksinkertaisin ja turvallisin tapa päivittää lomake on muutama rivi teemasi style.css-tiedostossa. Kommenttikenttien CSS-luokat on dokumentoitu eivätkä ole muuttuneet vuosiin. Nämä ovat #author nimelle, #email sähköpostille, #url verkkosivustolle ja #comment tekstille.

Tässä on esimerkki, joka muuttaa fonttia kenttien sisällä: nimi ja sähköposti saavat serif-tyylin kursiivilla, kun taas URL-kenttä saa monospace-fontin erottuakseen visuaalisesti:

1
#author, #email {
2
    font-family: "Open Sans", "Droid Sans", Arial;
3
    font-style: italic;
4
    color: #1d1d1d;
5
    letter-spacing: .1em;
6
}
7
 
8
#url {
9
    color: #1d1d1d;
10
    font-family: "Lucida Console", "Courier New", "Courier", monospace;
11
}

Lisää tämä koodi lapsiteemasi style.css-tiedoston loppuun (tai kohdasta "Ulkoasu → Mukauta → Lisä-CSS"), tallenna, ja kentät muuttuvat välittömästi. Ei lisäosia, ei ylimääräistä kuormaa.

Lähetä-painikkeen ulkoasun ja tekstin muuttaminen

Oletus "Lähetä"-painike on harmaa suorakulmio ilman persoonallisuutta. CSS muuttaa sen kirkkaaksi toimintakehotukseksi. Tässä on valmis pätkä liukuvärillä, pyöristetyillä kulmilla ja hover-efektillä:

1
#submit {
2
    background: linear-gradient(to bottom, #44c767 5%, #5cbf2a 100%);
3
    background-color: #44c767;
4
    border-radius: 28px;
5
    border: 1px solid #18ab29;
6
    display: inline-block;
7
    cursor: pointer;
8
    color: #ffffff;
9
    font-family: Arial;
10
    font-size: 17px;
11
    padding: 16px 31px;
12
    text-decoration: none;
13
    text-shadow: 0px 1px 0px #2f6627;
14
}
15
 
16
#submit:hover {
17
    background: linear-gradient(to bottom, #5cbf2a 5%, #44c767 100%);
18
    background-color: #5cbf2a;
19
}
20
 
21
#submit:active {
22
    position: relative;
23
    top: 1px;
24
}

CSS muuttaa ulkoasua, mutta ei varsinaista tekstiä. Kun haluat korvata "Lähetä" tekstillä "Jätä kommentti", "Jaa mielipiteesi" tai jollain teemaan sopivalla, PHP-suodatin comment_form_defaults tulee kuvaan. Alla oleva koodi lisätään functions.php-tiedostoon tai pätkälisäosaan (Code Snippets):

1
$commenter = wp_get_current_commenter();
2
$req = get_option('require_name_email');
3
$aria_req = ($req ? " aria-required='true'" : '');
4
 
5
$fields = array(
6
    'author' => '<p class="comment-form-author">' .
7
        '<label for="author">' . __('Name') . '</label> ' .
8
        ($req ? '<span class="required">*</span>' : '') .
9
        '<input id="author" name="author" type="text" value="' .
10
        esc_attr($commenter['comment_author']) . '" size="30"' . $aria_req . ' /></p>',
11
 
12
    'email'  => '<p class="comment-form-email">' .
13
        '<label for="email">' . __('Email') . '</label> ' .
14
        ($req ? '<span class="required">*</span>' : '') .
15
        '<input id="email" name="email" type="text" value="' .
16
        esc_attr($commenter['comment_author_email']) . '" size="30"' . $aria_req . ' /></p>',
17
);
18
 
19
$comments_args = array(
20
    'fields'       => $fields,
21
    'label_submit' => 'Send My Comment',
22
);
23
 
24
comment_form($comments_args);

Avainrivi on 'label_submit' => 'Lähetä kommenttini', joka juuri korvaa painikkeen tekstin. Korvaa merkkijono omalla versiollasi, ja lomake puhuu blogisi äänellä.

Verkkosivusto-kentän poistaminen lomakkeesta

"Verkkosivusto"-kenttä on magneetti roskapostittajille. He täyttävät sen linkeillä resursseihinsa, vaikka itse kommentti näyttäisi viattomalta. Tavallisille lukijoille tällä kentällä ei ole tarkoitusta, sillä ihmiset tulevat jakamaan ajatuksiaan, eivät mainostamaan.

Voit poistaa Verkkosivusto-kentän ilman lisäosia käyttämällä comment_form_default_fields-suodatinta. Alla oleva koodi säilyttää vain nimi- ja sähköpostikentät poistaen URL:n:

1
$commenter = wp_get_current_commenter();
2
$req = get_option('require_name_email');
3
$aria_req = ($req ? " aria-required='true'" : '');
4
 
5
$fields = array(
6
    'author' => '<p class="comment-form-author">' .
7
        '<label for="author">' . __('Name') . '</label> ' .
8
        ($req ? '<span class="required">*</span>' : '') .
9
        '<input id="author" name="author" type="text" value="' .
10
        esc_attr($commenter['comment_author']) . '" size="30"' . $aria_req . ' /></p>',
11
 
12
    'email'  => '<p class="comment-form-email">' .
13
        '<label for="email">' . __('Email') . '</label> ' .
14
        ($req ? '<span class="required">*</span>' : '') .
15
        '<input id="email" name="email" type="text" value="' .
16
        esc_attr($commenter['comment_author_email']) . '" size="30"' . $aria_req . ' /></p>',
17
);
18
 
19
$comments_args = array('fields' => $fields);
20
 
21
comment_form($comments_args);

Välitimme vain author- ja email-kentät $fields-taulukkoon. url-avainta ei yksinkertaisesti ole, joten WordPress ei renderöi sitä. Käyttäjät täyttävät nyt kaksi kenttää kolmen sijaan, osallistumiskynnys laskee, eikä roskapostittajilla ole paikkaa jättää linkkejä. Lisää koodi functions.php-tiedostoon ja tarkista lomake missä tahansa artikkelissa.

Mukautettujen kenttien lisääminen suodattimen kautta

Joskus vakiokentät eivät riitä. Tarvitset tähtiarvostelun, "Ikä"-kentän, valintaruudun sääntöjen hyväksymiselle, puhelinnumeron tai mitä tahansa muuta. WordPress tarjoaa comment_form_default_fields-suodattimen, jonka avulla voit koukuttua kenttätaulukkoon ja lisätä omasi.

Alla oleva esimerkki lisää "Ikä"-tekstikentän vakiokenttien ja tekstialueen väliin:

1
function add_comment_fields($fields) {
2
    $fields['age'] = '<p class="comment-form-age">' .
3
        '<label for="age">' . __('Age') . '</label>' .
4
        '<input id="age" name="age" type="text" size="30" /></p>';
5
    return $fields;
6
}
7
add_filter('comment_form_default_fields', 'add_comment_fields');

Suodatin välittää $fields-taulukon funktiosi läpi, lisäät 'age'-avaimen HTML-merkinnällä, ja WordPress renderöi sen lomakkeeseen. Voit lisätä "Puhelin"-kentän (type="tel"), uutiskirjeen tilausvalintaruudun (type="checkbox") tai pudotusvalikon aiheen valintaa varten (<select>) samalla tavalla.

Suodattimen tärkein etu suoraan mallipohjan muokkaamiseen verrattuna: koodisi sijaitsee functions.php-tiedostossa tai Code Snippets -lisäosassa eikä ole riippuvainen tietystä teemasta. Vaihda teemaa, ja mukautetut kenttäsi säilyvät.

Google reCAPTCHA:n lisääminen roskapostisuojaksi

Vaikka Website-kenttä on poistettu, roskapostittajat löytävät porsaanreikiä. Botit ovat oppineet tuottamaan johdonmukaisia kommentteja ja ohittamaan yksinkertaiset captchat. Google reCAPTCHA ratkaisee ongelman perusteellisesti: varmennus tapahtuu taustalla ilman liikennevalojen klikkailua.

Invisible reCAPTCHA for WordPress -lisäosa integroi varmennuksen kaikkiin sivuston vakiolomakkeisiin: kirjautumiseen, rekisteröitymiseen, salasanan palautukseen ja (meille tärkeänä) kommentteihin. Se seuraa hiiren osoittimen käyttäytymistä ja vuorovaikutusmalleja tunnistaen botit kysymättä oikeilta käyttäjiltä yhtäkään kysymystä. Lue lisää asennuksesta artikkelistamme miten reCAPTCHA lisätään WordPress-kommentteihin.

Pika-asennuksen vaiheet:

• Mene osoitteeseen google.com/recaptcha/admin/create ja rekisteröi sivustosi (valitse v3 tai v2 Invisible)

• Täytä nimi ja verkkotunnus, hyväksy ehdot ja klikkaa "Submit"

• Kopioi Site Key ja Secret Key, sillä tarvitset niitä lisäosan aktivointiin
• WordPressin hallintapaneelissa siirry kohtaan "Settings → Invisible reCAPTCHA"

• Liitä avaimet vastaaviin kenttiin ja valitse "Enable Comments Protection"
• Tallenna muutokset

Tästä hetkestä lähtien jokainen kommentti käy läpi taustavarmennuksen. Oikeat käyttäjät eivät huomaa mitään, kun taas botit hylätään. Roskapostikommentit putoavat nollaan yhdessä illassa.

Lomakkeen yläpuolisen otsikon muuttaminen

"Leave a Reply" on oletusotsikko, jonka WordPress näyttää lomakkeen yläpuolella. Useimmissa tapauksissa se on neutraali ja sopiva, mutta joskus haluat jotain innostavampaa: "Share Your Thoughts", "Got Something to Add?", "Join the Discussion".

Otsikko muutetaan saman $comments_args-taulukon kautta, jota käytimme painikkeeseen. title_reply-parametri korvaa tekstin:

1
$comments_args = array(
2
    'fields'       => $fields,
3
    'title_reply'  => 'Please give us your valuable comment',
4
);
5
comment_form($comments_args);

Koodi menee functions.php-tiedostoon muiden lomakeasetusten joukkoon. Jos olet jo muokannut painiketta tai poistanut verkkosivusto-kentän, lisää vain 'title_reply' olemassa olevaan $comments_args-taulukkoon luomatta päällekkäistä comment_form()-kutsua.

Kenttien järjestyksen muuttaminen

WordPress 4.4:stä alkaen tekstialue tulee oletuksena ensin, ennen nimeä, sähköpostia ja verkkosivustoa. Käyttäjät näkevät heti, mihin kirjoittaa. Mutta jos pidät enemmän vanhasta muodosta (nimi → sähköposti → verkkosivusto → teksti), comment_form_fields-suodatin antaa sinulle täyden hallinnan.

Alla oleva funktio siirtää tekstikentän lomakkeen loppuun, mikä on käyttäjille tuttu klassinen malli vanhemmista WP-versioista:

1
function wpb_move_comment_field_to_bottom($fields) {
2
    $comment_field = $fields['comment'];
3
    unset($fields['comment']);
4
    $fields['comment'] = $comment_field;
5
    return $fields;
6
}
7
add_filter('comment_form_fields', 'wpb_move_comment_field_to_bottom');

Logiikka on yksinkertainen: poimi comment-elementti taulukosta, poista se nykyiseltä paikaltaan ja aseta se viimeiseksi. Haluatko eri järjestyksen? Muuta unset-komennon ja sijoituksen järjestystä. $fields-taulukko on tavallinen PHP:n assosiatiivinen taulukko. Sen vakiovaimet ovat author (nimi), email (sähköposti), url (verkkosivusto) ja comment (teksti), sekä mahdolliset aiemmin lisäämäsi mukautetut kentät.

Vastausten tilaaminen kommentteihin

Käyttäjä jättää kommentin ja poistuu. Joku vastaa kolme päivää myöhemmin, eikä alkuperäinen kommentoija koskaan saa tietää tai palaa. "Ilmoita minulle vastauksista" -valintaruutu ratkaisee tämän ongelman: lukijat saavat sähköpostin, kun joku vastaa heidän kommenttiinsa, ja palaavat keskusteluketjuun.

Subscribe to Comments Reloaded -lisäosa hoitaa tämän toiminnon. Asenna se tavalliseen tapaan (Lisäosat → Lisää uusi → hae nimellä), aktivoi se ja siirry kohtaan "Asetukset → Subscribe to Comments".

Asetuksissa voit määrittää:

• valintaruudun vieressä näkyvän tekstin;
• ilmoituksen ulkoasun (pelkkä teksti tai HTML);
• mahdollisuuden tilata ilmoituksia ILMAN kommentin jättämistä (myös vierailijat voivat seurata keskusteluja);
• sähköpostien lähetysvälin roskapostituksen välttämiseksi.

Lisäosa lisää lomakkeeseen yhden valintaruudun, jonka käyttäjät voivat halutessaan valita. Ei pakkoa, ei käyttökokemuksen heikennystä. Ja lukijoiden paluuprosentti sivustolle kasvaa huomattavasti.

Pikatyökalut: muotoilupalkki tekstikentän yläpuolella

Pikatyökalut ovat muotoilupainikkeita, jotka WordPress näyttää kommenttikentän yläpuolella: Lihavoi, Kursivoi, Linkki, Lainaus. Ne ovat oletuksena pois käytöstä useimmissa teemoissa, mikä on harmillista: käyttäjät, jotka näkevät tutun, Wordin kaltaisen työkalupalkin, tuntevat olonsa varmemmaksi ja kirjoittavat jäsennellympiä kommentteja.

Comment Form Quicktags -lisäosa ottaa tämän työkalupalkin käyttöön yhdellä napsautuksella. Asennuksen ja aktivoinnin jälkeen siirry kohtaan "Asetukset → Keskustelu", etsi Quicktags-osio ja ota asetus käyttöön. Tallenna, ja työkalupalkki ilmestyy tekstikentän yläpuolelle kaikissa artikkeleissa.

Kattava CSS-muotoilu kommenttilohkolle

Kun haluat muutakin kuin vain värillisiä kenttiä ja tarvitset koko lohkon uudelleenmuotoilua taustalla, varjoilla, pyöristetyillä kulmilla ja täytteillä, tarvitset kattavan CSS:n. Alla on valmis tyylisetti, joka muuttaa harmaan asettelun siistiksi kortiksi, jossa on reunus, varjo ja värillinen korostus vasemmalla:

1
.comment-respond,
2
.entry-pings,
3
.entry-comments {
4
    color: #444;
5
    padding: 20px 45px 40px 45px;
6
    border: 1px solid #ccc;
7
    overflow: hidden;
8
    background: #fff;
9
    box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
10
    border-left: 4px solid #444;
11
}
12
 
13
.entry-comments h3 {
14
    font-size: 30px;
15
    margin-bottom: 30px;
16
}
17
 
18
.comment-respond h3,
19
.entry-pings h3 {
20
    font-size: 20px;
21
    margin-bottom: 30px;
22
}
23
 
24
.comment-respond {
25
    padding-bottom: 5%;
26
    margin: 20px 1px;
27
    border-left: none !important;
28
}
29
 
30
.comment-header {
31
    color: #adaeb3;
32
    font-size: 14px;
33
    margin-bottom: 20px;
34
}
35
 
36
.comment-header cite a {
37
    border: none;
38
    font-style: normal;
39
    font-size: 16px;
40
    font-weight: bold;
41
}
42
 
43
.comment-header .comment-meta a {
44
    border: none;
45
    color: #adaeb3;
46
}
47
 
48
li.comment {
49
    background-color: #fff;
50
    border-right: none;
51
}
52
 
53
.comment-content {
54
    clear: both;
55
    overflow: hidden;
56
}
57
 
58
.comment-list li {
59
    font-size: 14px;
60
    padding: 20px 30px 20px 50px;
61
}
62
 
63
.comment-list .children {
64
    margin-top: 40px;
65
    border: 1px solid #ccc;
66
}
67
 
68
.comment-list li li {
69
    background-color: #f5f5f6;
70
}
71
 
72
.comment-list li li li {
73
    background-color: #fff;
74
}
75
 
76
.comment-respond input[type="email"],
77
.comment-respond input[type="text"],
78
.comment-respond input[type="url"] {
79
    width: 50%;
80
}
81
 
82
.comment-respond label {
83
    display: block;
84
    margin-right: 12px;
85
}
86
 
87
.entry-comments .comment-author {
88
    margin-bottom: 0;
89
    position: relative;
90
}
91
 
92
.entry-comments .comment-author img {
93
    border-radius: 50%;
94
    border: 5px solid #fff;
95
    left: -80px;
96
    top: -5px;
97
    position: absolute;
98
    width: 60px;
99
}
100
 
101
.entry-pings .reply {
102
    display: none;
103
}
104
 
105
.form-allowed-tags {
106
    background-color: #f5f5f5;
107
    font-size: 16px;
108
    padding: 24px;
109
}
110
 
111
.comment-reply-link {
112
    cursor: pointer;
113
    background-color: #444;
114
    border: none;
115
    border-radius: 3px;
116
    color: #fff;
117
    font-size: 12px;
118
    font-weight: 300;
119
    letter-spacing: 1px;
120
    padding: 4px 10px;
121
    text-transform: uppercase;
122
    width: auto;
123
}
124
 
125
.comment-reply-link:hover {
126
    color: #fff;
127
}
128
 
129
.comment-notes {
130
    display: none;
131
}

Tämä CSS muotoilee paitsi lomakkeen myös jo julkaistujen kommenttien listan: avatarit muuttuvat pyöreiksi ja siirtyvät vasemmalle, vastaukset korostetaan taustalla ja reunuksella, "Vastaa"-linkistä tulee kompakti painike ja "Sähköpostiosoitettasi ei julkaista" -ilmoitus piilotetaan.

Lisää se lapsiteemasi style.css-tiedostoon tai mukauttimen kautta, ja se toimii millä tahansa alustalla.

Kommenttilomake tietylle sisältötyypille

Joskus mukautettuja kenttiä tarvitaan vain tiettyyn sisältöön. Esimerkiksi elokuvatietokantasivustolla saatat haluta näyttää "Ikä"-kentän vain "Elokuvat"-sisältötyypin alla, mutta pitää vakiolomakkeen blogissa.

WordPressissä voit sitoa suodattimen tiettyyn sisältötyyppiin käyttämällä is_singular()-ehtotunnistetta:

1
function add_comment_fields($fields) {
2
    if (is_singular('Movies')) {
3
        $fields['age'] = '<p class="comment-form-age">' .
4
            '<label for="age">' . __('Age') . '</label>' .
5
            '<input id="age" name="age" type="text" size="30" /></p>';
6
    }
7
    return $fields;
8
}
9
add_filter('comment_form_default_fields', 'add_comment_fields');

Funktio on sama kuin kenttien lisäämistä käsittelevässä osiossa, mutta se on kääritty if (is_singular('Movies'))-ehdon sisään. "Ikä"-kenttä näytetään VAIN, kun nykyinen sivu on yksittäinen Movies-tyypin artikkeli. Blogissa, sivuilla ja muissa mukautetuissa sisältötyypeissä lomake pysyy vakiona.

Lisäosat edistyneeseen mukauttamiseen

Kun tämän oppaan koodi ei riitä ja haluat rakentaa kommentit kokonaan uusiksi, erikoislisäosat tulevat kuvaan. Ne korvaavat vakiolomakkeen omallaan, jossa on omat tyylinsä, moderointinsa ja ominaisuutensa.

Jetpack Comments

Jetpack Automatticilta ei ole pelkkä kommenttilisäosa, vaan kokonainen moduulisarja (yli 20). Kommenttien kannalta keskeinen ominaisuus on, että käyttäjät voivat kirjautua sisään sosiaalisten verkostojen (Google, Twitter, Facebook) kautta ja julkaista kommentteja täyttämättä kenttiä manuaalisesti. Lomake lyhenee ja osallistumiskynnys madaltuu. Samalla klassinen vaihtoehto, jossa kentät täytetään käsin, säilyy edelleen käytettävissä.

Disqus Comment System

Disqus on tunnetuin vaihtoehto tavallisille kommenteille. Keskeiset edut: lajittelu uusimman/vanhimman/suosituimman mukaan, mahdollisuus äänestää muiden kommentteja, omalta sivustoltasi tulevien samankaltaisten artikkelien suositukset ja kommenttien synkronointi takaisin WordPressin tietokantaan (voit palata vakiolomakkeeseen milloin tahansa menettämättä tietoja). Disqus-tilin omaaville käyttäjille kommentointi on saumatonta millä tahansa sivustolla, jossa tämä lisäosa on käytössä. He näkevät vastausilmoituksen, klikkaavat sitä ja vastaavat.

Haittapuolia ovat pakollinen Disqus-rekisteröityminen (toisin kuin vakiolomakkeella, jossa nimi ja sähköposti riittävät), mainoslinkit, jotka täytyy poistaa käytöstä asetuksista, sekä tietosuojaan liittyvät huolet, sillä lisäosa kerää kävijätietoja suositusten näyttämiseksi. Yhdistä Disqus Disqus Conditional Load -lisäosan kanssa: se viivästyttää skriptin lataamista, kunnes käyttäjä vierittää kommenttien kohdalle, mikä nopeuttaa sivua selvästi.

Yksinkertainen kommenttien muokkaus

Simple Comment Editing ratkaisee yhden tietyn tehtävän: se antaa käyttäjille 5 minuutin aikaikkunan muokata juuri lähetettyä kommenttia. Kirjoitusvirhe nimessä, rikkinäinen linkki, kielioppivirhe: huomaa se, korjaa se, tallenna se. Tutkimukset osoittavat, että useimmat käyttäjät huomaavat virheet heti lähetyksen jälkeen, ja mahdollisuus korjata teksti nopeasti vähentää ahdistusta ja lisää sitoutumista.

Laiskalataus kommenteille

Lazy Load for Comments ei tuo uusia ominaisuuksia, mutta tekee jotain tärkeää: se lykkää koko kommenttilohkon lataamista, kunnes käyttäjä vierittää sen kohdalle. Koska kommentit ovat aina sivun alaosassa, niiden HTML:n ja skriptien ei pitäisi latautua pääsisällön mukana. Lisäosa karsii turhat pyynnöt käynnistyksessä, nopeuttaa Largest Contentful Paint -mittaria ja tekee sivustosta yleisesti nopeamman Core Web Vitals -mittareiden mukaan.

Video: kommenttilomakkeen muokkaaminen käytännössä

Tämä 10 minuutin opasvideo näyttää koko prosessin WordPressin kommenttilomakkeen määrittämisestä mukautettujen kenttien lisäämisestä CSS-tyylittelyyn:

⁉️🤔 Usein kysytyt kysymykset

Voinko muokata kommenttilomaketta muokkaamatta teematiedostoja?

Kyllä, ja tämä on jopa suositeltavaa. Mukautettu CSS lisätään kohdasta "Ulkoasu → Mukauta → Lisä-CSS" ja PHP-koodi Code Snippets -lisäosan kautta (ilmainen, WordPressin lisäosavarastossa). Molemmat tavat säilyvät teemanvaihdoissa ja päivityksissä ilman tietojen menetystä. Ainoa poikkeus on, jos tiedät varmasti työskenteleväsi lapsiteeman kanssa ja hallitset sen functions.php- ja style.css-tiedostoja.

Kumpi roskapostisuojaus-menetelmä on parempi: reCAPTCHA vai Verkkosivusto-kentän poistaminen?

Molemmat yhdessä. Poista aina Verkkosivusto-kenttä, sillä oikeat lukijat eivät sitä tarvitse ja se palvelee lähes yksinomaan roskapostittajia. Lisää päälle reCAPTCHA v3, joka estää botit käyttäytymistasolla, näkymättömästi vierailijoille. Kumpikin menetelmä yksinään päästää jonkin verran roskapostia läpi, mutta yhdessä ne saavuttavat lähes nollan roskakommentit.

Mitä teen, jos kommenttilomake hajoaa koodin lisäämisen jälkeen?

Ensiksi: varmista, että PHP-koodi on lisätty functions.php-tiedostoon ENNEN sulkevaa ?>-tagia (jos sellainen on) ja ettei koodinpätkä sisällä syntaksivirheitä. Toiseksi: jos muokkasit functions.php-tiedostoa suoraan, tee aina varmuuskopio ennen muokkausta, sillä valkoinen kuolemanruutu korjataan palauttamalla tiedosto FTP:n kautta. Kolmanneksi: jos lomake vain katosi visuaalisesti, tarkista CSS:stä display: none .comment-respond- tai .comment-notes-valitsimista.

Toimiiko tämä koodi lohkoteemojen (FSE) kanssa?

CSS-tyylit toimivat missä tahansa teemassa, mukaan lukien lohkoteemat (Twenty Twenty-Three, Twenty Twenty-Four ja johdannaiset). PHP-suodattimet comment_form_defaults ja comment_form_default_fields ovat myös yleispäteviä, sillä ne ovat osa WordPressin ydintä eivätkä riipu teemasta. Ainoa vivahde: lohkoteemoissa kommenttipohja voidaan ohittaa Sivustomuokkaimen kautta, ja CSS-luokat voivat poiketa. Tarkista todelliset valitsimet selaimen tarkastustyökalun kautta.

Voinko poistaa kommentoinnin kokonaan käytöstä koko sivustolla?

Kyllä: "Asetukset → Keskustelu" → poista valinta kohdasta "Salli uusien artikkelien kommentointi". Olemassa oleville artikkeleille: valitse kaikki kohdasta "Artikkelit → Kaikki artikkelit", valitse massatoimintojen pudotusvalikosta "Muokkaa", käytä, ja valitse "Kommentit"-pudotusvalikosta "Älä salli". Lisäosat kuten Disable Comments tekevät saman yhdellä napsautuksella, mutta kertaluonteiseen toimenpiteeseen lisäosa on liioittelua.

Mitä toteuttaa ja missä järjestyksessä: lopullinen tarkistuslista

Toimintajärjestys, joka antaa maksimaaliset tulokset minimaalisella vaivalla:

• Poista Verkkosivusto-kenttä, jolloin roskapostittajilla ei ole paikkaa linkkien pudottamiselle ja käyttäjien on helpompi toimia.
• Ota käyttöön reCAPTCHA v3, joka estää botit käyttäytymistasolla, ilman captchaa.
• Päivitä CSS: fontti, täyte, painikkeen väri, varjo lohkolle. Viisi minuuttia ja lomake näyttää osalta designia eikä vieraalta elementiltä.
• Lisää vastaustilaukset, sillä joka toinen palaava kommentoija tulee nimenomaan ilmoituksen perusteella.
• Ota Quicktags käyttöön, koska muotoilutyökalurivi lisää käyttäjien itseluottamusta ja tekstin laatua.

Jos lomake ei näiden vaiheiden jälkeen vieläkään vastaa odotuksiasi, siirry tämän oppaan edistyneisiin tekniikoihin: mukautetut kentät tietyille artikkelityypeille, Disqus yhteisöominaisuuksia varten, Lazy Load nopeutta varten.

Kirjoita tämän postauksen kommentteihin, mikä menetelmä toimi sinulle. Luemme kaiken ja päivitämme opasta lukijoiden todellisten kokemusten perusteella.