• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Themes / Archivo de plantilla de acuerdo a url personalizada en WordPress

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

  • Mostrar elementos según día y hora en WordPressMostrar elementos según día y hora en WordPress
  • URL para agregar varios productos al carrito de WooCommerceURL para agregar varios productos al carrito de WooCommerce
  • Cambiar temporalmente la URL de WordPressCambiar temporalmente la URL de WordPress
  • Campos personalizados con ACF para contenido en WordPressCampos personalizados con ACF para contenido en WordPress
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (3 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.

  2. Fernando

    17 febrero, 2023

    Excelente, muy util, sobre todo para generar paginas virtuales. Consulta, se puede habilitar la opción de comentarios a este tipo de Paginas ?

    • Jhon Marreros Guzmán

      17 febrero, 2023

      Hola, si, es posible habilitar comentarios en páginas o entradas, sin embargo en este caso depende de la plantilla de página que incluya el código para mostrar comentarios, guíate de tu theme original e investig como muestra los comentarios en las páginas.

      • Fernando

        18 febrero, 2023

        Gracias ! voy a investigar como hacerlo, otra consulta, si quiero tener 2 diferentes, una para nombre/jose y otra para universidad/ucla es posible pasar eso ?

        • Jhon Marreros Guzmán

          20 febrero, 2023

          Hola, si claro, guíate del código en la condicion que usa la función get_query_var()

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

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

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

Populares

Usar Firebug para modificar un theme WordPress

Posts relacionados sin plugins en WordPress

Agregar rel=0 a videos YouTube de manera automática en WordPress

Habilitar sonido en video theme Twenty Seventeen

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados