Cómo diseñar una plantilla de página personalizada de WordPress [ACTUALIZACIÓN 2021]

Los temas de WordPress son simplemente geniales. Hacen que el diseño web de WordPress sea tan fácil.

Pero, ¿qué sucede cuando quieres ir más allá del tema elegido?

¿Qué pasa si quieres usar un diseño personalizado de WordPress en una página en particular?

Bueno, algunos temas no te permitirán alterar sus diseños.

Pero hay algunas soluciones para esto.

Sígueme para averiguarlo.

¿Qué es una Plantilla de Página Personalizada y Cómo Asignarla?

El diseño de las páginas y publicaciones de WordPress está controlado por un archivo de plantilla llamado «página».php». Las plantillas son archivos que le dicen a WordPress cómo mostrar diferentes tipos de contenido.

Ahora, es posible que no desee que todas las páginas y publicaciones tengan el mismo aspecto. Esto es cuando necesitas una plantilla de página personalizada.

¿Qué plantillas de página de WordPress estás utilizando?

¿Quieres saber qué plantilla de página estás usando o cómo cambiar entre plantillas?

Es fácil, necesitarás:

1. Dirígete a tu panel de administración de WordPress,
2. En el menú de la izquierda, selecciona «Páginas»,
3. Pasa el cursor sobre el título de una página,
4. En el menú debajo del título, selecciona «Edición rápida»,
5. Ventana «Edición rápida», ve al menú desplegable «Plantilla».

Aquí puedes ver todas las plantillas de temas disponibles y puedes asignar una plantilla diferente a tu página actual.

Por ejemplo, hay una opción para cambiar tu página a ancho completo, si lo deseas. Pero no hay opción para una plantilla que agregue una segunda barra lateral.

Esta es la razón por la que las plantillas personalizadas de WordPress pueden ser útiles. Cada vez que guardes una nueva plantilla, también estará disponible junto con las antiguas.

Ahora, también puede asignar hacer esta asignación dentro de la página. Cuando elija editar una página, en el lado derecho, diríjase a» Atributos de página » – Plantilla>.

Cómo crear un tema secundario

Ahora, antes de ensuciarnos las manos con la creación de una plantilla de página personalizada de WordPress, hay una cosa a tener en cuenta: realizar los cambios en un tema secundario. No querrás causar cambios irreversibles en el tema principal.

Un tema secundario de WordPress es un subtema que hereda todas las características y estilos del tema principal. Ahora, si el tema principal recibe una actualización, el tema hijo no se verá afectado y los cambios no se sobrescribirán.

Ahora, ¿cómo se crea un tema hijo? Estos son los pasos:

1. Inicie sesión en su cPanel,
2. Vaya al Administrador de archivos,
3. Diríjase a public_html -> wp-content -> carpeta temas,
4. Mientras esté dentro de la carpeta «Temas», agregue una nueva carpeta desde «+Carpeta» en el menú superior. Dale un nombre. Una buena práctica es usar el nombre del tema, al que se añade «-hijo». También, usa guiones, en lugar de espacio. En mi caso, voy a usar mesmerize-child, porque estoy usando el tema Mesmerize,
5. Dentro de la carpeta, crear un nuevo archivo y llamarlo «estilo».css»,
6. . Haga clic con el botón derecho en el archivo y seleccione la opción «Editar».

   /* Theme Name: Your Theme Child Theme URL: http://yourdomain.comDescription: Your Theme Child Theme Author: Your NameAuthor URL: http://yourdomain.comTemplate: yourtheme Version: 1.0.0 Text Domain: yourtheme-child */

   Aquí puede pegar parte del código en el archivo CSS principal o agregar su propio estilo.

7. Cambie el tema y los nombres de dominio, luego presione «Guardar»,
8. Cree otro archivo en la misma carpeta. Esta vez, llámelo «funciones».php». Pegue el siguiente código:

   <?phpadd_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );function enqueue_parent_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );}?>

9. Vaya al panel de WordPress, Aspecto -> Tema. El tema de su hijo estará allí, solo tiene que activarlo.

Y listo.

A continuación, hagamos una nueva plantilla, ¿de acuerdo?

¿Cómo Crear una Plantilla de Página Personalizada de WordPress?

Puede comenzar desde el código de tema existente y hacer los ajustes necesarios.

Estos son los pasos:

1. Vaya a cPanel- > Administrador de archivos,
2. Vaya a public_html – > wp-content – > carpeta temas,
3. Abra su carpeta de tema principal,
4. Identifique la página.archivo php. Se verá así.:

   <?php mesmerize_get_header(); ?> <div class="page-content"> <div class="<?php mesmerize_page_content_wrapper_class(); ?>"> <?php while (have_posts()) : the_post(); get_template_part('template-parts/content', 'page'); endwhile; ?> </div> </div><?php get_footer(); ?>

5. Seleccione el archivo y, a continuación, elija «Copiar»,
6. En la ventana que aparece, cambie la ruta del archivo a la de la carpeta secundaria de su tema,
7. Cambie el nombre del nuevo archivo para que pueda identificar fácilmente lo que hace.
8. Agregue un comentario dentro del archivo para que pueda decirle a WordPress que esta es una nueva plantilla personalizada. Haga esto seleccionando «editar» e insertando este texto:

   /* * Template Name: Your custom TEmplate's name * description: >- Explain what your new templates does */

   Su nuevo archivo debería tener este aspecto:

   <?php /* * Template Name: Custom Full Width * description: >- Page template without sidebar */mesmerize_get_header(); ?> <div class="page-content"> <div class="<?php mesmerize_page_content_wrapper_class(); ?>"> <?php while (have_posts()) : the_post(); get_template_part('template-parts/content', 'page'); endwhile; ?> </div> </div><?php get_footer(); ?>

También puede agregar aquí copias de otros archivos. Por ejemplo, puede personalizar el sencillo.archivo php, que cambiará la apariencia de las publicaciones de blog.

A continuación, tendrás que arremangarte y escribir un código.

Y si desea modificar el estilo CSS, puede hacerlo dentro del Personalizador de temas secundarios, dentro de CSS Adicional o dentro del estilo.archivo css.

Sin embargo, hay una solución más simple

Con un creador de sitios como Colibri, todo el código «permanece» detrás y no bloquea a un creador de sitios no técnico. Cada adición o cambio a una página personalizada se refleja visualmente en el Personalizador. Por lo tanto, el creador del sitio tiene más control sobre el diseño. La bonita página personalizada estará lista en un abrir y cerrar de ojos, sin molestarse por el código detrás de la página.