Theming DIY + Underscores
Underscores is een minimalistisch theme voor WordPress, bedoeld als uitgangspunt voor een zelf te ontwikkelen theme. Ik heb sterk de indruk dat het handiger is om met Underscores te beginnen dan om vanaf niets te beginnen. ThemeShaper, de maker van Underscores, heeft een theming-cursus online gezet die aan de hand van Underscores werkt.
Header
De header moet uit drie kolommen bestaan, waarbij de eerst en de laatste een vaste breedte moeten hebben van zo'n 237 pixels plus eventuele marges.
hgroup
Het hgroup element is een kandidaat-HTML 5-element dat gebruikt wordt om binnen een header de titel en subtitel aan te geven. Het is de bedoelding dat je alleen h1-h6-elementen gebruikt binnen een hgroup-element. Ik neem aan dat het nut van dit element is, dat niet-mensen je document beter begrijpen. Maar ehh, ik geloof dat in april 2013 dit element is verwijderd uit de HTML 5-specificatie. Bron.
Drie kolommen aanmaken
- Ik denk dat ik in mijn geval in de header drie kolommen moet defineren middels div's. In één van die div's komt vervolgens de hgroup te staan
- De meest rechtse kolom heb ik float: right meegegeven, zodat het middenvlak flexibel blijft. Dat lijkt aardig te werken
Waar staat de afbeelding?
In theme Twenty Thirteen wordt de afbeelding in de header gerealiseerd via css-klasse site-header:
.site-header {
background: url("http://localhost ... /images/headers/circle.png")
no-repeat scroll center top / 1600px auto transparent;
}
Dat is de reden dat je niets terugvindt in header.php.
Achtergrondafbeeldingen hebben beperkingen
Ik heb de indruk dat je in CSS niet 'gewoon' afbeeldingen kunt plaatsen. Alleen als achtergrondafbeelding. Een aanvullende rede waarom dat niet geschikt is voor dit doel: Onder de afbeelding komt een volgend object.
Afbeeldingen als widgets toevoegen?
Ik wil het zo simpel mogelijk houden voor mezelf en voor de klant. Dus waarom die afbeeldingen niet als widgets toevoegen?
Dat kan:
- Door een text-widget toe te voegen en daar de gebruikelijke html-code voor afbeeldingen te gebruiken
- Mbv. de Image Widget
- ...Maar zie de afbeeldingen waarom het niet kan.
Dan doe ik de afbeelding ehh, wel gewoon in de header
Dit is de regel:
<img src="<?php echo get_bloginfo('template_directory');?>/images/boaafbeeldinglinks.jpg" alt="" >
Titel en Flash-filmpje toevoegen
Titel en filmpje waren vrij recht-toe-recht-aan. Zie artikel div & float voor details.
Bronnen
Content
Blog-posting-titel: Lettertype
Ik wil het lettertype van Twenty Thirteen overnemen. De truuk is, om precies te weten welke selector (of hoe het precies heet) relevant is. Oftewel: precedence. Ongetwijfeld zijn er meer wegen die naar Rome leiden, maar ik ben hier wel mee in m'n nopjes:
.entry-title a{
font-family: Bitter,Georgia,serif;
font-size: 48px;
line-height: 1.3;
}
En nee: Met alleen entry-title kom ik er niet.
Tekstkleur
- Dit betreft de hele site, en moet #666666 worden
- Links: Zelfde kleur als tekst in het algemeen (overgenomen van Twenty Thirteen)
Lettertype body
In Twenty Thirteen lijkt dit nogal ongecompliceerd te zijn bepaald door eerste declaratie tav. html:
html,
button,
input,
select,
textarea {
font-family: "Source Sans Pro", Helvetica, sans-serif;
}
Maar ik krijg dat Source Sans Pro maar niet aan de praat in m'n eigen theme. Hij blijft sans-serif kiezen. Misschien moet je daarvoor een truuk uithalen zoals het meeleveren van het lettertype? --> Laat maar zitten. Ik gebruik deze declaratie en daarmee is de kous af:
font-family: "Source Sans Pro",Verdana,sans-serif;
Entry meta data
Entry meta data wordt in sjabloon content.phph afgedrukt. Misschien ook op andere plekken. Dit is hoe Shape het aanroept:
<div class="entry-meta"> <?php shape_posted_on(); ?> </div><!-- .entry-meta -->
En dit is hoe Twenty Thirteen het doet:
<div class="entry-meta"> <?php twentythirteen_entry_meta(); ?> <?php edit_post_link( __( 'Edit', 'twentythirteen' ), '<span class="edit-link">', '</span>' ); ?> </div><!-- .entry-meta -->
Beiden hebben hiervoor een functie gedefineerd. Shape in inc/template-tags.php (let op: Ik heb twee breaks ingevoegd):
function shape_posted_on() {
printf( __( 'Posted on <a href="%1$s" title="%2$s" rel="bookmark">
<time class="entry-date" datetime="%3$s" pubdate>%4$s</time></a><span class="byline"> by
<span class="author vcard"><a class="url fn n" href="%5$s" title="%6$s" rel="author">%7$s</a></span></span>', 'shape' ),
esc_url( get_permalink() ),
esc_attr( get_the_time() ),
esc_attr( get_the_date( 'c' ) ),
esc_html( get_the_date() ),
esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ),
esc_attr( sprintf( __( 'View all posts by %s', 'shape' ), get_the_author() ) ),
esc_html( get_the_author() )
);
}
endif;
En Twenty Thirteen in functions.php:
function twentythirteen_entry_meta() {
if ( is_sticky() && is_home() && ! is_paged() )
echo '<span class="featured-post">' . __( 'Sticky', 'twentythirteen' ) . '</span>';
if ( ! has_post_format( 'link' ) && 'post' == get_post_type() )
twentythirteen_entry_date();
// Translators: used between list items, there is a space after the comma.
$categories_list = get_the_category_list( __( ', ', 'twentythirteen' ) );
if ( $categories_list ) {
echo '<span class="categories-links">' . $categories_list . '</span>';
}
// Translators: used between list items, there is a space after the comma.
$tag_list = get_the_tag_list( '', __( ', ', 'twentythirteen' ) );
if ( $tag_list ) {
echo '<span class="tags-links">' . $tag_list . '</span>';
}
// Post author
if ( 'post' == get_post_type() ) {
printf( '<span class="author vcard"><a class="url fn n" href="%1$s" title="%2$s" rel="author">%3$s</a></span>',
esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ),
esc_attr( sprintf( __( 'View all posts by %s', 'twentythirteen' ), get_the_author() ) ),
get_the_author()
);
}
}
endif;
Plan
Ik wil het vormgeven zoals in Twenty Thirteen, als dit niet te veel werk is:
- Met symbolen
- Datum + tijd
- Categorieën
- Eventueel: edit-knop.
Acties
- Ik heb de functie twentythirteen_entry_meta() overgenomen (inclusief naam) in tempate-tags.php. Deze wordt nu aangeroepen vanuit content.php. Deze bleek op zijn beurt de functie twentythirteen_entry_date aan te roepen. Deze ook geïncorporeerd. Overigens: Ik hoef verder niets te doen om deze functies te incorporeren in de site. Dat gaat vanzelf.
- Lettertype iets kleiner gemaakt:
.entry-meta {
font-size: 14px;
}
- Ruimte aanbrengen tussen de verschillende gegevens. Ook eenvoudig:
.entry-meta > span {
margin-right: 20px;
}
- Symbolen overnemen? Dat loopt niet lekker. Misschien omdat ik een ander lettertype gebruik. Dit is hoe Twenty Thirteen het doet:
Volgens Firebug:
.entry-meta .date a:before {
content: "";
}
Rechtstreeks in het css-bestand:
.entry-meta .date a:before {
content: "\f303";
}
Bronnen
Teksten uit voettekst verwijderen
Dat moet je rechtstreeks in footer.php doen:
<?php
/**
* The template for displaying the footer.
*
* Contains the closing of the id=main div and all content after
*
* @package Shape
* @since Shape 1.0
*/
?>
</div><!-- #main .site-main -->
<footer id="colophon" class="site-footer" role="contentinfo">
<div class="site-info">
<?php do_action( 'shape_credits' ); ?>
<a href="http://wordpress.org/" title="<?php esc_attr_e( 'A Semantic Personal Publishing Platform', 'shape' ); ?>" rel="generator"><?php printf( __( 'Proudly powered by %s', 'shape' ), 'WordPress' ); ?></a>
<span class="sep"> | </span>
<?php printf( __( 'Theme: %1$s by %2$s.', 'shape' ), 'Shape', '<a href="http://themeshaper.com/" rel="designer">ThemeShaper</a>' ); ?>
</div><!-- .site-info -->
</footer><!-- #colophon .site-footer -->
</div><!-- #page .hfeed .site -->
<?php wp_footer(); ?>
</body>
</html>
Het gaat om de regels
<?php do_action( 'shape_credits' ); ?> <a href="http://wordpress.org/" title="<?php esc_attr_e( 'A Semantic Personal Publishing Platform', 'shape' ); ?>" rel="generator"><?php printf( __( 'Proudly powered by %s', 'shape' ), 'WordPress' ); ?></a> <span class="sep"> | </span> <?php printf( __( 'Theme: %1$s by %2$s.', 'shape' ), 'Shape', '<a href="http://themeshaper.com/" rel="designer">ThemeShaper</a>' ); ?>
Ik heb de klasse-aanroepen behouden, omdat ze overeenkomen met de afbeelding aan het begin van dit artikel:
<?php
/**
* The template for displaying the footer.
*
* Contains the closing of the id=main div and all content after
*
* @package Shape
* @since Shape 1.0
*/
?>
</div><!-- #main .site-main -->
<footer id="colophon" class="site-footer" role="contentinfo">
<div class="site-info">
</div><!-- .site-info -->
</footer><!-- #colophon .site-footer -->
</div><!-- #page .hfeed .site -->
<?php wp_footer(); ?>
</body>
</html>
Achtergrond & werkblad
Doel
- Een grijze achtergrond
- Daarbinnen een werkblad met een witte achtergrond
Grijze achtergrond
Wellicht de handigste manier:
body{
background-color: #444444;
}
Wit werkblad
Gelukt:
div#page{
background-color: #ffffff;
}
Marges rondom werkblad
Dat ging gemakkelijk:
div#page{
background-color: #ffffff;
margin: 25px;
}
Marge onderaan de header
Soepeltjes:
.site-header{
margin-bottom: 75px;
}
Opmaak van de zijbalken
Ik kom daar niet goed uit ivm. plaatsing objecten. Wellicht speelt het een rol, dat deze gebieden practisch niet gedefineerd zijn omdat Underscores een kaal ontwerp is.
------ <div id="main" class="site-main"> ------------------------------------ | | | ------------------------- --------------------------- ------------------- | | | | | | | | | | | <div id="secondary" | | <div id="primary" | | <div id= | | | | class="widget-area" | | class="content-area"> | | "tertiary" | | | | role="complementary"> | | | | class= | | | | | | | | "widget-area" | | | | | | | | role= | | | | | | | | "supplementary | | | | | | | | | | | ------------------------- --------------------------- ------------------- | | | -----------------------------------------------------------------------------
Acties
- Backup gemaakt van style.css: style.bk02.css
- Linkerzijbalk (secondary) gedefineerd met een breedte van 235 pixels en als float naar links laten drijven
- Rechterzijbalk (tertiary) gedefineerd met een breedte van 235 pixels en als float naar rechts laten drijven
- Het content gedeelte zakt nu naar beneden omdat headings een clear bevatten
div#secondary{
width: 235px;
float: left;
}
Content-gedeelte: Float of geen float?
Het lijkt me logisch als beide zijbalken floats zijn, en het content-gedeelte niet. Maar het lijkt erop dat dat niet de bedoeling is: Headings bevatten clear-declaraties, waardoor de content onder de zijbalken belandt, althans wanneer het contentgedeelte na de floats wordt geplaats.
Hoe zit dat in Twenty Thirteen?
Absolute positionering
Twenty Thirteen en Underscores gebruiken beiden absolute positionering om de floats bovenaan het main-gedeelte te krijgen. Eerst moet ik een 'referentiekader' defineren door dit van main te maken:
div#main{
position:relative;
}
Dan wordt dit de linkerkolom:
div#secondary{
width: 235px;
float: left;
position:absolute;
top:0px;
}
Rechterkolom: right: 0px is noodzakelijk, anders belandt-ie links:
div#tertiary{
width: 235px;
float: right;
position:absolute;
top:0px;
right:0px;
}
Afbeelding rechterkolom als text-widget
Pad naar de afbeelding
- Het voorbeeld eerder in dit artikel werkt niet, omdat het pad nu geen systeempad is, maar het pad naar de profiel van de gebruiker
- Daarnaast is dit eerdere voorbeeld niet handig omdat de naam van het theme expliciet genoemd wordt in het pad
- Je kunt geen php gebruiken, tenzij je daar een plugin voor installeert. Dat sla ik zo lang mogelijk over vanwege beveiligingsissues
- De relatieve paden zijn afhankelijk van wat er in het content-gedeelte wordt getoond.
- Dit is de oplossing voor dit moment:
<img src="http://localhost/WordPress/wp-content/themes/boa/images/boa-afbeeldingrechts.jpg">
Marges
- De bedoeling is, om 'm helemaal rechts te plaatsen. Aan de rechterkant zit echter een marge can ca. 25 pixels. Waar komt dat vandaan?
- Rechtstreeks middels Firebug aanpassen om te testen
- De afbeelding zelf, lijkt ok te zijn: Geen marges of padding
- De width-property is het probleem:
#main .widget-area {
float: left;
overflow: hidden;
width: 20%;
}
Bronnen
- De truuk is niet om een secundair menu aan te maken, maar om het primaire menu links te plaatsen. Het primaire menu staat standaard in de header, maar daar wordt-ie in het geheel niet getoond
- Standaard lijkt de code te ontbreken om een menu te tonen.
ThemeShaper
In het artikel over de header template wordt het hoofdmenu (op de gebruikelijke locatie) geplaatst middels:
<nav role="navigation" class="site-navigation main-navigation">
<h1 class="assistive-text"><?php _e( 'Menu', 'shape' ); ?></h1>
<div class="assistive-text skip-link">
<a href="#content" title="<?php esc_attr_e( 'Skip to content', 'shape' ); ?>"><?php _e( 'Skip to content', 'shape' ); ?></a>
</div>
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
</nav><!-- .site-navigation .main-navigation -->
De functie wp_nav_menu is vermoedelijk een ingebouwde WordPress-functie. Deze weet raad met de parameter array( 'theme_location' => 'primary' ) omdat deze is geïnitialiseerd in de functie shape_setup in bestand functions.php.
In het sjabloon dat ik gebruikte, ontbrak de regel
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
Tjakka! Nadat ik 'm toevoegde, had ik gelijk een hoofmenu. Maar nog niet op de plek waar ik 'm wil hebben.
- Verhuizen van zo'n menu kan niet via de interface. Immers: de oorspronkelijke plaatsing ging via een div-definitie in een sjabloon
- Hoe plaats je dan zo'n menu in de linkerzijbalk? Als een apart blok boven de reguliere zijbalk?
Ik heb 'm in sidebar.php geplaatst (dat is het sjabloon voor beide zijbalken):
<?php
/**
* The Sidebar containing the main widget areas.
*
* @package Shape
* @since Shape 1.0
*/
?>
<div id="secondary" class="widget-area" role="complementary"> <!-- ##### Linkerzijbalk #### -->
<?php do_action( 'before_sidebar' ); ?>
<nav role="navigation" class="site-navigation main-navigation"> <!-- ##### Navigatie #### -->
<h1 class="assistive-text"><?php _e( 'Menu', 'shape' ); ?></h1>
<div class="assistive-text skip-link"><a href="#content" title="<?php esc_attr_e( 'Skip to content', '_s' ); ?>"><?php _e( 'Skip to content', 'shape' ); ?></a></div>
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
</nav> <!-- ##### Navigatie #### -->
<?php if ( ! dynamic_sidebar( 'sidebar-1' ) ) : ?> <!-- Geen dynamische content? Dan deze statische content -->
<aside id="search" class="widget widget_search">
<?php get_search_form(); ?>
</aside>
<aside id="archives" class="widget">
<h1 class="widget-title"><?php _e( 'Archives', 'shape' ); ?></h1>
<ul>
<?php wp_get_archives( array( 'type' => 'monthly' ) ); ?>
</ul>
</aside>
<aside id="meta" class="widget">
<h1 class="widget-title"><?php _e( 'Meta', 'shape' ); ?></h1>
<ul>
<?php wp_register(); ?>
<li><?php wp_loginout(); ?></li>
<?php wp_meta(); ?>
</ul>
</aside>
<?php endif; // end sidebar widget area ?>
</div><!-- #secondary .widget-area -->
<div id="tertiary" class="widget-area" role="supplementary"> <!-- ##### Rechterzijbalk #### -->
<?php dynamic_sidebar( 'sidebar-2' ); ?>
</div><!-- #tertiary .widget-area -->
- Het was een horizontaal menu. Het wordt nu een verticaal menu
- Goede eerste stap: Alle opmaakcode rondom .main-navigation verwijderd uit style.css
Vertaling
Ik heb de Nederlandse vertalingen nodig van dit theme (en ook de Duitse, maar dat komt later), en die is er: https://github.com/Automattic/_s/pull/151. Maar hoe incorporeer ik dat nou in het theme? Komt-ie:
In bestand functions.php wordt de betreffende functie-aanroep gedaan in regel 45:
/** * Make theme available for translation * Translations can be filed in the /languages/ directory * If you're building a theme based on Shape, use a find and replace * to change 'shape' to the name of your theme in all the template files */ load_theme_textdomain( 'shape', get_template_directory() . '/languages' );
waarbij ik shape moest vervangen door de naam van het theme.