Het WordPress template Selin aanpassen.

Het WordPress template Selin.

Dit artikel is inmiddels verouderd, dat wil zeggen dat het template Selin niet meer voor deze website staat geïnstalleerd. Alle informatie over het template is natuurlijk nog wel bruikbaar. Het huidige template is ShoppingTime van Flexithemes en de reden van deze wisseling is dat het template ook geschikt moet zijn voor tablet en mobiele telefoon (responsive design). Selin was daar niet geschikt voor.


Om deze website te maken heb ik gekozen voor WordPress en het gekozen WordPress template voor mijn blog is Selin.
Selin vind ik mooi omdat het toch een beetje kleurrijk is en de drie kolommen vind ik ook heel aantrekkelijk.
Het WordPress template Selin.Links in het WordPress template Selin staat de content en rechts twee kolommen voor de widgets.
Na het installeren van het theme (template) Selin, ondervond ik toch nogal wat problemen, zoals afbeeldingen die niet geplaatst werden zoals ik het mooi vind.
Verschillende tekst die in het Engels bleef staan en natuurlijk je eigen logo in de header plaatsen.
Dit laatste is het minst moeilijke.

 

Gemakkelijk afbeeldingen bewerken voor WordPress.

Een nieuw logo heb ik gemaakt in het gratis fotobewerkings-programma Artweaver free.
Het programma is een soort photoshop lite en is gratis te downloaden op http://www.artweaver.de/en/download. Let op dat u de free versie kiest, tenzij u het programma nodig heeft voor commerciële doeleinden.

 

Het logo van de website naar een nieuwe map.

Noodzakelijk is het natuurlijk niet, maar voor het logo heb ik een nieuwe map afbeeldingen aangemaakt in de root van de website.
Daarna moet het pad worden aangepast in het dashboard van WordPress onder weergave>Selin theme options. Bovenste regel Logo image. Verander daar het originele pad in het nieuwe pad naar het logo.
Het gemakkelijkste is het om de hoogte van 77 pixels aan te houden, de breedte heb ik vergroot naar 425 pixels. Dan past het nog goed tussen de linkerkant en de banner aan de rechter kant.

In dezelfde map afbeeldingen heb ik een submap sidebar gemaakt, met daarin de kleinere afbeeldingen van 125×125 pixels voor de Sidebar 125×125 px Ads.
Het pad voor deze afbeeldingen moet ook worden aangepast in Selin theme options.

 

PHP programmertaal en CSS voor de opmaak.

PHP-code in Notepad om het WordPress template Selin aan te passen.Veel aanpassingen kunnen gewoon niet gemaakt worden vanuit het dashboard van WordPress.
Daarvoor zullen de code’s in de php en css bestanden moeten worden gewijzgd, of delen van de code verwijderd.
De bestanden voor het WordPress template Selin zijn te vinden in wp-content>themes>Selin
Overige themes zijn uiteraard ook in de dezelfde map te vinden.

 

Dubbele spatie’s in de tekst.

Dubbele spaties komen voor, omdat WordPress de tekst zowel links als rechts uitlijnt.
Het wordt veroorzaakt door text-align: justify;  Verwijder die regel dus gewoon uit stylesheet.css

.entry {
text-align: justify;
line-height: 20px;
padding-top: 8px;
font-family: Verdana;
font-size: 12px;
}

verwijder text-align: justify; uit de stylesheet style.css

.entry {
line-height: 20px;
padding-top: 8px;
font-family: Verdana;
font-size: 12px;
}

Probleem opgelost.

 

Maak altijd eerst een backup van uw bestanden.

Download altijd eerst de bestanden twee keer, de eerste keer naar een backupmap en de tweede keer naar een map om in te werken. Gaat er iets niet goed, dan kan altijd het originele bestand worden teruggezet.
Bestanden kunnen het gemakkelijkst met het gratis programma Notepad gewijzigd worden.
Als het benodigde bestand in Notepad is geopend, dan kun je met de zoekfuctie zoeken naar de Engelse tekst die je graag wil veranderen. In het template staat bijvoorbeeld de tekst posted in, voer dit in als zoekopdracht en de tekst wordt geselecteerd.
Verander (in dit voorbeeld) “Posted in” naar “Gepost in”.
Soms moet dezelfde Engelstalige tekst in meerdere bestanden worden veranderd.

Aanpassingen die ik gemaakt heb in de bestanden.

Aanpassingen in style.css

Om een uitgelichte afbeelding kleiner te maken heb ik width en height toegevoegd bij:

.post_thumbnail.
.post_thumbnail {
padding: 6px;
background: #dfded4;
width: 20%;
height: 20%;
border: 1px solid #cbc9b9;
margin: 0 10px 10px 0;

Standaard in het WordPress template Selin staat de tekst pal tegen de afbeelding.
Om ruimte te maken tussen een ingevoegde afbeelding en de tekst heb ik onderstaande regel toegevoegd.
.alignleft {float:left;margin-right:10px;}

De h2 tekst vond ik ook veel te groot en om deze aan te passen heb ik deze regel erbij in geplaatst.
h2 {
font-size: 18px;
}

 

Aanpassingen in archive.php

In regel 35: Posted in veranderen in; “Gepost in” (alleen het stukje tekst veranderen)
<div class=”postmeta”><img src=”<?php bloginfo(‘template_url’); ?>/images/folder.png” /> Gepost in

In regel 10: Category for veranderen in; Categorie (alleen het stukje tekst veranderen)
<h2 class=”pagetitle”>Categorie &#8216;<?php single_cat_title(); ?>&#8217; </h2>

In regel 14, 16 en 18: archive for veranderen in; Archief voor (alleen het stukje tekst veranderen)
<h2 class=”pagetitle”>Archief voor

In regel 35: no comments veranderen in; Geen reacties, 1 comment in 1 Reactie, comments in Reacties (alleen het stukje tekst veranderen)
<?php comments_popup_link(‘Geen reacties &#187;’, ‘1 Reactie &#187;’, ‘% Reacties &#187;’); ?></div>

 

Aanpassingen in comments.php

In regel 48: Leave a Reply to veranderen in; Geef een reactie (alleen het stukje tekst veranderen)
<h3><?php comment_form_title( ‘Geef een reactie’, ‘Leave a Reply to %s’ ); ?></h3>

In regel 81: submit comment veranderen in; Verzend reactie (alleen het stukje tekst veranderen)
<p><input name=”submit” type=”submit” id=”submit” tabindex=”5″ value=”Verzend reactie” />

 

Aanpassingen in single.php

Eerder hierboven heb ik al aangegeven hoe een uitgelichte afbeelding kleiner gemaakt kan worden in Selin. Dat kan eenvoudig in style.css door width en height toe te voegen.
Met alleen kleiner maken van de afbeelding, was mijn probleem niet helemaal opgelost.
De uitgelichte afbeelding werd niet alleen in de samenvatting geplaatst, maar ook in het bericht zelf. Om dit te voorkomen moet er gewoon een regel in single.php worden verwijderd.
In regel 12
<?php if ( function_exists(‘has_post_thumbnail’) && has_post_thumbnail() ) {the_post_thumbnail(array(300,225), array(‘class’ => ‘alignleft post_thumbnail’)); } ?>

Heel de regel verwijderen, dan staat de afbeelding keurig netjes alleen in de samenvatting van WordPress en niet in het bericht zelf.

In regel 15: Posted in veranderen in “Gepost in” (alleen het stukje tekst veranderen)
<div class=”postmeta”><img src=”<?php bloginfo(‘template_url’); ?>/images/folder.png” /> Gepost in

 

Aanpassingen in header.php

Om het menu in de header naar mijn eigen wens te krijgen, heb ik regel 86 t/m 93  in header.php verwijderd.
De onderste rode menu band is nu helemaal leeg.
function menu_2_default()
{
?>
<ul id=”nav”>
<li <?php if(is_home()) { echo ‘ class=”current-cat” ‘; } ?>><a href=”<?php bloginfo(‘url’); ?>”>Home</a></li>
</ul>
<?php
}
In het dashboard van WordPress bij weergave>menu kan nu de menunaam worden veranderd, anders komt de volledige titelnaam in het menu te staan.
Bij mij is pagina “Over mij en deze website” toegevoegd aan het menu, het navigatielabel is veranderd in “over mij” en alleen menu 1 is aangevinkt. Als bovenstaande regels uit header.php niet wordt verwijderd, staan alle categorieën in het menu. Die wilde ik daar niet graag zien.

 

Uw reacties of vragen zijn altijd welkom.

Voor degene die graag een website met WordPress willen starten en dan, net als ik, het WordPress template Selin mooi vinden hoop ik dat ik een kleine bijdrage heb kunnen leveren.
Het is natuurlijk ook mogelijk dat u de veranderingen niet beter vindt dan het origineel, of misschien maar gedeeltelijk. Vanzelfsprekend is dat geheel uw eigen keus.
Als u nog moet starten met een website, dan is goede webhosting uiteraard ook belangrijk. Een voorbeeld van goede webhosting is Argeweb met uitstekende support en mooie aanbiedingen voor het eerste jaar.

Het WordPress theme Selin is gratis te downloaden bij: http://newwpthemes.com/wordpress-theme/selin/

Veel plezier.

 

Gerelateerde onderwerpen.

Simple Spotlight, een mooie slideshow voor Joomla.
Modules in een artikel plaatsen met Modules Anywhere.

Meer informatie op internet.

Vul een zoekterm in, hieronder in het zoekvenster, als u graag meer informatie wilt.

Aangepast zoeken

Reacties en aanvullingen op dit artikel zijn uiteraard van harte welkom.

Onderaan kunt u een reageren op dit artikel, of een geheel nieuw artikel plaatsen.
Ook als dit niet de juiste categorie is voor uw artikel, dan verplaats ik het eventueel wel naar de goede categorie.
Alvast bedankt voor uw reactie.

Geef een reactie

Het e-mailadres wordt niet gepubliceerd.