• Ir a navegación principal
  • Ir al contenido principal
  • Ir a la barra lateral primaria

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
Inicio / Tutoriales / Themes / Archivo de plantilla de acuerdo a url personalizada en WordPress
Anuncio banner webservi

Archivo de plantilla de acuerdo a url personalizada en WordPress

Archivo de plantilla de acuerdo a url personalizada en WordPress

[ 2 septiembre 2020 ] [ Autor: Jhon Marreros Guzmán ][ Themes - Avanzado] [ ]

funcionalidad

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Recientemente se me planteó un problema, tenía que generar urls en base a parámetros, pero además que de acuerdo a esas urls personalizadas se muestre un determinado diseño e información.

 

Generalidades

Anteriormente habíamos visto que WordPress tiene una Jerarquia de Archivos a nivel del tema, en el cual dependiendo de la url consultada se ejecuta uno un otro archivo, sin embargo ¿qué sucede si tengo una url con parámetros, o una url que no se encuentra dentro de ese estándar?.

 

Resultado Final

Al final lo que queremos obtener será algo similar a lo que se muestra en la siguiente imagen:

Url personalizada resultado

 
Tal como puedes observar, estamos usando una url amigable que hace referencia a un nombre, cuando carga la página se mostrará con ese nombre como parte del contenido.

 

Código para mostrar archivo de plantilla de acuerdo a url

Para mostrar un contenido determinado de acuerdo a la url usaremos un archivo de plantilla.


//Sobreescritura de urls
add_action( 'init',  function() {
    add_rewrite_rule( 'nombre/([a-zA-Z ]+)[/]?$', 'index.php?nombre=$matches[1]', 'top' );
} );


//Agregar parámetros
add_filter( 'query_vars', function( $query_vars ) {
	$query_vars[] = 'nombre';
    return $query_vars;
} );

//Carga archivo de plantilla de acuerdo al parámetro
add_action( 'template_include', function( $template ) {
    if ( get_query_var( 'nombre' ) ) {
		return get_stylesheet_directory() . '/home-nombre.php';
    }
	return $template;
} );

 
El código anterior tiene 3 partes:

  1. Sobreescritura de urls, este código nos permite trabajar con urls amigables en lugar de parámetros, usamos la función add_rewrite_rule(), acepta como parámetros una expresión regular para la url amigable y su correspondiente equivalencia con parámetros.
  2. Agregar parámetros, necesitamos indicarle a WordPress con qué parámetros adicionales trabajar, para esto usamos el filtro query_vars en donde agregamos el nuevo parámetro de nombre
  3. Carga archivo de plantilla, de acuerdo al parámetro de la url cargaremos un archivo de plantilla, usamos el hook template_include que hace referencia a una función en la cual verificamos si la url tiene un parámetro de nombre, si es así entonces cargaremos un archivo de plantilla llamado home-nombre.php

 

Código en el archivo de plantilla

En el archivo de plantilla, adicional al código existente, usarás un código que recupere el parámetro de la url en una variable y posteriormente la muestre, por ejemplo:

<div>
	<?php $nombre = get_query_var( 'nombre' );?>
	<h3>Hola <?php echo $nombre ?></h3>
</div>
Para la creación del archivo home-nombre.php, puedes basarte en un archivo de plantilla ya existente.

 

Conclusión

Tal como hemos visto, puedes crear tus propios archivos de plantillas que tengan un diseño personalizado y que se muestren sólo para determinadas url, todo esto de manera simple a través de código.
 

¿Aún con dudas?, en el siguiente video se detallan los puntos anteriores.

Suscríbete a DecodeCMS:  

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Exportar / importar  la configuración del personalizador de temas en WordPressExportar / importar la configuración del personalizador de temas en WordPress
  • Personalizar página de gracias de WooCommercePersonalizar página de gracias de WooCommerce
  • Configura el tema Twenty Twenty One WordPressConfigura el tema Twenty Twenty One WordPress
  • Abrir enlaces externos en un nuevo tab automáticamenteAbrir enlaces externos en un nuevo tab automáticamente
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (2 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. RODOLFO SEALES

    10 octubre, 2020

    Hola Amigo. como estas? estoy en busqueda de poder lograr algun codigo o articulo que me permita hacer lo siguiente en un sitio wordpress y es posible que segun este articulo puedas ayudarme u orientarme. Yo necesito que siempre la URL del sitio conserve siempre la misma direccion, sin importar en que parte de el sitio web se encuentre. es decir, si tengo una URL cualquiera, ejemplo : http://sitioweb.com/nombre/jhon me muestre unicamente http:/sitioweb.com, es esto posible enmacarando la URL? que puede solucionarse para lograrlo? conoces algun plugin que pueda hacerlo?

    • Jhon Marreros Guzmán

      10 octubre, 2020

      Hola, podrías evaluar usar iframes que sería la más rápido, lo otro es que uses Ajax en todo el sitio, esto sería más complicado. Sin embargo ten en cuenta que tener una misma url te perjudicará en SEO. Saludos.

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral primaria

Presentación

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
Los 5 posibles errores que estas cometiendo cuando trabajas con código en WordPress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social

Populares

Cómo duplicar un Widget en WordPress con Javascript

Mostrar subcategorías de una categoría en listado de entradas

Consultar dudas de produtos por Whatsapp en WooCommerce

Agregar animaciones de aparición sin plugins en WordPress

Recientes

  • Exportar / importar la configuración del personalizador de temas en WordPress
  • Personalizar página de gracias de WooCommerce
  • Configura el tema Twenty Twenty One WordPress
  • Abrir enlaces externos en un nuevo tab automáticamente
alojamiento wordpress

© logo decode pie Copyright 2021 | Todos los derechos reservados | Política de Privacidad