Crear un tema WordPress desde cero – Construyendo la base de nuestra plantilla
Si has llegado hasta aquí y te has leido los capítulos anteriores ya sabrás como es más o menos la estructura de archivos de WordPress que vamos a emplear en nuestra plantilla. En este capítulo nos vamos a centrar en los archivos principales y más importantes a la hora de crear la plantilla. Antes deberemos saber como va a ser la estructura de nuestro tema.
Para el tema que estamos creando desde cero vamos a querer tener una estructura de cabecera, columna izquierda, contenido, columna derecha y pie de página.
Los archivos que vamos a empezar a rellenar son los siguientes: header.php, footer.php, functions.php y style.css.
El header.php y footer.php serán los primeros archivos que deberemos estructurar.
En el header.php tendremos la estructura inicial del documento HTML que engloba el DOCTYPE, etiqueta <html>, etiqueta <head> con sus metas necesarios, título, estilos, etc, la apertura de la etiqueta <body> y el contenedor de la cabecera.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
<?php
global $page, $paged;
wp_title( '|', true, 'right' );
// Add the blog name.
bloginfo( 'name' );
// Add the blog description for the home/front page.
$site_description = get_bloginfo( 'description', 'display' );
if ( $site_description && ( is_home() || is_front_page() ) )
echo " | $site_description";
// Add a page number if necessary:
if ( $paged >= 2 || $page >= 2 )
echo ' | ' . sprintf( __( 'Page %s', 'mytheme' ), max( $paged, $page ) );
?>
</title>
<?php wp_head(); ?>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" media="screen" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
</head>
<body>
<div id="page" class="container">
<div class="row">
<div id="header">
<h1 class="site-title col-sm-9"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
</div>
</div>
<div class="row">Fíjate que estamos usando una función wp_head() que se tiene que poner antes de la etiqueta </head> y no es más que un hook o posición donde se añaden acciones. En nuestro caso, lo utilizaremos para añadir los estilos y scripts del jQuery Bxslider, del Superfish menu y del framework bootstrap.
Partiremos editando también el archivo index.php añadiendo el siguiente contenido:
<?php get_header(); ?>
<div id="sidebar_left" class="col-xs-12 col-sm-3 col-md-3 col-lg-3 hidden-xs hidden-sm">
<h3>Sidebar left</h3>
</div>
<div id="content" class="col-xs-12 col-sm-8 col-md-6 col-lg-6">
<div class="home col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<h1>Your Home</h1>
</div>
</div>
</div>
<div id="sidebar_right" class="col-xs-12 col-sm-4 col-md-3 col-lg-3">
<h3>Sidebar right</h3>
</div>
<?php get_footer(); ?>Fíjate bien en el archivo index.php y observarás que se está llamando a la función get_header() que lo que hace es incluir la cabecera de la página (header.php), y a la función get_footer() al final del documento que lo que hace es incluir el pie de página (footer.php).
En el footer.php tendremos la estructura final del documento HTML que engloba los tags que componen nuestro footer y los tags de cierre abiertos en el header.php.
En este caso fíjate en la función wp_footer() que estamos llamando en este archivo que no es más que un hook o posición para añadir código en el pie de página.
El archivo functions.php es como una biblioteca personal de funciones, es una manera fácil de ampliar, cambiar o alterar el comportamiento por defecto de WordPress. Se comporta exactamente igual que un plugin, añadiendo características y funcionalidad a una web, y se puede utilizar tanto para definir nuevas funciones PHP como para modificar las que ya incorpora el sistema. Inicialmente, estamos hablando de este archivo en este momento porque vamos a añadir nuestros estilos y scripts personalizados para nuestra plantilla.
Todas las funcionalidades extra a WordPress las podrías añadir directamente en el archivo functions.php y va a funcionar igual pero por organización o costumbre yo suelo dividir los archivos para poder llevar un mejor mantenimiento de la Web. No es lo mismo revisar un archivo con miles de lineas que otro con 10 lineas. Se trata de la frase que siempre tengo en mente a la hora de programar. Divide y vencerás!
En el archivo functions.php incluiremos un archivo de la siguente forma:
<?php
include(TEMPLATEPATH . '/includes/scripts.php');
?>Este archivo contiene lo siguiente:
<?php
function mytheme_scripts() {
wp_enqueue_style( 'style-bxslider', get_template_directory_uri().'/css/jquery.bxslider.css' );
wp_enqueue_style( 'style-bootstrap', get_template_directory_uri().'/css/bootstrap.css' );
wp_enqueue_style( 'style-superfish', get_template_directory_uri().'/css/superfish.css' );
wp_enqueue_script( 'script-bxslider', get_template_directory_uri() . '/js/jquery.bxslider.js', array(), '1.0.0', true );
wp_enqueue_script( 'script-superfish', get_template_directory_uri() . '/js/superfish.js', array(), '1.0.0', true );
wp_enqueue_script( 'scripts', get_template_directory_uri() . '/js/scripts.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'mytheme_scripts' );
?>En WordPress podemos añadir hojas de estilo adicionales con wp_enqueue_style() y añadir scripts adicionales con wp_enqueue_script().
El archivo style.css de WordPress es más importante de lo que parece ya que además de contener los estilos principales de nuestra tema va a contener información identificativa del tema.
/*
Theme Name: Mythme
Theme URI: https://www.jose-aguilar.com/
Author: Jose Aguilar
Author URI: https://www.jose-aguilar.com/
Description: Boopstrap Jose Aguilar Theme
Version: 1.1
Tags: light, gray, white, one-column, two-columns, right-sidebar, flexible-width, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready
Text Domain: jose-aguilar
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/
body {
}
#header {
background-color: #dadada;
min-height: 100px;
margin-bottom: 10px;
text-align: center;
}
#header h3 {
float: left;
text-align: center;
width: 100%;
}
#sidebar_left, #sidebar_right {
background-color: #dadada;
min-height: 400px;
text-align: center;
}
#sidebar_left {
border-right: 5px solid #eee;
}
#sidebar_right {
border-left: 5px solid #eee;
}
#content {
background-color: #dadada;
min-height: 400px;
text-align: center;
}
#footer {
background-color: #dadada;
min-height: 80px;
margin-top: 10px;
text-align: center;
}Este código CSS contiene la base o estructura de nuestro tema «mytheme». Si te fijas en la parte superior del código hay unos comentarios identificativos. Estos comentarios identifican al tema y esa información aparecerá en la administración de temas de WordPress.
Para que aparezca nuestra página con nuestro nuevo tema tan solo tenemos que activarlo en Apariencia – Temas.
Indice de contenido
Autor
¿Buscas trabajo de programador?
13 respuestas a “Crear un tema WordPress desde cero – Construyendo la base de nuestra plantilla”
Mariano dice: Hola Jose estoy teniendo una duda con respecto a incluir una linea de codigo que no esta muy bien claro, el codigo
eso se agrega con lo que ya esta en el archivo function? o se borra todo y se agrega esa linea de codigo solamente?
-
Hola buenas tardes,
En tu tema debes agregar todo lo que necesites al archivo functions.php. Todo lo que vayas agregando estará disponible.
Saludos
Delvis dice: Hasta ahora todo va a pedir de boca….
Chanly dice: Hola José.
Activando el tema se me queda la pantalla en blanco. He revisado todos los nombres de las paginas creadas asi como las librerias JS y esta todo bien. Lo unico que cambie mytheme por el nombre que le puse al tema.
Como veras soy muy novato. El wordpress lo carga bien, sin dar errores. Ahora esta todo blanco.
-
Hola buenas tardes, si se queda en blanco es seguramente por algún error en el código. Necesitarás ver el log de errores del servidor para saber que problema hay. Saludos
Pedro dice: Hola José Aguilar,
Excelente tutorial, lo eh seguido al pie de la letra, pero me arroja 3 errores, a que crees que se deba esto, ojalá puedas ayudarme, la estructura que tengo es igual a la que recomiendas en el Tema 3. Construyendo la base de nuestra plantilla…. Gracias.
Uncaught ReferenceError: jQuery is not defined
(anonymous function)
jquery.bxslider.js?ver=1.0.0:1343
superfish.js?ver=1.0.0:262
scripts.js?ver=1.0.0:1
-
Jose Aguilar dice:
HOla,
Veo que te falta incluir el jQuery.
En las últimas versiones de wordpress ya te lo incluye. No se que versión estarás utilizando.
Saludos
-
WordPress 4.1 en español
-
José Aguilar,
Quedó resuelto, efectivamente me faltaba agregar el jquery, con eso ya marcha excelente, muchas gracias.
-
-
[…] Crear un tema WordPress desde cero – Construyendo la base de nuestra plantilla […]
Deja una respuesta
11 artículos que te podrían interesar
Ver más sobre
ERROR EN CONSOLO
scripts.js?ver=1.0.0:1 Uncaught ReferenceError: jQuery is not defined
at scripts.js?ver=1.0.0:1
(anonymous) @ scripts.js?ver=1.0.0:1
—script.js—
$ = jQuery.noConflict(); = breakpoint){
$(‘nav.menu-sitio’).show();
}else {
$(‘nav.menu-sitio’).hide();
}
});
});
—functons.php— el registro de la funcion
<?php
function CMH_styles(){
//–wp_enqueue_script('scripts', get_template_directory_uri() . '/js/scripts.js', array(), '1.0.0', true );
wp_register_script('scripts', get_template_directory_uri() . '/js/scripts.js', array(), '1.0.0', true );
wp_enqueue_script('jQuery');
wp_enqueue_script('scripts');
}
add_action('wp_enqueue_scripts','Cedulas_Madre_Hnd_styles');
});
Hola consulta armo el menu y no me reconoce los estilos me los muestra en lista que puede ser?
Hola,
En la cabecera están los estilos correctamente añadidos?