Klikbare header image voor Thesis

Voor het plaatsen van een header image die ook nog een klikbaar is heb je eigenlijk alleen wat CSS code nodig.

Open je custom.css file, uit je Thesis/custom directory, en vul onderstaande code in:

/* Header image */
 /* De hoogte en breedte aanpassen, naar die van jouw achtergrond image */
 /* De naam van het plaatje ipv 'header-image.jpg' */
 .custom #header #logo a { color:#FFF; font-size:20px; display: block; height: 140px; width: 1085px; background: url('images/header-image.jpg')   no-repeat; outline: none; }

 /* Dit zorgt ervoor dat de Titel beter uitlijnt aan de linkerkant */
 .custom #header #logo { text-indent: 20px; }

 /* Laat de Tagline terugkomen onder het plaatjhe met een hoogte van 25 px */
 .custom #header #tagline { height: 0; padding-bottom: 25px;}

 /* Laat alle tussenruimtes vervallen zodat het plaatje mooi aansluit */
 .custom #header { padding: 0; }

Thesis OpenHook, WP-PageNavi Plugin

Ik wilde de plugin WP-PageNavi laten samenwerken met Thesis. Dit geeft een mooi overzicht van je pagina’s dat net zoals de Breadcrumbs goed is voor je zoekmachine optimalisatie en de navigatie van je site.

Allereerst de plugin WP-PageNavi downloaden en installeren op de normale wijze.

Vervolgens moet je in Thesis aangeven waar de plugin zich moet plaatsen,  zie plaatje hieronder:

Open Theses OpenHook settings en scroll naar de  “After Content” sectie, copy en paste de hier onderstaande code:

<div style="clear: both;"></div>
<pre><?php if(<a href="http://www.php.net/function_exists">function_exists</a>('wp_pagenavi')) { wp_pagenavi(); }
else { ?>
      <div class="pagination">
         <div class="alignleft"><?php next_posts_link('&laquo; Older Entries') ?></div>
         <div class="alignright"><?php previous_posts_link('Newer Entries &raquo;') ?></div>
      </div>
<?php } ?>

Vergeet niet om de drie opties aan te vinken zoals aangegeven in het plaatje hierboven aangegeven met groene pijlen, “Execute PHP on this hook”, “Remove Thesis post navigation ” en “Remove Thesis prev/next posts” (deze derde is optioneel)

Als laatste volgt de vormgeving de CSS, hiervoor open je de custom.css file en plaatst daar de volgende code in:

/*
-------- pagenavi-----------------------------------
*/
.wp-pagenavi {  margin: 15px 0px 15px 30px; }
.wp-pagenavi a, .wp-pagenavi a:link { font-size:14px; padding: 5px 9px; margin: 2px; text-decoration: none; border: 1px solid #e1e1c8; color: #888888; background-color: #eeeeee; }
.wp-pagenavi a:visited { font-size:14px; padding: 5px 9px; margin: 2px; text-decoration: none; border: 1px solid #e1e1c8; color: #888888; background-color: #eeeeee; }
.wp-pagenavi a:hover { font-size:14px; border: 1px solid #608e7a; color: #FFF; background-color:  #FFAA37; }
.wp-pagenavi a:active { font-size:14px; padding: 5px 9px; margin: 2px; text-decoration: none; border: 1px solid #e1e1c8; color: #888888; background-color: #eeeeee; }
.wp-pagenavi span.pages { font-size:14px; padding: 5px 9px; margin: 2px 2px 2px 2px; color: #666666; border: 1px solid #e1e1c8; color: #888888; background-color: #eeeeee; }
.wp-pagenavi span.current { font-size:14px; padding: 5px 9px; margin: 2px; font-weight: bold; border: 1px solid #608e7a; color: #FFF; background-color:  #FFAA37; }
.wp-pagenavi span.extend { font-size:14px; padding: 5px 9px; margin: 2px; border: 1px solid #608e7a; color: #FFF; background-color:  #FFAA37; }

Ok het een en ander opslaan en eventueel uploaden en je bent klaar. Je kunt de custom.css natuurlijk aanpassen aan je eigen behoeften.

Breadcrumbs in Thesis zonder plugin

Breadcrumbs zijn goed voor je SEO en geven een snel overzicht voor de gebruikers waar ze zitten en waar ze heen kunnen. Ik had al een aantal keer een plugin geïnstalleerd maar nu blijkt dat dit ook zonder kan in Thesis.

Wat natuurlijk beter is omdat dit de snelheid verhoogt van je website, zie ook ‘Betere performance, hogere conversie‘. [Read more]