Vamos a ver como crear un tema o plantilla de WordPress con Bootstrap (quizá os resulte interesante el post sobre inicialización a Bootstrap), algo que os puede resultar muy interesante si trabajais con este CMS.
Si ya habéis trabajado con WordPress seguramente habréis trabajado o jugueteado con alguna de las plantillas que podemos encontrar, ya sean gratuitas o de pago, nos ahorran muchas horas de trabajo. Lo malo de estás plantillas es que vienen con muchísimas funcionalidades y esto es un arma de doble filo, aunque nos dan un abanico muy amplio de posibilidades puede que muchas de esas funcionalidades que incluyen no las necesitemos y en cambio tengamos muchas líneas de código inutiles en nuestra web.
Por ello vamos crear una plantilla partiendo de una web base hecha con Bootsrap.
Crear la estructura básica de un tema para wordpress.
Necesitaremos algunos ficheros básicos para iniciar el tema style.css e index.php, header.php, page.php, single.php, sidebar.php, footer.php y functions.php (además de una imagén para su visualización en el panel de administración de WordPress).
Creamos el fichero style.css con la siguiente cabecera:
/*
Theme Name: MiTema
Theme URI: http://jorgebahamonde.com/plantilla-wordpress-bootstrap/
Description: Mi tema de WordPress con Bootstrap.
Author: Jorge Bahamonde
Author URI: http://jorgebahamonde.com
Version: 1.0
*/
/*Importamos los css de bootstrap*/
@import url(‘css/bootstrap.css’);
@import url(‘css/bootstrap-responsive.css’);
body {
padding-top: 60px;
padding-bottom: 40px;
}
Ahora creamos el archivo index.php, donde escribimos la siguiente cabecera y llamamos al header.php y el footer.php:
<?php
/*
The main template file.
Theme Name: MiTema
Theme URI: http://jorgebahamonde.com/plantilla-wordpress-bootstrap
Description: Plantilla realizada con Bootstrap.
Author: Jorge Bahamonde
Author URI: http://jorgebahamonde.com/
Version: 1.0
Este tema ha sido creado basandonos en Bootstrap
*/
?>
<?php get_header(); ?> :
<!– Contenido del cuerpo–>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php the_content(); ?>
<?php endwhile; else: ?>
<p><?php _e(‘No se han encontrado resultados para el criterio de búsqueda.’); ?></p>
<?php endif; ?>
<?php get_footer(); ?>
Pasamos a continuación a crear el archivo header.php. Puedes añadir en el todas las etiquetas meta que necesites y cualquier link que requieras.
<!DOCTYPE html>
<html lang=»en»>
<head>
<meta charset=»utf-8″>
<title>Bootstrap, from Twitter</title>
<meta name=»viewport» content=»width=device-width, initial-scale=1.0″>
<link href=»<?php bloginfo(‘stylesheet_url’);?>» rel=»stylesheet»>
<?php wp_enqueue_script(«jquery»); ?>
<?php wp_head(); ?>
</head>
<body>
<!–Contenido del navegador y de la cabecera–>
<ul class=»nav»>
<?php wp_list_pages(array(‘title_li’ => »)); ?>
</ul>
Ahora vamos a crear el archivo footer.php, en el cargaremos los ficheros JavaScript de Bootstrap y cualquier otro que necesitemos.
<script src=»http://code.jquery.com/jquery.js»></script>
<script src=»js/bootstrap-carousel.js»></script>
<script src=»js/bootstrap.min.js»></script>
<script>
$(document).ready(function(){
$(‘.carousel’).carousel();
});
</script>
<?php wp_footer(); ?>
</body>
</html>
Nos toca crear uno fundamental, el archivo funtions.php donde se declarán las funcionalidades de nuestro tema.
<?php
function wpbootstrap_scripts_with_jquery()
{
// Register the script like this for a theme:
wp_register_script( ‘custom-script’, get_template_directory_uri() . ‘/js/bootstrap.js’, array( ‘jquery’ ) );
// For either a plugin or a theme, you can then enqueue the script:
wp_enqueue_script( ‘custom-script’ );
}
add_action( ‘wp_enqueue_scripts’, ‘wpbootstrap_scripts_with_jquery’ );
if ( function_exists(‘register_sidebar’) )
register_sidebar(array(
‘before_widget’ => »,
‘after_widget’ => »,
‘before_title’ => ‘<h3>’,
‘after_title’ => ‘</h3>’,
));
?>
Vamos a modificar el fichero wpbootstrap/css/ bootstrap.css para que marque de forma correcta la pestaña de la página activa en ese momento. Para conseguir esto tendremos que cambiar la propiedad current_page_item, añadiendo el siguiente código:
.nav .active > a,
.nav .active > a:hover,
.nav .active > a:focus,
.nav .current_page_item a,
.nav .current_page_item a:hover,
.nav .current_page_item a:focus,
.nav .current_page_parent a,
.nav .current_page_parent a:hover,
.nav .current_page_parent a:focus {
background-color: #F9F9F9;
}
Ahora tenemos que crear un archivo llamado sidebar.php que sera la barra lateral donde irán los pluggings que carguemos desde el panel de administracción de WordPress.
<h2>Sidebar</h2>
<?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar() ) : ?>
<?php endif; ?>
A continuación crearemos la page.php que es la visualización básica de una página, es muy similar a index.php.
<?php
/**
* Template Name: Página Básica
*
* Template básico para una página
*/
get_header(); ?>
<?php get_header(); ?>
<div class=»row»>
<div class=»span8″>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<?php the_content(); ?>
<?php endwhile; else: ?>
<p><?php _e(‘Lo siento, la página no existe.’); ?></p>
<?php endif; ?>
</div>
<div class=»span4″>
<?php get_sidebar(); ?>
</div>
</div>
<?php get_footer(); ?>
Y por último creamos el single.php para la visualización de los posts, tambien es muy similar a cualquier página, pero no necesita cabecera que lo describa, recuerda que puedes crear distintos singles para distintos contenidos.
<?php get_header(); ?>
<div class=»row»>
<div class=»span8″>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<?php the_content(); ?>
<?php comments_template(); ?>
<?php endwhile; else: ?>
<p><?php _e(‘Lo siento, el post no existe.’); ?></p>
<?php endif; ?>
</div>
<div class=»span4″>
<?php get_sidebar(); ?>
</div>
</div>
<?php get_footer(); ?>
Instalar el Plugin Bootstrap Shortcode.
Es necesario instalar este pluging de WordPress para poder usar los códigos de Bootstrap en nuestro tema de manera sencilla e intuitiva. Lo puedes encontrar en:
http://wordpress.org/plugins/easy-bootstrap-shortcodes/
Como os habréis dado cuenta con esto solo cargais lo básico para funcionar, el resto queda a vuestra imaginación y creatividad, ya que el objetivo de este post no es enseñar a diseñar un tema, sino a configurar uno para funcionar con Bootstrap.
Espero que os haya sido util.