Theming DIY (WordPress)

Uit De Vliegende Brigade
Naar navigatie springen Naar zoeken springen
Yoast.com: Anatomy of a WordPress Theme - Bron

Zie het spiekbriefje hier aan de zijkant. Zie ook Theming - Casus herfst 2013 (WordPress).

Segmenten

Websites bestaan meestal uit dezelfde terugkerende gedeeltes: kopje, hoofdgedeelte, voettekst en wellicht een zijbalk hier of daar. Deze gebieden worden sections genoemd, soms ook blocks, segmenten of regio's. Met elk standaard-segment correspondeert een sjabloon:

  • header.php
  • sidebar.php
  • footer.php

Daarnaast kun je je eigen segmenten defineren, inclusief bijpassende sjablonen.

Dummy content

Als je een theme aan het ontwikkelen bent, kan het handig zijn om dummy content te laden, zodat je goed kunt testen. Zie [1].

Frameworks

Er bestaat zoiets als frameworks. http://wp.tutsplus.com/tutorials/theme-development/developing-wordpress-themes-using-responsive-frameworks/

Locatie

wp-content/themes

Ontwikkelomgeving

ThemeShaper beveelt aan:

Handleidingen:

Responsive themes

Responsive wil zeggen dat het theme zich aanpast aan het apparaat: Computer, mobieltje, etc. [2].

Sidebars

Met een sidebar of zijbalk bedoelen mensen meestal gebieden in een theme waarin widgets geplaatst kunnen worden. Justin ziet dit iets genuanceerder:

  • Een dynamic sidebar of dynamische zijbalk is het object binnen de admin-interface waar je widgets in plaatst
  • Een sidebar template of zijbalksjabloon is het gebied in een theme.

Meestal gaan deze twee begrippen hand-in-hand: De dynamische zijbalk wordt geregistreerd, en widgets worden in het bijbehorende zijbalksjabloon geplaatst.

Dynamische zijbalk registeren

Een zijbalk moet in functions.php geregistreerd worden. Zie Theming - Casus herfst 2013 (WordPress) en Justin's artikel voor voorbeelden.

Zijbalksjablonen

Code die betrekking heeft op een zijbalk, wordt in sidebar templates of zijbalksjablonen ondergebracht. Het standaardbestand is 

sidebar.php

Indien je meerdere zijbalken hebt, is het handig om per zijbalk een apart zijbalksjabloon aan te maken, bv.: 

sidebar-primary.php

en 

sidebar-secondary.php

Bestand sidebar.php van Twenty Thirteen: 

<?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; ?>

Zijbalksjablonen aanroepen - get_sidebar()

Met behulp van de functie 

get_sidebar()

worden zijbalksjablonen geïncorporeerd in een theme. Als er geen argument wordt meegegeven, zoekt WordPress naar sidebar.php. Indien er wel een argument wordt meegegeven, wordt het betreffende sjabloon geladen. Bv.: 

get_sidebar('primary')

laadt sjabloon 

sidebar-primary.php.

get_sidebar wordt aangeroepen vanuit index.html. Voorbeeld Twenty Thirteen: 

<?php
/**
 * The main template file.
 *
 * This is the most generic template file in a WordPress theme and one of the
 * two required files for a theme (the other being style.css).
 * It is used to display a page when nothing more specific matches a query.
 * For example, it puts together the home page when no home.php file exists.
 *
 * Learn more: http://codex.wordpress.org/Template_Hierarchy
 *
 * @package WordPress
 * @subpackage Twenty_Thirteen
 * @since Twenty Thirteen 1.0
 */

get_header(); ?>

	<div id="primary" class="content-area">
		<div id="content" class="site-content" role="main">
		<?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><!-- #content -->
	</div><!-- #primary -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Dynamische zijbalk weergeven - dynamic_sidebar()

Weergave van een dynamische zijbalk in een theme wordt verzorgd in een zijbalksjabloon met het php-commando dynamic_sidebar(). Bv.: 

<div id="sidebar-primary" class="sidebar">
	<?php dynamic_sidebar( 'primary' ); ?>
</div>

Plaatsing - style.css

De uiteindelijke plaatsing van een zijbalk wordt via css aangegeven in bestand style.css.

Casus: Twenty Thirteen

Vanuit index.php wordt get_sidebar() aangeroepen zonder argument. Het gaat dus om bestand sidebar.php
sidebar.php. Het gaat om dit commando: dynamic_sidebar('sidebar-2')

Zie ook

Bronnen

Theme-identificatie & klonen

Zaken zoals de naam van een theme, staan weergegeven in commentaarregels in style.css. Als je een theme kloont, is het handig om die gegevens aan te passen. Het hoeft trouwens niet per se: Dan wordt de kloon beschouwd als een child theme van het oorspronkelijke theme. Best goed over nagedacht!

Twitter Bootstrap

Rondom het onderwerp theming kom ik Twitter Bootstrap regelmatig tegen. Framework? css-library? Plugin? Kruising tussen een plugin en een theme?

Underscores theme

Zie Underscores Theme (WordPress).

Overgenomen van "https://wiki.devliegendebrigade.nl/index.php?title=Theming_DIY_(WordPress)&oldid=9242"