Si eres o quieres ser un diseñador o desarrollador de temas para wordpress hay ciertas cosas que debes de tener en cuenta, como  las etiquetas o tags y  código que debemos de tener presente al momento de afrontar el reto de armar un tema para wordpress. Vamos a tratar de explicar y  mostrarte lo que debemos saber para construir un theme funcional para wordpress.

En este tutorial veremos qué función cumple cada tag o etiqueta y cada fragmento de código.

Bueno antes de empezar tengo que decir que el lugar ideal para saber todo lo relacionado a la creación de temas para wordpress es el CODEX, que contiene toda la documentación oficial. http://codex.wordpress.org/.

1 – Estructura de un tema para WordPress

A continuación te muestro cuales son los archivos base para armar el tema estándar básico. Hay temas que suelen tener muchos mas archivos, y esto dependerá de lo completa y funcional  quieres que sea el tema. Los archivos básicos necesarios:

  1. style.css : Esta es la hoja de estilo principal, contiene también en su encabezado la información del tema.
  2. index.php : Es la plantilla principal siempre debe de estar presente junto a style.css.
  3. header.php : Contiene toda la información del head de un html, el DOCTYPE, las etiquetas meta, el titulo de la web, dirección a la hoja de estilos etc.
  4. sidebar.php: Este archivo contiene la información de la barra lateral de nuestra web, pueden ser varios y dependerá de tu proyecto.
  5. footer.php : En el footer cerramos el html y colocamos la información del pie de página para nuestra web.
  6. single.php : Este es el archivo que muestra el post o articulo.
  7. page.php : Este es el archivo que utilizamos cuando queremos mostrar una página para algo especifico en wordpress.
  8. comments.php : Archivo donde mostramos la parte de los comentarios, el formulario para que las personas puedan comentar el post.
  9. search.php : Este archivo se muestra cuando obtenemos los resultados de una búsqueda por medio del buscador interno de wordpress.
  10. functions.php : Este archivo no sirve para mostrar contenido, sino más bien para añadir funcionalidad y alterar la forma en el que el contenido se crea y se visualiza, podemos añadir funciones especiales a nuestro tema de wordpress por medio de este archivo.
  11. 404.php : Este es el archivo que se muestra cuando no se encuentra alguna consulta o  cuando entramos a un link de nuestra web que no existe, es la pagina de error.

wordpress

Pueden existir muchos más (date.php, author.php, tag.php, category.php etc…), esto dependerá de las exigencias de tu proyecto.

Mas Informacion: http://codex.wordpress.org/Theme_Development

2. Bloginfo Tags – Etiquetas de Informacion

Las siguientes etiquetas se utilizan para mostrar información de la pagina web o blog. Estos tags suelen ir en el header.php y se pueden personalizar en el panel de administración de wordpress.

  1. <?php bloginfo(‘name’); ?> : Sirve para mostrar el titulo del blog.
  2. <?php bloginfo(‘charset’); ?> : Muestra el conjunto de caracteres que la web o blog esta usando (por ejemplo: UTF-8).
  3. <?php bloginfo(‘description’); ?> : Muestra la descripción del blog.
  4. <?php bloginfo(‘admin_email’); ?> : Muestra el email del administrador de la web.
  5. <?php bloginfo(‘url’); ?> : Muestra la dirección URL de la web.
  6. <?php bloginfo(‘rss2_url’); ?> : Muestra la URL del RSS.
  7. <?php bloginfo(‘template_url’); ?> : Muestra la dirección URL de la plantilla Ej:http://boulevard/wp/wp-content/themes/mi-theme.
  8. <?php bloginfo(‘version’); ?> : Muestra la version actual del wordpress.
  9. <?php bloginfo(‘pingback_url’); ?> : Muestra la dirección URL pingback.
  10. <?php bloginfo(‘stylesheet_url’); ?> : Muestra o nos lleva a la dirección URL del archivo css de nuestro Tema.
  11. <?php bloginfo(‘wpurl’); ?> : Muestra la dirección URL para la instalación de WordPress.

Para mas información de los tags Bloginfo: http://codex.wordpress.org/Function_Reference/bloginfo

WordPress tiene una gran cantidad de código o snippets que podemos utilizar en la creación de un tema. A continuación te presento los principales y los más utilizados, y por supuesto en el CODEX de wordpress tendrás la información más completa.

wordpress1

3. Snipets que podemos utilizar para crear un tema

  1. < ?php the_date() ?> : Muestra la fecha de la publicacion del post.
  2. <?php the_title(); ?> : Muestra el titulo de la entrada.
  3. <?php the_permalink() ?> : Muestra la dirección URL para el enlace permanente de la entrada.
  4. <?php the_category() ?> : Muestra la categoria a la que pertenece el post o entrada.
  5. <?php the_author(); ?> : Muestra el Autor del post o articulo.
  6. <?php the_ID(); ?> : El ID especifica la identificación de un post o una página.
  7. <?php wp_list_pages(); ?> : Muestra la lista de todas las páginas.
  8. <?php wp_tag_cloud(); ?> : Muestra los tags del blog.
  9. <?php wp_list_cats(); ?> : Muestra la lista de todas las categorias.
  10. <?php get_calendar(); ?> : Muestra un calendario.
  11. <?php wp_get_archives() ?> : Muestra la lista de archivos organizados por fecha de publicación.
  12. <?php posts_nav_link(); ?> : Muestra la navegación de la página anterior y siguiente.
  13. <?php next_post_link() ?> : Muestra un link con los post recientes.
  14. <?php previous_post_link() ?> : Muestra un link con los post anteriores.

El loop es uno de los Fragmentos de código más importantes que contiene cualquier tema, ya que de el depende el funcionamiento de nuestra web o blog, y se encarga de gestionar y mostrar contenido. A continuación los Tags base del loop.

4. Etiquetas de Loop de WordPress

  1. <?php if(have_posts()) : ?> : Chekea si hay artículos en la base de datos.
  2. <?php while(have_post()) : the_post(); ?> : Muestra el post, si los posts están disponibles.
  3. <?php the_content(); ?> : Muestra el contenido del post.
  4. <?php endwhile; ?> : Cierra la función que va directamente con mostrar el post.
  5. <?php endif; ?> : Cerramos el Loop en general.

Para una completa información acerca del loop:

 http://codex.wordpress.org/The_Loop

wordpress2

5. Los include tags

Estos tags se utilizan para llamar o incluir otros archivo .php en un solo archivo, por ejemplo en el index, donde llamamos a varios archivos para formar un archivo más completo.

  1. <?php get_header(); ?> : Incluimos el archivo header y todas sus opciones.
  2. <?php get_footer(); ?> : Incluimos el archivo footer o pie de pagina y todas sus opciones.
  3. <?php get_sidebar(); ?> : Incluimos el archivo sidebar o barra lateral y todas sus opciones.
  4. <?php get_template_part(); ?> : Incluimos archivos personalizados del theme.
  5. <?php get_search_form(); ?> : Insertamos este archivo que contiene el formulario de busqueda.
  6. <?php comments_template(); ?> : Incluimos el archivo que muestra la opción para comentar.

Podemos Incluir muchos archivos mas, esto dependerá de cuales sean nuestras necesidades en nuestro proyecto.

Para una completa información acerca de los include tags: http://codex.wordpress.org/Include_Tags

5. Conditional tags o etiquetas condicionales

Estas etiquetas condicionales las podemos utilizar para personalizar la forma en la que el blog va a tener su funcionamiento. Ejemplo: is_home() para indicar la condicional si estamos en el home de la web o blog.

  1. is_home() : Cuando estamos en el home o inicio de la pagina.
  2. is_front_page() : Cuando estamos en el front de la web o blog que generalmente es el home.
  3. is_single() : Cuando estamos en la pagina individual del post.
  4. is_page() : Cuando estamos en una pagina.
  5. is_category() : Cuando estamos mostrando una categoria.

Estos son los más comunes, para una mayor información:

http://codex.wordpress.org/Conditional_Tags

—————————————–

Hay mucho código, snippets, tags o etiquetas para construir un tema o widget para wordpress, y siempre recuerda que en todo momento contamos con el CODEX, que es el mejor amigo del diseñador o desarrollador de temas para wordpress.