Pasos sencillos para codificar una página de inicio de WordPress personalizada

No se necesita mucha experiencia con el diseño web para aprender que crear una buena página de destino no es fácil. Debe tener una idea clara de lo que se supone que trata su página de destino . Y necesitas entender a tus visitantes y guiar su atención hacia la conversión. Afortunadamente, si está familiarizado con los conceptos básicos de la codificación web, tendrá la libertad necesaria para optimizar su página como mejor le parezca. Con eso en mente, veamos de qué se trata la codificación de una página de inicio personalizada de WordPress .

La importancia de una landing page

Antes de repasar los pasos específicos de la codificación, primero analicemos por qué es importante tener una buena página de destino. Apenas existe una guía en línea para la creación de sitios web que no mencione la importancia vital de tener una página de destino decente . Ya sea que su sitio web se trate de vender un producto, ofrecer un servicio o recopilar datos, debe tener una buena página de destino.

Desafortunadamente, crear una buena página de destino no es fácil. Debe tener una idea clara de cómo se supone que debe ser su aterrizaje. Y necesita comprender a su audiencia para guiarlos hacia las conversiones. Una página de destino mal optimizada puede reducir considerablemente su rendimiento y, potencialmente, arruinar su presencia en línea, que de otro modo sería excelente. Recuerde, la página de destino suele ser el último paso antes de que su visitante se convierta en cliente . Por lo tanto, haz todo lo posible para que sea lo mejor posible. Afortunadamente, si conoce los conceptos básicos de la programación web, puede codificar fácilmente una página de destino personalizada. Esto le da una cantidad considerable de libertad, que suele ser necesaria para una página verdaderamente funcional . Entonces, con eso en mente, avancemos paso a paso hacia el código necesario para crear una página de destino de WP.

Codificación de una página de destino de WordPress personalizada

Si bien los pasos que describiremos son bastante simples, siempre debe considerar consultar a un diseñador web profesional. Ciertos sitios web pueden ser bastante complicados con numerosos complementos que se ejecutan en segundo plano . Y algunos de esos complementos pueden causar o experimentar problemas si no está seguro de lo que está haciendo. Si bien puede deshabilitar complementos sin acceso al área de administración, realmente debe evitar meterse en demasiados problemas . Si experimenta alguna dificultad en el futuro, comuníquese con un diseñador web profesional para que lo ayude.

Crear un tema hijo

Si bien, en teoría, puede crear un nuevo tema principal, debe optar por un tema secundario. Son mucho más adecuados para la personalización, lo que le brinda más libertad para crear páginas de destino únicas. Ya que hemos cubierto cómo crear un tema hijo, no lo volveremos a tratar aquí. Lo único que mencionaremos es que necesita tener los archivos style.css y functions.php en el directorio de su tema secundario para continuar.

Cree un archivo Style.css

En el archivo style.css simplemente necesita agregar el siguiente código:

/*

Nombre del tema: Tema de la página de destino

Descripción: tema secundario con página de destino personalizada

Autor: Escritor predeterminado

Autor URI: https://www.wpfullcare.com

*/

Crea un archivo Functions.php

En el archivo functions.php, debe agregar el siguiente código. Si lo hace, podrá registrar su archivo de hoja de estilo secundario.

<?php

// Estilos de temas principales //

// https://codex.wordpress.org/Temas_infantiles //

función tema_encolar_estilos() {

$parent_style = 'parent-style';

wp_enqueue_style ($parent_style, get_template_directory_uri() . '/style.css');

wp_enqueue_style( 'estilo hijo',

get_stylesheet_directory_uri() . '/estilo.css',

matriz ($ estilo_padre)

);

}

add_action('wp_enqueue_scripts', 'theme_enqueue_styles');

Instala y activa tu tema hijo

Una vez hecho esto, puede proceder a instalar y activar su tema secundario. Cuando se trata de temas de WordPress en general, desea probarlos localmente en un sitio web de WP diferente. Como mencionamos, los accidentes ocurren. Y realmente debería evitar deshabilitar su sitio web . Una vez que configure un sitio local de WordPress, proceda a cargar su tema. Una vez que lo active, asegúrese de que su tema hijo esté funcionando y que pueda agregar estilos. Vaya al archivo style.css y modifique algunas partes del código para ver si funciona.

Crea una página personalizada

Si todo está en orden, puede proceder a crear una página personalizada en su tema hijo. Para hacerlo, debe crear un nuevo archivo en el tema de su hijo. Una vez que lo haga, guárdelo como page-landing.php. En ese archivo necesitas agregar el siguiente código:

<?php

/**

Nombre de la plantilla: página de destino

**/

?>

Ahora, dirígete al menú desplegable de plantillas y elige tu página de destino del menú. Deberá elegir una imagen destacada para usarla como fondo ( elija algo grande y simple por ahora, ya que puede experimentar más adelante ). Luego agregue su copia y publique la página agregada. Intentar revisar tu página ahora solo te llevará a una pantalla negra. Esto se debe a que aún no ha agregado el siguiente marcado a page-landing.php.

<div id=”página de destino” class=”sitio hfeed”>

<div class=”marca del sitio”>

<p class=”site-title aligncenter”><a href=”<?php echo esc_url( home_url( '/' ) ); ?>” rel=”inicio”><?php bloginfo( 'nombre' ); ?></a></p>

</div><!– .marca-del-sitio –>

Una vez que lo agregue y obtenga una vista previa de su página, debería ver el título de su sitio junto con un fondo blanco y una imagen de fondo grande.

Mostrar contenido

Para mostrar el resto del contenido en su página de destino, debe agregar el siguiente marcado a page-landing.php. Debe hacerlo justo debajo de la línea <!– .site-branding –> para que funcione correctamente.

<div class=”sidebar sidebar-soborno”>

<?php si (tener_mensajes()) : ?>

<?php while (have_posts()) : the_post(); ?>

<h1 class=”título-de-aterrizaje”><?php the_title(”); ?></h1>

<?php el_contenido(); ?>

<!– https://codex.wordpress.org/Function_Reference/wp_link_pages –>

<?php mientras tanto; ?>

<?php endif; ?> <!– mdl-cell-8 //#principal –>

</div>

La codificación de una página de destino personalizada de WordPress está casi lista. Todo lo que tienes que hacer es configurar el estilo para ello. La forma más sencilla de hacer esto es solo el archivo style.css y el código necesario. Como hay opciones literalmente ilimitadas sobre cómo puede verse su página, no le daremos un ejemplo estricto a seguir. En cambio, le recomendaremos que encuentre un estilo que le guste y lo copie . De esa manera descubrirás cómo funcionan los diferentes aspectos de su función.