sistema de plantillas en wordpress - francisco torres · 1. crear un nuevo directorio para tener...

Sistema de plantillas en WordPress

¿Qué es el sistema de plantillas?

¿Qué es el sistema de plantillas?

index.php archive.php

archive-portfolio.php tag.php functions.php

style.css custom.jshome.php

single.php page.phpcategory.php

...

HTML / HTML + CSS + JS

+ CSS+ JS

Archivos de plantillas

● Todas las plantillas se encuentran en /wp-content/themes/

● Cada plantilla tiene una carpeta con su nombre.

● Cada plantilla está compuesta típicamente de:○ Un archivo style.css*○ Los archivos de plantillas* (PHP + funciones de WordPress, generan HTML).○ Un archivo functions.php y otros archivos de funciones (PHP + funciones de WordPress).○ Otros recursos: JS, imágenes, otros CSS, etc.

*Obligatorio

Archivos de plantillas > wp-content/themes

style.css style.css

● Es el archivo base de hojas de estilo CSS.

● No es obligatorio usarlo.

● Es obligatorio tenerlo porque aquí se declaran los datos de la plantilla (nombre, autor, versión, etc).

● Hay una función propia para obtener un enlace a él:get_stylesheet_uri()

Archivos de plantillas > Estilos

style.css style.css

/*

Theme Name: Twenty Thirteen

Theme URI: http://wordpress.org/themes/twentythirteen

Author: the WordPress team

Author URI: http://wordpress.org/

Description: The 2013 theme for WordPress takes us back to the blog, featuring a full range

of post formats, each displayed beautifully in their own unique way. Design details abound,

starting with a vibrant color scheme and matching header images, beautiful typography and

icons, and a flexible layout that looks great on any device, big or small.

Version: 1.0

License: GNU General Public License v2 or later

License URI: http://www.gnu.org/licenses/gpl-2.0.html

Tags: black, brown, orange, tan, white, yellow, light, one-column, two-columns,

right-sidebar, flexible-width, custom-header, custom-menu, editor-style, featured-images

Text Domain: twentythirteen

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.

*/

Archivos de plantillas > Estilos

functions.php functions.php

● Configura a nivel técnico la plantilla:○ Indica archivos CSS y JS a cargar.

wp_enqueue_style()

wp_enqueue_script()

○ Activa funcionalidades como:■ Áreas de widgets register_sidebar()

■ Menús register_nav_menus()

■ Elementos que soporta la plantilla, como imágenes destacadas, html5, personalizador, etc. add_theme_support()

● Funciones personalizadas: Para usarlas a lo largo de la plantilla (Modularizar) ¿Usar archivo de funciones o usar un plugin personalizado?

Archivos de plantillas > Funciones

index.php

home.php

archive.php

singular.php (single.php / page.php)

404.php

search.php

template-xxx.php

Hay que entender dos grandes conceptos:

Jerarquía (Hierarchy)Decide cuál de estos archivos carga cuando entramos en las distintas

secciones de WordPress.

El bucle (The Loop)Es una función principal que introduce en la plantilla el contenido de

esa sección (el artículo o el listado de artículos).

Archivos de plantillas > Contenido (“núcleo”)

index.php

home.php

archive.php

singular.php (single.php / page.php)

404.php

search.php

template-xxx.php

Jerarquía (Hierarchy)Decide cuál de estos archivos carga cuando entramos en las distintas

secciones de WordPress.

● Define qué archivo de plantilla debe cargar en cada caso concreto según su nombre.

● Tiene un orden jerárquico predeterminado.● Usa el primer archivo coincidente según el orden definido.● En caso de no existir ninguna coincidencia, carga index.php

https://wphierarchy.com/

Archivos de plantillas > Contenido (“núcleo”)

index.php

home.php

archive.php

singular.php (single.php / page.php)

404.php

search.php

template-xxx.php

El bucle (The Loop)

● Mecanismo por defecto de WordPress que extrae información de la base de datos para mostrar artículos en las plantillas.

<?php if ( have_posts() ) : ?>

<?php while ( have_posts() ) : the_post(); ?>

<!-- Contenido del artículo: the_title(); the_permalink(); the_autor(); the_content(); etc -->

<?php endwhile; ?>

<?php endif; ?>

Archivos de plantillas > Contenido (“núcleo”)

index.php

home.php

archive.php

singular.php (single.php / page.php)

404.php

search.php

template-xxx.php

Todos estos archivos:

● Comienzan cargando la cabecera. get_header();

● Crean la estructura HTML del contenido● Cargan el contenido principal. <the_loop>● Cargan barra lateral si la hubiera. get_sidebar();

● Terminan cargando el pie de página. get_footer();

Archivos de plantillas > Contenido (“núcleo”)

<?phpget_header(); ?>

<div id="primary" class="content-area"> <main id="main" class="site-main" role="main">

<?php while ( have_posts() ) : the_post();

get_template_part( 'content', 'single' );

the_post_navigation();

// If comments are open or we have at least one comment, load up the comment template. if ( comments_open() || get_comments_number() ) : comments_template(); endif;

endwhile; // End of the loop. ?>

</main><!-- #main --> </div><!-- #primary -->

<?phpget_sidebar();get_footer();

index.php

home.php

archive.php

singular.php (single.php / page.php)

404.php

search.php

template-xxx.php

index.php : Archivo genérico para el caso de no existir otro archivo.

home.php : Para el listado de artículos del blog.

archive.php : Para las distintas páginas de archivo.Algunas funciones específicas:the_archive_title();

the_archive_description();

singular.php : Para la página de contenido único (un artículo). Se usan single.php para artículos y page.php para páginas.Algunas funciones específicas: the_post_navigation();

comments_template();

Archivos de plantillas > Contenido (“núcleo”)

index.php

home.php

archive.php

singular.php (single.php / page.php)

404.php

search.php

template-xxx.php

404.php : La página de página no encontrada.

search.php : Para las búsquedas, funciones específicas como get_search_query(); son útiles para el título.

Archivos de plantillas > Contenido (“núcleo”)

index.php

home.php

archive.php

singular.php (single.php / page.php)

404.php

search.php

template-xxx.php

template-xxx.php : Se pueden definir archivos para usarlos como plantillas en las páginas.

1. Definir su nombre de archivo (pe: template-portfolio.php) y declararle un nombre para el back-end al inicio del archivo/* Template Name: Portfolio */

2. Customizarlo (programación...)3. Seleccionarlo en la página que queramos usarlo

Muy útil para portadas o páginas con contenido o formato específico.

Archivos de plantillas > Contenido (“núcleo”)

header.php

footer.php

sidebar.php

comments.php

searchform.php

content-xxx.php

● Son archivos adicionales que cargan los “Núcleos” u otras funciones.

● Nos ayudan a componer el sitio web conservando dos principios:○ Modularización○ KISS (Keep it simple stupid)

● Si fuera necesario, admiten diferentes versiones, pe:○ header-blog.php get_header('blog');

○ sidebar-portfolio.php get_sidebar('portfolio');

○ content-portfolio.php get_template_part('content','portfolio');

Archivos de plantillas > “Piezas”

header.php

footer.php

sidebar.php

comments.php

searchform.php

content-xxx.php

header.php

● Inicializa <html>● Introduce <head> con todos sus elementos (wp_head(); , <meta>,

otras etiquetas).

● Inicializa <body>● Introduce <header> con sus elementos: Título de la web, Logotipo,

menú <nav>, otros elementos visibles de la cabecera.

footer.php

● Introduce <footer> con sus elementos.● Introduce wp_footer(); antes de cerrar la página.● Finaliza </body> y </html>

Archivos de plantillas > “Piezas”

header.php

footer.php

sidebar.php

comments.php

searchform.php

content-xxx.php

header.php

● Inicializa <html>● Introduce <head> con todos sus elementos (wp_head(); , <meta>,

otras etiquetas).

● Inicializa <body>● Introduce <header> con sus elementos: Título de la web, Logotipo,

menú <nav>, otros elementos visibles de la cabecera.

footer.php

● Introduce <footer> con sus elementos.● Introduce wp_footer(); antes de cerrar la página.● Finaliza </body> y </html>

Archivos de plantillas > “Piezas”

header.php

footer.php

sidebar.php

comments.php

searchform.php

content-xxx.php

sidebar.php

<aside id="secondary" class="widget-area" role="complementary">

<?php dynamic_sidebar( 'sidebar-1' ); ?>

</aside><!-- #secondary -->

comments.php

wp_list_comments();

comment_form();

searchform.php

HTML para sustituir el formulario por defecto.

Archivos de plantillas > “Piezas”

header.php

footer.php

sidebar.php

comments.php

searchform.php

content-xxx.php

content.php

Se usa para modularizar los bloques de contenido que se usan en distintos sitios (página principal, página de archivos, búsqueda, destacados, etc).

● Carga a través de la función get_template_part(); a la que se indica la primera y segunda parte del archivo.

● Se suele usar colocando un código genérico en content.php y específicos en content-xxx.php

Por ejemplo: Creamos un content-blog.php que podrá ser cargado usando get_template_part('content','blog');

Archivos de plantillas > “Piezas”

single.php

header.php

footer.php

content-single.php sidebar.php

archive.php

Título de archivo

header.php

footer.php

content-excerpt.php sidebar.php

Plantillas hijas

Plantillas hijas

● Útiles Necesarias para trabajar sobre una plantilla de tercero.● Tienen prioridad en la jerarquía de carga de archivos sobre la plantilla

padre.

Plantilla padre Plantilla hija WordPress usa

index.phphome.phparchive.phpcategory-coches.phpsingle.phppage.phptemplate-portfolio.phpfront-page.phpsearch.php404.php

category-coches.php

template-portfolio.php

404.php

index.phphome.phparchive.phpcategory-coches.phpsingle.phppage.phptemplate-portfolio.phpfront-page.phpsearch.php404.php

Plantillas hijas

Crearlas:

1. Crear un nuevo directorio para tener archivos de plantilla con sus archivos base (style.php, functions.php)

2. Añadir a los comentarios de style.css de quién es hija esa plantillaTemplate: toolbox

Para además poder sobreescribir el CSS de la plantilla padre:

1. Enlazar desde functions.php de la hija el CSS de la plantilla padrewp_enqueue_style( 'parent-css', get_template_directory_uri() . '/style.css' );

2. Si el padre está correctamente definido con get_stylesheet_uri() , cargará automáticamente el CSS de la plantilla hija.

Extra timeDiferenciar plantilla “ligera” de

plantilla “pesada”

● Excesivo CSS y JS● CSS que carga desde PHP● Excesivo HTML● Indecisión● Hecatombe de efectos

especiales

Preguntas, comentarios y experiencias