Wat doen die tags? Ga met je muis over de tags in de code hiernaast en bekijk wat ze doen:
Dit zijn 'action hooks'. Ze doen nu nog niets, maar je zet ze er in, voor het geval jouw thema ooit als parent theme gebruikt wordt. Je kunt dan speciale functies op deze plekken invoegen met het child theme, zonder dat je het parent theme hoeft aan te passen.
Informatie over de template tags (wat ze doen, hoe je ze kan gebruiken) vind je in het overzicht van Wordpress zelf: codex.wordpress.org
<meta http-equiv="Content-Type" content="text/html; charset="" /> <meta name="generator" content="WordPress " /> <meta name="description" content=”" />
Not Found
The posts you were looking for could not be found.
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.
/* Theme Name: Basisthema Theme URI: http://wordpress.org/ Description: Mijn eerste Wordpress thema Author: Annelotte Fellinger Version: 0.1 Tags: super-basic */
/* de voldgende regels zijn standaard regels voor afbeeldingen in wordpress. Deze zorgen er voor dat het uitlijnen van afbeeldingen met wordpress werkt. */
* { padding:0; margin:0; }
img.alignleft { float:left; margin:0 1em 1em 0 }
body { background-color:#555555; }
img.aligncenter { display: block; margin-left: auto; margin-right: auto }
#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; }
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!
#sidebar { width:280px; margin-left:20px; float:left; background-color:#EEEEEE; } #footer { width:100%; clear:both; background-color:#BBBBBB; }
img.alignright { float:right; margin:0 0 1em 1em }
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 }
Zelf template tags toevoegen
Van de sitenaam in de header een home-link maken met HTML ziet er zo uit:
Het Wordpress thema dat we gemaakt hebben werkt! Maar het is maar een heel basic thema. Je kan zelf meer template tags toevoegen.
De template tag kan verschillende soorten informatie ophalen (zie codex). Wat voor informatie er opgehaald wordt, is afhankelijk van wat er tussen de haakjes staat:
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.
'name' 'description ' 'admin_email'
= Testpilot = Just another WordPress blog = admin@example
'url' 'wpurl'
= http://example/home = http://example/home/wp
'stylesheet_directory'= 'stylesheet_url' = 'template_directory' = 'template_url' =
http://example/home/wp/wp-content/themes/child-theme http://example/home/wp/wp-content/themes/child-theme/style.css http://example/home/wp/wp-content/themes/parent-theme http://example/home/wp/wp-content/themes/parent-theme
'atom_url' 'rss2_url' 'rss_url' 'pingback_url' 'rdf_url'
= = = = =
http://example/home/feed/atom http://example/home/feed http://example/home/feed/rss http://example/home/wp/xmlrpc.php http://example/home/feed/rdf
'comments_atom_url' 'comments_rss2_url'
= http://example/home/comments/feed/atom = http://example/home/comments/feed
'charset' 'html_type' 'language' 'text_direction' 'version'
= = = = =
UTF-8 text/html en-US ltr 3.1
In dit geval willen we dus 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.
klik hier voor het antwoord
Geen sidebar te zien? Het Wordpress thema werkt wel, maar er is nog geen sidebar te zien. De sidebar wordt nu geladen met:
Deze tag zoekt naar een bestand genaamd sidebar. php, maar die hebben we nog niet gemaakt. De code hiernaast vrij vertaald:
1. Zoek de functie dynamische sidebar, en als die
er is, laat de widgets zien.
2. Als er geen widgets zijn, laat dan de zoekfunc-
tie en de archieven zien.
Maak een sidebar.php aan en zet die in het mapje van het basisthema. Test of de sidebar weergegeven wordt.
De code voor in sidebar.php:
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:
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 . 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:
'First Widget Area', 'id' => 'first-widget-area', 'description' => _( 'The first widget area'), 'before_widget' => '
', 'after_widget' => "", 'before_title' => '
', ) ); register_sidebar( array( 'name' => 'Second Widget Area', 'id' => 'second-widget-area', 'description' => _( 'The second widget area'), 'before_widget' => '
', 'after_widget' => "", 'before_title' => '
', ) ); register_sidebar( array( 'name' => 'Third Widget Area', 'id' => 'third-widget-area', 'description' => _( 'The third widget area'), 'before_widget' => '
', 'after_widget' => "", 'before_title' => '
', ) ); } // 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!
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.
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.
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:
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:
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.
/*-------- 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: 0 0 0 -0.8125em; padding-left: 0; } #navigation li { float: left; position: relative; } #navigation a { color: #eee; display: block; line-height: 3.333em; padding: 0 1.2125em; 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; }
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.
