Crear una plantilla en WordPress

Lo mínimo necesario

index.php
<!DOCTYPE html>
<html>
<head>
     <title><?php bloginfo('name'); ?> <?php wp_title(); ?></title>
    <meta name="description" content="<?php bloginfo('description'); ?>" />
    <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url')?>">
</head>
<body>
<section>
    <header id="header"></header>
    <section id="content"></section>
    <footer id="footer"></footer>
</section>
</body>
</html>
style.css
/*
    Theme Name: Monteserín Template
    Theme URI: URL del theme
    Author: Pablo Monteserín
    Author URI: pablomonteserin.com
    Version: 1
    License: GNU General Public License v2 or later
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
    Tags: blue, one-column
*/
footer#footer{
    width:100%;
    height: 90px;
    background: blue
}
header#header{
    width:100%;
    height: 90px;
    background: salmon;
}
section#content{
    margin:auto;
    width:1000px;
    min-height: 500px;
    background: pink;
}

En la cabecera del fichero es donde tendremos los datos de nuestro theme que aparecerán en el menú administrador.
Estas deben ser las primeras líneas del fichero ya que sin ellas el theme no será valido y por lo tanto descartado por WordPress.

Rompemos la plantilla

Separamos del header para arriba y del footer para bajo en header.php y footer.php y los reinsertamos en la plantilla usando get_header(); y get_footer();

Para incluir partes de la plantilla tenemos:

  • get_header();
  • get_footer();
  • get_sidebar();
  • get_template_part(‘partePersonalizadaSinPuntophp’);
<!DOCTYPE html>
<html>
<head>
     <title><?php bloginfo('name'); ?> <?php wp_title(); ?></title>
    <meta name="description" content="<?php bloginfo('description'); ?>" />
    <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url')?>">
</head>
<body>
<section>
    <header id="header"></header>
---------------------------------------------------------------------------------
    <section id="content"></section>
---------------------------------------------------------------------------------
    <footer id="footer"></footer>
</section>
</body>
</html>

wp_head() y wp_footer()

/* wp_head se pone justo antes del cierre de la etiqueta </head> y            
* wp_footer se pone justo antes del cierre de la etiqueta </body>
*/ 
<?php wp_head(); ?>
</head>

…

<?php wp_footer(); ?>
</body>
</html>

Ficheros básicos en una plantilla con WordPress:

  • style.css – Hoja de estilos principal del theme
  • index.php – Página principal del theme
  • screenshot.png → Es la foto del previo de wordpress que aparece en el panel de administración de wordpress. El tamaño correcto de esta fotografía es de 880 x 660 pixels.
  • comments.php – Template para los comentarios (sino existe se coge el de por defecto de WordPress)
  • comments-popup.php – Template para los comentarios vía pop-up (sino existe se coge el de por defecto de WordPress)
  • single.php – Template usado para mostrar una entrada en concreto, también se puede montar de tal forma que se base en el index.php.
  • page.php – Template usado para las páginas generadas.
  • category.php – Template usado para mostrar las categorías
  • author.php – Template que usa cuando queremos mostrar información del autor.
  • date.php – Template usado para cuando buscamos por fechas
  • archive.php – Template que nos muestras las entradas filtradas por Archives, este archivo puede sustituir a los 4 anteriores.
  • search.php – Template que usamos para las búsquedas.
  • 404.php – Template que implementamos para cuando no encuentra una página dentro de nuestro dominio.

Añadir hooks

header.php (por ejemplo)
do_action('despues_body'); 
functions.php
add_action('despues_body', function(){
        ...
}, 100);

Añadimos la sección de contenido

En index.php:
get_header();
while ( have_posts() ) : the_post();
    get_template_part( 'content', get_post_format() ); 
endwhile;
get_footer();
content.php
$query = get_post(get_the_ID()); 
$content = apply_filters('the_content', $query->post_content);
echo $content;
← Crear una plantilla en Wordpress
Cambiar una imagen en nuestra plantilla →

Aviso Legal | Política de privacidad