WP desde cero (2): primeros pasos

En esta entrada prepararemos los dos primeros archivos que necesitará el tema de WordPress: style.css e index.php

Roy Lichtenstein

archivado en: WordPress / 27 noviembre, 2012 / taller:

En esta segunda entrada de la serie dedicada a WordPress básico vamos a ir preparando ya algunos archivos, pero antes es importante recordar cómo funciona PHP.

WordPress está programado en PHP, pero son tantas las clases y funciones propias que podríamos hablar de WordPressiano, al igual que la librería jQuery es casi como un lenguaje por sí mismo, a pesar de que es JavaScript.

Las instrucciones de PHP  y, por lo tanto, de WordPress que se incluyen en una página van entre los signos de apertura y cierre <?php ?>.

  • <h1>Soy código HTML</h1>
  • <?php soy una instrucción en php/wordpress; ?>
  • <p>Soy más código HTML<p>

El código PHP/Wordpressiano no llega nunca al ordenador cliente, sino que se ejecuta en el servidor y, en esencia, lo que hace es conectarse a una base de datos, sacar de ahí determinada información y devolverla traducida a HTML insertada en el resto de la página.

Y dicho esto, vamos ya a preparar los primeros archivos de nuestro tema  😆

Primeros pasos

En el archivo style.css es donde se indican de forma natural los estilos del tema. Y por natural debe entenderse que es donde el motor de WordPress buscará primero los CSS de un tema.

Aunque no es necesario, es mejor empezar con unas hojas de estilo reseteadas, así que lo primero que haremos será bajarnos la página normalize.css y renombrarla llamándola  style.css.  (Se puede usar cualquier otra plantilla de base si se prefiere, como la de Erik Meyer).

Además, es importante empezar este archivo con un encabezado (comentado1) con los datos básicos del tema:

  • /*
  • Theme Name: El nombre del tema
  • Theme URI: La URL del repositorio del WordPress donde está subido
  • Author: Nombre del autor
  • Author URI: URL del autor
  • Description: descripción (Un tema en blanco, realizado en HTML5, con fines didácticos...)
  • Version: La versión.
  • License: La licencia. (Por lo general, GNU General Public License)
  • Tags: tags que lo describen (html5, sidebar, microdatos...)
  • */

En los demás archivos o no se pone nada o basta con un encabezado sencillo, algo así:

  • <?php
  • /* index.php
  • @package WordPress
  • @subpackage nombre de nuestro tema
  • */ ?>

Una vez preparado style.css, lo guardamos en una carpeta con el nombre que le vayamos a poner al tema. Este nombre no debe contener caracteres atípicos (acentos, eñes, arrobas...) ni espacios en blanco y debe escribirse en minúsculas. Si contiene más de una palabra, se pueden separar con guiones bajos o con normales: mi_tema, mi-tema. Por ejemplo, para esta práctica, estoy creando un tema llamado mmfilesi-bones.

El siguiente archivo que vamos a preparar es index.php, en el cual vamos a escribir de momento solo unos datos básicos:

  1. <?php
  2. /*
  3. * @package WordPress
  4. * @subpackage mmfilesi-bones
  5. * @since mmfilesi-bones 1.0
  6. */
  7. ?><!DOCTYPE html>
  8. <html>
  9. <head>
  10. <title>
  11. </title>
  12. <!-- CSS -->
  13. <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
  14. </head>
  15. <body>
  16. Soy un tema en blanco
  17. </body>
  18. </html>

En la línea 13, como vemos, no he llamado a las hojas de estilo de una forma normal, sino que en la url he escrito un fragmento en php:

  • <?php bloginfo( 'stylesheet_url' ); ?>

Esta es la quintaesencia de WordPress, usar funciones2 para definir datos dinámicos. La función que estamos usando en este caso es bloginfo() y sirve para recuperar datos especificados en los ajustes generales. Enviando como argumento stylesheet_url obtenemos la url de la hoja de estilo. Es decir,  bloginfo( 'stylesheet_url' ); devuelve como resultado algo así:

http://www.midominio.com/wp/wp-content/themes/nombre-del-tema/style.css

Otros argumentos importantes que podemos usar con bloginfo() son:

  • name = devuelve el nombre (p.e. The Bit Jazz Band).
  • description = la descripción (Just another WordPress).
  • blog admin_email = el correo del administrador.
  • language = el lenguaje indicado por decto (p.ej. es-ES).
  • stylesheet_directory = el directorio donde está guardada la hoja de estilo (el raíz del tema).
  • stylesheet_url = la ruta de la hoja de estilo (style.css).
  • template_directory =  el directorio donde está el tema.
  • atom_url = para la redifusión atom (http://midominio.com/feed/atom)
  • rss_url = para las rss (http://midominio.com/feed/)

Bueno, pues con esto ya tendríamos listos los cimientos del tema. Guardamos los dos archivos (style.css e index.php) en una carpeta con el nombre del tema y la subimos al directorio de temas de WordPress. Lo activamos y ya tendríamos nuestro primer tema operativo, aunque de momento solo se vea en pantalla la frase «Soy un tema en blanco».

De momento vamos a dejarlo aquí 😉 .

Abrazos++; 

ver todas las entradas de esta serie 

Notas

1. Para comentar un fragmento del código de un archivo .css se pone entre los signos /* texto comentado */.

En HTML, <!-- texto comentado -->

Y en PHP o bien con dos barras si es una sola línea // o como los comentarios en css.

2. Una función es un conjunto de instrucciones indicadas entre llaves:

  • soy_una_funcion () {
  • instrucción 1;
  • instrucción 2;
  • }

Las funciones se pueden llamar en cualquier parte del código. Por ejemplo, mediante la instrucción return esta función devuelve la cadena de texto "soy una función":

  • soy_una_funcion () {
  • return "soy una función";
  • }

Así, si en una página escribiéramos

  • soy_una_funcion();

Obtendríamos el texto mencionado. Además, en el paréntesis que sigue al nombre de la función se pueden indicar parámetros que afectan al conjunto de instrucciones. Estos parámetros se denominan argumentos. 

3. Observa cómo todas las sentencias de PHP terminan siempre en punto y coma.

|| Tags:

valoración de los lectores sobre WP desde cero (2): primeros pasos

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • 4.5 sobre 5 (12 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

4 respuestas a “WP desde cero (2): primeros pasos

  1. Genial campeón. Por fin encontré un blog como la gente donde pueda aprender y profundizar todo lo referido a WordPress. Ahora estoy siguiendo al pie de la letra (con algunas modificaciones, obviamente) todo este “curso/turorial”. Abrazos y éxitos! Genial todo!