Es viernes, qué tal si aprendemos sobre themes de WordPress!

Es viernes, qué tal si aprendemos sobre themes de WordPress!

Fecha: 04-sep-2009 | Autor: .
Guardado en: Themes

En este nuevo viernes te invito a conocer más y adentrarnos un poco en lo que es WordPress, uno de los CMS más populares entre blogs, sitios web y comunidades en línea. El objetivo de hoy es hacer una introductoria y sencilla explicación sobre la creación o personalización de themes para WordPress.

Evidentemente por cuestiones de espacio y tiempo, esto no será un tutorial extenso o sumamente completo para crear plantillas de WordPress, sino más bien pretende dar una información básica para motivar luego a que quienes estén interesados a investigar un poco más por su cuenta al respecto de lo que hablaremos. Además quiero al finalizar compartir un par de recursos útiles a la hora de comenzar a crear temas para WordPress.

Composición básica de un tema para WordPress:

  • index.php, archivo central de todo tema desde el cuál se llamarán a los otros archivos del tema y (en general) contiene el “WordPress Loop” que es el medio para traer la información desde la base de datos (en el Loop podemos presentar categorías, posts, páginas, etc).
  • header.php, dónde se abre la página ( y en general incluimos allí también el titular de la página y/o el menú horizontal si tuviera), para llamar este archivo desde el index.php usamos la función de WordPress: get_header();
  • footer.php, en este archivo iría el pie de nuestra web, los créditos (si los hubiera), el fin del HTML () y dónde opcionalmente podemos incluir la función wp_footer() que nos permite realizar tareas o imprimir código HTML al final de la página, es muy utilizada por plugins para modificar o agregar código una vez toda la página está cargada.
  • style.css, es la hoja de estilo principal, es obligatoria, además de para definir la información de estilos para la web, es dónde se ubica la información sobre el tema.

Así que ya podemos crearnos una carpeta /prueba_wp/ dentro de la cuál crearemos estos 4 archivos. Vayamos primero al contenido de style.css, en las primeras lineas y como comentario definiremos los datos del tema que vamos a crear:

/*
Theme Name: Nombre de nuestro Tema
Theme URI: http://nuestraweb.com/
Description: Una breve descripción que puede <strong>incluir html</strong>.
Author: Tu nombre
Autor URI: http://lawebdelautor.com/
Version: 0.1
*/

Luego de esa primera parte con datos del theme, este archivo contendrá todos los datos de estilos CSS para nuestro diseño.

El archivo index.php conceptualmente será algo así:

<div><strong> </strong>
<div id="contenido">
  [...]</div>
<strong> </strong></div>

Teniendo a get_header(); y get_footer(); como funciones internas de WordPress que lo que hacen es simplemente incluir los archivos header.php y footer.php respectivamente.

Luego en el header.php incluimos el inicio de la web, por ejemplo:

 
 "; charset=<strong> </strong>" /&gt;
 
" RSS Feed” href="<strong> </strong>" /&gt;
 
 <strong> </strong>
<div id="contenedor">
<div id="titular">
<h1><strong> </strong></h1>
<h2><strong></strong></h2>
</div>
<div id="menu">
   [...]</div>
</div>

Expliquémoslo de a partes:


¿Por qué este anuncio?
  1. En primer lugar definimos el DOCTYPE y abrimos el HTML.
  2. Luego utilizamos la función bloginfo(’name’); para mostrar el nombre del sitio en el de la web.
  3. Luego definimos el charset y el generator también utilizando funciones de WP (resaltadas en negritas).
  4. Después de eso especificamos el canal RSS y la dirección de la hoja de estilos principal (style.css) por medio de bloginfo(’stylesheet_url’);
  5. Por último dentro del llamamos a la función wp_head(); que lo que hace es permitir a WordPress (y particularmente a los plugins) agregar información en el header.

Y en el footer.php el cierre, por ejemplo algo así:

<strong>  </strong>

Luego en nuestro index.php dónde hoy poníamos […] simbolizando el contenido, es donde ejecutaremos el Loop de WordPress para mostrar (por ejemplo) los últimos posts:

<!-- Inicio del Loop -->
<strong>
 </strong>
 
  <!-- Inicio del post -->
<div id="post-&lt;b&gt;&lt;?php the_ID(); ?&gt;&lt;/b&gt;">
<h3><a title="&lt;b&gt;&lt;?php the_title(); ?&gt;&lt;/b&gt;" rel="bookmark" href="&lt;b&gt;&lt;?php the_permalink() ?&gt;&lt;/b&gt;"><strong></strong></a></h3>
<span id="”post-data”"> Publicado en: <strong></strong> por: <strong></strong> y hay: <strong></strong></span>
<div>&gt;
    <strong></strong></div>
</div>
<!-- Fin del post -->
 
 <strong></strong>
<!-- Fin del Loop -->

Dónde las 2 primeras lineas preguntan si hay posts para mostrar y luego itera entre ellos mostrando para cada uno un título [the_title();], la categoría [the_category();], autor [the_author();], sus comentarios [comments_popup_link();] y el contenido [the_content();].

Bueno, esto sería lo más extremadamente básico del funcionamiento de un tema para WordPress, se que todo esto que hemos visto es sumamente simple y básico; pero la propuesta es que si hay interés en este tema de desarrollo sobre WordPress sería genial poder volver a abordar esta temática en próximos viernes y aprender juntos al respecto, ustedes dirán! ;)

Algunos recursos útiles:

  • Codex WordPress: (aquí encontrarás la más completa información sobre todo el funcionamiento de WP desde la fuente oficial – info en Inglés).
  • Videotutorial sobre creación de themes: (un videotutorial realizado por Emilio García – Piensaenpixel – explicandocomo crear un theme WordPress paso a paso).
  • SandBox theme: (es un tema para WP ya programado pero absolutamente sin estilos CSS para que nos sirva para aprender navegando el código y/o para adaptar a nuestro diseño).

Artículo publicado también en: maestrosdelweb.com.


Si te gustó, comparte:
Y si fue de ayuda, puedes comprarme un café:
...ó la cena si quieres! ;)

Etiquetado como: , , , ,


Gravatar

Marcelo


Desarrollador web, trabajando desde Montevideo, Uruguay para todo el mundo. Me especializo en Diseño web, Maquetación HTML5 & CSS3, jQuery y Programación PHP & MySQL, e intento aprender un poco más cada día.

1 comentario, anímate y deja otro tú!

  1. adriel

    14. ago, 2011

    hola! muy bueno el post pero tengo un problemilla: los no me muestran las etiquetas, estan vacios. puedo hacerme una idea de donde van pero es incomodo y no se ciertamente si los ubico en el lugar correcto mientras voy leyendo. salvo por este error, muy bueno el post!

Deja tu opinión