Cómo crear un sitio de WordPress de una sola página (2021)

Hola, esta es nuestra nueva serie How to WordPress. Esta es la primera publicación sobre cómo crear un sitio de WordPress de una sola página con WordPress, pero en el futuro, agregaremos nuevas publicaciones sobre cómo crear algo útil en WordPress. En esta publicación, analizaremos en profundidad cómo crear un sitio web útil en una página en WordPress. Este artículo está organizado en 3 partes. En primer lugar, aprenderemos cómo agregar la funcionalidad de una página a un tema de WordPress desde cero. En segundo lugar, buscaremos un tema popular de WordPress y aprenderemos cómo crear un sitio web con una página con un tema popular de WordPress. En la tercera parte, aprenderemos cuál es la mejor manera de diseñar un sitio web de una sola página.
Ok, ahora tome un café y comience juntos para aprender algo nuevo. Agregue primero la funcionalidad de una página al tema de WordPress, instale el nuevo sitio de WordPress con un tema simple o tema predeterminado de WordPress o comience a cambiar el sitio web existente de WordPress. Debe descargar y configurar un Scroller de JavaScript OnePage. Puedes encontrar muchos de ellos en Github. Mi guión favorito es JQuey-One-Page-Sav. Es un complemento de jQuery ligero para navegar en sitios de una sola página. Ok, ahora te enumeraré lo que necesitas hacer:
Obtenga el archivo jquey.nav.js en GitHub y cárguelo a la carpeta JS del tema que está utilizando.
Vaya al archivo Functions.php del tema y agregue estas líneas al final:
add_action (‘wp_enqueue_scripts’, ‘coness_one_page’);
/*
* Pon un guión en la cola
*/
COESS_ONE_PAGE () Función {
wp_enqueue_script (
“Coless_one_page”,
get_template_directory_uri (). “/Js/jquery.nav.js”,
Array (‘jquey’)
);
}
Ahora acceda al archivo JS principal de su base al final, agregue estos $ (documento) .Ready (function () {
if (window.location.hash)
$ (‘Nav .Menu Li A: no ([href = “‘+window.location+'”])’). Parent ().
$ (‘Nav .menu’). OnePagenav ({
CurrentClass: “Artículo de-Cura”,
Changehash: falso,
Scrolspeed: 750,
Umbral de desplazamiento: 0.5,
});
});
Ahora que ha configurado la funcionalidad de WordPress con una página, todo lo que tiene que hacer es ir a la configuración del menú y agregar un enlace como este al menú personalizado: #Functions
Ahora su menú de WordPress de una página está listo, accede al contenido que ha creado y lo organiza con HTML Div, por ejemplo:

{su contenido.}
{Tu contenido. Comencemos por instalar su demostración y datos:
Esta demostración se crea usando solo un control deslizante sin un código como diapositiva vertical. Entonces, comencemos a personalizar cada diapositiva en la presentación que queremos hacer. Pero antes de agregar contenido, hay algunas cosas en las que debe centrarse primero. Cree un sitio web para su negocio para ayudarla a desarrollarse. Entonces debes incluir:

una presentación de tu,
Un blog para publicar sus ideas y ver lo que sus clientes tienen que decir,
una página de preguntas frecuentes,
¿Cómo puede contactar a sus clientes (contacto)?
La primera página estática, lo primero que debe hacer después de instalar el tema y los datos demostrativos es asignar la primera página del sitio y la página de publicación, porque incluimos el blog. Los menús de inicio estático son la estructura más importante de un sitio web , porque los clientes pueden ver lo que ofrece y navegar a través de las secciones de su sitio. Solo si todo su contenido está bien organizado en los menús. Para averiguar cómo asignar menús de aluminio, rastrear este tutorial detallado: establecer menús
Primero cree un nuevo menú:
Un buen menú es mínimo y una presentación de lo que ofrece su sitio. Estas son las páginas más importantes que debes enfocar ahora. Si agrega otras páginas, puede asignarlas más tarde.
El encabezado Después de crear el menú, está listo para personalizar el encabezado. Coess Builder contiene 2 secciones dedicadas al encabezado.

Entime: que incluye opciones generales para personalizar el logotipo, estilos personalizados, desplegables y estilos móviles, paja, fila de encabezado superior.
Encabezado Builder: en esta sección se mostrará las opciones de los elementos que incluye en el encabezado (menú social, menú, logotipo, herramientas, botón, texto)
Dejo para un diseño simple y contenido de contenido, así que elegí la apariencia con ancho completo, sin líneas o bordes adicionales.
Para el logotipo, elegí el tipo de logotipo de fuente y cargué su versión oscura y abierta.

Hice otro ajuste de color y tamaño de fuente sobre el encabezado:
La identidad del sitio es importante para personalizar la identidad del sitio. Vaya a las opciones de temas> Sitio de identidad y elija el título del Sitio, el eslogan y un Favicon: Agregar el contenido: la página de inicio (diapositiva 1) para comenzar a agregar contenido primero en la página de inicio. Dado que todo el sitio se crea sobre la base de una sola diapositiva sin código, solo debemos editar las diapositivas. La primera diapositiva es nuestra página inicial. Por lo tanto, puede agregar una descripción del producto, puede incluir algunos iconos sociales o compartidos y un fondo interactivo:
Para cambiar el fondo del cursor, vaya a la fila que contiene> opciones generales y agréguelo aquí. Para hacer que la diapositiva sea una diapositiva vertical, vaya al código sin código> Habilite la opción de la rueda del mouse.

Agregar contenido: la diapositiva 2 en la segunda diapositiva puede incluir algunos servicios y la descripción del producto que vende:


También agregué un video como fondo para que la página sea más interactiva. Adición del contenido: diapositiva 3 Agregar otro contenido de descripción y un elemento de lista:

Agregar contenido – Diapositiva 4
Agregar contenido: diapositiva 5 (sótano) Mantenga la base del sótano e incluya algunos iconos sociales para que los clientes se comuniquen con usted a través de las redes sociales:

Opciones generales y apariencia para el sitio web Antes de agregar otro contenido de contenido, recomiendo verificar las opciones generales del sitio:

Opciones de sitio: verifique el aspecto receptivo, un buen pergamino, seleccione un Favicon si lo desea, active los comentarios e incluso agregue un botón al principio.

Transiciones de página: agregue o elimine las transiciones de la página.

Códigos personalizados: agregar códigos CSS, JS o HTML. Y opciones de apariencia:
La aparición de todas las páginas: elegí la apariencia en ancho completo.
El ancho del contenedor del sitio define el ancho del contenedor del sitio en píxeles.
Apariencia moderna: cambie si desea que una web se vea con el color de fondo de la barra lateral. Puedes cambiar el color en el estilo.
Contenido distancia interior desde la parte superior e inferior.
La distancia entre entradas de blog y entradas de cartera.
Las opciones de estilo para las opciones de estilo de sitio web incluyen todo sobre el diseño del sitio. Le recomiendo que estille su sitio después de completar la página inicial para probar las diferentes opciones de estilo. Tendrá una idea más fija de cómo será todo el sitio web y otras páginas.
La página de blog para la página del blog lo mantendré simple y elegiré su estilo mínimo:
Página frecuentemente solicitada
Pagina de contacto
Ahora está listo para agregar su propio contenido personalizado al sitio. Cómo usar un tema de una página Premium de WordPress en Internet, puede encontrar muchos temas premium de WordPress de una página que puede usar. Muchos de ellos están con constructores de páginas, como Visual Composer, que es el más popular. En el siguiente video, puede averiguar cómo configurar un sitio web con una página con una WordPress premium, como un tema especulativo
Las tendencias de diseño y los mejores temas de WordPress de venta en una página El propósito de una página es mostrar todo el contenido requerido para una sola página.De esta manera, el cliente puede ver fácilmente todas las características e información necesarias en una página.Así que debe organizarlo para que se mantenga simple al mismo tiempo.La página moderna y bien organizada se compone de la siguiente manera: una gran diapositiva (en algunos casos en la pantalla completa)

3-4 características básicas del producto

Una breve introducción con imagen o video.

Algunos casos de uso de su producto
Tu personal
clientes
Llamada a la acción