Flytande Sharebar i WordPress

Ni har kanske lagt märke till att jag har en flytande sharebar till vänster om inläggen? Med flytande menar jag att den följer med när du som läser scrollar nedåt eller uppåt på sidan. På så sätt är de delningsmöjligheterna alltid tillgängliga och chansen till klick större. Det finns säkert något fiffigt plugin som gör detta men med lite css och php så är det fixat på noll tid.

I single.php eller om du kör TwentyEleven content-single.php slänger du in följande kod:

<div class="share-post">
   <a href="http://twitter.com/share" class="twitter-share-button"
      data-url="<?php the_permalink(); ?>"
      data-text="<?php the_title(); ?>"
      data-via="SebHallenius"
      data-count="vertical">Tweet</a>
<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;layout=box_count&amp;show_faces=false&amp;width=60&amp;action=like&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; margin-bottom:5px; margin-left: 2px; overflow:hidden; width:60px; height:60px"></iframe>
<g:plusone size="tall"></g:plusone>
</div>

Lägg till följande script i din footer.php för att knapparna ska dyka upp.

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
  {lang: 'sv'}
</script>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>

Lägg in följande css i din style.css och modifiera efter dina behov.

.share-post {
background: #F9F8F8;
position: fixed;
float: left;
width: 60px;
top: 35%;
z-index: 99;
margin-left: -100px;
border: 1px solid #e7e7e7;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
padding: 10px;
}

Fixa sidebar i Twenty Eleven

Har du använt det nya temat Twenty Eleven till WordPress? Då har du säkert lagt märke till att det kan vara rätt krångligt att få fram sidebar på sidor och inlägg. När det gäller sidebar på sidor så finns det en mall som heter: Sidebar Template, välj denna mallen när du skapar sidan så löser sig det. Rätt enkelt, eller hur?

När det gäller inlägg så är det inte riktigt lika enkelt, men det fixar vi nu!

Gå till redigeraren och välj single.php, väl där ska du lägga till följande kod:

precis före:

Sådär, nu kommer den dyka upp men nu har vi lite css-problem. Dessa löser vi genom att lägga till en funktion i functions.php.
add_filter('body_class', 'remove_body_class', 20, 2);
function remove_body_class($wp_classes, $extra_classes) {
if( is_single() || is_page() ) :
$remove = array('singular');
foreach( $remove as $val ) {
if (!in_array($val, $wp_classes)) : continue;
else:
foreach($wp_classes as $key => $value) {
if ($value == $val) unset($wp_classes[$key]);
}
endif;
}
endif;
return array_merge($wp_classes, (array) $extra_classes);
}
?>

Och lägg till slut in följande css-kod i style.css
.nav-previous {
float: left;
}
#respond {
margin: 0 auto 1.625em;
padding: 1.625em;
position: relative;
width: 88.9%;
}
.commentlist {
width: 78.9%;
}
.singular #author-info {
margin: 2.2em 0 0;
padding: 20px 5.4%;
width: 550px;
}

Tadaa, sidebar fixad!

Gör WordPress snabbare

Jag är förälskad i WordPress och har under en väldigt lång tid grundat alla mina sidor i WordPress för att sen utveckla det som fattas. När jag ska snabba upp WordPress har jag några tips som jag brukar använda mig av.

Det första du ska göra innan du läser vidare om hur du kan snabba upp WordPress är att mäta hur lång tid det tar att ladda din sida. Det finns många bra verktyg för detta, min favorit är det suveräna Pingdom Tools.

Skriv ner hur lång tid det tar att ladda din sida och gör det även efter att du har gjort alla förbättringar.

Välj ett bra webbhotell

A och O är ett bra webbhotell. Jag använder mig av Binero och är väldigt nöjd med både priset, hastigheten och supporten även om det varit en del strul på sistone.

Cache plugin

Det enklaste och det som brukar ge mest resultat är att installera något Cache-plugin så som WP-Super Cache eller W3C Total Cache. Konfigurera dessa rätt och din sajt kör om Gunde Svan i skidspåren.

Minska antalet inlägg per sida

Genom att ändra i WordPress inställningar -> Läsa kan du minska antalet inlägg som visas per sida och på så sätt dra ner laddningstiden rejält. Att ha 100 inlägg per sida är idiotiskt och 5-10 inlägg mer sida är mer vettigt. Du kan också ändra så att bara utdrag visas istället för hela inlägg genom att byta ut.

<?php the_content (); ?>

mot

<?php the_excerpt (); ?>

Aktivera zlib

Genom att klistra in den här koden innan Doctype i din header.php kommer du märka en fantastisk skillnad. Den förminskar sajtens storlek  rejält, vi pratar runt 70% i storleksminskning.

<?php
ini_set('zlib.output_compression', 'On');
ini_set('zlib.output_compression_level', '1');
?>

Stäng av Pingbacks och Trackbacks

Pingbacks och Trackbacks är trevliga funktioner men det skapar en väldigt massa arbete för din sida. Stäng av och förbättra din laddningstid.

Minska antalet PHP och HTTP-anrop

I många, eller snarare de allra flesta teman som finns till WordPress ser det ut så här:

<?php bloginfo(name); ?><?php bloginfo(description); ?>

Det är två väldigt bra anrop men för att dra ned på laddningstiden kan du istället göra så här,

<title> Sebastian Hallenius - Webbutveckling... </title>

Gå igenom ditt tema och kolla var du kan ändra.

Minska storlek på bilder

Bilder kan ta upp stor plats, det vi nog alla. Men med tjänster som Smush.it kan man effektivt minska storleken på bilderna.

Stäng av Post Revisions

När du skriver inlägg på WordPress sparas det åtskilliga versioner av dina inlägg. Detta göra databasen onödigt stor och om du inte använder Post Revisions kan du mer än gärna avaktivera dessa genom att klista in denna koden i wp-config.php

define('AUTOSAVE_INTERVAL', 500 ); // seconds
define('WP_POST_REVISIONS', false );

Rensa bland dina tillägg

Det finns oändligt många tillägg till WordPress, vissa gör ingen större inverkan på laddningstiden men vissa tillägg kan öka laddningstiden med sekunder. Och som vanligt gäller, ju fler tillägg du har ju långsammare kommer din sajt att laddas. Se över dina tillägg och rensa gärna bort en del.

Optimera databasen

Genom att logga in till din databas admin-interface genom t.ex.  phpMyAdmin, kan du markera alla tabeller och klicka på “Repair” och “Optimize,” för att hålla databasen i skick. Tycker du det låter som en djungel finns det självklart tillägg som gör det enklare. Som till exempel, WP-Optimize.

Browser caching genom .htaccess

Genom att klistra in följande kod i din .htaccess kommer statiska filer så som bilder, css, javascript och liknande att bli cachade.

<IfModule mod_headers.c>
# YEAR
<FilesMatch "\.(ico|gif|jpg|jpeg|png|flv|pdf)$">
  Header set Cache-Control "max-age=29030400"
</FilesMatch>
# WEEK
<FilesMatch "\.(js|css|swf)$">
  Header set Cache-Control "max-age=604800"
</FilesMatch>
# 45 MIN
<FilesMatch "\.(html|htm|txt)$">
  Header set Cache-Control "max-age=2700"
</FilesMatch>
</IfModule>

Aktivera Gzip
Gzip har samma funktion som zlib, minska storleken på din sajt genom att komprimera innehållet. Servern du ligger på måste dock stödja gzip för att det ska fungera.

För att aktivera gzip klistrar du in följande kod i din htaccess:

# gzip
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/css application/x-javascript application/javascript
</IfModule>

Uppdatera WordPress

WordPress släpper ständigt uppdateringar och med dessa sker optimeringar. Se till att alltid ligga nära den senaste versionen!

Kolla laddningstid och queries

För att kolla laddningstiden för din sajt och se hur många queries som görs kan du slänga in den här lilla kodsnutten på din sajt. Smidigt och väldigt användbart.

<?php echo get_num_queries(); ?> queries in <?php timer_stop(1); ?> seconds.

Vad har du för tips för att göra WordPress snabbare?

10 WordPress plugins

10 st underbara WordPress Plugins

Här listar vi 10 st bra WordPress Plugins som vi rekommenderar!

1. NofollowFree

Det finns allt för mycket Nofollow där det inte behövs. Att dela med sig av sin länkkraft till relevanta och bra sidor bör vara standard. Detta plugin tar bort Nofollow från WordPress kommentarer.

Ladda ner Nofollow Free

2. YARPP (Yet Another Related Post Plugin)

YARPP är ett utmärkt plugin som ger dig relevanta inlägg under varje inlägg. Det är väldigt enkelt och det är en av anledningarna för att jag sätter det framför andra plugin som gör liknande.

Ladda ner YARPP

3. Google XML Sitemaps

Ett plugin alla som kör WordPress måste ha. Det är så smidigt så om du inte använder det så måste du göra det nu. Det skapar en sitemap.xml och skickar det till Google, Bing och Yahoo. Alldeles underbart plugin!

Ladda ner Google XML Sitemaps

4. SexyBookmarks

Det finns oändligt med plugin för lägga till sociala tjänster på bloggen. Jag har fastnat för SexyBookmarks som är ett enkelt och snyggt plugin där du hittar de allra flesta tjänster så som Facebook, Twitter, Pusha, Digg med flera.

Ladda ner SexyBookmarks

5. HeadSpace2, All in One SEO Pack

Jag fick tänka länge innan jag bestämde mig för om jag skulle lägga in All in One SEO Pack eller HeadSpace2. Båda två är super och jag kan inte bestämma mig så jag tipsar om båda. All in One SEO Pack uppdateras oftare vilket är en fördel.

Ladda ner HeadSpace2 Ladda ner All in One Seo Pack

6. Contact Form 7

Finns många bra plugin här med men jag har valt det väldigt enkla pluginet Contact Form 7 som jag använder på alla mina sajter. Det är väldigt enkelt men rätt flexibelt ändå.

Ladda ner Contact Form 7

7. WP- Super Cache

Enkelt att komma igång, snabbt och ett smidigt gränssnitt gör att valet fallet på WP Super Cache.

Ladda ner WP-Super Cache

8. Broken Link Checker

Broken Link Checker letar reda på brutna länkar och låter dig radera dom snabbt och effektivt. Mycket användbart!

Ladda ner Broken Link Checker

9. WP Minify

WP Minify är ett smidigt plugin som komprimerar din CSS och JS-filer genom att använda Minify. Utmärkt för att göra din blogg snabbare!

Ladda ner WP Minify

10. Maintenance Mode

Vi underhåller alla våra sidor ibland och för att visa att vi gör det är Maintenance Mode ett utmärkt plugin. Det skapar snabbt en enkel och snygg sida som informerar om underhållet. Man kan till och med ha en nedräknare!

Ladda ner Maintenance Mode

Sida 3 av 3123