Webdesign Archieven - Happy Phantom

Vaak wil je op de homepagina iets anders kwijt in de sidebar dan op de andere pagina’s. Even wat extra info over de site waar je bezoekers op terecht zijn gekomen.
Natuurlijk kun je hiervoor een plugin installeren, maar veel plugins vertragen je site. Wanneer je het framework Genesis gebruikt, is het heel eenvoudig om dit in de functions.php voor elkaar te krijgen. Wanneer je onderstaande code gebruikt, hoef je niet eens een sidebar-bestand aan te maken.

Je moet een paar stappen zetten:

je nieuwe sidebar registreren
de standaard sidebar verwijderen op je home.
de nieuwe sidebar toevoegen

1. nieuwe sidebar registreren

Allereerst vertel je WordPress dat er een nieuwe sidebar is. Dat doe je zo:

genesis_register_sidebar(array( 'id'='sidebar-home', 'name' ='Home Sidebar', 'description' ='Sidebar voor de Home-pagina') );

Toelichting:
id: dit is de interne id van de nieuwe sidebar
name: dit wordt de naam van de nieuwe sidebar, deze is te zien op de Widgets-pagina in het DashBoard
description: Zet hier een korte uitleg waar de sidebar voor bedoeld is. Deze beschrijving verschijnt in de widgets-pagina onder de naam van de sidebar.

2. de standaard sidebar verwijderen van je home-pagina

Je haalt de standaard sidebar als volgt weg:

add_action('genesis_meta', 'hp_home_sidebar');
function hp_home_sidebar() {
if ( is_home() ) {
&nbsp;remove_action('genesis_after_content','genesis_get_sidebar' );
}
}

Deze code haalt de primary sidebar weg.
Wil je de sidebar op een andere pagina weghebben, dan vervang je is_home() door de gewenste pagina, bijv. is_page(65)

3. de nieuwe sidebar toevoegen aan je home

Daarvoor gebruik je de volgende code:

dynamic_sidebar('sidebar-home');

Tussen de haakjes zet je de id die je in de eerste stap aan je nieuwe sidebar hebt gegeven.
Wanneer je wilt dat de widgets in je nieuwe sidebar dezelfde opmaak krijgen als die in de primary sidebar, zet je voor de bovenstaande code dezelfde tag/classes als de primary sidebar heeft (dit vind je heel simpel in de broncode van je theme). Voor Genesis 2 is dit bijv.:

echo '<aside itemtype="http://schema.org/WPSideBar" itemscope="itemscope" role="complementary">';

Volledige code

//register new sidebar
genesis_register_sidebar(array('id' => 'sidebar-home', 'name' => 'Home Sidebar', 'description' => 'Sidebar voor de Home-pagina'));
//remove primary sidebar
add_action('genesis_meta', 'hp_home_sidebar');
function hp_home_sidebar() {
    if ( is_home() ) {
        remove_action('genesis_after_content','genesis_get_sidebar' );    
        add_action('genesis_after_content', 'hp_get_home_sidebar');
    }
}
//add home sidebar
function hp_get_home_sidebar() {
    echo '<aside itemtype="http://schema.org/WPSideBar" itemscope="itemscope" role="complementary">';
        dynamic_sidebar('sidebar-home');
    echo '</aside>';

}

Sinds een paar jaar zijn we voor de typografie van websites niet meer afhankelijk van die saaie ouwe Verdana, Arial en Helvetica. Webfonts to the rescue!
Er zijn zelfs gratis webfonts ter beschikking, met Google Webfonts als meest bekende. Die kan je intussen veilig gebruiken. Dachten we. Want wat blijkt: de webfonts van Google worden erg lelijk weergegeven in Google Chrome onder Windows! En bij nadere inspectie blijkt dat wel meer webfonts het niet goed doen in Chrome onder Windows. Het probleem is al zolang als de Google webfonts bestaan bekend, maar om onduidelijke redenen wil Google het niet oplossen. Daarmee loopt Chrome zelfs achter bij IE.

Gelukkig is er (soms) een oplossing:

Allereerst moet je het Google font downloaden naar je eigen computer. (Daarvoor moet je ze eerst in je Collection zetten, klik vervolgens op de knop ‘Use’ en vervolgens krijg je rechtsboven een linkje met ‘Download your Collection’). Google zal beweren dat het niet nodig is, maar doe het toch maar wel.
Unzip het googlefont en ga vervolgens naar FontSquirrel. Daar kun je een webfont genereren door het googlefont te uploaden.
Download de gegenereerde webfonts en zet ze in een mapje in je website.
Fontsquirrel geeft behalve de webfonts ook een stylesheet. Kopieer de code uit dit stylesheet naar je eigen stylesheet. Dat ziet er bijvoorbeeld zo uit:
@font-face { font-family: 'quicksandregular'; src: url('quicksand-regular-webfont.eot'); src: url('quicksand-regular-webfont.eot?#iefix') format('embedded-opentype'), url('quicksand-regular-webfont.woff') format('woff'), url('quicksand-regular-webfont.ttf') format('truetype'), url('quicksand-regular-webfont.svg#quicksandregular') format('svg'); font-weight: normal; font-style: normal; }
Zorg dat je fonts in hetzelfde mapje staan als het stylesheet. (of pas de url in het stylesheet aan.)
Het ‘svg’-webfont is bestemd voor Chrome. Alleen houdt Chrome er niet van dat het pas als laatste aan de beurt is, zet dus de ‘svg’ regel hoger in het lijstje, boven de ‘woff’. Let er op dat je de komma achter ’truetype’ verandert in een punt-komma. Het ziet er dan zo uit:
@font-face { font-family: 'quicksandregular'; src: url('quicksand-regular-webfont.eot'); src: url('quicksand-regular-webfont.eot?#iefix') format('embedded-opentype'), url('quicksand-regular-webfont.svg#quicksandregular') format('svg'), url('quicksand-regular-webfont.woff') format('woff'), url('quicksand-regular-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal; }

Jammer genoeg is er geen garantie dat dit bij jouw webfont gaat werken. De (gratis) webfonts van Google zijn van lagere kwaliteit dan (betaalde) fonts van gespecialiseerde fontshops.
Wat je nog kunt proberen is om een kleine shadow mee te geven in dezelfde kleur als het font:
text-shadow: 0px 0px 1px #fff;
Bij smallere fonts kan dit helpen om het font wat meer body te geven.

Eigen sidebar op de homepagina

1. nieuwe sidebar registreren

2. de standaard sidebar verwijderen van je home-pagina

3. de nieuwe sidebar toevoegen aan je home

Volledige code

webfonts

Contact

1. nieuwe sidebar registreren

2. de standaard sidebar verwijderen van je home-pagina

3. de nieuwe sidebar toevoegen aan je home

Volledige code

Contact

Get social