Toggle Menu
en | es

Creación de temas WordPress para diseñadores

Autor: Ezequiel Jaime | Fecha de publicación: 10/3/2016

Requerimientos

  • Conocimientos avanzados de HTML y CSS.
  • Conocimientos básicos de bases de datos MySQL (no excluyente)
  • Conocimientos básicos de PHP (no excluyente)
  • Servidor Apache instalado (XAMPP, WAMPP o cualquier de preferencia) ó tener un servicio de hosting con servicios de PHP y MySQL para trabajar directamente online.
  • Conocimientos básicos del uso del panel de manejo de contenidos de WordPress.
  • Ganas de leer y aprender, es largo pero traté de hacerlo lo más llevadero posible.

Introducción

Es la primera vez que escribo un tutorial de cualquier cosa y puede que sea la única vez pero considero que es necesario que haga éste “paso a paso” ya que los que encontré en internet, aunque me ayudaron muchísimo a entender esta plataforma y por ende estar hoy acá, estaban mayormente orientados a un público con conocimientos bastante avanzados de programación. Si bien en los requerimientos detallados arriba puse PHP y MySQL, la idea es que cualquier diseñador con conocimientos de maquetación web (HTML y CSS) pueda crear sus propios temas de WordPress a partir de cualquier diseño creado en Photoshop o con cualquier otro tipo de herramienta gráfica. Empecemos…

¿Qué es WordPress?

Muchos ya lo sabrán pero para aquellos que no, WordPress es un plataforma web con manejo de contenido (CMS) a través de un panel de administración. Originariamente se creó para bloggers pero se popularizó tanto permitiendo además, gracias a su condición de código abierto, que cualquier persona con los conocimientos necesarios pudiera crear themes, plugins y widgets (temas, extensiones y mini web apps) ofreciendo un sin límite de posibilidades. Hoy en día, su flexibilidad, la cantidad de extensiones que permite instalar y su interfaz de administración dentro de todo sencilla, la hace una de las herramientas más elegidas para desarrollo de webs. Si bien sus pares como Joomla o Drupal son más potentes y seguras, son bastante más complejas para diseñadores con poco conocimiento de programación.

¿Cómo está compuesta?

WordPress es una aplicación web conformada por archivos html, php, css, javascript e imágenes (gif, png, jpg, etc.) la cual se puede desmembrar en:

  • Núcleo: La aplicación web en sí que permite el funcionamiento de todo el resto
  • CMS: Panel de administración dónde se carga y/o actualiza el contenido multimedial (texto, imágenes, videos, formularios, etc.) de nuestro sitio. También es dónde podemos instalar plugins y widgets que agregaran funcionalidades extras y donde además podemos instalar temas y editarlos según nuestras necesidades visuales y/o funcionales.
  • Tema: Es un subconjunto de archivos html, php, css, javascript e imágenes agrupados en una carpeta específica y encargados mayormente de darle identidad visual a nuestro sitio web. Particularmente éste ítem es el cual vamos a profundizar en éste tutorial.
  • Agregados: Extensiones y mini web apps que permiten sumarle funcionalidades a nuestro sitio.
  • Base de datos: Es dónde se guarda toda la información de nuestro sitio, tanto de contenido como de agregados instalados.

¿Cómo funciona?

Básicamente, se trata de cargar contenidos a través del panel de administración, los cuales se alojan en la base de datos y que finalmente se verán reflejados en nuestro sitio y de la manera que nuestro tema activo lo permita. Se puede cambiar de tema pero el contenido siempre se mantiene, por lo menos hasta que nosotros mismos lo eliminemos y/o modifiquemos. En conclusión, nuestro contenido puede adoptar diferentes formas de visualizarlo dependiendo del tema y de los agregados que tengamos activos desde el panel de administración.

Creación de nuestro tema

Primero que nada, asumo que ya tienen WordPress instalado, ya sea localmente en un servidor apache o en un servicio de hosting. Si no es el caso, les voy a dejar unos links para empezar por eso:

  1. Si van sólo a practicar la creación de temas les recomiendo que lo hagan localmente, acá hay un tutorial completo de como instalar XAMPP y WordPress:
    https://devcode.la/tutoriales/como-instalar-wordpress-en-xampp/
  2. Si van crear una página para publicar en línea, les conviene hacerlo directamente en su hosting, ya que la migración suele ser un poco engorrosa. La instalación de WordPress en su hosting depende del proveedor, pero básicamente es como lo explica este tutorial:
    http://www.uncommunitymanager.es/instalar-WordPress/

Antes de ponernos a diseñar nuestra plantilla, es necesario conocer la estructura básica que nos propone WordPress. Cualquier tema que creemos, mínimamente va a necesitar los siguientes archivos:

  • Página de inicio (index.php): Éste archivo va a determinar nuestra plantilla predeterminada para cualquier entrada (post) o página (page) que creemos en nuestro panel de administración. Compila además en su cuerpo los diferentes módulos detallados a continuación.
  • Encabezado (header.php): El encabezado es un módulo destinado usualmente para el nombre o isologo/logo del sitio, el menú de navegación principal y alguna imagen destacada que queramos usar.
  • Contenido (the-loop.php): Éste módulo es el encargado de mostrar el contenido de entradas (posts) o páginas (pages) creadas. WordPress automáticamente reconoce el tipo de contenido y como debe mostarlo:
    1. Página: Utilizado generalmente para contenido específico, es decir, aquel que puede actualizarse con el tiempo pero su propósito es siempre el mismo, por ejemplo, la página de contacto.
    2. Entradas: Este formato es el típico de blog, en donde cada entrada (post) que creemos, se cargará en nuestra plantilla en el orden que especifiquemos (de manera predeterminada, del más nuevo al más antiguo), una sobre la otra. Ejemplo: una sección de noticias.

      Ambas opciones se pueden combinar, es decir, podemos tener un sitio web con una o varias páginas y/o con una o varias secciones en formato de entradas.
  • Pie de página (footer.php): El pie de página de un sitio en el cual podemos agregar el menú de navegación principal o algún otro menú, información extra del sitio y/o autor, etc.
  • Funciones (functions.php): Éste archivo va a compilar un grupo de funciones codificadas en php que van a definir qué cosas va a poder hacer nuestro tema. No se preocupen, la mayoría de lo que necesitamos ya fue creado por el equipo de WordPress, es sólo cuestión de agregar lo que necesitemos en éste archivo.

Obviamente, el contenido de cada módulo no es excluyente, inclusive en un futuro y cuando estemos más idóneos en la creación de temas de WordPress, podremos agregar nuestros propios módulos personalizados. Pero para comenzar éstos son los que necesitamos (index.php, header.php, the-loop.php, footer.php y functions.php).

Además de los módulos anteriores, también necesitamos nuestra hoja de estilos:

  • Estilos (style.css): Nuestra hoja CSS que dará forma a nuestro tema acorde a nuestro diseño.

Sabiendo todo esto, ponemos manos a la obra.

Paso 1 - Diseño

Diseñamos nuestra web con la herramienta gráfica que se prefiera. Para éste tutorial elegimos un diseño simple utilizando sólo algunas de las funcionalidades básicas que WordPress nos ofrece, que no son pocas de hecho.

Ya con el diseño definido, lo siguiente será maquetarlo con HTML y CSS.

Paso 2 – Maquetado

En este tutorial se asume, como se comentó al inicio del mismo, que el lector tiene conocimientos avanzados de HTML y CSS. De no ser el caso, puede resultar un poco complejo de entender.

2.1 Creamos un nuevo documento HTML (yo lo nombré plantilla.html) con nuestro programa preferido, como Brackets, Dreamweaver, Notepad, etc. El código inicial sería algo así:

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sin-Título</title>
</head>

<body>
</body>
</html>

2.2 Creamos el encabezado que contendrá el logo y la imágen destacada dentro de las etiquetas <body></body>. Aprovechamos a cambiarle el título al documento también. Quedaría así:

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mi Sitio</title>
</head>

<body>
<header>
  <div id="nombre-logo"></div>
  <div id="imagen-destacada"></div>
</header>

</body>
</html>

Como ven, creamos la etiqueta "header" conteniendo dos divs, uno para el nombre o logo del sitio y el otro para la imágen destacada.

2.3 Procedemos de la misma manera con el menú de navegación, definiendo las secciones que deseemos.

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mi Sitio</title>
</head>

<body>
<header>
  <div id="nombre-logo"></div>
  <div id="imagen-destacada"></div>
</header>

<nav>
  <ul>
    <li>Inicio</li>
    <li>Acerca De</li>
    <li>Servicios</li>
    <li>Noticias</li>
    <li>Contacto</li>
  </ul>
</nav>


</body>
</html>

Agregamos la etiqueta “nav” para nuestro menú y dentro de de la misma creamos nuestras secciones en formato de lista. Es importante utilizar listas ya que WordPress trabaja de esa manera los menús de navegación.

2.4 Mismo procedimiento tanto para agregar el área de contenidos y el pie de página. El resultado final de nuestro HTML quedaría así:

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mi Sitio</title>
</head>

<body>
<header>
  <div id="nombre-logo"></div>
  <div id="imagen-destacada"></div>
</header>

<nav>
  <ul>
    <li>Inicio</li>
    <li>Acerca De</li>
    <li>Servicios</li>
    <li>Noticias</li>
    <li>Contacto</li>
  </ul>
</nav>

<div id="contenido"></div>

<footer></footer>

</body>
</html>

2.5 Listo nuestro HTML, procedemos a darle unos estilos básicos. Para eso creamos un documento css llamado style.css. Mantener éste nombre es importante para que WordPress reconozca nuestra hoja de estilo.

Los estilos a continuación son solamente de carácter demostrativo, son personales de cada diseñador/desarrollador.

html, body
  {
    margin:0;
    padding:0;
  }

body
  {
    font-family:sans-serif;
    color:#5f5a73;
  }

header, header #imagen-destacada
  {
    display:block;
    width:1000px;
    height:400px;
    background:#dbdcdf; /* sólo para visualizar en el maquetado */
  }

a:link, a:visited, a:hover, a:active
  {
    color:#5f5a73;
  }

header #nombre-logo
  {
    display:flex;
    position:absolute; /* posición absoluta para que se solape sobre la imagen destacada */
    z-index:2; /* la posición predeterminada en el eje Z es 1, para que se ubique por arriba de la imagen destacada definimos el Z como 2 */
    width:300px;
    height:150px;
    background:#c7c6d1; /* sólo para diferenciar en el maquetado */
    justify-content:center;
    align-items:center;
  }

nav
  {
    display:block;
    width:1000px;
    z-index:999; /* definimos un Z alto previendo un submenu desplegable que quede siempre por arriba de cualquier otro contenido */
    margin:20px 0;
    background:#dbdcdf; /* sólo para visualizar en el maquetado */
  }

nav ul
  {
    margin:0 auto;
    padding:0;
    text-align:center;
  }

nav ul li
  {
    list-style:none;
    display:inline-block;
    margin:0;
  }

nav ul li a
  {
    text-decoration:none; /* no me gusta el subrayado en el menú principal :) */
    padding:25px; /* Para centrar verticalmente en la barra de navegación y separar los items */
    display:block;
  }

nav ul li a:hover
  {
    background:#c7c6d1;
  }

#contenido
  {
    display:block;
    padding:25px;
    width:950px; /*el padding nos agrega 25px de cada lado, entonces al ancho le sacamos esos 50px para mantener el ancho de 1000px con el resto de la pagina*/
    min-height:500px; /* sólo para poder visualizar en el maquetado */
    background:#dbdcdf; /* sólo para visualizar en el maquetado */
  }

footer
  {
    display:block;
    width:1000px;
    padding:25px 0;
    margin:20px 0 0 0;
    background:#dbdcdf; /* sólo para visualizar en el maquetado */
    text-align:center;
  }

header, nav, #contenido, footer
  {
    margin-left:auto;
    margin-right:auto;
/* de esta manera centramos el contenido horizontalmente a nuestro navegador */
  }

Terminados nuestros estilos, enlazamos la hoja style.css dentro de las etiquetas <head></head> de nuestro HTML:

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="style.css" />
  <title>Mi Sitio</title>
</head>

<body>
<header>
  <div id="nombre-logo"></div>
  <div id="imagen-destacada"></div>
</header>

<nav>
  <ul>
    <li>Inicio</li>
    <li>Acerca De</li>
    <li>Servicios</li>
    <li>Noticias</li>
    <li>Contacto</li>
  </ul>
</nav>

<div id="contenido"></div>

<footer></footer>

</body>
</html>

Plantilla lista. Pueden descargar el maquetado de acá.

Paso 3 – Desglosado y Compilado

¿Recuerdan que anteriormente mencioné que WordPress trabaja con módulos? Bueno, de nuestro maquetado obtenemos la mayoría de los mismos. Lo que hacemos a continuación es crear los siguientes archivos:

  • index.php
  • header.php
  • the-loop.php
  • footer.php

Y los guardarmos todos en una nueva carpeta dentro de la carpeta temas de nuestro WordPress, por ejemplo: wordpress/wp-content/themes/misitio.

¿Por qué los nombres en inglés? Porque WordPress reconoce justamente esos nombres.

¿Por qué .php? Porque trabajamos con base de datos y con HTML únicamente, no podemos acceder ni cargar información a la misma.

De nuestro HTML original, plantilla.html en mi caso, cortamos el código de <header></header> y <nav></nav> y lo pegamos dentro de header.php.

En nuestro the-loop.php hacemos lo propio con el div “contenido”.

De igual manera, pegamos la etiqueta <footer></footer> en nuestro archivo footer.php.

Finalmente, todo el resto desde <!DOCTYPE html> hasta </html> lo pegamos dentro de index.php.

Se preguntarán para que les hice hacer todo en una plantilla en vez de crear los módulos directamente. Bueno, me pareció mejor armar la estructura unificada para una mejor comprensión, pero si se sienten con la capacidad para saltearse ese paso, adelante.

¿Por qué usar módulos en vez de todo junto? Hay partes en una web que se repiten y otras que varían, por ejemplo, la navegación se mantiene en todas las secciones mientras que el contenido va cambiando de sección en sección. Imaginen que crean un sitio con 30 páginas, y en cada html o php  de esas 30 páginas tiene la barra de navegación incluída y un buen día necesitan agregar o eliminar un ítem del menú, entonces tendrían que ir página por página editando la navegación. En cambio, “invocando” un mismo archivo externo en cada página, al modificar éste archivo se actualizaría automáticamente en nuestras 30 páginas. Básicamente, WordPress se trata de eso también, reutilizar partes a lo largo y a lo ancho de todo nuestro sitio web.

Explicado esto, continuemos con nuestro tema. Ya lo desglosamos, ahora hay que hacer que index.php compile de nuevo cada parte y las muestre como una sola cosa.

Si bien WordPress tiene funciones propias para “invocar” ciertos módulos, yo se los explico utilizando PHP puro.

Para los que no entienden nada de PHP, pueden leer de qué se trata acá: http://php.net/manual/es/intro-whatis.php. Si no tienen ganas, no importa, particularmente nosotros lo vamos a usar en nuestro tema para cargar contenido dinámico. Es importante saber que en un archivo .php podemos combinar html, css, javascript sin ningún problema. Otro dato no menor, es que "<?php" es el equivalente a "<" de html, es decir, el símbolo de apertura de código/etiqueta, de la misma manera que "?>" es el equivalente a ">".

En fin, no nos alejemos del punto y continuemos… ¿en qué estábamos? Ah sí… que nuestro index.php compile nuestros módulos, esto lo hacemos con la sentencia “include” y de la siguiente manera:

<?php include("nombre-archivo.php"); ?>

Utilizándolo en nuestro index.php y para incluir header.php quedaría así:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" type="text/css" href="style.css" />
  <title>Mi Sitio</title>
</head>

<body>

<?php include("header.php");?>

</body>
</html>
 

De la misma manera con the-loop.php y footer.php resultaría en:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" type="text/css" href="style.css" />
  <title>Mi Sitio</title>
</head>

<body>

<?php include("header.php");?>
<?php include("the-loop.php");?>
<?php include("footer.php");?>

</body>
</html>
 

Terminamos el desglose y compile. Pueden descargar este grupo de archivos de acá.

IMPORTANTE: Para poder testear que el index compile, tienen que hacerlo con un servidor apache (XAMPP, WAMPP, etc.), corriéndolo solamente desde el navegador es posible que no funcione.

Paso 4 – Implementación de WordPress

Ya tenemos nuestro tema terminado pero no es dinámico, es decir, cualquier contenido que carguemos en WordPress no se verá reflejado en nuestro tema. Para que funcione tenemos que crear nuestro archivo functions.php y definir qué características tendremos y además, editar nuestros módulos para que dejen de ser estáticos y pasen a ser dinámicos.

WordPress tiene funciones predeterminadas que nos facilitaran nuestro trabajo, con funciones me refiero a un grupo de instrucciones con un objetivo en particular. Estas funciones están compuestas por 2 partes: el código que "habilita" su funcionalidad, el cual agregaremos a nuestro functions.php, y el código que permite que utilicemos dicha función y podremos incluir en cualquiera de nuestros módulos (index.php, header.php, etc.) las veces que lo necesitemos.

Ejemplo:

<?php if ( function_exists( 'register_nav_menus' ) )
  {
    register_nav_menus(array('Main Nav' => __( 'Main Nav' )));
  }
?>

Al incluir éste código en nuestro functions.php, permitirá que nuestro tema tenga la funcionalidad de un Menu de navegación editable desde el panel de administración de WordPress. Nombramos a este menu "Main Nav".

Para agregar dicho menú en cualquiera de nuestros módulos usamos la siguiente línea:

<?php wp_nav_menu(array('theme_location' => 'Main Nav','container' => 'false'));?>
En caso de querer más de una navegación lo único que tienen que hacer es duplicar ambos códigos expresados arriba y reemplazar "Main Nav" por cualquier otro nombre.

También existen funciones simples que no necesitan ser declaradas en functions.php.

Ejemplo:

<?php the_post();?>

Esta línea sirve para identificar la páginas o entradas que agreguemos desde el panel de administración. Este es un tipo de función simple que podemos utilizar una o más veces en nuestros módulos.

Ejemplo de uso:

<div id="contenido">
  <?php the_post();?>
</div>

Resumiendo, en functions.php le informamos a WordPress que funcionalidades puede utilizar nuestro tema, y luego, las implementamos con su código correspondiente en el o los módulo(s) según nuestras necesidades.

Puede que a primera vista resulte apabullante pero les recomiendo que no traten de entender, por los menos al principio, cómo y de dónde vienen estas funciones. Solamente acepten que están listas para usar, alcanza con saber qué hace cada cosa y cómo implementarla.

A continuación les dejo un link para descargar un pdf con una tabla de algunas de éstas funciones, mayormente las que utilizaremos en la creación de nuestro tema. Les recomiendo que la impriman así la tienen siempre a mano para ir revisando los cambios que hacemos a nuestros archivos del tema.

Explicado y entendido (por lo menos eso espero), procederemos con la implementación de WordPress en nuestra plantilla o tema.

4.1 Procedemos creando functions.php y llenándola con las siguientes funciones (el texto seguido de // son comentarios para una  mejor comprensión, lo pueden copiar tal cual a su php ya que es la manera de comentar líneas):

<?php
// Comienza alta de menu de navegación
if ( function_exists( 'register_nav_menus' ) )
  {
    register_nav_menus(array('Main Nav' => __( 'Main Nav' )));
  }
// Termina alta de menú de navegación

// Comienza alta de imagen destacada
add_theme_support( 'post-thumbnails' );
// Termina alta de imagen destacada

// Comienza función de recorte de imagen destacada
add_image_size('featuredImageCropped', 1000, 400, true);
// El valor 1000 representa el ancho y el valor 400 el alto, lo pueden cambiar a su preferencia
// Termina función de recorte de imagen destacada

// Comienza alta de opción de Logo
// Esta función permite subir un logo o imagen, en caso de no existir ninguna se usa el nombre del sitio en formato de texto.
function branding_customizer( $wp_customize ) {
  $wp_customize->add_section( 'branding_section' , array(
    'title' => __( 'Logo' ),
    'priority' => 30,
    'description' => 'Cargue un logo a su sitio. Tamaño recomendado: 300px de ancho por 150px de alto',
// El tamaño de 300x150px puede cambiarse según su preferencia o diseño
  ) );
  $wp_customize->add_setting( 'branding' );
  $wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'branding', array(
    'label' => __( Logo ),
    'section' => 'branding_section',
    'settings' => 'branding',
  ) ) );
}
add_action( 'customize_register', 'branding_customizer' );
// Termina alta de opción de logo
?>

Listo, nuestro functions.php tiene lo que necesita para este tema sencillo: un menú, la opción de imagen destacada que la utilizaremos en el encabezado y la opción de logo que también pondremos en el encabezado.

4.2 Ahora es momento de empezar a modificar nuestros módulos, reemplazando nuestro contenido estático por las respectivas funciones de WordPress que permitirán editar dinámicamente desde el panel de administración.

4.2.1 Comencemos por nuestro index.php

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" type="text/css" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
  <title><?php bloginfo( 'name' ); ?> | <?php the_title(); ?></title>
  <?php wp_head();?>
</head>

<body>
  <?php include("header.php");?>
  <?php include("the-loop.php");?>
  <?php include("footer.php");?>

<?php wp_footer(); ?>
</body>
</html>

Lo que hicimos fue reemplazar el href de la hoja de estilo por su versión dinámica, esto permitirá que WordPress pueda ubicar los css sin problemas.

También cambiamos el texto "Mi Sitio" en la etiqueta de título y pusimos el código que muestra el nombre de nuestro sitio y el código de título de la página que se está visitando. Esto permitirá que cualquier cambio que hagamos desde el panel, se actualice al publicar dicho cambios.

Finalmente verán dos líneas: wp_head antes del cierre de la etiqueta "head" y, wp_footer antes del cierre del "body". Esto permite la edición directa en la previsualización de WordPress, al no incluirlos puede que nuestro tema no funcione correctamente.

4.2.2 Modificamos nuestro header.php

<header>
<div id="nombre-logo">
  <?php if ( get_theme_mod( 'branding' ) ) : ?>
    <a href="<?php echo get_home_url(); ?>">
      <img src="<?php echo esc_url( get_theme_mod( 'branding' ) ); ?>" />
    </a>
  <?php else : ?>
    <a href="<?php echo get_home_url(); ?>">
      <h1><?php bloginfo('name'); ?></h1>
    </a>
  <?php endif; ?>
</div>
<div id="imagen-destacada">
  <?php the_post_thumbnail('featuredImageCropped'); ?>
</div>
</header>

<nav>
  <?php wp_nav_menu(array('theme_location' => 'Main Nav','container' => 'false'));?>
</nav>

Acá metimos en el div  “nombre-logo” un montón de código, no se asusten, básicamente dice lo siguiente:
Si se subió una imágen, usarla, sino usar el título del sitio en formato de texto.
En el href de ambas opciones pusimos el código que trae la URL de nuestro sitio, entonces al hacerle click, nos llevará a nuestro inicio o home.

Luego, en el div “imagen-destacada” pusimos la línea que carga nuestra imágen destacada ya recortada al tamaño que hayamos decidido al declararla en functions.php.

Nota: La imágen destacada se agrega desde la edición de cada página o entrada en las opciones ubicadas a la derecha del panel de administracion de WordPress. Referencia visual

Finalmente, reemplazamos la lista del menú de navegación <ul>…</ul> por el código que carga nuestro menú WordPress.

4.2.3 Momento de modificar the-loop.php

<div id="contenido">
  <?php if (have_posts()) : while (have_posts()) : ?>
    <?php the_post();?>
    <h1><?php the_title();?></h1>
    <?php the_content();?>
  <?php endwhile; endif; ?>
</div>

Fácil, 5 líneas dentro de nuestro div de contenido, se podría leer básicamente así:
Si existe(n) página/entradas, entonces mostrarla(s).

La primer línea es el incio del bucle que repetirá las 3 líneas siguientes en el caso de formato de entradas (tipo blog). La segunda línea identifica el post o página; la tercera, carga su título y la cuarta, carga el contenido. Finalmente, la quinta y última línea da finalización al bucle.

4.2.4 Editamos el footer.php

Particularmente sólo voy a poner el típico texto de copyrights, ustedes modifiquen a gusto y piacere.

<footer>
  © <?php echo date("Y"); ?>. Todos los derechos reservados.
</footer>

Ese código es php puro y sirve para que el año se actualice automáticamente.

4.2.5 Finalmente agregamos un comentario al principio de style.css con la información del tema:

/*
Theme Name: Mi Tema
Theme URI: http://mitema.com/
Description: Tema sencillo con menú, imágen destacada y logo
Author: Juan Pérez
Author URI: http://lapaginadejuanperez.com/
Version: 1.0
License: GNU General Public License
License URI: Puede utilizarlo tanto en lo personal como comercialmente, es libre de editarlo a su gusto sin necesidad de referenciar al autor.
Tags: custom-menu, custom-featured-image, custom-branding
*/

Éste comentario en la hoja de estilo permite que WordPress identifique nuestro tema en las opciones de apariencia del panel de administración.

Hasta acá ya tendríamos nuestro tema listo para utilizar, pero ¿qué pasa si además pretendemos que algunas secciones sea vean diferentes al resto? Bueno, en ese caso es importante saber que un tema de WordPress permite además crear “plantillas” (templates), entendiendo como plantillas, opciones para visualizar el contenido de manera diferente entre nuestras páginas y/o entradas.

El index.php, por ejemplo, es la plantilla predeterminada, pero suponiendo que queremos estilizar algunas páginas diferente a las demás, podemos crear nuevas plantillas.

En mi caso quiero que se vea exactamente igual a la predeterminada pero que no muestre el pie de página o footer. Para lograrlo, procedemos según lo detallado a continuación.

4.3 Creación de una plantilla nueva

Lo que vamos a hacer, es duplicar nuestro index.php y renombrarlo, por ejemplo: sin-pie.php. Lo editamos eliminando la etiqueta "footer". Quedaría así:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" type="text/css" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
  <title><?php bloginfo( 'name' ); ?> | <?php the_title(); ?></title>
  <?php wp_head();?>
</head>

<body>
  <?php include("header.php");?>
  <?php include("the-loop.php");?>

<?php wp_footer(); ?>
</body>
</html>

Finalmente, hay que contarle a WordPress que sin-pie.php es una nueva plantilla, lo hacemos de la siguiente manera:

<?php
// Template Name: Predeterminada sin pie de página
?>


<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" type="text/css" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
  <title><?php bloginfo( 'name' ); ?> | <?php the_title(); ?></title>
  <?php wp_head();?>
</head>

<body>
  <?php include("header.php");?>
  <?php include("the-loop.php");?>

<?php wp_footer(); ?>
</body>
</html>

Terminado ésto, van a ver que en la creación/edición de páginas, en el menú desplegable de la derecha llamado "Plantillas" estará disponible la que acabamos de crear. Éste ejemplo es meramente demostrativo para explicar el uso de plantillas, ustedes podrán hacer los cambios que se les ocurra a cada una de las que creen.

Por último, y sólo si quieren, creen una captura de pantalla de su sitio de 880x660px, nómbrenla screenshot.png y tirenla en la carpeta de su tema. Esta imágen aparecerá en las opciones de temas de WordPress como miniatura de previsualizado.

¡Listo! Ya tienen su primer tema de WordPress terminado. Descarguen el grupo terminado de archivos de acá.

Ahora es sólo cuestión de acceder al panel de WordPress para comenzar a cargar nuestro contenido (en caso de no haberlo) y seleccionar nuestro nuevo tema en el menu "Apariencias".

Nota: De manera predeterminada, WordPress muestra como página inicial, las entradas. Para modificar ésto hay que acceder a las configuraciones de lectura, seleccionen la página estática que crearon como inicio y luego, la página que destinaron para mostrar las entradas. Referencia visual

Resultado

En un hosting gratuito, colgué la versión terminada con sólo contenido referencial, pueden acceder a la misma acá http://misitio.edusite.me/. Obviamente, sólo podrán ver el modelo terminado, pero si quieren acceder al panel de administración de WordPress, soliciten su usuario y contraseña en los comentarios de abajo o por email a contacto@creativeway.com.ar y se los enviaremos a la brevedad. De ésta manera podrán visualizar en vivo todo lo que hicimos en ésta guía, además pueden hacerle los cambios que quieran, no importa si se rompe, la idea es que experimenten. Cualquier cosa, la volvemos a acomodar. Si pasan el mouse por arriba de cada parte, aparecerá un comentario de ayuda de cómo editar.

Si en el futuro quieren expandir los conocimientos aprendidos hasta acá, les dejo el link oficial del Codex de WordPress: https://codex.wordpress.org/es:Main_Page

Espero que les sirva de utilidad. Sientansé libres de compartir ésta guía sin olvidar de mencionar la fuente.


Comentarios

© 2017 CreativeWay.
El contenido de los links adjuntos en ésta guía son propiedad de sus respectivos autores.

 
©2017 CreativeWay - Todos los derechos reservados.
Las marcas y logos diseñados son propiedad de sus respectivos dueños.