Web Tutorials | 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)

Dorthe_Facebook_Invites

Sådan inviterer du dine FB-venner til at like din Page

Problem: Sådan inviterer du dine venner til at ‘like’ din facebook page.

Løsning


Du logger ind på din facebook page.

Klik på foreslå til venner

Og derefter kan du vælge. MEN… du kan ikke vælge de der har et lettere lys-mat profil billede. Der kan være flere grunde, bl.a. at de allerede er fans af din side eller at de i deres indstillinger, har frabedt sig at få invitationer.

De jeg har sat grøn cirkel om kan inviteres. De med rød kan ikke.

NB. Jeg har gjort navnene uskarpe.

{ IPTC:Headline | }

Photoshelters skoddede hotlinking forebyggelse

Dette er ikke en fejl hos WordPress eller Facebook, men en meget kluntet løsning hos Photoshelter. I din Photoshelter admin kan du vælge en “sikkerheds” funktion der gør at ingen kan hotlinke dine billeder. “Det er da en kanon ting” hører jeg dig sige. Ja og nej. Idéen er god og teknisk set har den eksisteret i mange år. Men måden Photoshelter brugen den på stinker.

Når nogen hotlinker dine billeder så bruger de dine fotos på deres site. Oftest uden tilladelse og de stjæler også din båndbredde. For at undgå dette kan du lave en mod_rewrite.

Hvordan virker en mod_rewrite

Her er et simplificeret eksempel på hvordan et mod_rewrite fungerer: Hvis vores-hjemmeside.dk beder om at vise en fil fra vores-hjemmeside.dk’s filsystem så vis den endelig til slutbrugeren, men hvis ikke-vores-hjemmeside.dk (eller andre sites) beder om at vise en fil fra vores filsystem (vores-hjemmeside.dk) så skal du ikke vise den fil.

Oven i det, så kan du sætte visse “krav” som skal opfyldes. F.eks.: Hvis vores-hjemmeside.dk eller facebook.com eller blogger.com eller min-fars-hjemmeside.dk beder om at vise en fil så gør det, ellers vis ingenting.

Problemet med Photoshelter

Hos Photoshelter kan du ikke selv kan indstille disse krav, ej heller har de lavet deres egen “safe-list” over de mest almindelig hjemmesider, hvor deres brugere deler deres billeder. Det vil kun tage et par minutters kodning for at løse problemet og jeg kan simpelt hen ikke forstå, at et stort web-firma har valgt den mest skoddede løsning.

[bctt tweet=”Hvordan kan et stort web-firma vælge den mest skoddede løsning. #photoshelter “]

En anden løsning kunne være at hver bruger automatisk fik to mapper. En lukket med mod_rewrite og en åben. De store billeder kommer i den lukkede mappe og små fotos i den åbne, som man så automatisk var dem der blev vist på sociale medie sites.

Løsningen

Men for at svare på dit spørgsmål, så er den eneste løsning lige nu, at slukke for denne “feature” hos Photoshelter.

Du kan læse mere om hotlinking og mod_rewrite her:

http://www.alistapart.com/articles/hotlinking/

http://perishablepress.com/press/2007/11/21/creating-the-ultimate-htaccess-anti-hotlinking-strategy/

Tine_redirection_navigation

Pæne permalinks på en windows hosted hjemmeside

Det tog lidt tid at finde ud af hvorfor der ikke kunne laves permalinks, indtil det gik op for mig, at sitet ligger på en Windows server.

Svaret fandt jeg her: http://codex.wordpress.org/Using_Permalinks#Permalinks_without_mod_rewrite

Men inden jeg ændrede permalink strukturen installerede jeg et plugin, som er på min top ti over must have plugin. Nemlig Redirection. Det er et meget kraftfuldt plugin, som kan “flytte” dine sider og lave alle mulige sjove 301’s og 310’s, men det kan også bare fungere som et set it and forget it plugin.

Grunden til at jeg installerede det, er at der sikkert er nogen der linker til Tines gamle sider, der hedder noget i stil med http://blog.fotoco.dk/blog/?p=73 og hvis jeg ændrer permalink strukturen til http://blog.fotoco.dk/blog/titlen-på-siden-som-overskriften, så bliver http://blog.fotoco.dk/blog/?p=73 en død side og findes ikke mere. Og det er læseren der klikker linket og specielt Google ikke glade for.

Det er dér Redirection kommer ind i billedet, for når jeg sætter flueben de rigtige steder, så laver den automagisk en redirect for mig. Smart og tidsbesparende.

Sådan installerer du Redirection

Installer via WordPress admin eller gå til Redirection’s side og hente .zip filen.

Gå til Værktøjer (tools) -> Redirection

Gå ind under Redirection -> Options

og sæt flueben i feltet Monitor new posts i afsnittet URL monitoring. Og vælg Modified Posts, hvis den ikke allerede er valgt.

Så, nu kan vi gå i gang med at ændre permalinks uden at de “gamle” sider dør.

/index.php/%year%/%post-name/

njor_facebook_css_04

Sådan Pimper du din Facebook Fanbox og Pagestream


Her er en tutorial der handler om hvordan du bruger CSS til at style din Facebook fanbox (facepile/likebox) og pagestream.

Under det store billede nederst kan du se en detaljeret beskrivelse, af hvordan jeg har rullet min egen css blanding og integrerer facebook med mit eget site, uden at give køb på den overordnet grafiske identitet. Det er testet i Safari og Firefox.

Facebooks sociale plugins kommer sit eget css. Det giver et ensartet look på tværs af alle Facebooks widgets og fortæller brugerne, at de interagerer med Facebook.

Husk det når du styler din Fanbox kasse. Det er vigtig, at dine brugere føler at de er i et “sikkert miljø”.

Jeg vil dække både hvordan du installerer dit eget css der udligner den originale facebook-style og hvordan du styler elementerne inden i kassen.

Sådan ændrer du Facebooks custom css

Hvis du bruger wordpress pluginet Simple Facebook Connect smider du bare dit css i kassen “Fanbox Custom CSS på SFC’s admin side.

Hvis du derimod har hentet din Fanbox direkte fra Facebooks site, får du her en forklaring på, hvordan du ændrer koden.

I teorien kan du bare linke til din standard css fil, men Facebook bruger sine egne css style-navne, så et bedre valg være, at lave din egen fil og gemme den på dit site. Måske i din themefolder, så det er lettere at vedligeholde.

XFBML

Hvis du bruge en XFBML version så kan du indsætte et direkte link (http://ditsite.dk/facestylesheet.css) til hvor din css fil er et sted inden

"></fb:like-box>

Her er et eksempel:
css="http://ditsite.dk/facestylesheet.css?1"></fb:like-box>

Hvis du bruger wordpress og opbevarer css filen i din themefolder, så kan du skrive:

css="<?php get_bloginfo('stylesheet_directory'):?>/facestylesheet.css?1"

bemærk ?1. Det hentyder til den cached version af dit stylesheet. Det er vigtigt, at du husker at ændre nummeret i din XFBML kode, hver gang du laver ændringer (og ikke inkluderer ?1 i dit css filnavn, mmmmkay) så Facebook ved, hvilken version af dit css du hentyder til.

iframe

Iframe løsningen ser lidt mere kompliceret ud, men det er nu let nok. Ved slutningen på den her linie

src="http://www.facebook.com/plugins/likebox.php?href=[...]Miklas-Njor-Fotografi%2F1 92308877480168&amp;[...]height=427 DIN KODE HER "

skal du skrive linket til din css fil lige inden den afsluttende .

src="http://www.facebook.com/plugins/likebox.php?href=[...]Miklas-Njor-Fotografi%2F1 92308877480168&amp;[...]height=427&amp;css=http%3A%2F%2Fmiklasnjor.com%2F%3Fsfc-fanbox-css%3D1"

Husk at ændre ASCII bogstaverne:

…css=http://miklas… => …css=http%3A%2F%2Fmiklas…
…njor.com/?sfc-fanbox-… => …njor.com%2F%3Fsfc-fanbox-…
…css=1 => …css%3D1

Bemærk at iframe løsningen bruger ikke ?1 men =1, så husk at ændre = til %3D (%3D1)

Slutresultatet vil se nogenlunde sådan her ud:

iframe src="http://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww. facebook.com%2Fpages%2FMiklas-Njor-Fotografi%2F192308877480168&amp;width=292&amp; colorscheme=light&amp;show_faces=true&amp;stream=true&amp;header=true&amp;height= 427&amp;css=http%3A%2F%2Fmiklasnjor.com%2F%3Fsfc-fanbox-css%3D1" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:427px;" allowTransparency="true"

Okay. Nu har vi fået installationen af vejen. Så er tiden kommet til være kreativ med Fanboxen og pimpe den.

Detaljeret Beskrivelse

Under billedet finder du en detaljeret beskrivelse af hvordan jeg har stylet min Fabox.
how to css style facebook facebox facepile and pagestream

1 – Hele kassen


NOTE: Dette er hele kassen. Jeg har valgt at give den en orange kant.
Og for at være på den sikre side har jeg valgt at inkludere a:link, så jeg ved at alle links ser ud som jeg ønsker. Vi kan ændre de efterfølgende links, idet de “læses” senere og derfor har højere prioritet.

.fan_box .full_widget {border: 1px solid #F50;}
.fan_box .full_widget a:link {color: #F50;}
.fan_box .full_widget a:hover {color: #000;}
.fan_box .full_widget a:visited {color: #F50;}
.fan_box .full_widget a:active {color: #F50;}

2 – Connect header

.fan_box .full_widget .connect_widget_facebook_logo_menubar {background: #F50; border: 0;}

2A – Connect header facebook logo

.fan_box .full_widget .connect_widget_facebook_logo span {background:transparent url(http://website/themfolder/img/facebook_link.gif) no-repeat ; display:block; height:17px; width:90px}
.fan_box .full_widget .connect_widget_facebook_logo:hover span {background-position:left -17px}

NOTE: Jeg kunne ikke lide den blå kant rundt om facebooklogo-billedet, så jeg downloadede billedet og ændrede det. Jeg hentede billedet her via dette link.

3 – Connect top

.fan_box .full_widget .connect_top {background: #fdd5c1; border-bottom: 1px solid #F50;}

3A – Connect top avatar billede

.fan_box .full_widget .connect_top img {padding: 0; margin: 0 1em 0 0; border: 1px solid #F50;}

3B – Connect top – Page navn (Miklas Njor Fotografi)

.fan_box .full_widget .connect_top .name_block {color: #F50;}
.fan_box .full_widget .connect_top .name_block a:link {color: #F50;}
.fan_box .full_widget .connect_top .name_block span.name a:link {color: #F50;}
.fan_box .full_widget .connect_top .name_block:link {color: #F50;}
.fan_box .full_widget .connect_top .name_block span.name:link {color: #F50;}

3C – Connect top – Like Button

.fan_box .full_widget .connect_widget_like_button {border: 1px solid #F50; background: #f0f0f0;}
.fan_box .full_widget .connect_widget_like_button span {color: #f50;}
.fan_box .full_widget .connect_widget_like_button:hover {border: 1px solid #F50; background: #F50; color:#FFF;}
.fan_box .full_widget .connect_widget_like_button:hover span { color:#FFF;}
.fan_box .full_widget .connect_widget_facebook_favicon {background: url(http://website/themfolder/img/facebook_thumbsup.gif) no-repeat -1px -47px transparent;display:block;height:14px;padding:0 0 0 0;width:14px;position:absolute;left:-1px}
.fan_box .full_widget .connect_widget_like_button .liketext {background:url(http://website/themfolder/img/facebook_thumbsup.gif) -1px -33px no-repeat}

NOTE: Ligesom foroven, så har jeg hentet billedet og ændret det. Det kan hentes her

4 – Pagestream – alle historier

.fan_box .full_widget .page_stream {background-color: #f0f0f0; color: #222;}
.fan_box .full_widget .page_stream a:link {color: #F50;}
.fan_box .full_widget .page_stream a:hover {color: #000;}
.fan_box .full_widget .page_stream a:visited {color: #F50;}
.fan_box .full_widget .page_stream a:active {color: #F50;}

4A – Pagestream – enkelt historie

.fan_box .full_widget .page_stream .UIStory {background: #fff; padding: 6px; margin: 5px 0;}

4B – Bruger link – Miklas Njor Fotografi

.fan_box .full_widget .page_stream span.UIIntentionalStory_Names {margin: 0 0.5em 0 0;}
.fan_box .full_widget .page_stream span.UIIntentionalStory_Names a:link {color:#222;}
.fan_box .full_widget .page_stream .UIIntentionalStory_Names {color:#222;}
.fan_box .full_widget .page_stream .UIIntentionalStory_Names a:link {color:#222;}
.fan_box .full_widget .page_stream .UIIntentionalStory_Names a:hover {color:#222;}
.fan_box .full_widget .page_stream .UIIntentionalStory_Names a:visited {color:#222;}
.fan_box .full_widget .page_stream .UIIntentionalStory_Names a:active {color:#222;}

4C – ‘Det er bare så fedt at han svæver’

.fan_box .full_widget .page_stream span.UIStory_Message {color:#222;}
.fan_box .full_widget .page_stream .UIStory_Message a:link {color:#222;}
.fan_box .full_widget .page_stream .UIStory_Message:before {content:”\0022″; }
.fan_box .full_widget .page_stream .UIStory_Message:after {content:”\0022″;}

NOTE: Jeg bruger css pseudo styles :before og :after til at at indsætte situationstegn før og efter teksten. Du kan se hvilke bostaver/tegn du kan bruge på denne fortegnelse for HTML entities. Du kan også bruge billedet. Pseudo classes kan ikke ses i IE6 og IE7.

4D – Post Billeder

.fan_box .full_widget .page_stream .UIStory img {border: 1px solid #F50;}

4E – Post Overskrift – Kim Rahbek Svæver – Direktør Sticks n Sushi

.fan_box .full_widget .page_stream .UIStoryAttachment_Title {color: #F50;}
.fan_box .full_widget .page_stream .UIStoryAttachment_Title a:link {color: #F50;}
.fan_box .full_widget .page_stream .UIStoryAttachment_Title a:hover {color: #F50;}
.fan_box .full_widget .page_stream .UIStoryAttachment_Title a:visited {color: #F50;}
.fan_box .full_widget .page_stream .UIStoryAttachment_Title a:active {color: #F50;}

4F – Websitelink – miklasnjor.com

.fan_box .full_widget .page_stream .UIStoryAttachment_Caption {color:#666;}

4G – Brødtekst – Direktør for Sticks ‘n’ Sushi, Kim Rahbek Hansen, drikker…

.fan_box .full_widget .page_stream .UIStoryAttachment_Copy {color: #222;}

4H – Pagestream – borderbottom

.fan_box .full_widget .page_stream {border-bottom: 1px solid #F50; }

5 – Facepile

.fan_box .full_widget .connections {background-color: #f0f0f0;}

5A – Facepile tekst – x people like Miklas Njor Fotografi

.fan_box .full_widget .connections .connections_grid {margin-top: 0.8em;}

5B – Facepile – Facesgrid

.fan_box .full_widget .connections .connections_grid .grid_item {margin-right: 0.65em; color:#F50;}
.fan_box .full_widget .connections .connections_grid .grid_item a {color:#F50;}

Det var det! – stop editing :)

Der er rigtig mange elementer du kan ændre, men jeg har valgt at fokusere på de vigtigste. Hvis du vil finde flere detaljer du kan style, så vil jeg anbefale at du installerer Firebug til Firefox.