Theming DIY - Casus herfst 2013 (WordPress)

Uit De Vliegende Brigade
Ga naar: navigatie, zoeken

Zie ook WordPress (hoofdartikel),

Linker- en rechterzijbalk toevoegen aan Twelve Thirteen

Betreffende code genereren

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

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 geactiveerd voor een bestaande site. Hij is nogal leeg. Ik denk dat dat goed nieuws is. Maar vraag 't me over een weekje nog een keer

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

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.

Bronnen