WordPress | 23 de diciembre de 2014

Usar plantillas de página en custom post types de WordPress

Sigo avanzando en el rediseño de mi sitio y me he encontrado con un nuevo desafío: la necesidad de usar plantillas de página en un custom post type. A primera vista parece algo sencillo, pero me sorprendí al notar que WordPress no soporta esta característica de manera nativa.

Déjame darte algo de contexto.

¿Qué es una plantilla de página?

Cuando estás creando una página en WordPress, hay una sección (“meta box“) al lado derecho llamada “Atributos de página“. Desde allí puedes seleccionar cual es la página superior, cuál es el orden de esta página y cuál es la plantilla de página que quieres aplicar.

atributos de pagina

En el ejemplo anterior puedes ver las plantillas de página que tengo en mi sitio hoy día y, dependiendo de cual seleccione para cada página, el diseño será diferente. Esta página, por ejemplo, usa la plantilla predeterminada, esta otra usa la plantilla AMK Directo y esta otra página usa la plantilla Curso Temas WordPress.

En la práctica, lo que ocurre al seleccionar diferentes plantillas de página, es que le damos a WordPress la orden de cargar uno u otro archivo desde nuestro theme para aplicar el HTML y cargar el contenido de la página. Cuando usamos la plantilla predeterminada le estamos indicando que cargue el archivo page.php, que es lo estándar de acuerdo a la jerarquía de archivos de plantilla, pero cuando usamos una plantilla especial, en mi caso “AMK Directo”, estoy cargando la plantilla template-amk-directo.php desde mi tema.

El uso de las plantillas de página puede ayudarnos a crear páginas especiales para ofrecer nuestros productos (landing pages) o, recurriendo a su uso más básico, podemos aplicar simples cambios como el mostrar o no mostrar el sidebar.

La forma más fácil de crear un page template es duplicando el archivo page.php de tu tema actual, cambiar su nombre por lo que tu quieras (yo habitualmente antepongo la palabra template para darle contexto) y agregar el siguiente código al comenzar el archivo:

Con esto ya debiera aparecer en el listado de plantillas de página la opción “Mi plantilla de página“, luego solo tienes que modificar este archivo para cambiar su estructura.

Si quieres saber más aquí está la explicación en el codex.

¿Qué es un custom post type?

Un “custom post type” o CPT es un tipo de contenido nuevo que podemos crear dentro de WordPress. De manera predeterminada tenemos los “post” (entradas) y las “pages” (páginas), pero está en nuestras manos agregar nuevos contenidos como libros, películas, cursos, o cualquier otro tipo que haga sentido con la funcionalidad de nuestro sitio.

custom post typesA modo de ejemplo, así luce el menú de un sitio en el que he estado trabajando recientemente. Podrás ver que hay tipos de contenido adicionales como “Destacados”, “Slider” y “Actividades”, esto hace mucho más fácil la administración del sitio para el cliente y permite tener algo más de versatilidad en el diseño.

Crear un CPT para tu sitio requiere varias líneas de código, pero gracias a una herramienta llamada GenerateWP, esta tarea se hace mucho más sencilla. Sólo necesitas completar un formulario indicando las características del tipo de contenido que quieres desarrollar y la aplicación te devolverá el código que deberás agregar al archivo de funciones de tu tema o al plugin que estés utilizando para este propósito (lo más recomendado).

En mi caso, el “custom post type” que necesitaba agregar al sitio era Cursos, así que utilicé esta herramienta, obtuve el código y lo añadí en mi plugin. Puedes ver y utilizar mi código aquí.

Los custom post type no soportan plantillas de página

Mi intención era sencilla: crear el tipo de contenido “cursos” y, cuando fuera necesario, poder asignarle una plantilla de página específica para que el curso se pudiera mostrar de una forma más bien comercial o tipo landing page, como es el ejemplo del curso de Creación Temas WordPress Profesionales hoy día.

Parece algo sencillo, pero me encontré con la sorpresa de que no hay una forma simple y nativa de hacer que los tipos de contenido personalizados tengan la posibilidad de utilizar plantillas de páginas. 🙁

Después de dar vuelta un par de horas en internet buscando una respuesta llegué a 2 opciones:

  1. Conformarme con crear un único diseño que aplique al detalle de todos los cursos.
  2. Descargar y modificar el plugin Page Templates for Posts, para que pueda aplicar a mi CPT, ya que por defecto sólo aplica a los “post”.

Ninguna de estas 2 opciones me servía. La primera me quitaba la posibilidad de crear un landing page por cada curso y la segunda significaba bastante trabajo de programación, probablemente más avanzada de lo que me sentiría a gusto realizando, además estaría dependiendo de que eventualmente el plugin sea actualizado y debiera rehacer todo el trabajo.

Tuve que pensar creativamente y llegué a una solución más simple y efectiva 🙂

Esta es mi solución

1. Crear un custom field

Lo primero que hice fue crear una nueva sección de opciones (meta box) a la pantalla de edición de cursos que incluyera una opción personalizada (custom field) para seleccionar una plantilla de diseño. Esto lo hice a través del plugin Advanced Custom Fields Pro (aunque también puedes conseguir exactamente lo mismo con su versión gratuita).

Desde la pantalla de opciones del plugin, creé un nuevo field group llamado “Opciones de página del curso” y dentro de él creé el custom field plantilla, que es un select con las siguientes opciones:

  • estandar (para aplicar la plantilla estándar)
  • bases (para aplicar el diseño de las bases del desarrollo de temas WordPress)
  • temas-wp (para aplicar los estilos del curso de creación de temas)
  • curso-email (para aplicar a los cursos que se entreguen vía email)

Este field group aplica solo al CPT cursos y en la pantalla de edición de cada curso luce de esta forma:

ACF plantilla de pagina

2. Crear la plantilla base

Lo que sea que se seleccione en cada curso con respecto a la plantilla, carece de sentido si no lo obtenemos desde nuestro theme, así que eso es lo que hice a continuación: creé la plantilla estándar para mostrar el detalle de cada curso (single-cursos.php) y dentro de este archivo puse el siguiente código para obtener el detalle de la opción que se haya aplicado a cada curso:

Luego, basado en el valor aplicado, hice unas comprobaciones condicionales, y en base a ello se carga la plantilla  que corresponda usando “require_once” de PHP. Incluso, utilicé “wp_enqueue_style” para cargar algunas hojas de estilo específicas cuando corresponda:

 3. Desarrollar las plantillas

Con esto funcionando, lo único que queda es desarrollar el detalle de cada plantilla especial. Es mi caso he ordenado cada una de ellas dentro de una carpeta, para mantener organizado mi tema ya que varias de las plantillas usan sus propias hojas de estilo y/o archivos  JavaScript.

Así lucen los cursos

Gracias a esta solución, he conseguido que los cursos se mantengan como CPT y que cada vez que lo necesite pueda aplicar el diseño que se me antoje.

Ciertamente no es tan sencillo como si WordPress soportara las plantillas de página en los custom post types de manera nativa, pero aún así me sirve. Lo único en lo que debo poner atención es que cada vez que quiera crear una nueva plantilla deberé realizar 3 acciones:

  1. Añadir una opción nueva al custom field
  2. Actualizar la comprobación condicional
  3. Preparar el nuevo archivo de plantilla

Mira, así es como se ven algunos de los cursos gracias a esta solución:

Plantilla de curso vía email:

bases

Plantilla de curso estándar:

personalizacion-admin

Plantilla personalizada de curso Creación de Temas WordPress Profesionales:

temas-wp¿Qué opinas?

¿Crees que podría haber conseguido el mismo resultado de una forma más sencilla o que hay algún plugin que cubre esta necesidad y que nunca lo encontré? Deja tu comentario más abajo y conversemos sobre ello.

Un abrazo,
@FranciscoAMK

 

También te podría interesar:

Yo no cobro por lo que hago y tampoco por lo que sé

Yo cobro porque el cliente obtendrá un beneficio de mi trabajo Hace unos días vi que Grafiscopio compartió en su página de Facebook una imagen muy interesante indicando que adhería al mensaje que allí se expresaba. Esta imagen forma parte de una campaña orientada a cambiar algunos hábitos o malas prácticas que se dan entre […]

Seguir leyendo...

Direcciones para el 2017 (y una revisión del 2016)

En diciembre del año pasado te conté que para este 2016 no tendría objetivos específicos sino direcciones en las cuales avanzar. La lógica detrás de esto es que plantearse objetivos siempre te devuelve un resultado binario, en donde alcanzas el resultado deseado o no lo haces, mientras que plantearse direcciones abre posibilidades más amplias que […]

Seguir leyendo...

Cómo trasladar un sitio en WordPress desde un servidor de pruebas al servidor definitivo

En este artículo voy a mostrarte cómo es que habitualmente realizo la tarea de trasladar un sitio en WordPress desde un ambiente de desarrollo o pruebas a su servidor final o ambiente de producción, como le llamarían los más técnicos. Todos quienes nos dedicamos a crear sitios web para clientes solemos desarrollar e instalar los sitios web […]

Seguir leyendo...

Hay 12 opiniones

  1. Francisko,
    Para esto es mejor hacer un archive-“nombre de tu CPT”.php y un single-“nombre de tu CPT”.php con el diseño que necesites de esa forma muestras como quieres tus Custom Post Types sin necesidad de escoger plantillas. Lo otro es que es más sencillo hacer un plugin con tu CPT en vez de ocupar un plugin que lo haga por ti, de esa forma controlas todas las variantes y lo tienes como un plugin en caso de cambiar el theme.

    😉

    • Es una opción que evalué, pero si hago un archivo single-cursos.php, tendría que limitarme a tener un único diseño que aplique a todos los cursos y mi intención es poder aplicar diseños diferentes a los cursos que lo necesiten.

      No te entendí bien la parte de “hacer un plugin con tu CPT en vez de ocupar un plugin que lo haga por ti”. En cualquier caso, el CPT lo estoy creando desde un plugin que yo hice, pero ciertamente resulta mucho más fácil usar Advanced Custom Fields para manejar los Custom Fields en lugar de desarrollarlos por mi propia cuenta.

      Salu2

      • Me refería a que escribir un Custom Post Type, es sencillo, no es necesario un plugin que lo haga por ti, de esa forma puedes manejarlo como quieras. Para mi la mejor combinación ha sido CPT+ACF las taxonomias de del CPT las uso solo para lo que quiero que se use como indice de búsquedas, los ACF como datos para agregar.

  2. No se si sea mas o menos lo que buscabas pero yo lo que hice usando advance custom fields y CPT otro plug in con eso hice una taxonomia y dentro de ellas las categorias, siguiendo la jerarquia me cargaria la plantilla de la categoria, si quiero un curso nuevo, doy de alta otra categoria y le hago su plantilla. Lo hice hace tiempo, de hecho me meti el proyecto muy rapidamente jajajja, pero algo asi lo hice, aunque tu solucion me parece que esta conganas.

    gracias

  3. Hola, me pareció excelente la solución que encontraste y el ingenio !!!! Entendí perfectamente cual era la necesidad, poder elegir entre VARIAS plantillas, sin limitaciones. Excelente. Ahora mismo lo voy a probar porque justo era lo que estaba buscando. Gracias !!

    • No entiendo que es el primer parámetro que va en el wp_enqueue_style, se que es el nombre del css pero, este nombre debe estar en el propio archivo css, o es un nombre que invento en la función??????

        • Me ha funcionado casi todo muy bien, lo único que no me funciona es la llamada a la hoja de estilos con wp_enqueue_style en el single-cursos.php. Probe de varias formas, tambien probé con
          get_template_directory_uri() en lugar de get_stylesheet_directory_uri(), pero tampoco anda.

          Si no tengo declarada en el header de la plantilla a la cual derivo con require_once() la llamada al css (con link rel=”” href=”” ) no toma ningún estilo.

          • Supongamos con uno de los ejemplos que diste: Si la opción es estandar, haces esto:
            wp_enqueue_style(‘estandar-style’, get_stylesheet_directory_uri() . ‘/template-estandar/style.css’);
            require_once(‘template-estandar/template.php’);

            Bien, la plantilla template.php tiene la estructura html y con la hoja de estilos le das los estilos.
            Mi problema es que no muestra los estilos, no me funciona el wp_enqueue_style(‘estandar-style’, get_stylesheet_directory_uri() . ‘/template-estandar/style.css’);
            De la única forma que funciona el estilo es poniendo en el de template.php un
            Si le saco el , no funciona el estilo.
            Quiero saber si es algo que estoy haciendo mal, y si aconsejable o no llamar el css directamente en el head.

Y tú ¿Qué opinas?

Puede que no te responda, pero ten por seguro que leeré tu comentario. Por si acaso, tu email no se mostrará ;)

Recibe más artículos como este cada semana

Únete a los 10.903 suscriptores y recibe cada miércoles nuevo contenido sobre diseño, sitios web y creatividad.

¡Ya estamos casi! revisa tu bandeja de entrada para verificar tu email por favor.
Uy! Parece que algo salió mal procesando tu solicitud. Recaraga la página e inténtalo de nuevo.

Ya me suscribí antes, no me muestres esto.