() translation by (you can also view the original English article)
Para celebrar el Cyber Lunes, hoy te mostraremos una técnica para crear una "Página de bienvenida" personalizada para tu tema de WordPress. Probablemente estés viendo muchos de estos en la red hoy, por lo que sabes que son excelentes para realizar promociones rápidas de productos o eventos... pero puedes divertirte con ellos y encontrar formas creativas de usar una página de presentación, como publicidad, botón de donación, campañas de donación por radio, lo más destacado de una carrera próxima o lo más destacado de un nuevo producto.
La estrategia
Una página de presentación, también conocida como página estática, es la primera página que ves cuando visitas un sitio web. La idea detrás de una página de presentación es mostrar algo importante, de esa manera este importante producto recibirá la atención que merece si por alguna razón tu página de inicio carece de diseño.
Antes de sumergirnos, analicemos brevemente algunas de las cosas que se deben y no se deben hacer en las páginas de presentación en términos de la estrategia general:
No te dejes llevar y mantén la página de inicio durante demasiado tiempo; la página es más una promoción temporal, utilizada incorrectamente, es solo un clic adicional en tu producto; Cuantos más clics tenga que hacer tu usuario, más infeliz estará. También se convierte en una distracción no valorada después de cierto tiempo. Sin embargo, si se usa correctamente (en ráfagas cortas, como para las ofertas del viernes negro), puede ser muy útil para una promoción rápida y audaz de algo que vale la pena.
Nota al margen de diseño: si no te gusta el diseño, no te preocupes, es solo algo en lo que trabajé... el flujo de trabajo aquí es lo realmente importante y te haremos crear tu propio diseño de salpicadura personalizado en ¡muy poco tiempo!
Paso 1: Configura la plantilla de página personalizada
El primer paso para crear tu página de inicio personalizada es utilizar una plantilla de página. Ya hemos tenido algunos tutoriales en el sitio sobre su uso, así que si no estás familiarizado, consulta esta publicación.
Se puede crear una página de inicio sin usar una plantilla de página, pero hacerlo de esta manera nos permite integrarla directamente en cualquier tema que tu (o tu cliente) esté utilizando.
Comencemos abriendo tu editor de texto favorito y agregando el código a continuación. Antes de agregar más código, guarda el archivo como splash.php. Asegúrate de guardar tu nuevo archivo como php, no como archivo html.
1 |
<?php |
2 |
/* |
3 |
Template Name: Splash |
4 |
*/ |
5 |
?> |
Esto le permite a WordPress saber que es una plantilla, por lo que estará disponible en el menú desplegable a través del editor de página con el nombre de la plantilla que le asignes, en este caso llamado Splash.
Para crear el resto de la plantilla de página, puedes usar HTML básico o cualquier código con el que estés familiarizado. Sin embargo, recuerda que los códigos cortos y otras características de WordPress no funcionarán si estás utilizando HTML básico. Lo que voy a hacer es mantenerlo simple con código y usar una imagen que diseñé para un piloto de carreras y hacer que se muestre en pantalla completa (navegador).
Con un estilo CSS, puedes hacer que una imagen se muestre a pantalla completa en tu navegador. Incluso si tu imagen es demasiado pequeña, se pixelará para ajustarse a la pantalla. Es mejor tener una imagen grande de alrededor de 900px de ancho o más, pero mantén la altura más pequeña alrededor de 300px para que tu diseño se muestre en la pantalla. El siguiente estilo CSS funciona en cualquier versión de buenos navegadores: Safari / Chrome / Opera / Firefox, IE 7/8 (principalmente funciona: no se centra en tamaños pequeños pero llena la pantalla bien) e IE 9 funciona.
Aquí está el estilo CSS:
1 |
img.splash {
|
2 |
/* Set rules to fill background */ |
3 |
min-height: 100%; |
4 |
min-width: 1024px; |
5 |
|
6 |
/* Set up proportionate scaling */ |
7 |
width: 100%; |
8 |
height: auto; |
9 |
|
10 |
/* Set up positioning */ |
11 |
position: fixed; |
12 |
top: 0; |
13 |
left: 0; |
14 |
} |
15 |
|
16 |
@media screen and (max-width: 1024px) {
|
17 |
img.splash {
|
18 |
left: 50%; |
19 |
margin-left: -512px; /* 50% */ |
20 |
} |
21 |
} |
Querrás poner el estilo CSS en tu plantilla de página de presentación. Para comprender mejor cómo y dónde, a continuación, se encuentra mi plantilla terminada.
La forma en que funciona el estilo es que encuentra class="splash" dentro de una etiqueta img. Notarás que en la plantilla de mi página, la etiqueta img se puede encontrar dentro de body que está vinculada a mi diseño de auto de carrera jpg. Querrás subir tu diseño a WordPress e insertar tu URL. Además, asegúrate de que la clase coincida con lo que tienes dentro del img o no funcionará.
1 |
<?php |
2 |
/* |
3 |
Template Name: Splash |
4 |
*/ |
5 |
?> |
6 |
|
7 |
<html><head> |
8 |
<title>Splash Page</title> |
9 |
|
10 |
<style> |
11 |
|
12 |
img.splash {
|
13 |
/* Set rules to fill background */ |
14 |
min-height: 100%; |
15 |
min-width: 1024px; |
16 |
|
17 |
/* Set up proportionate scaling */ |
18 |
width: 100%; |
19 |
height: auto; |
20 |
|
21 |
/* Set up positioning */ |
22 |
position: fixed; |
23 |
top: 0; |
24 |
left: 0; |
25 |
|
26 |
} |
27 |
@media screen and (max-width: 1024px){
|
28 |
img.splash {
|
29 |
left: 50%; |
30 |
margin-left: -512px; } |
31 |
} |
32 |
|
33 |
</style> |
34 |
</head> |
35 |
<body> |
36 |
<a href="homepage"><img class="splash" src="images/Landscape_Design_Front.jpg"></a> |
37 |
</body></html> |
Envolví mi imagen alrededor de una etiqueta href para que creara un área grande en la que se puede hacer clic que está vinculada a la página de inicio. Para que el enlace de mi página de inicio funcione, tengo que crear una nueva página en WordPress.
Antes de hacer cualquier otra cosa, carguemos nuestra nueva página de plantilla splash.php en tu carpeta de temas. En tu software ftp favorito (me gusta filezilla) transfiera la plantilla splash.php que acabas de crear y colócala en el directorio principal de tu tema (/wp-content/themes/yourthemename).
Paso 2: agrega la página de inicio
El siguiente paso es iniciar sesión en WordPress y, en la página, haz clic en agregar nuevo. Desde aquí es donde harás la página de inicio. No tienes que hacer nada más que ingresar el título "Página de inicio" y presionar publicar. Una vez publicada, deberías poder ver la página en www.yourdomain.com/homepage.
Paso 3: Agrega la página de bienvenida
El siguiente paso es crear una página más, así que haz clic en agregar nueva página nuevamente y esta vez ingresa el título "Splash". Hay una tarea adicional importante que debes hacer para esta página y es seleccionar la plantilla de la página de inicio (que acabas de crear y cargar usando tu FTP) en el menú desplegable de plantillas de página (generalmente en la barra lateral). Pulsa publicar y deberías poder ver la página en www.yourdomain.com/splash.
Este es un buen momento para ver cómo se ve tu página de inicio. Si el diseño que construiste no se ajusta a la pantalla de la manera que te gustaría, entonces reconstruye; no es necesario cambiar ninguno de los estilos CSS. Lo que ves es lo que pronto será la página de inicio de tu sitio web. Así que trabaja con tu imagen para que tenga el aspecto que te gustaría y vuelve a cargar la imagen FTP para ver los nuevos resultados.
Paso 4
Genial, ahora, si todavía estás conmigo, aquí es donde ocurre la magia de WordPress. En configuración, haz clic en lectura. La primera opción "Muestra la página principal", verás un botón de radio con la etiqueta "Una página estática (selecciona a continuación)", haz clic en el botón y selecciona "Splash" como tu página principal y "Página de inicio" como tu página de publicaciones. Haz clic en guardar y luego consulta los resultados de tu página de inicio visitando tu sitio web.
Estás terminado. WordPress convierte la primera página de tu sitio en la página de inicio y convierte la página de inicio que acabas de crear en tu nueva página de índice, que es la página que tiene todas tus historias, fotos, navegación, etc.
Cuando estés listo para eliminar la página de inicio, todo lo que tienes que hacer es volver a las lecturas, que se encuentra en la configuración, y hacer clic en el botón de radio que tiene la etiqueta "Tus últimas publicaciones". Todo volverá a la normalidad… magia, ¿verdad?
Cambiando alrededor de tu navegación
Algo que debes tener en cuenta es que la navegación de tu sitio se vinculará a la página de inicio cada vez que alguien haga clic en tu logotipo o en el enlace de la página de inicio. Por lo tanto, si no deseas que sigan volviendo a la página de inicio, lo cual no es posible, deberás cambiar el enlace de tu página de inicio a www.yourdomain.com/homepage en lugar de www.yourdomain.com. Lamentablemente, no entraré en detalles sobre cómo puedes cambiar tu navegación porque hay muchas formas diferentes de hacerlo.
Disfruta y diviértete con las posibilidades de una página de bienvenida.
