Las cookies nos permiten ofrecer nuestros servicios. Al utilizar nuestros servicios, aceptas el uso que hacemos de las cookies. Más Información. Aceptar

Cómo crear tu primer tema WordPress en menos de 15 minutos

Jesús Lucas
  • Escrito por Jesús Lucas el 09 de Febrero de 2016
  • 2 min de lectura |
Cómo crear tu primer tema WordPress en menos de 15 minutos

En este artículo te vamos a enseñar como partiendo de una simple plantilla gratuita HTML5 y gratuita podemos convertirla en un tema de WordPress añadiéndole algunas funcionalidades dinámicas

Vamos al lio!
Antes de empezar, para que puedas seguir este artículo de forma correcta necesitas tener instalado un WordPress en tu máquina local o en algún servidor remoto.

En este ejemplo vamos a usar la siguiente plantilla gratuita: http://blackrockdigital.github.io/startbootstrap-clean-blog/

Iremos a la web startbootstrap.com y nos la descargaremos… o también puedes hacer clic aquí:
Descargar Plantilla Clean Blog

Una vez tenemos la plantilla descargada extraeremos el .zip y tendremos una estructura parecida a esta:

Imagen 1 en Cómo crear tu primer tema WordPress en menos de 15 minutos

Ahora pasaremos a hacer un poco de limpieza .

  1. Renombraremos la carpeta de la plantilla a algo más simple, por ejemplo: miplantilla
  2. Vamos a borrar la carpeta mail , el archivo contact.html , about.html y post.html , ya que por simplicidad no los vamos a usar en este ejemplo.
  3. Renombraremos el archivo index.html a index.php y createmos un archivo vacio llamado functions.php y otro llamado style.css .

Finalmente tendremos una estructura tal que así:

Imagen 2 en Cómo crear tu primer tema WordPress en menos de 15 minutos

Ahora editaremos el archivo style.css que acabamos de crear y añadiremos el siguiente texto:

   /*
   Theme Name: Mi Primera Plantilla
   */

Con estas lineas en el archivo style.css , WordPress sabrá el nombre de nuestro tema.

Ahora vamos a mover la carpeta miplantilla al interior del directorio themes que se encuentra en la carpeta wp-content de nuestra instalación WordPress.

Una vez lo hemos realizado podremos ir al administrador de WordPress y veremos que ya aparece la nueva plantilla que haremos “parcialmente” creado.

Imagen 3 en Cómo crear tu primer tema WordPress en menos de 15 minutos

Haremos clic en activar para activar la nueva plantilla e iremos a la página principal de nuestro sitio para darnos cuenta que los estilos de la pantilla que acabamos de crear no se han aplicado, y aún no tiene contenido dinánmico.

Imagen 4 en Cómo crear tu primer tema WordPress en menos de 15 minutos

Para activar los estilos en el plantilla abriremos index.php de la plantilla que acabamos de crear y lo editaremos de la siguiente forma:

Sustituiremos los enlaces a hojas de estilo internas:

<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">

<!-- Custom CSS -->
<link href="css/clean-blog.min.css" rel="stylesheet">

Por la funcion de WordPress que cargará estás hojas de estilos:

<?php wp_head(); ?>

Haremos lo mismo con los archivos JavaScript internos que tenemos antes de </body> .
Sustituiremos:

<!-- jQuery -->
<script src="js/jquery.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>

<!-- Custom Theme JavaScript -->
<script src="js/clean-blog.min.js"></script>

Por la función de WordPress que cargará los archivos JavaScript:

<?php wp_footer(); ?>

Ahora abriremos el archivo functions.php que creamos anteriormente y lo editamos con el siguiente contenido:

Para cargar las 3 hojas de estilo que nuestra plantilla usará:

<?php

function miplantilla_estilos() {
    wp_enqueue_style( 'miplantilla-estilos', get_stylesheet_uri() ); 
    wp_enqueue_style( 'miplantilla-estilos-bootstrap', get_template_directory_uri() . "/css/bootstrap.min.css" ); 
    wp_enqueue_style( 'miplantilla-estilos-clean', get_template_directory_uri() .  "/css/clean-blog.min.css" ); 
}
add_action( 'wp_enqueue_scripts', 'miplantilla_estilos' );

?>

Para cargar los scripts JavaScript que nuestra plantilla usará, añadiremos al archivo functions.php lo siguiente:

  function miplantilla_javascripts() {
    wp_enqueue_script( 'miplantilla-js-jquery', get_template_directory_uri() . "/js/jquery.js", $deps = array(), $ver = false, $in_footer = true ); 
    wp_enqueue_script( 'miplantilla-js-bootstrap', get_template_directory_uri() .  "/js/bootstrap.min.js", $deps = array(), $ver = false, $in_footer = true ); 
    wp_enqueue_script( 'miplantilla-js-clean', get_template_directory_uri() .  "/js/clean-blog.min.js", $deps = array(), $ver = false, $in_footer = true ); 
}
add_action( 'wp_enqueue_scripts', 'miplantilla_javascripts' );

Con estas lineas cargaremos los tres archivos JavaScript en nuestra plantilla antes de cerrar la etiqueta </body> (los cargará la función wp_footer(); que colocamos anteriormente).
Para más información sobre la función wp_enqueue_scripts puedes ir al Codex de WordPress .

En este punto, si volvemos a cargar nuestra web veremos que ya tenemos los estilos aplicados, aunque para nuestra sorpresa no aparece la imagen principal. Ahora pasaremos a editar en profundidad el archivo index.php para que sea dinámico y muestre nuestros posts.

Para ser más breve, cómo estamos en un artículo de introducción te dejo aquí el archivo modificado:

Ver el archivo index.php modificado aquí.

Te comentaré brevemente los cambios que he realizado:

  • Se ha suprimido los items del Menu (ya que en este artículo no explico como mostrar los menús).
  • He incluido algunas funciones de WordPress sustituyendo los textos estáticos:
    • bloginfo(‘description’) : Escribe la descripción del sitio.
    • wp_title(”) : Escribe el titulo del contenido en el que nos situamos, en este caso la Home.
    • bloginfo(‘name’) : Escribe el nombre del sitio.

Luego he borrado todos los posts de ejemplo que traía nuestra plantilla descargada excepto uno y lo he colocado dentro del Bucle de Post de WordPress de la siguiente forma:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
            <div class="post-preview">
                <a href="<?php the_permalink() ?>">
                    <h2 class="post-title">
                        <?php the_title(); ?>
                    </h2>
                    <h3 class="post-subtitle">
                        <?php the_content('Leer Más &raquo;'); ?>
                    </h3>
                </a>
                <p class="post-meta">Por <?php the_author(); ?> el <?php the_time('d-m-Y'); ?></p>
            </div>
            <hr>
            <!-- Fin del Bucle de Posts (loop)-->
            <?php endwhile; endif; ?>

Esto provoca que se escriban todos los artículos de nuestros sitio. Se han usado las siguientes funciones de WordPress:

  • the_title() : Muestra el título del Post actual del bucle.
  • the_content() : Muestra los tres primeros párrafos del contenido del Post actual del bucle. Luego muestra un enlace al artículo con el texto Leer Más » .
  • the_author() : Muestra el autor del Post actual del bucle.
  • the_time(‘d-m-Y’) : Muestra la fecha de publicación del Post actual del bucle en formato día-mes-año.

También he cambiado la imagen del header principal de la plantilla por una externa:

<header class="intro-header" style="background-image: url('https://snap-photos.s3.amazonaws.com/img-thumbs/960w/ZDXHLQ6DZW.jpg')">

Os recomiendo muchísimo la web stocksnap.io si queréis obtener imágenes libres de alta calidad.

Con esto hemos conseguido pasar un HTML descargado a plantilla WordPress en muy poco tiempo.

Imagen 5 en Cómo crear tu primer tema WordPress en menos de 15 minutos

 

A partír de aquí nos quedaría realizar la plantilla para las páginas y los posts :

  • single.php

Esto lo haremos en un próximo artículo. Si tienes alguna duda deja tus comentarios abajo, ah ! y comparte este artículo en las redes sociales si lo has encontrado útil.

 

Estas son algunas de las empresas que ya confían en OpenWebinars

Profesores y profesionales

Nuestros docentes son profesionales que trabajan día a día en la materia que imparten

Conviértete en profesor de OpenWebinars