¿Cómo crear templates personalizadas para tu sitio WordPress? En este articulo aprenderás a hacerlo utilizando uno de estos dos métodos: Mediante Php o usando Elementor.
A continuación, te explicamos ambos procesos detalladamente.
Contenidos
Wordpress templates con PHP
Este método es gratuito pero requiere conocimientos en programación.
- Accede al Escritorio de WordPress: Dirígete a la sección de apariencia y verifica el tema activo.
- Crea un Archivo de Plantilla: Usando el gestor de archivos de tu hosting (por ejemplo, cPanel), crea un archivo PHP en la carpeta del tema activo. Nombralo de forma descriptiva, en nuestro caso hemos usado:
sooda-template.php. - Añade el Comentario de Plantilla: Incluye un comentario en el archivo con el nombre de la plantilla, así WordPress podrá reconocerla.
/* Template Name: Soda */
- Diseña tu Plantilla: Agrega el HTML, CSS y PHP necesarios para diseñar la plantilla. Aquí tienes el código completo que hemos usado en el vídeo
get_header(); ?>
<style>
.entry-title {
text-align: center;
font-size: 55px;
font-weight: bold;
text-transform: uppercase;
padding: 175px 0;
margin: 0;
background-color: #12141c;
color: white;
}.entry-content {
max-width: 1100px;
margin: 0 auto;
padding: 20px 0;
}.cta-banner {
background-color: #060709;
color: white;
text-align: center;
padding: 50px 20px;
margin: 40px 0;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}.cta-banner h2 {
font-size: 36px;
margin: 0 0 20px 0;
}.cta-banner p {
font-size: 18px;
margin: 0 0 20px 0;
}.cta-banner a {
display: inline-block;
background-color: #dbf228;
color: black;
padding: 10px 20px;
text-decoration: none;
border-radius: 5px;
border: 1px solid transparent;
transition: all 0.3s;
}.cta-banner a:hover {
background-color: #060709;
color: #dbf228;
border: 1px solid #dbf228;
}
</style><div id=»primary» class=»content-area»>
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
?>
<header class=»entry-header»>
<h1 class=»entry-title»><?php the_title(); ?></h1>
</header><!– .entry-header –><main id=»main» class=»site-main» role=»main»>
<article id=»post-<?php the_ID(); ?>» <?php post_class(); ?>>
<div class=»entry-content»>
<?php the_content(); ?>
</div><!– .entry-content –>
</article><!– #post-## –>
<?php
endwhile;
else :
echo ‘<p>No hay contenido disponible.</p>’;
endif;
?><div class=»cta-banner»>
<h2>¡Suscríbete a nuestro canal de YouTube!</h2>
<p>Recibe notificaciones de nuestros últimos tutoriales y contenidos exclusivos.</p>
<a href=»https://www.youtube.com/@Soodapro?sub_confirmation=1″ target=»_blank»>Suscribirse ahora</a>
</div>
</main>
</div><?php
get_sidebar();
get_footer();
?>
- Aplica la Plantilla: Desde WordPress, selecciona esta plantilla para una página específica y actualiza.
Wordpress templates con Elementor
Este método es más sencillo y requiere el plugin Elementor (Puede ser free o Pro).
- Instala y Activa Elementor: Asegúrate de tener Elementor activo en tu WordPress.
- Crea una Nueva Plantilla: Ve a Plantillas -> Añadir Nueva, selecciona tipo página, y nombra tu plantilla.
- Diseña con Elementor: Utiliza la interfaz de arrastrar y soltar de Elementor para diseñar tu página. Guarda los cambios.
Uso de Elementor Pro
Elementor Pro ofrece ventajas adicionales, como el Theme Builder, que permite aplicar dinámicamente plantillas a múltiples páginas.
- Activa Elementor Pro: Una vez activo, ve a Plantillas -> Theme Builder.
- Crea y Asocia Plantillas Dinámicas: Diseña tu plantilla y establece condiciones de visualización para que se apliquen automáticamente a ciertas páginas.
Conclusión sobre crear plantillas personalizadas en Wordpress
Crear plantillas personalizadas en WordPress puede mejorar la consistencia y eficiencia del diseño de tu sitio web.
Ya sea a través de métodos manuales o utilizando herramientas como Elementor, puedes lograr un diseño profesional y dinámico que se ajuste a tus necesidades. Si te ha gustado este tutorial, suscríbete a nuestro canal para más contenido útil.
