Category Archives: Twenty Thirteen

Vertaling

How to Register & Display Sidebars in WordPress – DevotePress.

In de lijst die je kunt invullen bij het registreren van een sidebar, kom je dit tegen:

'name' => __( 'Sidebar Name', 'twentythirteen' ),

Ik heb me afgevraagd waar die __ en ‘twentythirteen’ voor staat en heb de verklaring gevonden in het artikel van de link hierboven. Het heeft te maken met de mogelijkheid om code om te zetten in een andere taal. Voor eigen gebruik is het dus niet nodig om deze toevoeging in het naam-argument op te nemen.

Advertisements

Borders

CSS3 box-sizing property.

Ik houd ervan om afbeeldingen een border mee te geven:
border: 1px solid #222 bijvoorbeeld.
Soms is het lastig dat er dan 2px in de hoogte en de breedte bijkomt. Deze code biedt dan uitkomst:

box-sizing: border-box

De border komt dan binnen de grenzen te liggen. Bij Twenty Thirteen staat dit al in de standaard CSS (regel 60):

* {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 }

Masthead

HTML structural elements – W3C Wiki.

Masthead is een van de eerste termen die je tegenkomt als je de code van het Twenty Thirteen thema gaat bekijken. Dan wil je ook weten wat dat te betekenen heeft. Het heeft iets te maken met de toepassing van HTML5 en bovenstaande link brengt je bij een instructie daarover.
Praktisch gezien is het niet veel anders dan een aanduiding voor de header van de website of de

Twenty Thirteen: Kleuren

Twenty Thirteen: Make It Yours | Noscope.

Hier wordt ingegaan op de kleuren van het thema en er worden childs gegeven die kunnen worden gedownload. Ik heb een vraag gesteld over het veranderen van de CSS om deze effecten te bereiken.

Het antwoord houdt in dat de manier om dat te bereiken is: een child theme te gebruiken of te maken waarin de CSS van de betreffende kleuren anders kunnen worden ingesteld.

Moderne WordPress themes hebben de mogelijkheid om extra CSS to te voegen in de Customiser. Bij een update van het theme is deze functie nu ook toegevoegd aan de customiser van Twenty Thirteen.

Magazine formaat

Artikel over Excerpts in plaats van Full Posts in het WP-thema Twenty Thirteen; mogelijk ook toepasbaar in andere thema’s.

WordPress Twenty Thirteen Theme Post Excerpts in Home, Category, Tag, Author and Archive Pages.

Hier wordt code gegeven die ervoor zorgt dat er ‘excerpts‘ geplaatst worden in plaats van ‘full posts‘. Deze code wordt geplaatst in de  content.php. van het nieuwe child-theme.
Om te zorgen dat niet alleen de excerpt, maar ook een illustratie en een titel meekomen, heb ik de code uitgebreid als volgt:

<?php
/**
 * The adaptations template for displaying content
 *
 * Used for both single and index/archive/search.
 *
 * @package WordPress
 * @subpackage Twenty_Thirteen
 * @since Twenty Thirteen 1.0
 */
?>
<!--Magazine style: illustrated excerpts rather then full posts-->
<?php if ( is_search() || is_home() || is_category () || is_author() || is_tag() || is_archive() ) : ?>
 <div class= "excerpt">
 <?php the_post_thumbnail('thumbnail'); ?>
 <div class="entry-excerpt">
 <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" ></a>
 <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">
 <?php the_title(); ?>
 </a></h2> 
 <?php the_excerpt(); ?>
 </div><!-- .entry-excerpt -->
 </div><!--excerpt-->
 <?php else : ?>
 <div class="entry-content">
 <?php the_content( __( 'Continue reading <span class="meta-nav">→</span>', 'twentythirteen' ) ); ?>
 <?php wp_link_pages( array( 'before' => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentythirteen' ) . '</span>', 'after' => '</div>', 'link_before' => '<span>', 'link_after' => '</span>' ) ); ?>
 </div><!-- .entry-content -->
 <?php endif; ?>
<?php
?>

De titel komt in mijn concept naast de afbeelding te staan. De afbeeldingen staan bijna zonder tussenruimte, boven elkaar. De grootte van de afbeelding wordt bepaald door de instelling voor de ‘thumbnail’ in de media sectie van de instellingen. Op die manier wordt de Home een stuk compacter en daaardoor overzichtelijker

Role “navigation” en “complementary”

Bij het bewerken van de code van het thema Twenty Thirteen stuit je al gauw op de vermelding van “role”. Het blijkt iets te maken te hebben met het gebruik van HTML5 en kan belangrijk zijn als aanwijzing voor de browser van de kijker. Ik vond het volgende bericht:

Multiple aria role “navigation” and “complementary”? – Stack Overflow

Role=”banner” komt ook voor:
<header id=”masthead” class=”site-header” role=”banner”>

De role is ook belangrijk in verband met ‘accessibility’; de regels voor toegankelijkheid in verband met visuele handicaps.