Webbutveckling

#blogg100 badge plugin för WordPress

WordPress plugin #blogg100 badge från Erik FalkIdag vill jag slå ett slag för ett WordPress-plugin som Erik Falk har byggt för #blogg100 som håller på bland hundratals bloggar från Sverige.

Det trevliga pluginet lägger automatiskt och snyggt på en badge till varje bloggpost som är taggad med #blogg100 eller blogg100. Man har själv möjlighet att stila badgens utseende via CSS i pluginets adminpanel. En snygg lösning på vart badgen ska ligga förhållande till posten är att när man är inloggad som administratör har möjlighet att flytta den via drag-and-drop och positionen sparas automatiskt och appliceras över hela sajten.

En snygg lösning på och smart litet pluginet som jag kan tänka mig att Erik kommer att jobba vidare på och göra det mer generellt så att man kan skapa egna badges för sin blogg och ens taggar och bloggserier som man kan har.

Ni kan hitta pluginets egna sida här och även se ett exempel hur det ser ut applicerat och ni kan även se en variant hos baronen.org.

Så gör du gråskaliga bilder cross-browser med CSS

Har ni som jag svurit över att det inte funnits något smidigt sätt att göra svartvita / gråskaliga bilder utan att behöva skapa dom i Photoshop?
Här har ni lösningen som är cross-browser säker nere till IE6 vilket är mer än bra.
Jag skapade här ett exempel med hover-effekt och lade även på CSS3 transition (nej, det är inte cross-browser) för en mjukare övergång.

Hoppas det kan spara hår och tid för någon annan.

jarnesjo-grancanariajarnesjo-grancanaria

img.gray { 
    filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */

    -webkit-transition: all .5s ease; /* Fade to color for Chrome and Safari */
    -webkit-backface-visibility: hidden; /* Fix for transition flickering */
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
}

img.gray:hover { 
    filter: url("data:image/svg+xml;utf8,#grayscale");
    -webkit-filter: grayscale(0%);
}

jsFiddle: http://jsfiddle.net/jarnesjo/ys2Lf/5/
jsFiddle resultat: http://jsfiddle.net/jarnesjo/ys2Lf/5/embedded/result/

WordPress-plugin jag använder här på bloggen

Tänkte dela med mig av vilka plugin som jag kör här på min WordPress-blogg. Jag gick igenom dom nu när jag bytte utseende på sidan och så kom jag på idéen, men också för att jag hoppas kunna få in tips på användbara plugin som jag kan ha missat, men måste testa eller ha.

Affiliate Link Cloaking
Använder jag för att maskera fula affiliatellänkar som jag har i Bokhyllan

Akismet
WordPress egna spamfilter till kommentarerna

Broken Link Checker
Ett plugin för att hålla kolla på alla länkar som finns på sidan. Den notifierar dig om länkar som finns, men inte längre leder någonstans t ex.

Comment Reply Notification
Dess syfte är att notifiera en användare med ett mail om några svarar på dennas kommentar så man enklare skapar diskussioner. 

Goolge Analyticator
Lägger till ens Google Analytics-kod på sidan, men främst har jag det för att få enklare statistik inne i Dashboarden när man loggar in. Se vilka sidor som är mest besökta, topp 5 sökord och lite annat skoj. 

Limit Login Attempts
Här kan man ställa in att man får max testa att logga in ett antal gånger innan man spärrar IP–adressen som gör fel. Inte för jag har problemet, men jag testade det och ser ingen skada med att det får ligga kvar. Läs mer »

Permalänkar och struktur i WordPress

I mitten av oktober så skrev jag en post om Kategorier och taggar i WordPress där jag försökte bena ut hur man skulle göra med kategorier och taggar. Nu satt jag här och funderade på om jag skulle göra slag i saken och gå över hela bloggen och rensa upp och kategorisera och tagga upp innehållet en gång för alla.

Då slog det mig om jag inte samtidigt skulle ta och ändra permalänkarna på bloggen också. När jag ändå bara ska köra en kategorier så kan jag ju passa på att lägga med kategorin i permalänk-strukturen så får jag med det i long tailen och man talar om ännu tydligare för Google vad inlägget handlar om.

För att göra det ännu tydligare för Google så funderar jag samtidigt på att lägga på ”.html” i slutet av av permalänkarna så markerar upp att man har kommit till slutet och att man inte kan komma längre ner i herakin.

SEO-kunniga och andra webbutvecklare där ute dela gärna med er om jag är helt ute och cyklar i detta tänket eller har andra bara inte tänkt på det ännu eftersom det inte finns med som en standardalternativ under Inställningar -> Permalänkar?

Exkludera kategori från loop, feed & arkiv

Nu när jag bestämde mig för att köra min Blogg30 så bestämde jag ju samtidigt att jag skulle börja skriva lite om träning. För att jag skulle tillåta mig själv att göra detta så var jag tvungen att se till att jag skulle kunna exkludera kategorin från WordPress vanliga loop, RSS-feed och arkiv-sidor. Samtidigt vill jag ju ändå att man skulle kunna följa kategorin om man gjorde det aktiva valet så. Så har jag knåpat ihop lite kod som gör detta möjligt att man nu kan följa RSS-flödet för just min träning om man nu skulle vilja göra detta. Urlen är till feeden är här https://jarnesjo.net/traning/feed/

Koden som gör det möjligt att exkludera det från loopen, RSS och arkiv-sidorna, men inte kategorisidan och dess feed finner du här:

add_action('pre_get_posts', 'jarnesjo_exclude_category' );
function jarnesjo_exclude_category( &$wp_query ) {
	// Exclude from home, feed, but not from category page/feed
	if( is_home() || ( is_feed() && !is_category() ) || ( is_archive() && !is_category() )) {
		set_query_var('category__not_in', array(104)); // Exclude "traning"
	}
}

Exclude pages in WordPress search result

If you want to exclude pages in search result i WordPress you just this to your functions.php.
If you just want to search for pages instead of posts you just change ’post’ to ’page’.

function add_search_filter( $query ) {
	if ( $query->is_search ) {
		$query->set('post_type', 'post');
	}
	return $query;
}
add_filter('pre_get_posts', 'add_search_filter');

How to add featured image to RSS in WordPress

Since I updated my blog with this new theme I started to use WordPress post formats.
But I found a problem when I used the post format Image or if I used a featured image as a part of the post. Write about the picture or just posted an image without any text to post. Everything looked fine until I checked the RSS. It just got the headline and nothing more or some text chatting about a picture doesn’t exist.

So here you got the solution:

// Add this in the functions.php
if ( !function_exists( 'add_featured_image_to_rss' ) ) {
	function add_featured_image_to_rss( $content ) {
		global $post;
		if ( has_post_thumbnail( $post->ID ) ){
			$content = get_the_post_thumbnail( $post->ID, 'large' ) . $content;
		}
		return $content;
	}
}
add_filter( 'the_excerpt_rss', 'add_featured_image_to_rss' );
add_filter( 'the_content_feed', 'add_featured_image_to_rss' );

Enklare debugging i WordPress

Tänkte ge ett litet tips som kan underlätta det när du utvecklar för WordPress.
Lägg till följande kodsnutt i wp-config.php och så slänger du bara på ?debug=debug som parameter i URLen så kan du utföra enklare debugging framfört allt i skarp miljö.

if ( isset($_GET['debug']) && $_GET['debug'] == 'debug' ) {
	define('WP_DEBUG', true);
}