¿Por qué debería convertir su sitio web HTML en un tema de WordPress?

¿Sigues usando sitios web HTML arcaicos? Es hora de que convierta su sitio web HTML en un sitio web de WordPress y se beneficie de la gran cantidad de funciones que ofrece este popular sistema de administración de contenido. Nos centraremos en por qué debería cambiar a WordPress y cómo puede lograrlo.

Introducción

HTML vainilla puro ha sido el estándar de oro para el desarrollo de sitios web durante mucho tiempo. Sin embargo, los sitios web de antaño eran esqueléticos, sin campanas y silbatos elaborados, y usar HTML para esos sitios tenía sentido en ese entonces.

Con las tendencias y necesidades actuales del mercado, ahora puede convertir HTML a WordPress y aprovechar el sistema de administración de contenido para ejecutar su sitio web, en lugar de escribir el código. Lea más para tener una comprensión más amplia del desarrollo de WordPress.

Razones para cargar o convertir sitios web HTML a WordPress

Estas son algunas de las principales razones por las que pasar de un sitio web HTML estático a un sitio web de WordPress es un paso ideal:

1. WordPress es una herramienta fantástica para crear y curar interfaces de usuario únicas que no son fácilmente posibles con plantillas HTML estáticas para diseños de sitios web.
2. WordPress tiene una sólida comunidad de desarrolladores que pueden ayudarlo con su sitio y guiar los desafíos pasados ​​​​de los recién llegados.
3. Si está buscando personalizar el diseño rápidamente, no se puede lograr lo mismo con el diseño HTML simple. Las instalaciones del generador de páginas de WordPress permiten al usuario personalizar el diseño y la apariencia del sitio web sobre la marcha.
4. En caso de que no desee utilizar sus archivos HTML existentes, puede elegir entre miles de temas disponibles. Hay muchas posibilidades de que encuentre un tema que sea muy similar a su apariencia HTML. De esa manera, ahorra costos y esfuerzos para convertir su diseño HTML existente a WordPress y aprovechar las plantillas listas para usar.
5. WordPress ha evolucionado a lo largo del período y durante la evolución, la comunidad de WordPress se ha asegurado de que sea compatible con SEO. Tiene algunos complementos increíbles para impulsar SEO, uno de esos complementos es YOAST SEO, el estándar de oro para la gestión de SEO en WordPress. Ayuda a lograr una mayor clasificación en los motores de búsqueda, que es el objetivo final de la construcción de sitios web comerciales.

Diferentes formas de convertir sitios web HTML a WordPress

Después de discutir por qué es recomendable convertir HTML a WordPress, profundizaremos para comprender cómo lograrlo.

Hay tres opciones disponibles

• Método manual, que requiere construirlo todo desde cero.
• El método de tema infantil consiste en utilizar un tema básico de WordPress y personalizarlo según sus especificaciones.
• La técnica del complemento.

El método que elija depende de su conocimiento de codificación, la cantidad de tiempo que pretende dedicar a este proyecto y sus preferencias.

Conversión manual de sitio web HTML a WordPress

El código HTML de su sitio actual puede ser un punto de referencia para la conversión manual. Los expertos aconsejan que tenga suficiente conocimiento de codificación antes de intentar este procedimiento de traducción. Debe estar familiarizado con HTML, CSS y PHP en particular.

Aquí se explica cómo convertir HTML a WordPress manualmente:

Paso 1: crea una nueva carpeta de temas

Cree un nuevo archivo en su PC para almacenar sus archivos de temas. Eres libre de nombrar esta categoría como quieras (actuará como el nombre del atributo). Cree los archivos apropiados y manténgalos abiertos en su editor de codificación preferido:

1. Estilo.css
2. Índice.php
3. Encabezado.php
4. barra lateral.php

Paso 2: Copie el código CSS a la nueva hoja de estilo

Puede volver a copiar su código CSS una vez que haya creado los archivos. Aquellos que quieran replicar su sitio y moverlo a WordPress deberán ubicar y extraer el código CSS de su ubicación anterior. El archivo style.css es responsable de la apariencia del sitio. Por lo tanto, agréguele las siguientes líneas:

 /* Theme Name: Replace with your Theme's name Theme URI: Your Theme's URI Description: A brief description Version : 1.0 Author: You Author URI: Your website address */

Paso 3: separar el código HTML actual

Para comenzar, abra el archivo index.html.

Copie el código de los archivos de WordPress producidos y péguelo en las siguientes áreas:

1. Header.php: este archivo contiene todo, desde la introducción de su código HTML hasta el área de contenido principal. Deberá copiar y pegar <?php wp_head();?> justo antes de la sección </head>.
2. Sidebar.php: aquí es donde insertará todo el código de la sección <aside>.
3. Footer.php: esta parte se ejecuta desde la parte inferior de la barra lateral hasta la parte superior del archivo. Agregue una llamada para <?php wp_footer();?> antes de terminar el corchete con </body>.

Paso 4: cambie Header.php e Index.php para WordPress

Luego modificará header.php e index.php para ajustarse al formato de WordPress.

 <?php if (have_posts()) : ?> <?php while have_posts()) : the_post(); ?> <div <?php post_class(); ?>> <div class="post-header"> <div class="date"X?php the_time( 'My'); ?X/div> <h2><a href="<?php the permalink(); ?>" rel="bookmark" title="Permanent link to <?php the_title_attribute(); ?>"X?php the_title(); ?X/ax/h2> <div class="author"X?php the_author(); ?></div> </divx!--end post header--> <div class="entry clear"> <?php if ( Eunction_exists( 'add_theme_support' ) ) the_post_thumbnail(); ?> <?php the_content(); ?> <?php edit_post_link(); ?> <?php wp_link_pages(); ?X/div> <!--end entry--> <div class="post-Footer"> <div class="comments"X?php comments_popup_link( 'Leave a Comment', '1 Comment', '? Comments! ); ?X/div> </divX!--end post footer--> </div><!--end post--> <?php endwhile; /* rewind or continue if all posts have been fetched */ ? > <div class="navigation index"> <div class="alignleft"><?php next_post_link( 'Older Entries'); ? X/div> <div class="alignright"X?php previous_posts_link( 'Newer Entries' ); ?></div> </divx<!--end navigation--> <?php else : ?> <?php endif; ?>

Para hacerlo, busque un vínculo similar a este en la sección <head>:

 <link rel=”stylesheet” href=”style.css”>.

Reemplace la URL anterior con esta:

 <link rel=”stylesheet” href=”<?php echo get_template_directory_uri(); ?>/style.css” type=”text/css” media=”all” />

Guarde y salga del archivo header.php ahora.

Abra el archivo index.php en su navegador web. Se supone que debe estar vacante.

Complete los espacios en blanco exactamente como sigue:

 <?php get_header(); ?> <?php get_sidebar(); ?> <?php get_footer(); ?>

Paso 5: Descarga tu nuevo tema

Cuando la carpeta de su tema esté completa, cárguela en su sitio web y complete la conversión de HTML a WordPress. Para hacerlo, vaya al lugar donde descargó WordPress y agregue la carpeta recién creada al /wp-content/theme.

Verifique la lista de atributos en su página, tema y temas de WP-Admin para ver si existe el nombre del atributo. Si este es el caso, realizó todo correctamente y ahora puede activarlo.

Convertir un sitio web HTML a través de un tema secundario de WordPress

Paso 1: selecciona un tema

En primer lugar, elija un tema de diseño HTML adecuado. Busque un subtema que sea similar a su sitio web actual. Si encuentra el patrón que incluye, no buscará tanto la codificación.

Debe proporcionar la función de inicio porque se basa en líneas de código fundamentales.

Paso 2: Cree una nueva carpeta de temas

De la misma manera que lo hizo en el último método, creará una nueva carpeta en su escritorio.

La carpeta debe tener el mismo título que el estilo principal, pero con la adición de "-child" al final. Tenga en cuenta que no debe haber espacios en el nombre.

Paso 3: Crear un nuevo estilo de hoja

Luego, dentro de la carpeta, cree un archivo style.css y agregue líneas de código adicionales:

Recuerda que esto es solo un ejemplo. Tendrás que empezar de nuevo con tus datos. Cuando finalice el proceso, guarde el archivo.

 Theme Name: Twenty Nineteen Child Theme URI: http://example.com/twenty-nineteen-child/ Description: Twenty Nineteen Child Theme Author: John Doe Author URI: http://example.com Template: twentynineteen Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gp1-2.0.html Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready Text Domain: twenty-nineteen-child */

Paso 4: Crea un archivo Functions.php

Luego, para el tema secundario, escribirá un archivo functions.php y copiará los estilos principales.

Cree un nuevo archivo llamado functions.php para lograr esto. Asegúrate, para empezar, del <?php. etiqueta.

Ahora escriba el siguiente código en el cuadro:

 function child_theme_enqueue_styles() { $parent_style = 'parent-style'; wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ), wp_get_theme()->get('Version') ); } add_action( 'wp_enqueue_scripts', 'child_theme_enqueue_styles' );

Este código le dice a WordPress que vaya al tema principal y use los estilos del tema secundario que se especifican allí.

Paso 5: Activar el tema del niño

Finalmente, debes configurar el tema. Antes de enviar la carpeta a WordPress, descomprímala usando el menú Apariencia, Temas y luego "Agregar nuevo". Desde allí, puede recuperar el archivo zip. Busque en la carpeta wp-content/theme como otra opción.

Importe su contenido del sitio web HTML a WordPress usando un complemento

Paso 1: Configure un nuevo sitio

Descarga el tema de WordPress de tu preferencia en tu nuevo sitio. Asegúrese de que sea una plantilla que desee y que pueda cambiar rápidamente. Para adaptarse a su identidad, deberá actualizar el aspecto.

Paso 2: Instale el complemento

El primer paso es descargar e instalar el complemento HTML Import 2. (¿Son seguros los complementos de WordPress? Siga leyendo para obtener más información). La forma más sencilla de hacerlo es ir a Complementos > Agregar nuevo y escribir el nombre del complemento en el Panel de administración de WordPress. Haga clic en Instalar ahora cuando lo localice en la pantalla (puede estar cerca de la parte inferior). Cuando haya terminado, ejecútelo.

Paso 3: Subir páginas

Publique sus páginas en el mismo servidor que su instalación de WordPress una vez que se instale el complemento.

Datos que tendrás que rellenar:

• Directorio para importar
• URL del sitio antiguo
• Archivo predeterminado
• Extensiones de archivo a incluir
• Directorios a excluir
• Conservar nombres de archivos

Después de eso, navegue a la pestaña de contenido y configure el elemento HTML que lleva el contenido de su sitio.

El segundo paso es configurar una redirección de las URL antiguas a las nuevas. No perderá ningún valor de SEO existente de esta manera.

Guarde sus opciones y luego haga clic en Importar archivos después de haber pasado por cada pestaña.

Conclusión

En el mercado competitivo en constante cambio de hoy, tener un sitio web de WordPress flexible puede ser la forma más efectiva para que su empresa se desarrolle.

Con trucos útiles para mejorar la velocidad de un sitio web de WordPress y formas de escalar su sitio web de WordPress para un alto tráfico, WordPress puede evolucionar con sus negocios, ya sean grandes o pequeños.

Aunque los complementos de conversión de HTML a WordPress pueden parecer una solución viable, no se pueden comparar con los resultados obtenidos a través de la codificación humana, especialmente cuando se convierte un sitio web HTML en un tema de WordPress.

Transferir de un sitio HTML estático a un sistema de administración de contenido más efectivo con capacidades establecidas, como la plataforma WordPress, es una buena opción si tiene una, especialmente en comparación con otras plataformas similares como Wix. Cuando convierte HTML a WordPress, hace que su sitio sea más fácil de administrar y administrar debido a los temas de WordPress y las funciones de WordPress fáciles de usar. ¡Contáctenos para obtener soluciones personalizadas de WordPress entre una plétora de otros servicios y haga realidad sus ideas con Creole Studios!