Conceptes bàsics per crear un tema de Wordpress

Seguint un molt bon exemple trobat per internet, en aquesta classe mirarem quins són els passos a seguir per crear el nostre propi tema de WordPress.

Aparença de la web

Abans de començar, anem a fer una ullada al tema per defecte de WordPress i veure com està estructurat. Els elements principals són la capçalera, el títol de l’entrada, el formulari de cerca,la navegació,el peu de pàgina, etc…

Maquetes de Photoshop

Agafarem un tema gratuït de WordPress per maquetar el nostre tema. Podeu descarregar l’exemple que segirem aquí [download id=”977″]. El zip descarregat conté un arxiu psd amb la platilla per photoshop, els arxius originals html i els arxius definitius que formaran la plantilla de wordpress. També descarregarem un tema que ofereix WordPress, anomenat default, que conté els arxius bàsics que necesitem per fer la nostre plantilla.

L’aparença que volem aconseguir és aquesta:

HTML + CSS

Per començar a fer la nostra plantilla de WordPress el que primer farem és maquetar amb Html i Css el disseny PSD com una web estàtica amb els arxius bàsics necessaris, index.html, page.html, single.html i style.css. Aquest sistema farà que el procés de desenvolupament sigui molt més fàcil. Un cop fet això tallarem els arxius i introduirem el codi necessari de WordPress per que funcioni com una plantilla.

Començem a fer el tema

Com ja hem comentat altres cops WordPress realment utilitza diversos fitxers de plantilla per generar la pàgina (index.php << header.php, sidebar.php i footer.php).

Per a més informació, donar un cop d’ull a l’arquitectura del lloc i la Jerarquia Plantilla al Codex.

El proper pas serà copiar la carpeta amb els arxius HTML a la carpeta wp-content/themes. Després, aneu a la carpeta del tema per defecte, copiar l’arxiu comments.php i searchform.php a la carpeta glossyblue.

Style.css

Ara agafem l’arxiu style.css de la carpeta default, copiem la capçalera, i posem a la part superior de la nostra fulla d’estils. modifiquem el contingut per que ens quedi a la nostra manera.

[css]
/*
Theme Name: GlossyBlue
Theme URI: http://www.ndesign-studio.com
Description: A theme by <a href="http://www.ndesign-studio.com">N.Design Studio</a>.
Version: 1
Author: Nick La
Author URI: http://www.ndesign-studio.com
*/
[/css]

Dividir Arxius

Ara haurem d’entendre com dividir l’arxiu index.html en diversos arxius: header.php, sidebar.php, footer.php i index.php. La següent imatge mostra una versió simplificada de l’arxiu d’índex.html que conté les marques on s’har de dividir.

Header.php

Obriu el fitxer index.html. Tallau la part superior fins a , enganxeu en un nou arxiu PHP, i deseu el fitxer com header.php.

[php]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>index.html</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="page">
<div id="header">
<div id="headerimg">
<h1><a href="#">My Blog</a></h1>
<div class="description">Blog Description</div>
</div>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<!–/header –>
[/php]

Anar a la carpeta del tema per defecte, obriu el header.php. Copiar i reemplaçar les etiquetes on es requereix codi PHP : title , link de fulls d’estil, h1, i div class=description .

Navegació pels menús (wp_list_pages)

Substitueix les etiquetes li de ul id=nav per

[php]
<?php wp_list_pages(‘sort_column=menu_order&depth=1&title_li=’);?>
[/php]

El resultat final te que ser semblat a això:

</head>
<body>
<div id="page">
<div id="header">
<div id="headerimg">
<h1><a href="<?php echo get_option(‘home’); ?>/"><?php bloginfo(‘name’); ?></a></h1>
<div class="description"><?php bloginfo(‘description’); ?></div>
</div>
<ul id="nav">
<?php wp_list_pages(‘sort_column=menu_order&depth=1&title_li=’);?>
</ul>
</div>
<!–/header –>
[/php]

Sidebar.php

Tornar a l’arxiu index.html, tallau des d’on comença form id=searchform fins a l’etiqueta de tancament de div id=sidebar i enganxeu en un nou arxiu PHP, anomenat sidebar.php.

Ara introduirem el codi de wordpress:

Substituïm el div form id=searchform sencer per [php]<?php include (TEMPLATEPATH . ‘/searchform.php’); ?> .</li>[/php]
Substituïm les li de ul class=”ul-cat” per [php]<?php wp_list_categories(‘show_count=1&title_li=’); ?></li>[/php]
Substituïm les li de ul class=”ul-archives” per [php]<?php wp_get_archives(‘type=monthly’); ?></li>[/php]

I ens ha de quedar una cosa com:

[php]
<?php include (TEMPLATEPATH . ‘/searchform.php’); ?>

<div id="sidebar">
<h3>Category</h3>
<ul class="ul-cat">
<?php wp_list_categories(‘show_count=1&title_li=’); ?>
</ul>
<h3>Archives</h3>
<ul class="ul-archives">
<?php wp_get_archives(‘type=monthly’); ?>
</ul>
</div>
<!–/sidebar –>
[/php]

Footer.php

Tornau a l’arxiu index.html, tallau del div id=footer fins al final de la etiqueta /html i enganxeu-lo en un nou arxiu PHP, guardeu-lo com footer.php.

[php]
<div id="footer">
<div class="left-col">
<h4>Recent Posts </h4>
<ul class="recent-posts">
<li><a href="#">Blog Title Text</a><br />
10/23/2006</li>
<li><a href="#">Blog Title</a><br />
10/23/2006</li>
<li><a href="#">Title Text</a><br />
10/23/2006</li>
<li><a href="#">Sample Blog Title</a><br />
10/23/2006</li>
</ul>
</div>
<div class="left-col">
<h4>Recently Commented</h4>
<ul class="recent-comments">
<li><a href="#">Nick:</a> This is a test comment</li>
<li><a href="#">Jen:</a> Hello, nice day!</li>
<li><a href="#">Someone:</a> Wow, this is another test comment</li>
<li><a href="#">Admin:</a> This is a comment</li>
</ul>
</div>
<div class="right-col">
<h4>About</h4>
<p>Welcome to my design blog and portfolio showcase. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.</p>
<p>Feel free to <a href="#"> contact me.</a></p>
</div>
<hr class="clear" />
</div>
<!–/footer –>
</div>
<!–/page –>
<div id="credits"><span class="left">Powered by <a href="http://www.wordpress.org">WordPress</a> | Theme by <a href="http://www.ndesign-studio.com">N.Design Studio</a></span> <span class="right"><a href="#" class="rss">Entries RSS</a> <a href="#" class="rss">Comments RSS</a></span></div>
</body>
</html>
[/php]

Index.php

Ara en el seu arxiu index.html, només ha de tenir la div id=content. Deseu el fitxer com index.php. Inseriu la línia: get_header , get_sidebar i get_footer en el mateix ordre que l’estructura del seu disseny.

Ara introduirem el loop. L’estructura bàsica és:

[php]
<?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>

</div>

<?php endwhile; ?>

<?php else : ?>

<h2>Not Found</h2>
<p>Sorry, but you are looking for something that isn’t here.</p>

<?php endif; ?>
[/php]

A continuació, substituïu el text estàtic amb els de Etiquetes WordPress : data, títol, categoria, els comentaris, el proper i l’enllaç anterior.

El resultat serà quest:

[php]

<?php get_header(); ?>

<?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>

<div class="post">
<div class="post-date"><span class="post-month"><?php the_time(‘M’) ?></span> <span class="post-day"><?php the_time(‘j’) ?></span></div>
<div class="post-title">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<span class="post-cat"><?php the_category(‘, ‘) ?></span>
<span class="post-comments"><?php comments_popup_link(‘No Comments’, ‘1 Comment’, ‘% Comments’); ?></span>
</div>
<div class="entry">
<?php the_content(‘Read the rest of this entry »’); ?>
</div>
</div>

<?php endwhile; ?>

<?php else : ?>

<h2>Not Found</h2>
<p>Sorry, but you are looking for something that isn’t here.</p>

<?php endif; ?>

</div>
<!–/content –>

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

[/php]

Single.php

Ara, és el moment de fer la plantilla single.php. El més fàcil és utilitzar el index.php que acabeu de crear i guardar-lo com single.php. Obriu el fitxer single.php tema per defecte i copieu els canvis que creieu que us fan falta. Després incloeu el comments_template . El resultat serà:

[php]
<?php get_header(); ?>

<?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>

<?php the_content(‘Read the rest of this entry »’); ?>

<?php wp_link_pages(array(‘before’ => ‘<p><strong>Pages:</strong> ‘, ‘after’ => ‘</p>’, ‘next_or_number’ => ‘number’)); ?>

</div>

<?php comments_template(); ?>

</div>

<?php endwhile; ?>

<?php else : ?>

<h2>Not Found</h2>
<p>Sorry, but you are looking for something that isn’t here.</p>

<?php endif; ?>

</div>
<!–/content –>

<?php get_sidebar(); ?>
<?php get_footer(); ?>
[/php]

Page.php

Dupliqueu la plantilla single.php que acabeu de crear i guardeu-la com page.php. Traieu la data, el comentari, al link següent / anterior … i això és tot .. aquí va la plantilla page.php:

[php]
<?php get_header(); ?>

<?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>

<div class="entry">
<?php the_content(‘Read the rest of this entry »’); ?>
<?php wp_link_pages(array(‘before’ => ‘<p><strong>Pages:</strong> ‘, ‘after’ => ‘</p>’, ‘next_or_number’ => ‘number’)); ?>
</div>

</div>

<?php endwhile; ?>

<?php else : ?>

<h2>Not Found</h2>
<p>Sorry, but you are looking for something that isn’t here.</p>

<?php endif; ?>

</div>
<!–/content –>

<?php get_sidebar(); ?>
<?php get_footer(); ?>
[/php]

Suprimiu els fitxers HTML

Elimineu tots els arxius HTML a la carpeta glossyblue (no els necessitem més). Tècnicament, això és suficient perquè un tema bàsic de WordPress.Com podem veure hi ha més arxius PHP en el tema per defecte. Bé, realment no es necessiten els arxius si el que desitja és un tema bàsic. Per exemple, si el search.php o 404.php no hi són a la carpeta del tema, WordPress utilitzarà automàticament el index.php per representar la pàgina. Llegiu la Jerarquia Plantilla per a més detalls.

Conceptes bàsics per crear un tema de WordPress

Aparença de la web

Maquetes de Photoshop

HTML + CSS

Començem a fer el tema

Style.css

Dividir Arxius

Header.php

Navegació pels menús (wp_list_pages)

Sidebar.php

Footer.php

Recent Posts

Recent Comments

Index.php

Single.php

Page.php

Suprimiu els fitxers HTML

Search

Recent Posts

Recent Comments

Archives

Categories

Meta

COL.LABORADORS