ceslavaUn profe que hace webs

Cómo convertir una plantilla HTML en un tema para WordPress

En el proceso de crear un tema para WordPress podemos empezar por la creación o migración de un sitio en HTML / CSS y JS o desde una plantilla HTML de terceros. Aunque existe el plugin HTML Import 2 aquí veremos cómo crear un tema propio para WordPress a partir de una plantilla HTML / CSS y JS.

Básicamente debemos de encontrar en ese HTML aquello que debe ser dinámico, aquello que debe cambiar según la configuración de WP o que debe ser editable desde el backend y sustituir ese HTML por PHP.

En esta primera parte de una serie de artículos sobre la creación de temas para WordPress veremos:

  1. De HTML a WordPress (Preparando el entorno de desarrollo)
  2. Diseccionando el index.html
  3. Encolar los archivos CSS y JS
  4. Sustituir lo estático por lo dinámico (template tags)
  5. El Loop
  6. Resto de páginas (distintos Loops)
  7. Contenido dinámico

En el siguiente artículo publicaremos el proceso de conversión de una una plantilla HTML / CSS / JS a un tema de WordPress gratuito que subiré al repositorio.

Empezamos

1. De HTML a WordPress (Preparando el entorno de desarrollo)

  1. Primero debemos crear un entorno local e instalar WordPress.
  2. Importamos contenido dummy (falso) para poder trabajar. Nos descargamos el archivo XML del Codex. En nuestro WP –> Herramientas –> Importar –> WordPress –> Instalamos plugin –> Ejecutar importador –> subimos el archivo XML que nos hemos descargado –> Dejamos los autores tal como están pero marcamos la casilla de importar los datos adjuntos.
  3. Para no trabajar desde cero comenzaremos con un starter theme, nos descargamos el tema http://underscores.me/ (de código abierto, gratuito y creado por Automattic) En las opciones marcamos la opción Sassify para tener los archivos SASS. Lo instalamos en nuestro WP –> Apariencia –> Temas –> Añadir nuevo.
  4. Abrimos la carpeta de nuestro tema en nuestro editor (Brackets, Sublime Text o mejor VS Code).
  5. En esa misma carpeta metemos los archivos HTML / CSS y JS a convertir.

2. Diseccionando el index.html

La mayoría de las plantillas para WordPress actuales tienen la opción de mostrar un diseño diferente en la home de nuestro sitio que en las páginas de su interior. En nuestra plantilla HTML el archivo index.html sería la home. Lo tienes que dividir en 4 partes: header, contenido, footer y sidebar (este último es opcional).

  1. El header.php contiene desde <!doctype HTML> hasta aquello que se va a repetir en todas las páginas, normalmente hasta el menú.
  2. El contenido (index.php, single.php, archive.php, front-page.php…) es aquello que dinámicamente muestra según la página que se visite (una entrada, una página, un producto…)
  3. El footer.php contiene aquello que se repite al final de todas las páginas, termina con </html>
  4. El sidebar.php contiene el código que muestra la barra lateral, si no vas a usarla puedes omitirlo

Cómo convertir una plantilla HTML en un tema para WordPress - 0 - elfinalde

El tema Underscores trae por defecto creados ya los acrhivos header.php, index.php, footer.php y sidebar.php Debes editar cada uno para poner el marcado HTML que has creado, con sus clases CSS.

3. Encolar los archivos CSS y JS

Si la plantilla HTML tiene archivos CSS y JS lo ideal es sustituir sus llamadas en el HTML a una función dinámica de WP que encola esos archivos. En el tema Underscores, en el archivo functions.php ya tienes la función creada, sólo tienes que añadir los archivos.

Ejemplo para encolar el archivo main.css (*) y el jquery.scrollex.min.js dependiente de jQuery de esta forma:

<?php function mitema_theme_setup(){
wp_enqueue_style('main-styles', get_template_directory_uri().'/assets/css/main.css');
wp_enqueue_script('j-scrollex', get_template_directory_uri().'/assets/js/jquery.scrollex.min.js',array('jquery'), false, true);
}
add_action('wp_enqueue_scripts', 'mitema_theme_setup');

* Nota: como seguramente utilices SASS lo mejor es que compiles ese archivo junto a los de Underscores y los que tú añadas en el style.css y así sólo cargas un CSS.

4. Sustituir lo estático por lo dinámico (template tags)

Aquello que sea dinámico se marca con PHP <php código PHP ?> para ello utilizamos las templates tags.

Como WP trabaja con PHP vimos cómo en el mismo archivo conviven perfectamente estos dos lenguajes HTML y PHP, de forma que aquello que queremos que sea dinámico lo cambiamos a PHP, por ejemplo para poner el título del sitio en vez de poner

<h1>El título de mi sitio</h1>

ponemos

<h1><?php blogingo(‘name’); ?></h1>

Son lo que llamamos las “template tags”. La sintaxis básica será:

Abrimos PHP

<?php

Nombre de la template tag + () + ; <- en algunas ocasiones dentro de los paréntesis indicaríamos uno o varios parámetros por ejemplo ‘name’

bloginfo(‘name’);

Cerramos PHP

?>

Ejemplos:

<?php blogingo('name'); ?> <- Imprime el Título del sitio indicado en Ajustes –> Generales

<?php get_header(); ?> <- Inserta el archivo del tema llamado header.php

Hay algunos template tags que no imprimen el resultado, normalmente se diferencian de otras porque empiezan por get, por ejemplo tenemos the_title() y get_the_title(), si queremos imprimirlo (que se muestre en el navegador) utilizaríamos “echo” pudiendo concatenar con puntos HTML y PHP

<?php echo '<h1>El título de esta entrada es '. get_the_title() . '</h1>'; ?>

Nota: Si queremos que el texto sea traducible utilizaremos la función _e() para imprimir las cadenas de texto.

_e( 'El título de esta entrada es', 'textdomain' );

Por ejemplo para referenciar la ruta a una imagen subida a tu tema a la carpeta img pondrías

<img src=”<?php echo get_template_directory_uri(); ?>/img/logo.png" alt=”mi logo”>

El tema Underscores ya viene preparado con los archivos PHP con muchas template tags:

  • que cargan el archivo head wp_head();
  • añaden el menú creado en el administrador wp_nav_menu();
  • y muchas más

Lista completa de Template Tags

Puede ayudarte algún plugin o extensión de tu IDE

5. El Loop

Luego está la parte que carga dinámicamente el contenido (entradas, productos o ítems de portfolio), es lo que se conoce como el Loop, tiene esta sintaxis:

<?php if ( have_posts() ) :
while ( have_posts() ) :
the_post();
get_template_part( 'template-parts/content', 'home' );
endwhile;
else :
get_template_part( 'template-parts/content', 'none' );
endif;  ?>

Es un condicional que accede a la BBDD para ver si hay contenido. Si hay contenido mostrará uno de los contenidos (máximo el número indicado en ajustes, por defecto 10) con la plantilla del acrhivo «content-home.php» que está en la carpeta «template-parts». En ese archivo tendrás que utilizar otras template tags como the_title, the_permalink (el enlace a ese contenido), the_excerpt (el extracto o resumen).

6. Resto de páginas (distintos Loops)

En las partes donde se muestran artículos (o productos si fuera una tienda) seguimos utilizando el Loop de WordPress, dependiendo de qué página sea visitada se mostrarán el loop devolverá de la BBDD algo distinto. Por ejemplo en la página de una categoría se muestran sólo los que pertenecen a esa categoría, en la de fecha sólo de esa fecha, etc. El loop de un artículo tiene la misma sintaxis que cualquier otro pero lo que muestre de la BBDD será distinto del que usarás en la home.

El loop siempre tiene la misma sintaxis:

<?php if (have_posts()) : ?>

<!—Se comprueba que existan entradas publicadas. -->

<?php while (have_posts()) : the_post(); ?>

<!—En el caso de que existan se crea un bucle por el número de publicaciones que hayamos definido en Ajustes – Lectura, por defecto son 10 entradas. -->

<!—Aquí se pone lo que queramos que se muestre de cada publicación, por ejemplo el título, la imagen destacada, el autor, la fecha, etc. En vez de ponerlo aquí podemos ponerlo en un archivo vinculado con get_template_part(). Por ejemplo get_template_part( 'template-parts/content', 'single' ); -->

<?php endwhile; ?>
<?php else :

get_template_part( 'template-parts/content', 'none' );?>

<!—Cargamos el archivo content-none.php con lo que queramos que aparezca si no hay ninguna entrada publicada.  -->

<?php endif; ?>

El proceso es el mismo, sólo tendrás que cambiar la ruta del archivo PHP en get_template_part() en single.php a por ejemplo a get_template_part( 'template-parts/content', 'single' );

En el archivo content-single.php en vez de mostrar el excerpt mostrarás todo el contenido de ese artículo con la template tag the_content().

Puedes ayudarte del plugin What The File para ver qué archivo de tu tema es el que se está cogiendo, para la portada te aconsejo que hagas un archivo front-page.php, si recuerdas la jerarquía de WP cuando no existe un archivo más específico se tira de index.php por eso hacemos uno específico para la portada si buscamos un diseño único.

Cómo convertir una plantilla HTML en un tema para WordPress - 1 - elfinalde

7. Contenido dinámico

La home o página de inicio además de poder tener un diseño distinto, de mostrar las últimas entradas, testimonios, portafolio puede tener algún contenido (texto + multimedia) propio. Para que sea editable y dinámico creas una página en WP y esa página la pones en los Ajustes -> Lectura como página de portada.

Para el portafolio (Cómo crear un portafolio en WordPress con y sin plugins), testimonios, etc. puedes crear un sidebar, usar un plugin o crear un Custom Post Type y añadirlo al archivo PHP correspondiente de tu tema.

Otra forma de añadir contenido dinámico es con los Custom Fields. Puedes crearlos para hacer editable los títulos y textos que ahora son Lorem puedes añadir a la página que pongas como inicio Custom Fields, puedes crearlos con este plugin  y luego los llamas en front-page.php con

<?php the_field('nombre-de-tu-custom-field'); ?>

Enlaces

En próximos artículos publicaremos el caso práctico real donde convertiremos una plantilla HTML / CSS / JS a un tema de WordPress que pondré a vuestra disposición para que podáis ver el código y/o utilizarlo de forma gratuita en vuestro WordPress.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

  1. estoy intentando adaptar una plantilla que me descargue gratuita pero soy muy novata para tal cometido, no llego a cargar el .css seguire viendo los siguientes post, a ver si llego a solucionarlo. Cualquier ayuda se agradece

    Responder

  3. hola estoy estancado cuando dices

    para poner el marcado HTML que has creado, con sus clases CSS.

    te refieres a reemplazar el contenido del head completo
    gracias por el post esperando tu respuesta y y el siguiente post

    Responder