homefinance blog
¿Piensas en convertir tu sitio HTML bastante estático en un sitio de WordPress más dinámico? ¡Definitivamente es un buen pensamiento! WordPress actualmente alimenta el 35% de todos los sitios web en Internet y ciertamente se ha convertido en el más popular entre otros creadores de sitios web. La conversión HTML a WordPress puede parecer una tarea muy desalentadora. Sin embargo, te enseñaremos pronto. En este tutorial HTML a WordPress, definitivamente aprenderá dos (2) formas de hacerlo. En primer lugar, es el método manual. En segundo lugar, es el método del niño. Siéntase libre de probar cualquiera de los métodos de acuerdo con sus habilidades de codificación, tiempo, dinero y preferencias personales. Entonces vamos.
Contenido
WordPress vs HTML
Antes de convertir html a WordPress
Primer método: convertir HTML en WordPress con un tema
Segundo método: usar un tema infantil
Llenando su sitio
Al final
WordPress vs HTML Antes de pasar a cómo convertir HTML en WordPress, primero haga una breve comparación entre ellos. Habilidades de codificación Para comenzar, cualquiera puede usar WordPress. Sí, seguramente cualquiera. Es importante lograrlo, requiere pocas habilidades de codificación o no en absoluto. Los sitios HTML, por otro lado, requieren un conocimiento profundo de la codificación. Si le gusta codificar y está dispuesto a pasar tiempo haciendo cada cambio, entonces usar un sitio HTML puede ser una buena opción. De lo contrario, exime del estrés y use WordPress.
Facilidad de uso para enfatizar, WordPress utiliza una interfaz de deslizamiento y colocación leve. Como resultado, esto hace que el contenido y administrar el contenido sea un paseo por el parque. Sin embargo, no podemos decir lo mismo sobre un sitio HTML. Muchas líneas de código no son tan fáciles de manejar, especialmente para un principiante. Flexibilidad Hay miles de plantillas de WordPress para elegir: gratis y premium. Además, con solo unos pocos clics, puede dar un nuevo sitio web de Look WordPress. El caso es bastante diferente con un sitio HTML. Funcionalidad en su mayor parte, con los complementos de WordPress, puede agregar más funciones a su sitio WP. En total, no se requiere codificación. Solo busque el complemento, instálelo y luego active. Mejorar la funcionalidad de un sitio HTML también es posible. Sin embargo, es más difícil de lograr. Además, los sitios de WordPress tienen excelentes características de SEO y seguridad. Antes de convertir HTML en WordPress hasta ahora, hemos estado lidiando con cuán beneficioso es WordPress en un sitio estático HTML. Pero antes de ir a WordPress, necesita lo siguiente:
Proveedor de alojamiento web Lo primero que debe recordar, necesita un servicio de alojamiento para su nuevo sitio de WordPress. Tenga en cuenta que la estabilidad, la velocidad y la seguridad de su sitio web dependen en gran medida de su host web. Así que asegúrate de ir a lo mejor. Hice una lista de los mejores proveedores de alojamiento de WordPress para que tome la decisión más informada. Por otro lado, puede instalar WordPress en localhost y luego puede ingresar en vivo más tarde.
Instalación de WordPress Si aún no ha instalado WordPress, hágalo. Al mismo tiempo, lea nuestro recurso de WordPress sobre cómo crear un sitio de WP en tres pasos simples. Notepad ++, Sublime y Aptana Studio son excelentes ejemplos.
Explicaremos cómo convertir HTML en WordPress usando 2 métodos, a saber, el tema manual y de los niños. Sin embargo, para muchos usuarios, el método de base del niño será más fácil de seguir. Pero si tiene experiencia WP, puede preferir el método manual.
Nota secundaria: si no se siente cómodo trabajando con códigos o WordPress, puede contratar a un experto para que lo haga por usted. Primer método: convertir HTML en WordPress con un tema en su mayor parte, puede decidir mantener su diseño en su sitio web HTML. Esto a menudo se debe al hecho de que desea que los visitantes de su sitio tengan la misma experiencia que en su sitio web HTML. Si es así, siga este procedimiento. Como mencioné, este método requiere más experiencia y más trabajo para completar. Esto significa que no obtiene todas las características de un tema de WordPress a menos que codifique una tras otra posterior (información que no se puede cubrir aquí).
Además, esta opción le brinda la personalización completa de su tema, porque colocará todas las partes allí. Idealmente, use esta opción solo si tiene suficiente confianza en la codificación o si desea solicitar a un desarrollador que lo ayude. ¿Estas listo para empezar? Vamos. Paso 1: Cree una carpeta de tema para mantener los archivos con el tema primero, cree una nueva carpeta en su computadora y dale un nombre, como mi tema. Luego abra el código o editor de texto y cree cinco (5) archivos, a saber; style.css
Encabezado.php
Barra lateral.php
Pie de página.php
index.php
Trabajaremos con estos archivos uno tras otro, comenzando con style.css
Paso 2: Cree una hoja de estilo WordPress desde CSS-HTML existente a WordPress Style.css Archivo que creamos en el paso anterior es realmente nuestra hoja de estilo WordPress. Debido a que tenemos la intención de mantener el estilo del sitio HTML existente, utilizaremos su código CSS. CSS es en realidad lo que determina cómo se ve su sitio. Entonces, abra el archivo style.css e inserte el siguiente código de encabezado:
Para decir, creamos un tema para la solucionamiento. Por lo tanto, el encabezado se vería así:
después, copie e inserte el sitio CSS existente en la hoja de estilo de WordPress. Luego guarde el archivo style.css y cierre. ¡Fácil, correcto! Vamos más lejos. Paso 3: Cree el encabezado, la barra lateral y el sótano en HTML existente, como recuerde, hemos creado cuatro archivos .php en el primer paso: Header.php, SideBar.php, Footer.php y index.php. WordPress usa los primeros 3 archivos PHP para determinar qué parte del código es el encabezado, la barra lateral o el sótano. Con seguridad, este método facilita la administración del código. Como saben, cada página de su sitio debe tener elementos de encabezado, como el menú de navegación. Lo mismo es cierto para el sótano. Además, estas partes no cambian de una página a otra. Por lo tanto, es lógico mantenerlos en su propio archivo y atraerlos en páginas. De esta manera, si tuvo que ajustar la estructura del menú de navegación o algo más en su encabezado, edite solo un archivo.php) y esto lo hace para todo su sitio. Dicho esto, ahora le mostraremos cómo dividir el código HTML en partes (encabezado, barra lateral, sótano).
Veamos un ejemplo utilizando el siguiente código (debe usar el código HTML de su sitio en el archivo index.html para esto). HTML Code-HTML en WordPress
Internet fenómen “index.html”> inicio |
| style.css “> |
Ahora reemplácelo con el siguiente:
|
Como ya puede decir, el primero (get_header) dibuja el archivo Header.php en el archivo index.php que editamos. Del mismo modo, los siguientes 2 tiran de la barra lateral y el sótano. Todo su contenido principal generalmente se coloca entre el encabezado y la barra lateral (el espacio que dejé arriba). Para index.php, continuaremos pegando el bucle en este espacio. El bucle es un fragmento de código PHP que muestra sus publicaciones. Así que pegue lo siguiente después de <Artículo class = " “Id =” post- . Publicado por
uno sobre el otro, guarde el archivo index.php.Ahora, en el paso final.Paso 6: Cargue el tema ahora que hemos completado con éxito la carpeta doblada, es hora de cargar WordPress.Para hacer esto, pegue o cargue la carpeta con temas en/wp-contemplate/themes/(en su carpeta de WordPress).Ahora ve al tablero de WordPress y abre Look >>
Temas. Si ha seguido nuestros pasos en consecuencia, su nuevo tema aparecerá en la lista de temas. Como este es el caso, continúe activándolo. Si no se siente cómodo con la cantidad de trabajo manual involucrado en este método, el siguiente método es ciertamente menos desalentador. El segundo método: el uso de un tema infantil en este método, utilizaremos un tema de WordPress Children. Un tema infantil es uno que presenta el estilo y la funcionalidad de otro tema (tema principal). Además del hecho de que es más fácil, también alcanza un tema más robusto, con funciones importantes, como el control de los elementos del menú en el menú “Temas”. Sin demora, veamos cómo convertir su sitio web HTML estático en WordPress a través de un tema infantil. Paso 1: Elija un tema primero, seleccione un tema que sea similar a su diseño HTML existente. Para ver sus opciones, consulte nuestra lista con los primeros 10 temas gratuitos de WordPress. Por otra parte, podría elegir un tema pagado. Una vez que haya tomado una decisión, instale el tema pero no lo active. Este tema actúa solo como base, porque trabajaremos más con el tema del niño. Paso 2: Cree una carpeta con el tema, es decir, la carpeta de temas contendrá archivos sobre el tema infantil. Déle a la carpeta un nombre relacionado con el tema principal (por ejemplo, “el nombre del padre padre”). Suponiendo que creemos un tema secundario para veinte veinte WP, la carpeta debe llamarse veintisiecioctavos años. En esta carpeta, crearemos nuestros archivos style.css y functions.php. Paso 3:
Cree una hoja de estilo en WordPress abra un nuevo archivo en el editor de códigos y guárdelo como style.css. Luego copie y pegue las siguientes filas de código (edite según sea necesario).: Su autor Autor: Plantilla de dirección de su sitio: Ingrese el nombre de la carpeta Paterna Versión: 1.0.0 Licencia: GNU Licencia pública general V2 o una versión posterior de la licencia : http://www.gnu.org/license/gpl-2.0 .html etiquetas: luz, tres columnas, barra lateral derecha, receptivo para dispositivos móviles Texto: Parent-teme-child (por ejemplo, veintiete años) */
Para corregir esta sección correctamente, asumiremos que queremos crear un tema infantil para veinte veinte WP. En este caso, así es como se vería este encabezado:
| /* Tema: Veinte -Twenty Children Tema: https://www.fixrunner.com Descripción: Un tema basado en el tema WP 2020 Autor: Rumids Autor Autor: https://www.fixrunner.com Template: Veinte -Twenty Versión: 1.0.0 Licencia: GNU General Public License V2 o una versión Utilterior Licencia: http: //www.gnu. Org/ Licenciatarios/LPP-2.0.html Etiquetas: luz, tres columnas, barra lateral derecha, receptivo para dispositivos móviles: veinte veinte niños */ |
