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

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.

Trin 4 (indsæt link til javascript filen)

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

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

Jetpack related posts og qTranslate-X hack

Problem:
Jeg havde problemmer med at få Jetpack’s Related Posts til at fungere med qTranslate-X. Fejlen var, at Jetpacks Related Posts feature ikke oversatte indlægs overskriften eller link titel tags, og siden det her site er multilingual og mange af articlerne er på dansk og engelsk, så er dette et stort problem.

 Der er jo mange indstillinger i WordPress’ økosystem, så fejlen kan muligvis være et andet sted. Men efter en længere fejlfindings runde, hvor jeg slog indstillinger fra, slukkede for plugins og rensede cachen i WP, var jeg overbevist om, at fejlen lå i Jetpack. Det viste sig at løsningen var ret simpel, med den undtagelse, at den bliver overskrevet næste gang jeg opdaterer Jetpack pluginet.

På linie 3 i den code snippet nederst, der var den originale kode:

, hvilket betyder, at artiklens titel sendes tilbage til systemet uden alle HTML syntaxen. Men overskriften er ikke blevet internationaliseret, d.v.s. at systemet ikke tager højde for nogen som helst oversættelser af overskriften.

Løsningen
For at rette op på det, lægger du koden: __() rundt om $post_title så linien bliver til

Stedet du skal lave ændringen er: wp-content/plugins/jetpack/modules/related-posts/jetpack-related-posts.php på linie 697 (i version: 20150408 af pluginet)

lifebelt

Hva’ sker der? – Hjælp til WordPress, Photoshop og fotografi – # 1

Hva’ #@&€^ sker der?

WordPress, Photoshop, Webdesign, Photography Lifebelt
Knirker din WordPress og begynder man at kunne se sømmene i designet?
Driller Photoshop eller har du mistet dit foto-mojo?

Tag en dyb indånding. Onkel Miklas – kongen af WordPress, web og fotografi – hjælper dig!

Jack of all trades
Som freelancer er man nødt til at hacke et utal af ting selv. Man kan ikke bare lige ringe til X-afdelingen og få hjælp. Det gør, at man over årene akkumulerer en ufattelig stor portion viden og den viden vil jeg gerne dele ud af.

Jeg får dagligt spørgsmål om fotografi og webdesign. I stedet for at de svar kun bliver delt blandt nogle få, så tænkte jeg, at jeg vil åbne sluserne og lade jer stille spørgsmål, som jeg så svarer på her på bloggen ugen efter. Dette er første gang, så vi må lige se hvad der sker.
Hvis det drejer sig om fotografi, så må du finde dig i, at jeg bruger billederne her på sitet for at illustrere løsningen.

Go on, hit me with your best shot
Hent din lange liste over ting ved WordPress, der får dig i det røde felt. Eller er du gået død i Photoshops mange muligheder? Måske du mangler et spark i skridtet til at komme videre med dit fotografi.

Den eneste jeg beder om som tak, hvis jeg svarer på dit spørgsmål, er lidt linklove i form af et link fra dit site til mig eller måske endda en blogpost om hvor sej jeg er og hvordan jeg reddede din røv.

Beskriv problemet grundigt
Hvad er det du vil opnå?
Hvad er det du ikke forstår?
Hvad har du prøvet?
Hvad er det der ikke fungerer?
Link til website eller billeder.
Gyldig email adresse, så jeg kan kontakte dig.
Navn på plugin/theme?
Version af WordPress/Photoshop du bruger

Brug kommentarfeltet nederst til at spørge om alt ang:
WordPress
Webdesign
Photoshop
Fotografi
(Ikke kameramærke specifikke ting)

Så følger jeg op på det med blogposts om dit problem ugen efter.

Det var så lidt.