Javascript åbne/lukke funktion til dit Wordpress kommentar felt | Miklas Njor

Javascript åbne/lukke funktion til dit WordPress kommentar felt

Fungerer i: Firefox, Safari, Chrome.

Mulige konflikter:
Der kan opstå problemer med WP Ajaxify Comments, hvilket kan få siden til at hoppe op til toppen. Det er kun et problem hvis du sammmen med WP Ajaxify Comments også bruger Auto Load Next Post pluginet.

Set up

Abstrakt: Dine brugere forventer sig, at de kan kommentere på din blog, men, meget få brugere benytter sig at denne funktion. Dit kommentarfelt optager en masse plads. At fjerne den er udelukket, fordi du gerne vil give brugere muligheden for at kommentere. Dette skaber en kløft mellem brugervenlighed og funktionalitet, og dit website’s design. Kommentar bokse fylder en hel del, fordi brugere skal udfylde mindst tre felter, nemlig navn, email og selve kommentaren. Oven i det, skal der også være en “send” knap, og måske endda mulighed for at tilmelde sig dine nyhedsbreve, nye kommentarer eller at kunne logge ind med sociale profiler. Så kommentar feltet bliver nødt til at være der, det skal bare helst ikke være i vejen. Det er god informationsarkitektur (langt ord).

Jetpack har en smart måde at komme rundt om dette problem, hvor kommentar feltet udvides når brugeren klikker inde i kassen. Det er god brugervenlighed, men jeg kunne ikke få denne feature til at fungere, for lige meget hvad jeg gjorde (CHMOD’ing af filer, ændring af .htaccess, deaktivering af plugins), fik jeg hele tiden fejlmeldingen: “You don’t have permission to access /wp-comments-post.php”.

Et andet problem var, at jeg bruger Auto Load Next Post pluginet til at automatisk hente nye indlæg under den artikel som folk er ved at læse. Hvis kommentar feltet fylder for meget, så er det svært for læsere, at fatte, at der er mere indhold neden under artiklen.

En mulig måde at komme rundt om det problem kunne være at have en lille javascript popup, der gør læseren opmærksom på at der er flere artikler længere nede, men til sidst vil de bliver tosset over hele tiden at få besked, og så skal man til at kode, så den tæller hvor mange gange den er vist, og så skal man pille ved cookies, så man kan holde styr på om brugeren er tilbagevendende, yada-yada, og så videre o.s.v.

Derfor besluttede jeg at indsætte en simple javascript af/på toggle knap der åbner og lukker for kommentarfeltet, så de brugere der ønsker at skrive kommentarer, kan det, og de resterende 99% skal ikke se på en stor kasse der stjæler en masse plads.

Værktøjer du har brug for:

For at lave ændringer i filerne, så skal du bruge notepad, hvis du er på en Windozs maskine, og text-edit, hvis du er på Mac. Hvis du er på Linux, så håber jeg du ved hvad du skal (for jeg ved det ikke!). Andre brugbare IDE’er er TextWrangler, TextMate og Komodo Edit. Du skal også bruge et ftp program til at hente og uploade filerne, f.eks. FileZilla eller Transmit.

Filer du har brug for:

  • comments.php (i dit temas mappe – brug ftp programmet til at hente det)

  • functions.php (i dit temas mappe – brug ftp programmet til at hente det)

  • header.php (i dit temas mappe – brug ftp programmet til at hente det)

  • style.css (i dit temas mappe – brug ftp programmet til at hente det)

  • js.js (denne fil skaber du selv og uploader til dit tema’s mappe via ftp programmet)

En kommentar om functions.php
Når du opdaterer dit tema, så overskrives (slettes) dine filer og dermed også de ændringer du har lavet. Dette er lidt problematisk. Hvis du (måske korrekt) føler at du ikke burde ændre i dit tema’s functions.php fil, så kan du oprette et Child Theme baseret på dit nuværende tema og tillægge nye funktioner i functions.php, style.css eller js.js dér, eller du kan skabe det der hedder en Must Use plugin. Det lyder alt sammen lidt farligt, men der er mange steder der forklarer det. Se Referencer længst ned på siden. En anden løsning kan være at oprette en fil på serveren (f.eks. mine_aendringer.html), hvor du skriver små kommentar til hvad du har ændret. Du kan også installere Note Press pluginet til at skrive noter om dit site i admin delen.
Ok, nok snak! Lad os komme igang.

Sådan skaber du et fold ud javascript kommentar felt til WordPress

Trin 1 (comment_form())

Først skal du sikre dig, at du bruger comment_form() i dit tema. Du kan tjekke dette ved at åben comments.php og lede efter følgende kode bid:
<?php comment_form(); ?>.
Hvis ikke du kan se comment_form() noget som helst sted i comments.php, så check andre filer der hedder noget med comments-, eller prøv at emaile tema’ets udviklere. Som et sidste udvej, så skal du måske overveje, om ikke du helt skal skifte tema, for hvis en standard funktion som comment_form() mangler, er der måske også andre fejl og mangler og problemer.

See also:  [:da]Jetpack related posts og qTranslate-X hack[:en]Jetpack related posts and qTranslate-X fix[:]

Grunden til at du skal sørge for at comment_form() findes, er fordi vi skal skrive noget kode som går ind og lægger noget til funktionen, så hvis ikke den er der…

Trin 2 (opret javascript filen)

Opret en fil der hedder “js.js” (.js står for javascript). Du kan i bund og grund kalde filen hvad som helst, bare du sørger for, at hvis du har navngivet filen “superduper”, at du husker at smide et .js som endelse, ellers kan browsere ikke finde ud af, at filen er en javascript fil.

Trin 3 (indsæt javascript)

I din js.js fil (eller hvad du nu har kaldt den), skal du indsætte følgende kode:

Gem filen og upload den til dit temas mappe.

Dette burde ikke lav ged i det for andre funktionaliteter på dit site eller clashe med andre jQuery features, som mange WordPress hjemmesider bruger. Jeg havde selv lidt problemer med at lave denne funktionalitet i jQuery, så derfor er den skrevet i old school javascript. Koden er nappet fra CSS Tricks.

Åben din header.php fil og indsæt et link til javascript filen vi lige har uploadet. Hvis du er usikker på hvordan du gør det, så kan du her ser hvordan jeg gør det:

dette indsættes i header.php i

sektionen lige over

og sørg for at du ikke indsætter linket imellem

Gem filen og upload den til dit temas mappe.

Trin 5 (functions.php)

Åben functions.php fra dit temas mappe.
Hvis du ikke har en fil der hedder functions.php (ret usandsynligt), så skaber du bare en ny fil og kalder den, nemlig, functions.php og indsætter følgende kode:

OK. Hvis du har en functions.php fil, så skal du lige over følgende syntax: ?>, som du finder længst nede i filen, lige over det, skal du indsætte følgende kode:

Gem filen og upload den til dit temas mappe..

See also:  [:da]Photoshelters skoddede hotlinking forebyggelse[:en]Photoshelters sucky hotlinking prevention[:]

Trin 6 (CSS)

Hvis du vil være endnu finere på den, så kan du indsætte følgende i din style.css

På den måde så kan folk se at knappen har en eller anden funktion.

Gem filen og upload den til dit temas mappe.

Referencer

Javascript koden:
https://css-tricks.com/snippets/javascript/showhide-element/

Hvis du vil indsætte knappen et andet sted, så har du et par muligheder. Det er en lidt anderledes process, som du kan læse om her:
http://codex.wordpress.org/Function_Reference/comment_form
http://justintadlock.com/archives/2010/07/21/using-the-wordpress-comment-form

Sådan laver du Must Use (MU) plugins:
Fra Justin Tadlock (en rigtig god forklaring):
http://justintadlock.com/archives/2011/02/02/creating-a-custom-functions-plugin-for-end-users
Fra WordPress Codex: (overfladisk):
http://codex.wordpress.org/Must_Use_Plugins

Child themes
http://code.tutsplus.com/tutorials/child-themes-basics-and-creating-child-themes-in-wordpress–wp-27475
http://codex.wordpress.org/Child_Themes

Skriv et svar

Din e-mailadresse vil ikke blive offentliggjort. Krævede felter er markeret med *

*