Webbutveckling

Bloggen får nytt utseende

Ett av målen i år var att skapa ett nytt utseende för bloggen och här har ni nu resultatet.

Nu föll det väl ut med att var dags att fräscha upp WordPress-kunskaperna efter ha gjort en hel del där WordPress inte har varit inblandat. Så som kvällsprojekt har jag suttit och knackat på ett nytt tema för att testa på lite nya funktioner, funktionalitet, best practises och alternativa sätt att lösa saker på.

För första gången ger jag mig på att presentera posterna på olika sätt med det inbyggda stödet av Post Formats som gör det enkelt säga vad för sorts innehåll i posten, precis som Tumblr.
Detta har jag valt att visualisera med hjälp av ikoner till vänster om posten och så presenterar jag innehållet lite olika beroende på posttyp. Här använder vi oss av ikon-fontsetet Font Awesome.

Temat som jag kallar Olingo har även responsiv design och här har jag valt att Skeleton som är ett CSS ramverk som grunden till detta.

Jag funderar även på att släppa temat fritt för andra att ladda ner och använda. Är det något man ska tänka på eller ska ha med sig om man skulle göra detta? Någon som har någon erfarenhet?

(Screenshotet är med för att man ska kunna gå tillbaka och kolla på hur det såg inte bara läsa om det om jag skulle byta tema igen.)

Så får du tag på Twenty twelve redan idag

Nu är det dags för Automattic att släppa ett nytt standardtema till WordPress och i vanlig ordning döper de till det år vi är inne på i bokstäver. Så man blir inte jätteförvånad när årets tema heter Twenty twelve och kommer att släppas tillsammans med WordPress 3.5.

Det har ännu inte släppts till allmänheten, ligger med som standard, men det går att få tag på i test-versionen via Subversion.

Jonathan Sulo beskriver hur man hämtar ner det via terminalen.

Andreas som driver Baronen.org har laddat ner temat och kör det om du vill se ett demo man kan även kolla på det på WordPress egna demosida. Tycker det är mycket snyggt och stilrent och så är den även byggde med responsive design vilket är mycket trevligt.

Jag har även zipat en mapp för er som inte kan ladda ner det via terminalen och den kan ni ladda ner här.

Så gör du Google Chrome retina kompatibel

Nu när de nya Macbook retina har kommit så kan man tycka att många sidor känns aningen ”sunkiga”. Texten kan kännas suddig med den nya skärmen. Inget som jag har reflekterat över innan utan för nu och det fungerar men jag satte mig ner och undersökte det lite närmare idag och det visade sig att Google håller på att utveckla detta till Chrome och man kan ta del av det redan idag genom att ladda ner Google Chrome Canary. Canary är där man rullar ut den senaste tekniken först för att testa den innan man rullar ut den i den skarpa versionen av Chrome.

Läs hur du gör »

Bättre bildhantering för WordPress

Jag har inte hunnit testa det själv ännu, men snubblade över ett trevligt plugin där man får med ni funktionalitet till bildhanteringen för WordPress.
Det heter Scissors Continued och innehåller funktionalitet som WordPress redan i dagsläget har stöd för så som beskärning, storleksanpassa, rotera men framförallt så ska det ha stöd för att sätta vattenstämplar på sina bilder om man skulle vilja.

Som sagt har jag inte hunnit testa det själv och det ser ut som att mycket av funktionerna redan finns i WordPress idag, men det verkar komma med fler alternativ och inställningsmöjligheter.

Har ni testat eller känner till något liknande bra plugin så får ni gärna rekommendera detta i kommentarerna nedan.

 

Så tar du bort hover texten på bilder i WordPress

Kan ni som jag kan störa er på att en design kan förstöras av att det kommer upp ”tool-tip” på bilder när man hovrar dom? Det är för att det finns ett titel attribut satt på bilden och det görs per automatik av WordPress.

Om ni vill bli av med detta störande element så har jag knåpat ihop denna lilla kodsnutten som byter ut titel attribut till alt-taggen om denna är tom och inte satt.

// Add in functions.php

// Replace the title attribute to alt attribute on images if the alt isn't set
add_filter('get_image_tag','my_image_tag',10,4);
function my_image_tag($html, $id , $alt, $title){
    if($alt == '') {
        $html = str_replace('alt=""','alt="'.$title.'"',$html);
        $html = preg_replace('|title="[^"]*"|U', '', $html);
    }
    return $html;
}

Jag gör inte som jag lär här på bloggen och har inte implementerat det på denna sidan, men denna är sidan är heller inget designfenomen :)

Exkludera automatiskt featured image från galleri i WordPress

Om ni vill använda er av WordPress inbyggda galleri och vill utelämna feature image/thumbnail per automatik så är denna kodsnutten en goding.

// Add in functions.php
function exclude_thumbnail_from_gallery($null, $attr) {
    if (!$thumbnail_ID = get_post_thumbnail_id())
        return $null; // no point carrying on if no thumbnail ID

    // temporarily remove the filter, otherwise endless loop!
    remove_filter('post_gallery', 'exclude_thumbnail_from_gallery');

    // pop in our excluded thumbnail
    if (!isset($attr['exclude']) || empty($attr['exclude']))
        $attr['exclude'] = array($thumbnail_ID);
    elseif (is_array($attr['exclude']))
        $attr['exclude'][] = $thumbnail_ID;

    // now manually invoke the shortcode handler
    $gallery = gallery_shortcode($attr);

    // add the filter back
    add_filter('post_gallery', 'exclude_thumbnail_from_gallery', 10, 2);

    // return output to the calling instance of gallery_shortcode()
    return $gallery;
}
add_filter('post_gallery', 'exclude_thumbnail_from_gallery', 10, 2);

Ta bort title-taggen på bilder i WordPress

Ibland kan det var irriterande att man får upp en tooltip när man håller på bilder. Särskilt om man inte har skrivit en bra titel till bilden, men ibland är det bara fult och förstör designen intrycket.

Det är obligatoriskt att fylla i en titel till bilder när man laddar upp nya bilder i WordPress som man ska använda i innehållet. För att då slippa denna tooltipen som kommer fram tack vare title-taggen så har jag modifierat hooken get_image_tag och byter ut title attributet mot alt attributet om man inte har fyllt i detta.

// In functions.php
function replace_title_tag($html, $id , $alt, $title){
    if($alt == '') {
        $html = str_replace('alt=""','alt="'.$title.'"',$html);
        $html = preg_replace('|title="[^"]*"|U', '', $html);
    }
    return $html;
}
add_filter('get_image_tag','replace_title_tag',10,4);

Kanske kan vara till hjälp för andra än bara mig.

Så tar du reda på Facebook Fan Page ID och lite till

Behöver du ta reda på Facebook Fan page ID eller annan nyttig information kring en Fan page sida så gör du det enkelt genom att använda:

http://graph.facebook.com/webready

du byter bara ut webready och så får du resultatet i i json-format som nedan.

{
   "id": "110099962391757",
   "name": "WebReady Sweden AB",
   "picture": "http://profile.ak.fbcdn.net/hprofile-ak-snc4/373648_110099962391757_1073255801_s.jpg",
   "link": "http://www.facebook.com/webready",
   "likes": 51,
   "category": "Local business",
   "website": "www.webready.se",
   "username": "webready",
   "founded": "oktober 2008",
   "company_overview": "WebReady Sweden AB \u00e4r en webbyr\u00e5 som fokuserar p\u00e5 att bygga moderna och tilltalande webbplatser och applikationer.\n\nFr\u00e5n och med september 2011 s\u00e5 byter f\u00f6retaget bolagsform, fr\u00e5n enskild firma, och \u00e4r numera AB. Det juridiska namnet \u00e4r WebReady Sweden AB. Tidigare kallades vi oss WebReady Solutions.",
   "about": "www.webready.se",
   "location": {
      "street": "S\u00f6dra Malmgatan 7",
      "city": "Kalmar",
      "country": "Sweden",
      "zip": "39234",
      "latitude": 56.6662407,
      "longitude": 16.3552704
   },
   "phone": "0768667733",
   "general_info": "Vi \u00e4r ett stort fan av WordPress och anv\u00e4nder denna plattform som grund i m\u00e5nga av v\u00e5ra projekt. D\u00e5 det b\u00e5de \u00e4r anv\u00e4ndarv\u00e4nligt och man f\u00e5r mycket gratis. \n\nL\u00e4s inl\u00e4gget vi har skrivit om varf\u00f6r vi v\u00e4ljer det som grund https://jarnesjo.net/5-anledningar-att-anvanda-wordpress-till-din-webbplats/ ",
   "can_post": true,
   "checkins": 4
}

Det tar man enkelt han om med t ex PHP så kan man jobba vidare med det.

$facebookData = json_decode(file_get_contents('http://graph.facebook.com/webready));

echo $facebookData->link; // Output: http://www.facebook.com/webready