1. De basis 2. De basis uitbreiden

Transcriptie

1 Wordpress Theme

2 Hoe moet je deze reader gebruiken? Deze reader is digitaal, zodat je makkelijk stukjes code kunt kopieren en plakken. 1. De basis 2. De basis uitbreiden Hier aan de linkerkant vind je een inhoudsopgave. Klik op het onderwerp om deze te bekijken. In de tekst staan af en toe links naar sites, die je als bron kunt gebruiken. Deze links zoals codex.wordpress.org zijn aanklikbaar. Als je een kader zoals deze ziet, dan staat daar een opdracht in. Voer deze zelf ook uit. Let op en sla geen informatie over!

3 Een basis in HTML Het ontwerpen van een Wordpress thema begint met een ontwerp in Photoshop en een opzet in HTML. Een Wordpress thema is een html pagina, waar met stukjes PHP wordpress informatie en functies toegevoegd kunnen worden. Hiernaast zie je een HTML pagina, net zoals je die al vaker gebouwd hebt. 1. De <!DOCTYPE> Het gedeelte dat de browser oa. verteld dat de code in dit bestand XHTML is. 2. De <head> Hier staat informatie zoals de titel van de pagina en de link naar de stylesheet. 3. De <body> In de body staan een aantal divs: een #pagewrap, een #header, #main, #sidebar en #footer. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" xml:lang="en-us"> <head> <title>mijn Website</title> <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" /> <meta name="description" content="a site about foo." /> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body> <div id="pagewrap"> <div id="header"> <h1>mijn Website</h1> </div>  <div id="main"> <h2>kopje van een bericht</h2> <p>lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea consequat.</p> </div>  <div id="sidebar"> <ul> <li><a href="#">widget 1</a></li> <li><a href="#">widget 2</a></li> <li><a href="#">widget 3</a></li> </ul> </div>  <div id="footer"> <p> 2012 Mijn Website</p> </div>  </div>  </body> </html> Maak een nieuw php bestand aan in Dreamweaver. Plak daar deze html code in. Noem het bestand index.php en sla het op in een mapje met de naam basisthema.

4 En een beetje CSS Met een beetje CSS kun je deze pagina ordenen in een lay-out. Een voorbeeld daarvan is de het onderstaande wireframe: * { padding:0; margin:0; body { background-color:#555555; #pagewrap { width:940px; height:auto; margin:0 auto; padding:0 10px; background-color:#ffffff; #header { width:100%; height:auto; clear:both; background-color:#888888; #main { width:620px; float:left; #sidebar { width:280px; margin-left:20px; float:left; background-color:#eeeeee; #footer { width:100%; clear:both; background-color:#bbbbbb; Maak een nieuw css bestand aan in Dreamweaver. Plak daar deze css code in. Noem het bestand style.css en sla het op in hetzelfde mapje als index.php.

5 Wordpress tags Wordpress tags zijn korte stukjes php, die informatie ophalen uit de Wordpress core of de database. Een voorbeeld van een template tag is: <?php wp_title();?> Het tag staat altijd tussen <?php en?> om aan te geven dat het een stukje php code is. De opdracht wp_title(); haalt de naam van de Wordpress site op en zet die op de plek van de tag. 1. De berichten laden Dit gedeelte bevat de loop. Dat is een stukje code dat begint met : <?php if (have_posts()) : while (have_posts()) : the_post();?> Dit zogt ervoor dat de beirchten worden opgehaald uit de database. We gaan er nog in meer detail naar kijken. Vervang de HTML die je nu in index.php hebt staan met deze code. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" <?php language_attributes();?>> <head> <title><?php bloginfo('name');?><?php wp_title();?></title> <meta http-equiv="content-type" content="text/html; charset="<?php bloginfo('charset');?>" /> <meta name="generator" content="wordpress <?php bloginfo('version');?>" />  <meta name="description" content= <?php bloginfo('description');?>" /> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url');?>" type="text/css" /> <link rel="alternate" type="application/rss+xml" title="rss Feed" href="<?php bloginfo('rss2_url');?>" /> <link rel="alternate" type="application/atom+xml" title="atom Feed" href="<?php bloginfo('atom_url');?>" /> <link rel="pingback" href="<?php bloginfo('pingback_url');?>" /> <?php wp_head();?> </head> <body <?php body_class();?>> <div id="pagewrap"> <div id="header"> <h1><?php bloginfo('name');?></h1> </div>  <div id="main"> <?php if (have_posts()) : while (have_posts()) : the_post();?> <h2 id="post-<?php the_id();?>" class="<?php post_class();?>"> <a href="<?php the_permalink()?>" rel="bookmark" title="permanent link to <?php the_title_attribute();?>"><?php the_title();?></a></h2> <?php the_content();?> <?php wp_link_pages();?> <div class="commentblock"> <?php comments_template();?> </div> <?php endwhile;?> <div class="navigation"> <div class="alignleft"><?php posts_nav_link();?></div> <div class="clear"></div> </div> <?php else:?> <h2>not Found</h2> <p>the posts you were looking for could not be found.</p> <?php endif;?> </div>  <div id="sidebar"> <?php get_sidebar();?> </div>  <div id="footer"> <p> <?php echo date('y'); bloginfo('name');?></p> </div>  <?php wp_footer();?> </body> </html>

6 Wat doen die tags? Ga met je muis over de tags in de code hiernaast en bekijk wat ze doen: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" <?php language_attributes();?>> <head> <title><?php bloginfo('name');?><?php wp_title();?></title> <meta http-equiv="content-type" content="text/html; charset="<?php bloginfo('charset');?>" /> <meta name="generator" content="wordpress <?php bloginfo('version');?>" />  <meta name="description" content= <?php bloginfo('description');?>" /> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url');?>" type="text/css" /> <link rel="alternate" type="application/rss+xml" title="rss Feed" href="<?php bloginfo('rss2_url');?>" /> <link rel="alternate" type="application/atom+xml" title="atom Feed" href="<?php bloginfo('atom_url');?>" /> <link rel="pingback" href="<?php bloginfo('pingback_url');?>" /> <?php wp_head();?> </head> <body <?php body_class();?>> <div id="pagewrap"> <div id="header"> <h1><?php bloginfo('name');?></h1> </div>  <div id="main"> <?php if (have_posts()) : while (have_posts()) : the_post();?> <h2 id="post-<?php the_id();?>" class="<?php post_class();?>"> <a href="<?php the_permalink()?>" rel="bookmark" title="permanent link to <?php the_title_attribute();?>"><?php the_title();?></a></h2> <?php the_content();?> <?php wp_link_pages();?> <div class="commentblock"> <?php comments_template();?> </div> <?php endwhile;?> <div class="navigation"> <div class="alignleft"><?php posts_nav_link();?></div> <div class="clear"></div> </div> <?php else:?> <h2>not Found</h2> <p>the posts you were looking for could not be found.</p> <?php endif;?> </div>  Informatie over de template tags (wat ze doen, hoe je ze kan gebruiken) vind je in het overzicht van Wordpress zelf: codex.wordpress.org <div id="sidebar"> <?php get_sidebar();?> </div>  <div id="footer"> <p> <?php echo date('y'); bloginfo('name');?></p> </div>  <?php wp_footer();?> </body> </html>

7 De css voor het thema We hadden al een layout in css gemaakt voor de html-versie van het thema. Deze regels kunnen we gewoon blijven gebruiken: de id s van pagewrap, header en footer veranderen niet. In principe werkt het thema nu al, maar het is goed om een speciale comment boven in style.css te zetten. Daarin plaats je de naam en gegevens over je thema, die je kunt zien in de admin interface. Kopieer de css regels en zet deze in je style.css. Je kunt ook je eigen gegevens er in zetten. Neem dan het mapje basisthema, waar de style.css en index.php in zitten, en zet die in de themes-map van je Wordpress installatie. Activeer je thema! /* Theme Name: Basisthema Theme URI: Description: Mijn eerste Wordpress thema Author: Annelotte Fellinger Version: 0.1 Tags: super-basic */ * { padding:0; margin:0; body { background-color:#555555; #pagewrap { width:940px; height:auto; margin:0 auto; padding:0 10px; background-color:#ffffff; #header { width:100%; height:auto; clear:both; background-color:#888888; #main { width:620px; float:left; #sidebar { width:280px; margin-left:20px; float:left; background-color:#eeeeee; #footer { width:100%; clear:both; background-color:#bbbbbb; /* de voldgende regels zijn standaard regels voor afbeeldingen in wordpress. Deze zorgen er voor dat het uitlijnen van afbeeldingen met wordpress werkt. */ img.alignright { float:right; margin:0 0 1em 1em img.alignleft { float:left; margin:0 1em 1em 0 img.aligncenter { display: block; margin-left: auto; margin-right: auto a img.alignright { float:right; margin:0 0 1em 1em a img.alignleft { float:left; margin:0 1em 1em 0 a img.aligncenter { display: block; margin-left: auto; margin-right: auto

8 Zelf template tags toevoegen Het Wordpress thema dat we gemaakt hebben werkt! Maar het is maar een heel basic thema. Je kan zelf meer template tags toevoegen. Het is handig dat de sitenaam in de header een link wordt naar de homepage. Als je rondkijkt op de site en dan terug wilt naar het begin, kun je daar snel op klikken. Van de sitenaam in de header een home-link maken met HTML ziet er zo uit: <div id="header"> <a href=" bloginfo('name');?></h1></a> </div>  De template tag <?php bloginfo();?> kan verschillende soorten informatie ophalen (zie codex). Wat voor informatie er opgehaald wordt, is afhankelijk van wat er tussen de haakjes staat: 'name' 'description ' 'admin_ ' 'url' 'wpurl' = Testpilot = Just another WordPress blog = admin@example = = 'stylesheet_directory'= 'stylesheet_url' = 'template_directory' = 'template_url' = 'atom_url' 'rss2_url' 'rss_url' 'pingback_url' 'rdf_url' 'comments_atom_url' 'comments_rss2_url' = = = = = = = 'charset' = UTF-8 'html_type' = text/html 'language' = en-us 'text_direction' = ltr 'version' = 3.1 In dit geval willen we dus <?php bloginfo('url');?> gebruiken. Hoe pas je de bestaande header aan, zodat de sitenaam een link wordt naar de homepage? Lees de informatie hiernaast, en zet de template tag er zo in, dat de sitenaam in de header een link naar de website wordt.

9 Geen sidebar te zien? Het Wordpress thema werkt wel, maar er is nog geen sidebar te zien. De sidebar wordt nu geladen met: <div id="sidebar"> <?php get_sidebar();?> </div>  Deze tag zoekt naar een bestand genaamd sidebar. php, maar die hebben we nog niet gemaakt. De code hiernaast vrij vertaald: De code voor in sidebar.php: <div id="sidebar" class="widget-area"> <ul> <?php // if(!dynamic_sidebar('fist-widget-area') ) : //the id of the sidebar?> <?php if (!function_exists('dynamic_sidebar')!dynamic_sidebar('first-widget-area') ) :?> <li id="search" class="widger-container widget-search"> <?php get_search_form();?> </li> <li id="archives" class="widget-container"> <h3 class="widget-title"><?php _e('archives');?></h3> <ul> <?php wp_get_archives('type=monthly');?> </ul> </li> <?php endif; //end primary widget area?> </ul> </div> 1. Zoek de functie dynamische sidebar, en als die er is, laat de widgets zien. 2. Als er geen widgets zijn, laat dan de zoekfunctie en de archieven zien. Maak een sidebar.php aan en zet die in het mapje van het basisthema. Test of de sidebar weergegeven wordt.

10 Sidebar toevoegen in functions.php De hebben bij de vorige stap een sidebar.php aangemaakt, maar de sidebar werkt nog niet. We probeerden een dynamische sidebar op te roepen, waarin we widgets kunnen zetten: <?php // if(!dynamic_sidebar('fist-widget-area') ) :?> <?php if (!function_exists('dynamic_sidebar') Wordpress heeft niet alle mogelijkheden als korte tag beschikbaar. Sommige functies moet je eerst toevoegen aan de functions.php van je thema. Zo blijft Wordpress zo snel mogelijk. Je gebruikt nooit àlle functies... De code hiernaast 'registreerd'de functie sidebar, met 3 verschillende widget-gebieden. We gebruiken nu alleen de eerste. De andere widget gebieden kun je bijvoorbeeld in de footer zetten (met dezelfe code als je gebruikt voor sidebar.php). Belangrijk: functions.php is 1 lange lap met php code! Het begint met <?php en eindigd met?>. Pas op met 'witregels': een enter op een verkeerde plek kan voor een error zorgen. PHP is daar nog strenger in dan html en css. De code voor in functions.php: <?php //dynamische sidebar function my_widgets_init() { register_sidebar( array( 'name' => 'First Widget Area', 'id' => 'first-widget-area', 'description' => _( 'The first widget area'), 'before_widget' => '<li id="%1$s" class="widget-container %2$s">', 'after_widget' => "</li>", 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>', ) ); register_sidebar( array( 'name' => 'Second Widget Area', 'id' => 'second-widget-area', 'description' => _( 'The second widget area'), 'before_widget' => '<li id="%1$s" class="widget-container %2$s">', 'after_widget' => "</li>", 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>', ) ); ) ); register_sidebar( array( 'name' => 'Third Widget Area', 'id' => 'third-widget-area', 'description' => _( 'The third widget area'), 'before_widget' => '<li id="%1$s" class="widget-container %2$s">', 'after_widget' => "</li>", 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>', // add the widget area's add_action( 'init', 'my_widgets_init' );?> Maak een functions.php aan en zet die in het mapje van het basisthema. Test of de sidebar nu wel weergegeven wordt. Voeg widgets toe!

11 Een dynamisch menu In je Wordpress thema kun je een ouderwets, handgemaakt menu toevoegen. Maar dat is geen goed idee, dan kun je die niet bewerken van uit Wordpress met Weergave > Menu's. <div id="header"> <h1><a href="<?php bloginfo('url');?>" ><?php bloginfo('name');?></a></h1> <?php if ( has_nav_menu( 'primaire-menu' ) ) {?> <?php wp_nav_menu(array('theme_location' => 'primaire-menu', 'container_id' => 'navigation', 'menu_class' => 'nav'));?> <?php else {?> <div id="navigation"><ul> <?php wp_list_pages( 'title_li=' );?> </ul></div> <?php?> </div> De code hiernaast vij vertaald: 1. Als er een custom navigatie menu is ingesteld, laat dan dat custom menu zien 2. Als dat er niet is, maak een lijstje van de pagina's die er zijn. Vervang de bestaande header in index.php met de code hiernaast.

12 Menu toevoegen in functions.php Het menu staat er in, maar het is nog niet te besturen met de menu functie in de Admin interface. Dat kun je hieronder zien: Het menu is niet meer dan een lijstje, dat moet je met css nog vormgeven als menu. Weet je nog, met de ulletjes en de li-tjes? Voeg de code voor het menu toe aan je functions.php. Maak zelf een stuke css voor het menu of gebruik de code van het Twentyeleven. Plaats deze code onderaan je functions.php, maar nog vòòr de afsluitende tag?> //Voeg dynamische menu's toe if (function_exists('wp_nav_menu')) { add_action( 'init', 'registreer_mijn_menus' ); function registreer_mijn_menus() { register_nav_menus(array( 'primaire-menu' => ( 'Primaire Menu' ), 'secondaire-menu' => ( 'Secondaire Menu' ), 'tertiaire-menu' => ( 'Tertiaire Menu' ) ) ); De volgende code kun je toevoegen aan je style.css om het menu er uit te laten zien als het Twentyeleven menu: /* navigatie menu stijlen */ #navigation { background: #222; clear: both; display: block; float: left; margin: 0 auto 6px; width: 100%; #navigation ul { font-size: 13px; list-style: none; margin: em; padding-left: 0; #navigation li { float: left; position: relative; #navigation a { color: #eee; display: block; line-height: 3.333em; padding: em; text-decoration: none; #navigation ul ul { display: none; float: left; margin: 0; position: absolute; top: 3.333em; left: 0; width: 188px; z-index: 99999; #navigation ul ul ul { left: 100%; top: 0; #navigation ul ul a { background: #f9f9f9; border-bottom: 1px dotted #ddd; color: #000; font-size: 13px; font-weight: normal; height: auto; line-height: 1.4em; padding: 10px 10px; width: 168px; #navigation li:hover > a, #navigation ul ul :hover > a, #navigation a:focus { background: #efefef; color:#000; #navigationli:hover > a, #navigation a:focus { background: #f9f9f9; color: #373737; #navigation ul li:hover > ul { display: block; #navigation.current_page_item > a, #navigation.current_page_ancestor > a { font-weight: bold;

13 Wat heb je geleerd? Het maken van een basic Wordpress thema. Het thema bestaat nu uit: index.php style.css functions.php sidebar.php De volgende keer gaan we kijken hoe we dit uit kunnen breiden: met pagina's, comments en andere mogelijkheden.