Diseñar temas para wordpress
De: http://www.512megas.com/2006/04/05/how-to-hacer-un-tema-para-wordpress-i/
How To: Hacer un tema para WordPress I
Por Jesús | Abril 4th, 2006
Ok… rapidito y funcional…
Necesitas conocer a fondo HTML, CSS y PHP.
Primero tienes que crear una carpeta para tu theme y ponerlo en la carpeta wp-content/themes/.
Después creas un archivo llamado style.css y un archivo llamado index.php.
style.css
En el archivo style.css copias el siguiente código:
/*
Theme Name: 512Megas
Theme URI: http://www.512megas.com/theme/
Description: Theme para el proyecto 512Megas.com
Version: 3.0
Author: Jesus Sanchez
Author URI: http://jesus.512megas.com
*/
Ese código ayudará a WordPress a identificar tu theme, no olvides cambiar los datos que están ahí con los datos de tu theme (ubicación del theme, descripción, versión, autor y url del autor, respectivamente).
Después de eso escribirás todo el CSS que quieras.
Los archivos
WordPress funciona más o menos como en esta imagen lo muestro:
Ok, el archivo index.php se carga de llamar al archivo header.php, luego procesa el loop (o muestra el/los post/posts), después llama al archivo sidebar.php y por último al footer.php
Ahora crea un archivo html (ponle cualquier nombre, es solo para tomarlo como base), ahí escribirás el código de cualquier blog, como se te venga a la mente. Te propongo el siguiente ejemplo: ejemplo de blog en html.
Fíjate en los comentarios, está comentado y puedes dividir de esa forma tu theme. Pon mucha atención en la lógica de WordPress y la semántica de tu theme, en especial, en los archivos header.php y footer.php, porque ellos abren y cierran contenedores generales.
Cortas cada parte de tu archivo de muestra y lo pegas en su archivo correspondiente (header.php, sidebar.php, footer.php).
El archivo single.php será como el index.php, solo que single.php solo se usará cuando alguien lee un post. De hecho, puedes usar el index.php siempre, pero mejor lo dividimos, porque si no lo haces, el código no será entendible.
Programando el Theme
Hasta este punto, ya tienes armado el theme para la página principal, es decir, ya tienes listo el archivo index.php, header.php, sidebar.php y footer.php. El problema es que [hasta ahora] no muestra los posts reales, sino dos posts con texto ‘lorem-ipsum’.
Header.php
En el archivo header.php no van a haber muchos cambios. Mira la siguiente imagen (click para agrandar) y checa el código, porque en seguida explicaré para qué sirve cada tag de WordPress.
Bueno, no voy a explicar nada de lo de HTML, solo el código PHP, los cuales son tags de WordPress (Template tags), que están entre etiquetas de apertura y cierre de php (<?php y ?>).
Primero en la etiqueta <title>, se muestra la etiqueta de template (wp-tag, de ahora en adelante, para no confundirnos con tags html 
), bloginfo(’name’). Esta wp-tag muestra el nombre del blog. De hecho, esta wp-tag muestra información del blog, solo tienes que pasarle la info que necesitas (en este caso, name, mira la página dedicada a bloginfo en el codex de wordpress).
También hay un trozo de programación (un if) en la línea 8, traducido al castellano, eso sería: “si el visitante está en la página principal, imprime la descripción del blog”. Aquí vemos una vez más la wp-tag bloginfo. Aunque hay una nueva, llamada is_home, esta es parte de las etiquetas condicionales de WordPress, devuelve ‘true’ si el visitante se encuentra en la página principal, devuelve false en caso contrario. Esta línea de código es una simple ayudadita para el posicionamiento (para no mostrar la descripción en todo el sitio, sino solo en la página principal).
En la siguiente wp-tag (línea 11) les voy a quedar mal, no estoy completamente seguro de la función de esta etiqueta, lo único que sé es que va siempre en el archivo header.php (no sé si solo ahí o en otras partes también).
En el último bloque de código hay wp-tags que ya hemos visto (bloginfo name y bloginfo description), solo hay una nueva… get_settings es una wp-tag parecida a bloginfo, aunque un poco más compleja, obtiene opciones administrativas (de los plugins que instalas o de las opciones en la seccion ‘opciones’ de wordpress). Mira la página dedicada a get_settings en el codex de WordPress.
Index.php
Como vimos en la primera imagen, el archivo index.php se encargará de llamar al header.php, sidebar.php, footer.php y llamar a los N posts (donde N es igual a los posts que tú quieres mostrar, los asignas en la páginan opciones de tu WordPress).
En la línea 1 aparece la wp-tag get_header(), la cual llama e incluye al archivo header.php. En el archivo principal se encuentra algo que la gente de WordPress llamó ‘loop’ (ciclo), el cual es un bucle (ciclo) que se repite para cada post. En pocas palabras, es una estructura para cada post.
Como se puede ver en los comentarios del código de la imagen anterior, el loop inicia en la instrucción if(have_posts()): while(have_posts()):the_post(); y después inicia lo que mencioné antes, la estructura de cada post. El número de posts que se muestran se cambian en la página ‘opciones’, en la pestaña ‘lectura’.
Explico las wp-tags que están en el loop. Primeramente, notar en la línea 10, hay 2 wp-tags:
- the_permalink();
- the_title();
Estas wp-tags son para los posts, la primera muestra el enlace permanente (http://www.dominio.com/post) y la otra muestra el título del post (x&y).
Después, en la línea 12 encontramos the_content(), con un parámetro de tipo cadena, la cual se imprime solo cuando no se muestra toda la entrada en la página principal, y se tiene que ir a un post en partícular para poder leerla completa. Ah sí, the_content() imprime el contenido de la entrada (el texto formateado en párrafos, las listas, imagenes, etc).
En seguida, en la línea 14 y 15 encontramos wp-tags también para posts. La primera, the_category() imprime la/s categoría/s en las que está incluida la entrada, al igual que the_title, se le pasa un parámetro tipo cadena, la cual se imprime entre cada categoría, es un separador pues.
La segunda (edit_post_link) imprime un enlace que solo el autor de la entrada y/o administrador del blog pueden ver. Se le pasan 3 parámetros, el primero es la palabra que se va a imprimir en el enlace, el segundo es lo que quieres imprimir antes y la tercera, lo que quieres imprimir después; generalmente se imprimen etiquetas html.
OJO con estos últimos 2 parámetros. WordPress usa mucho este tipo de wp-tags, es decir, les puedes asignar una etiqueta HTML para que se imprima antes o después del item. Por ejemplo, en el caso de la wp-tag anterior: edit_post_link().. si le pasamos los parámetros (’Editar’,’<li>’,’</li>’), generará un enlace para editar el post con el siguiente código:
<li><a href=”http://dominio.com/wp-admin/edit.php?post=125″>Editar</a></li>
Ahi le seguimos en la próxima, porque la neta ya me cansé de ver este post en ‘borradores’.
También Lee
|
|
 | 9 julio 2008 en Informática | tags: Informática, wordpress |
