Theming DIY - Casus herfst 2013 (WordPress)
Zie ook WordPress (hoofdartikel),
Linker- en rechterzijbalk toevoegen aan Twelve Thirteen
Betreffende code genereren
- Dat specificeer je in functions.php. Ziet er weinig aantrekkelijk uit
- De Content Aware Sidebar lijkt niet te oplossing te zijn: Die verandert alleen dynamisch de inhoud, maar volgens mij niet het aantal zijbalken.
- http://codex.wordpress.org/Sidebars
Op http://generatewp.com/sidebar/ deze zijbalk gegenereert:
// Register Sidebar
function Linkerzijbalk() {
$args = array(
'id' => 'linkerzijbalk',
'name' => __( 'Linkerzijbalk', 'linkerzijbalk' ),
'description' => __( 'Linker zijbalk', 'linkerzijbalk' ),
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>',
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
);
register_sidebar( $args );
}
// Hook into the 'widgets_init' action
add_action( 'widgets_init', 'Linkerzijbalk' );
Nieuwe index.php
<div id="kopje"><?php get_header(); ?></div> <div id="schoon"></div> <div id="linkerzijbalk"> <?php dynamic_sidebar( 'linkerzijbalk' ); ?> </div> <div id="rechterzijbalk"> <?php dynamic_sidebar( 'rechterzijbalk' ); ?> </div> <div id="hoofdvlak"> <?php if ( have_posts() ) : ?> <?php /* The loop */ ?> <?php while ( have_posts() ) : the_post(); ?> <?php get_template_part( 'content', get_post_format() ); ?> <?php endwhile; ?> <?php twentythirteen_paging_nav(); ?> <?php else : ?> <?php get_template_part( 'content', 'none' ); ?> <?php endif; ?> </div>
Toevoegingen style.css
/**
* 10.0 linkerzijbalk
* ----------------------------------------------------------------------------
*/
div#linkerzijbalk{
width:250px;
float: left;
background-color: #f00;
}
/**
* 11.0 schoon
* ----------------------------------------------------------------------------
*/
div#schoon{
clear: both;
}
/**
* 12.0 hoofdvlak
* ----------------------------------------------------------------------------
*/
div#hoofdvlak{
width:25%;
background-color: #e00;
}
/**
* 13.0 rechterzijbalk
* ----------------------------------------------------------------------------
*/
div#rechterzijbalk{
width:250px;
float: right;
background-color: #d00;
}
Theme vinden met twee zijbalken
- Iemand schrijft hier op het forum dat de handigste oplossing wellicht is, om een theme te downloaden dat al twee kolommen heeft.
- WordPress.org Themes Directory: Met zo'n 2.000 gratis themes.
- Mogelijke themes:
Tja. Lukraak themes uitproberen heeft nooit goed gevoeld. Dit lijkt me een meer structurele aanpak: http://justintadlock.com/archives/2010/11/08/sidebars-in-wordpress
Rechterzijbalk toevoegen aan Twenty Thirteen
Twee rechterzijbalken zijn waarschijnlijk gemakkelijker dan een linker- en een rechterzijbalk, vanwege gefloat.
Komt-ie:
Additionele zijbalk registreren
In functions.php:
function twentythirteen_widgets_init() {
register_sidebar( array(
'name' => __( 'Main Widget Area', 'twentythirteen' ),
'id' => 'sidebar-1',
'description' => __( 'Appears in the footer section of the site.', 'twentythirteen' ),
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
register_sidebar( array(
'name' => __( 'Secondary Widget Area', 'twentythirteen' ),
'id' => 'sidebar-2',
'description' => __( 'Appears on posts and pages in the sidebar.', 'twentythirteen' ),
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
register_sidebar( array(
'name' => __( 'Derde zijbalk', 'twentythirteen' ),
'id' => 'sidebar-3',
'description' => __( 'Appears on posts and pages in the sidebar.', 'twentythirteen' ),
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
}
sidebar.php uitbreiden
Dit verdient waarschijnlijk geen schoonheidsprijs, omdat je beter per zijbalk een apart sjabloon kunt gebruiken. Sois:
<?php /** * The sidebar containing the secondary widget area, displays on posts and pages. * * If no active widgets in this sidebar, it will be hidden completely. * * @package WordPress * @subpackage Twenty_Thirteen * @since Twenty Thirteen 1.0 */ if ( is_active_sidebar( 'sidebar-2' ) ) : ?> <div id="tertiary" class="sidebar-container" role="complementary"> <div class="sidebar-inner"> <div class="widget-area"> <?php dynamic_sidebar( 'sidebar-2' ); ?> </div><!-- .widget-area --> </div><!-- .sidebar-inner --> </div><!-- #tertiary --> <?php endif; if ( is_active_sidebar( 'sidebar-3' ) ) : ?> <div id="tertiary" class="sidebar-container" role="complementary"> <div class="sidebar-inner"> <div class="widget-area"> <?php dynamic_sidebar( 'sidebar-3' ); ?> </div><!-- .widget-area --> </div><!-- .sidebar-inner --> </div><!-- #tertiary --> <?php endif; ?>
Linkerzijbalk toevoegen aan Twenty Thirteen
Dit borduurt voort op de poging hiervoor om twee rechterzijbalken te genereren:
Apart sjabloon aanmaken
Dit is 'm geworden. De klasses zijn trouwens aangepast:
<?php if ( is_active_sidebar( 'sidebar-3' ) ) : ?> <div id="tertiary" class="sidebar-container" role="complementary"> <div class="sidebarthree"> <?php dynamic_sidebar( 'sidebar-3' ); ?> </div> </div><!-- #tertiary --> <?php endif; ?>
get_sidebar('three')
Laatste paar regels van index.html:
<?php get_sidebar(); ?>
<?php get_sidebar('three'); ?>
<?php get_footer(); ?>
Merk op dat in de naam van de zijbalk, het woord sidebar- niet wordt herhaald!
Aangepaste css-code
Da's een beetje ad-hoc gedaan. widget-area zat in de weg, en die zorgde dat de hele container of zoiets, al rechts stond:
/**
* 6.0 Sidebar
* ----------------------------------------------------------------------------
*/
.site-main .widget-area {
float: right;
width: 300px;
}
.sidebarthree {
float: left;
width: 300px;
}
Aan de slag met Underscores
Underscores is een minimalistisch responsive theme, bedoeld om je eigen theme van te bouwen. Ik heb kort de css-code bekeken. Ik snapte veel niet, dus dat brengt het risico met zich mee dat ik toch weer probeer m'n weg te vinden in andersman's code. Aan de andere kant: De uitleg bij de code gaf aan dat er heel veel ervaring in die code zit, iets dat ik onmogelijk kan herproduceren in een korte tijd. De ontwikkelaars spreken van a 1000-Hour Head Start, en dat kan ik me goed voorstellen. Wellicht dat dit theme een goede balans is tussen het aanpassen van een bestaand theme, en vanaf niet beginnen. Daarnaast heb ik goede hoop dat er voldoende documentatie is om m'n weg te vinden.
Het Underscores theme is ontwikkeld door Timeshaper, een samenwerkingsverband van een aantal mensen dat themes ontwikkelt bij het bedrijf Automattic.
Na installatie heb je een ernstig leeg scherm. Effe een snelle tekst: Ik heb nog steeds de gebruikelijk interface voor het schrijven van content.
Underscores ziet er dermate veelbelovend uit als uitgangspunt voor een theme, dat ik opnieuw ben begonnen met deze casus: Theming - Casus herfst 2013 (Underscores).
Alles opnieuw
Vanaf de tweede helft van September migreer ik een tweede website van html naar WordPress. Hij lijkt nogal op de eerst casus, en ik zou dat thema kunnen overnemen, maar ik doe het liever nog een keer vanaf Underscores of Shape.
Underscores of Shape?
Ik geloof dat ik voor de eerdere casus begon met het theme Shape, door ThemeShaper gevormd uit Underscores. Dat neem ik als uitgangspunt. Je kunt Shape hier downloaden.
Uitleg: Zijbalk-Hoofdgedeelte
Het Shape-thema bevat een submap met css-bestanden voor verschillende configuraties. De inhoud van één van die bestanden toegevoegd aan style.css, et voilà: De juiste uitleg.
Achtergrond & werkblad
/* === Achtergrond & werkblad */
body{
background-color: #444444;
}
div#page{
background-color: #ffffff;
margin: 25px 50px; /* Boven & onder, links & rechts. Marge onder is handig */
min-height: 1000px;
}
Kopje
- Het kopje of header bestaat uit een linkerzijbalk (die precies aansluit bij de linkerkolom van het hoofdgedeelte) en een groot rechtergedeelte
- De linkerzijbalk is een float naar links
- Het hoofdgedeelte is geen float
- De float plaats ik eerst, zonder gebruik te maken van absolute positionering. Dat scheelt gedoe met bepalen van de hoogte van de header. Heeft ook een nadeel: Als er toevallig ergens een clear voorbijkomt, valt de header in duigen.
Vertaling
- Het viel me op dat Engels en Nederlands door elkaar heen lopen. Ik geloof dat ik WordPress al wel in het Nederlands had
- Het blijkt dat je ook een vertaling voor een theme nodig kan hebben. Voor Underscores is dat in ieder geval het geval
- En tjakka: Ik ben niet de enige met dit probleem: http://themeshaper.com/2012/02/13/introducing-the-underscores-theme/
- En iemand heeft al een oplossing: https://github.com/Automattic/_s/pull/151
Maar hoe haal ik die vertalings-bestanden hierheen? Bij downloadbare dingen zou op GitHub rechtsonder een knop zijn met de tekst Download ZIP. Dit is hier niet, maar wel bij het object één niveau hoger. Da's goed genoeg: Daar is het complete pakket, inclusief een map languages met daarin de gezochte bestanden.