Cómo crear un tema de WordPress desde cero (sin saber PHP) – 2

Logo de WordPress

Cómo crear un tema de WordPress desde cero (sin saber PHP) – 2

Hola a todos y saludos desde el área Web de la Escola Espai. En el artículo de hoy continuaremos viendo como crear un tema de WordPress desde cero sin saber PHP. Si no habéis leído el artículo anterior, podéis encontrarlo aquí: como crear un tema de WordPress desde cero (sin saber PHP).

Cómo insertar HTML en páginas de WordPress y no morir en el intento

Cuando editamos una entrada o página en WordPress tenemos la posibilidad de editarla con el editor visual y/o con el editor HTML. La mayoría de usuarios prefieren usar el editor visual, pero los informáticos preferimos la flexibilidad y potencia que nos ofrece poder introducir código HTML. A la hora de crear nuestro tema sin saber PHP, nos va a resultar muy útil poder utilizar HTML en condiciones. El problema es que el editor HTML de WordPress es bastante limitado, ya que tiende a modificar el código HTML y es difícil de diferenciar visualmente las diferentes partes de código HTML.

Para solventar (en parte) sus limitaciones, y poder crear un tema de forma adecuada, vamos a proceder a instalar los siguientes plugins de WordPress:

  • Preserved HTML Editor Markup Plus – el cual va a permitirnos poder editar el HTML de una página o entrada sin que (en teoría) sufra alteraciones por parte de WordPress.
  • HTML Editor Syntax Highlighter – este plugin es opcional pero muy recomendable. Nos permitirá ver mejor (con colorines) el código HTML en el editor de WordPress.
  • Contact Form 7 – este plugin, que también es opcional, nos permitirá colocar formularios de contacto en nuestras páginas usando shortcodes de WordPress. No tiene nada que ver con poder insertar código HTML en condiciones como los dos anteriores, pero ya que estamos instalando plugins aprovechamos y lo instalamos.

Con todo esto ya vamos a poder editar en condiciones el código HTML de nuestra página principal, pero antes vamos a mejorar un poco la plantilla que preparamos en el anterior artículo.

Preparar una plantilla para la front page

Para la nueva plantilla vamos a partir de la anterior que hicimos (template-nosidebar.php). Esta vez el archivo se llamará template-front.php, y lo voy a quitar casi todo menos el main. Aquí tenéis el código PHP.

[php]
<?php /* Template Name: Front Page */ get_header(); ?>
<main role="main">
<?php if (have_posts()): while (have_posts()) : the_post(); ?>
<?php the_content(); ?>
<?php endwhile; ?>
<?php else: ?>
<article>
<h2><?php _e( ‘Sorry, nothing to display.’, ‘html5blank’ ); ?></h2>
</article>
<?php endif; ?>
</main>
<?php get_footer(); ?>
[/php]

Esta plantilla es la que usaremos ahora en nuestra página de inicio (y no la que hicimos en el anterior artículo sobre como crear un tema).

Cómo crear un tema con Font Awesome en WordPress

Antes de crear el contenido de nuestra página de inicio, vamos a añadir la famosa fuente Font Awesome a nuestro tema. Para ello hemos de modificar el archivo functions.php. Concretamente, hemos de buscar la función html5blank_styles(), que es la que se encarga de preparar las hojas de estilo CSS que va a cargar nuestra página, y añadiremos un par de líneas de código PHP para indicarle que tiene que cargar los archivos de Font Awesome desde un CDN.

[php]
// Load HTML5 Blank styles
function html5blank_styles()
{
wp_register_style(‘normalize’,
get_template_directory_uri() . ‘/normalize.css’, array(), ‘1.0’, ‘all’);
wp_enqueue_style(‘normalize’); // Enqueue it!

wp_register_style(‘fontawesome’,
‘https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css’, array(), ‘1.0’, ‘all’);
wp_enqueue_style(‘fontawesome’); // Enqueue it!

wp_register_style(‘html5blank’,
get_template_directory_uri() . ‘/style.css’, array(), ‘1.0’, ‘all’);
wp_enqueue_style(‘html5blank’); // Enqueue it!
}
[/php]

Con esta sencilla modificación, ya podremos utilizar los iconos de FontAwesome en nuestro tema.

Y ya estamos listos para modificar la página de inicio de nuestro tema. Para ello vamos a editarla desde el backend de WordPress, buscamos la entrada, le damos a editar y finalmente pulsamos en la pestaña de HTML.

Edito HTML de WordPress

Debemos de usar el editor HTML de WP!

Después, borramos todo el código que hay y pegamos algo como esto:

[html]
<section id="hero">
<div class="mini-wrapper">
<h1>Tema Espai</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit…</p>
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
</ul>
</div>
</section>

<section id="services">
<div class="mini-wrapper">
<h2>Servicios</h2>
<ul>
<li>
<i class="fa fa-car fa-4x" aria-hidden="true"></i>
<h3>Servicio 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, harum!</p>
</li>
<li>
<i class="fa fa-cloud fa-4x" aria-hidden="true"></i>
<h3>Servicio 2</h3>
<p>Incidunt, blanditiis impedit nam nesciunt doloremque a, nobis minus!</p>
</li>
<li>
<i class="fa fa-envelope fa-4x" aria-hidden="true"></i>
<h3>Servicio 3</h3>
<p>Cumque ex vel sint iusto quae officia iure ipsa similique vero dolorum.</p>
</li>
<li>
<i class="fa fa-users fa-4x" aria-hidden="true"></i>
<h3>Servicio 4</h3>
<p>Veniam esse, consectetur, omnis dolore voluptates fugiat aut minima.</p>
</li>
</ul>
</div>
</section>

<section id="contact-us">
<div class="mini-wrapper">
<h2>Contacta con nosotros</h2>
[contact-form-7 404 "No encontrado"]
</div>
</section>
[/html]

Como podéis ver, el código HTML que acabamos de copiar tiene una serie de elementos <i> con clases de Font Awesome. Tambíen,  hay que tener en cuenta que al final de dicho código hay un shortcode (o código abreviado) del plugin Contact Form 7 para mostrar un formulario de contacto. Deberemos de asegurarnos de crear un formulario de contacto usando dicho plugin y reemplazar este shortcode por el de nuestro formulario. Para ello debemos de ir a la nueva sección Contacto que a aparecido en nuestro WordPress tras haber instalado el plugin.

Además, obviamente tendremos que acordarnos de cambiar la plantilla de nuestra página por la nueva que hemos creado en el paso anterior (es decir, cambiaremos la plantilla No Sidebar por la plantilla Front Page.

Cambiar la plantilla de la página principal

Hemos de acordarnos de volver a cambiar la plantilla de la página.

Finalmente habrá que añadir el siguiente código CSS a nuestro styles.css para darle un aspecto adecuado. Se lo añadiremos justo debajo de la sección STRUCTURE que modificamos en el anterior artículo.

[css]
/*————————————*\
FRONT
\*————————————*/
.mini-wrapper {
max-width: 1280px;
margin: 0 auto;
}

#hero {
background: #222;
background-image: url("./img/hero.jpg");
background-size: cover;
background-position: 50% 50%;
color: white;
padding: 20px 10px;
}

#hero h1 {
font-size: 10vw;
font-variant: small-caps;
text-align: center;
margin: 0;
text-shadow: 2px 2px black;
}

#hero p {
font-size: 20px;
text-align: center;
text-shadow: 1px 1px black;
}

#hero ul {
padding: 0;
list-style: none;
text-align: center;
}

#hero li {
display: inline-block;
font-size: 20px;
border: 2px solid white;
border-radius: 15px;
transition: all 250ms;
margin: 0 10px;
text-shadow: 1px 1px black;
box-shadow: 1px 1px black;
}

#hero li:hover {
background: rgba(255,255,255,0.5);
}

#hero li a {
display: inline-block;
color: inherit;
padding: 10px 30px;
}

#services {
color: white;
background: #123456;
padding: 20px 10px;
font-size: 16px;
}

#services ul {
padding: 0;
list-style: none;
overflow: auto
}

#services li {
width: 25%;
float: left;
padding: 10px;
text-align: center;
}

#services h2, #contact-us h2 {
font-size: 30px;
font-variant: small-caps;
text-align: center;
margin: 0;
}

#contact-us {
color: white;
background: black;
padding: 20px 10px;
font-size: 14px;
}

#contact-us form {
max-width: 500px;
margin: 0 auto;
font-weight: bold;
}

#contact-us input, #contact-us textarea {
width: 100%;
padding: 5px;
}

#contact-us input[type="submit"] {
background: #123456;
color: inherit;
border: 2px solid white;
border-radius: 5px;
transition: all 250ms;
}

#contact-us input[type="submit"]:hover {
background: white;
color: black;
}
[/css]

Como podéis ver, el código CSS hace referencia a una imagen llamada hero.jpg que debe de ir dentro de la carpeta img de nuestro tema. Obviamente podéis cambiar la ruta si lo estimáis oportuno.

Y este es el resultado final;

Página principal de nuestro tutorial sobre como crear un tema de WP

Página principal de nuestro tutorial sobre como crear un tema de WP

Obviamente, esta forma de trabajar tiene sus ventajas e inconvenientes a la hora de crear un tema.

Normalmente lo de hacerlo todo con código HTML tan solo necesitaremos hacerlo en la página principal, el resto de páginas y entradas serán por lo general páginas convencionales de WordPress. Con el plugin que nos colorea el código HTML es relativamente fácil hacer cambios incluso por un usuario que no sepa HTML (solo ha de tocar el código de color blanco), pero no nos engañemos, será muy fácil que este tipo de usuario rompa la página principal si intenta hacer modificaciones.

Las ventajas son que esta forma de trabajar es muy fácil y cómoda para el programador, normalmente hacer algo similar en un tema de WordPress convencional lleva bastante más trabajo ya que implica hacerlo con PHP y añadir todo el código necesario para que el usuario de la plantilla pueda realizar modificaciones de forma cómoda sin necesidad de tener conocimientos técnicos.

Y bueno, por ahora, nada más. Espero que este artículo os haya sido de interés. En el próximo árticulo puliremos algunos aspectos que aún tenemos pendientes en nuestro sencillo y artesano tema.

2Comentarios

  • Guillermo
    20/04/2017

    Buenos días, me parece muy interesante este articulo, seguiré todos hasta el final. Tengo dos preguntas desde mi completa ignorancia sobre el tema.
    Seria posible configurar solo una barra de menú principal superior y el resto de la pagina crearlo con un page builder?
    Seria muy complicado programar esto para q fuera responsive?
    Seguramente habré dicho dos burradas como dos catedrales, pero bueno, después de leer este articulo y el anterior me has hecho soñar que todo es posible, aunque imagino q no.
    un saludo y muchas gracias por tu trabajo.

Escribe un comentario