Lo que debemos de saber al momento de construir un theme para wordpress (snippets)

Si eres o quieres ser un diseñador o desarrollador de themes para wordpress hay ciertas cosas que debes de tener en cuenta, hablo de algunas etiquetas o tags y uno que otro código que debemos de tener presente al momento de afrontar el reto de armar un theme para wordpress ¿para qué sirve esta etiqueta?, ¿donde coloco este tags?, ¿qué puedo hacer con este codigo?, ¿donde ira esto?, vamos a tratar de explicar y de mostrate lo que debemos saber para componer un theme funcional para wordpress.

En un tutorial pasado creamos un theme para wordpress desde cero, en este tutorial veremos qué función cumplió 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 este tema de creación de theme para wordpress es el CODEX que contiene toda la documentación oficial. http://codex.wordpress.org/

1 – La estructura de un Theme para WordPress

A continuación te mostrare cuales son los archivos bases para armar este theme, estos son de un theme estándar básico, hay themes que suelen tener muchos archivos, esto dependerá que tan versátil y funcional la requieras.

style.css : Esta es la hoja de estilo principal, contiene también en su encabezado la información del theme.

index.php : Es la plantilla principal siempre debe de estar presente junto a style.css

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 en fin..

sidebar.php: Este archivo contiene la información de la barra lateral de nuestra web, pueden ser 2 dependerá de tu proyecto.

footer.php : En el footer cerramos el html y colocamos la información del pie de página para nuestra web.

single.php : Este es el archivo que muestra el post o articulo solo, nos amplia el post y podemos comentarlo.

page.php : Este es el archivo que utilizamos cuando queremos mostrar una página para algo especifico en wordpress.

comments.php : Archivo donde mostramos la parte de los comentarios, el formulario para que las personas puedan comentar el post.

search.php : Este archivo se muestra cuando obtenemos los resultados de una búsqueda por medio del buscador interno de wordpress.

functions.php : Este archivo no sirve para mostrar contenido, sino más bien para añadir funcionalidad y alterar la forma en el contenido se crea y se visualiza, podemos añadir funciones especiales a nuestro theme de wordpress por medio de este archivo.

404.php : Este es el archivo que se muestra cuando no se encuentra alguna consulta o cuando los links no coinciden o cuando entramos a un link de nuestra web que no existe, esta es la pagina de error.

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

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

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.

<?php bloginfo(‘name’); ?> : Sirve para mostrar el titulo del blog.

<?php bloginfo(‘charset’); ?> : Muestra el conjunto de caracteres que la web o blog esta usando (por ejemplo: UTF-8).

<?php bloginfo(‘description’); ?> : Muestra la descripción del blog.

<?php bloginfo(‘admin_email’); ?> : Muestra el email del administrador de la web.

<?php bloginfo(‘url’); ?> : Muestra la dirección URL de la web.

<?php bloginfo(‘rss2_url’); ?> : Muestra la URL del RSS.

<?php bloginfo(‘template_url’); ?> : Muestra la dirección URL de la plantilla Ej: http://website/home/wp/wp-content/themes/mi-theme.

<?php bloginfo(‘version’); ?> : Muestra la version actual del wordpress.

<?php bloginfo(‘pingback_url’); ?> : Muestra la dirección URL pingback.

<?php bloginfo(‘stylesheet_url’); ?> : Muestra o nos lleva a la dirección URL del archivo css de nuestro Theme.

<?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

Tags o Etiquetas comunes de WordPress

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

< ?php the_date() ?> : Muestra la fecha de la publicacion del post.

<?php the_title(); ?> : Muestra el titulo de la entrada.

<?php the_permalink() ?> : Muestra la dirección URL para el enlace permanente de la entrada.

<?php the_category() ?> : Muestra la categoria a la que pertenece el post o entrada.

<?php the_author(); ?> : Muestra el Autor del post o articulo.

<?php the_ID(); ?> : El ID especifica la identificación de un post o una página.

<?php wp_list_pages(); ?> : Muestra la lista de todas las páginas.

<?php wp_tag_cloud(); ?> : Muestra los tags de el blog.

<?php wp_list_cats(); ?> : Muestra la lista de todas las categorias.

<?php get_calendar(); ?> : Muestra un calendario.

<?php wp_get_archives() ?> : Muestra la lista de archivos organizados por fecha de publicación.

<?php posts_nav_link(); ?> : Muestra la navegación de la página anterior y siguiente.

<?php next_post_link() ?> : Muestra un link con los post recientes.

<?php previous_post_link() ?> : Muestra un link con los post anteriores.

Tags del Loop de WordPress

El loop es uno de los Fragmentos de código más importante que tiene que haber en nuestro theme, ya que de el depende el real y normal funcionamiento de nuestra web o blog, ya que el se encarga de gestionar y mostrar el contenido. A continuación los Tags base del loop.

<?php if(have_posts()) : ?> : Chekea si hay post en la base de datos.

<?php while(have_post()) : the_post(); ¿> : Muestra el post, si los posts están disponibles.

<?php the_content(); ?> : Muestra el contenido del post.

<?php endwhile; ?> : Cierra la función que va directamente con mostrar el post.

<?php endif; ?> : Cerramos el Loop en general.

En el tutorial donde creamos un theme desde cero, vimos como armar un Loop completamente, con sus funciones basica: http://www.tutosytips.com/creacion-de-un-theme-para-wordpress-index-php/

Para una completa información acerca del Loop te redirijo al codex: http://codex.wordpress.org/The_Loop

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 varios archivos para formar un archivo más completo.

<?php get_header(); ?> : Incluimos el archivo header y todas sus opciones.

<?php get_footer(); ?> : Incluimos el archivo footer o pie de pagina y todas sus opciones.

<?php get_sidebar(); ?> : Incluimos el archivo sidebar o barra lateral y todas sus opciones.

<?php get_template_part(); ?> : Incluimos archivos personalizados del theme.

<?php get_search_form(); ?> : Insertamos este archivo que contiene el formulario de busqueda.

<?php comments_template(); ?> : Incluimos el archivo que muestra la opción para comentar.

Podemos Incluir muchos archivos mas, esto dependerá de cuales estemos utilizando en nuestro proyecto.

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

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.

is_home() : Cuando estamos en el home o inicio de la pagina.

is_front_page() : Cuando estamos en el front de la web o blog que generalmente es el home.

is_single : Cuando estamos en la pagina individual del post.

is_page() : Cuando estamos en una pagina.

is_category() : Cuando estamos mostrando una categoria.

Estos son los más comunes, para una mayor información: http://codex.wordpress.org/Conditional_Tags

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

Como dije anteriormente, contamos con mucho código, snippers, tags o etiquetas para construir un theme o widget para wordpress, contamos con todo para armar y construir nuestros proyectos a nuestra necesidad y requerimientos, solo recuerda que en todo momento contamos con el CODEX, que es el mejor amigo del diseñador o desarrollador de themes para wordpress.

Nos vemos en otro tutosytips.

About the author

Johan Ricardo Niebles. Administrador y creador de este blog, Front-end (HTML + CSS + JS).con mas de 4 años de experiencia en el magico mundo web. Johan Ricardo

1 Respuesta

  1. Juninho dice:

    Good to see real expertise on display. Your contribtuoin is most welcome.