Maquetar un tema per WordPress I

Un cop vist quins són els principals arxius que formen un tema de WordPress començarem a maquetar.

Primerament farem una nova instal.lació de WordPress. Un cop instal.lat i configurat dintre del directori /wp-content/themes/ creem un directori que es digui “temapropi” que serà on posarem tots els arxius del nostre tema. Dintre d’aquest crearem dos subdirectoris, un anomenat “images” i un anomenat “js”. Aquí mateix crearem els arxius index.php, header.php, sidebar.php, footer.php i style.css que són bàsics per començar a treballar.

Ara obrirem l’arxiu header.php i copiarem el següent codi

[php]
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset=<?php bloginfo(‘charset’); ?>" />

<?php wp_head(); ?>
</head>

[/php]

Primer hem declarat el DOCTYPE per html5. Després hem obert l’etiqueta html indiant que seleccioneu els atributs d’idioma de la instal·lació de WordPress.
Dins de head hem fet servir bloginfo (‘charset’); perquè seleccioni la codificació per defecte de la nostra instal·lació de WordPress. La funció wp_title() selecciona i mostra el títol especificat en Paràmetres -> General del panell d’administració de WordPress.
Per mostrar l’URL a favicon.ico li haurem d’indicar la ruta a la carpeta temapropi de la instal·lació de WordPress seguint les instruccions del codex per posar un favicon. Ex. Seguint les instruccions poseu un favicon al vostre tema.

Pingback és un mètode perquè els autors de la web sol·licitin una notificació quan algú enllaça un dels seus documents. Això permet a autors no perdre de vista qui els està enllaçant, o referenciant els seus articles.

Finalment la funció wp_head(), que és la funció que utilitza la plataforma per carregar scripts des plugins i altra informació addicional.

Ara afegirem l’etiqueta body que aparentment sembla que hauria d’anar a l’arxiu index.php però com que a la capçalera ens interessa repetir alguns el elements com el logo o el menú l’aplicarem entre d’altres a l’arxiu header.php.

Seguin aquesta estructura insertarem el següent codi:

[php]
<body>
<div id="content-wrapper">
<header id="main">

<nav id="menu">
<ul>
<li><a href="#">Inici</a></li>
<li><a href="#">Pàgina estàtica</a></li>
<li><a href="#">Categoria</a></li>
<li><a href="#">Contacte</a></li>
</ul>
</nav> <!– end of nav –>

</header> <!– end of header –>

[/php]

En aquesta primera part del curs no farem servir totes les funcions de WordPress per no complicar les coses, per tant, el logo tindrà una direcció absoluta i els links del menú estan inventats. Algunes imatges les agafarem de la web lorempixum.com per que la plantilla vagi agafan forma.

Ara editarem els arxius index.php, sidebar.php i footer.php per vincular-los entre ells i així permetrem a WordPress que les vegi com un sol arxiu.

Al principi del arxiu index.php cridarem al header.php amb la funció get_header() i al final del mateix arxiu cridarem al footer i al sidebar amb es funcions get_footer() i get_sidebar() respectivament.

Per tant, el index.php ens te que quedar així:

[php]

<?php get_header(); ?>

contingut

</div><!– end of contingut –>

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

[/php]

Al sidebar.php no hem d’utilitzar cap funció per que ja el cridem des de l’arxiu index.php

[php]

sidebar

</div>

[/php]

Com que volem que tots aquests arxius sumats els vegin com ha un sol l’arxiu, al footer.php tancarem les etiquetes HTML que ens havien quedat obertes al header.php. Al final també afegirem la funció wp_footer() que és similar a la wp_header() que em fet servir a la capçalera.

[php]

footer

</div><!– end of footer –>

</div><!– end of content-wrapper –>
<?php wp_footer(); ?>

</body>
</html>

[/php]

Un cop fet això ja podem editar l’arxiu style.css. A la part superior del arxiu posarem el següent text:

[css]
/*
Theme Name: Temapropi
Theme URI: www.itd.com
Description: Temapropi
Author: Mgali
Author URI: http://www.itd.cat
Version: 1.0
*/
[/css]

Aquesta informació apareixerà al costat del tema a l’apartat Aparença -> temes. Seguidament posarem una part de Reset i una classe de clear.

[css]

/* RESET & CLEAR*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}

:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}

table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}

.clear {
display: block;
clear: both;
}

[/css]

Després d’això ja podem començar a posar els estils del nostre tema. Començarem pel body:

[css]

/* BODY */

body {
background-color: #F1F1F1;
font-family: arial, sans serif;
font-size:12px;
}

#content-wrapper {
width:960px;
margin: 10px auto;
background-color:white;
overflow:hidden;
display:block;
}

[/css]

Seguidemant posarem els estils de la capçalera:

[css]

/* HEADER */

#top{
padding-top:10px;
}

#social{
float:left;
}

#lang{
float:right;
}

#logo{
text-align:center;
}

#menu{
display:block;
padding:20px 0px;
text-align:center;
border-top: 1px solid #f1f1f1;
border-bottom: 1px solid #f1f1f1;

}

#menu a {
padding:0 10px;
font-size: 14px;
color: #757575;
text-decoration:none;
}

#menu a:hover {
color: #000;
}

#menu li {

display:inline-block;
}

[/css]

També comentar que si creeu un arxiu d’imatge que es digui screenshot.png aquest es carregarà com a imatge representativa del tema a la zona, del panell administrador, de selecció de temes.

Podeu descarregar als arxius del tema resultant aquí:

[download id=”426″]

A la propera classe continuarem maquetan el tema.