Cómo convertir un sitio web HTML en un tema empresarial de WordPress

Muchas empresas todavía confían en sitios web HTML simples para su presencia en línea. Estos sitios web HTML suelen ser estáticos, lo que significa que deberá editar el código para cambiar incluso un pequeño detalle en el sitio web. Sin embargo, para evitar eso, puede convertir su sitio web HTML a WordPress.

En este tutorial, le enseñaré cómo convertir HTML en un tema empresarial de WordPress. Esto mantiene intactos todos los elementos HTML y le brinda la flexibilidad de WordPress para personalizar cualquier elemento fácilmente.

Si está familiarizado con HTML y WordPress, este tutorial es bueno para usted. Si es un novato, intente hacer esto con un sitio web ficticio en su host local como XAMPP.

• Conversión de un sitio web HTML a WordPress
• Qué archivos de WordPress necesitas
• Configuración de CSS, JavaScript e imágenes
• Agregar funciones de WordPress para agregar funcionalidad

Conversión de un sitio HTML a un tema de WordPress

Para este tutorial, he elegido un tema empresarial HTML gratuito de aquí. Las técnicas seguirán siendo las mismas al convertir cualquier tema empresarial. Si tiene preguntas sobre el tema de su negocio, envíe un comentario o un correo electrónico, y con gusto le responderé.

Vamonos. Primero, eche un vistazo a su tema HTML y marque los elementos del encabezado, cuerpo principal y pie de página.

Encabezado : el encabezado incluirá la parte de la sección superior.

Cuerpo principal : es una página larga, así que reduje el zoom para tomar una captura de pantalla, pero toda la parte central está incluida en el cuerpo principal.

Pie de página : La sección de pie de página incluirá la parte inferior.

Paso 1: requisitos previos

Espero que ya tenga WordPress instalado en su host local como XAMPP (es decir, su computadora). De lo contrario, ya hemos cubierto una guía detallada para ayudarlo a instalar y configurar WordPress localmente.

Paso 2: crea tu carpeta de temas

Para este tutorial, estoy usando XAMPP y mi sitio de WordPress está instalado en la carpeta htdocs. Para crear un tema de WordPress, debe acceder a su carpeta de temas y crear una nueva carpeta.
Ahora, abra la carpeta XAMPP > htdocs > carpeta de WordPress (en mi caso, está probando )> wp-content > themes .

En la carpeta Temas, verá todos sus temas de WordPress instalados. Crea una nueva carpeta y nombra tu tema.

Paso 3: Crea archivos PHP

La carpeta del tema recién creada está vacía y debe crear algunos archivos para que sea funcional. Para ello, debe iniciar su editor de código (VS Code) y abrir toda la carpeta del tema de WordPress (en mi caso, farhan-wordpress-theme).

Ahora cree los siguientes archivos esenciales de WordPress para organizar mejor su tema.

1. style.css (contiene detalles del tema y archivos CSS)
2. index.php (sirve el contenido principal si no se declaran otros archivos opcionales)
3. header.php (contiene los elementos de encabezado del tema)
4. footer.php (contiene los elementos de pie de página del tema)
5. functions.php (contiene funciones que están en el tema de WordPress)

Paso 4: Copie las carpetas CSS, imágenes y JavaScript (JS)

Desde su tema HTML (descargado arriba), copie la carpeta de activos (CSS, JS y carpetas de imágenes) a su nueva carpeta de temas de WordPress.

Después de pasar a su nueva carpeta de temas de WordPress, se verá así:

Paso 5: active un nuevo tema de WordPress

Ahora, ha agregado las carpetas importantes que se requieren para cualquier tema de wp. A continuación, abra su sitio de WordPress en su navegador e inicie sesión en su Panel de control. Vaya a Apariencia> Temas y verá que su nuevo tema se ha agregado a esta sección.

Este tema parece vacío. Para agregar la información y el banner para el tema recién creado, abra su archivo style.css (creado anteriormente) y pegue el siguiente código y guárdelo ( ctrl + s ).

 / *

Nombre del tema: Tema de Farhan para WordPress

Autor: Farhan

Descripción: Convertir HTML a tema de WordPress.

Versión: 1.0

* /

Para el banner, debe agregar un archivo de imagen a su nueva carpeta de temas. El tamaño de la imagen debe ser de 800 por 600 y el nombre de la imagen debe ser Captura de pantalla (formato png).

Una vez que haya agregado el archivo screenshot.png, actualice su panel de wp-admin y aparecerá el banner de la imagen.

Ahora, puede ver la información del tema cuando hace clic en el banner.

A continuación, simplemente haga clic en Activar .

Paso 6: convierta el código HTML en encabezado, índice y pie de página

El encabezado, pie de página y cuerpo principal están marcados con comentarios HTML para agregarlos fácilmente a sus archivos PHP de WordPress y convertir el código.

Ahora copie el código del encabezado del index.html del tema descargado en el archivo header.php que creó en la carpeta de temas de WordPress. Necesita copiar desde <! DOCTYPE html> hasta </header> y guardarlo.

Del mismo modo, copie el pie de página y los elementos del cuerpo principal de index.html en footer.php e index.php, respectivamente.

Para el pie de página, copie desde <footer> (en mi caso, hay un nombre de clase definido en la etiqueta de pie de página, así que no se confunda) hasta </html> en el archivo footer.php y guárdelo.

A continuación, copie todo el código después de la etiqueta </header> y justo antes de <footer> en index.php y guárdelo.

Agregue la función de WordPress get_header () en la parte superior y get_footer () al final del archivo index.php.

Get_header () es una función incorporada que llama en header.php y de manera similar, get_footer () es una función que llama a footer.php .

Agregue el siguiente código en la parte superior del archivo index.php y guárdelo.

 <? php get_header (); ?> 

Para llamar a un pie de página, inserte el siguiente código al final del código index.php y guárdelo.

 <? php get_footer (); ?> 

Ahora, visite su sitio y verá algo como esto.

Paso 7: configurar CSS

El hecho de que su tema se vea extraño se debe a que los archivos CSS no se aplican al tema.

Ya ha copiado la carpeta CSS del tema HTML a su carpeta de temas de WordPress. Ahora, debe llamar a estos archivos CSS para completar el aspecto del tema.

Tenga en cuenta que los nombres de sus archivos CSS pueden diferir; por lo tanto, verifique dos veces antes de realizar este proceso.

Encontrarás tus hojas de estilo CSS en el archivo header.php, por lo que necesitas buscar “ rel =” stylesheet ” ” con CTRL + f .

Después de eso, elimine las hojas de estilo de fuentes de Google porque no las necesitamos. Ahora, solo necesito registrar la hoja de estilo CSS real, es decir, <link rel = ”stylesheet” href = ”assets / css / style-starter.css”> .

WordPress no comprende la estructura regular de la hoja de estilo CSS; es por eso que necesito poner en cola y registrar la hoja de estilo CSS. Vaya al archivo functions.php y agregue el siguiente código.

 <? php

función add_css ()

{

   wp_register_style ('primero', get_template_directory_uri (). '/assets/css/style-starter.css', falso, '1.1', 'todos');

   wp_enqueue_style ('primero');

}

add_action ('wp_enqueue_scripts', 'add_css'); 

El wp_register_style lo ayudará a registrar su hoja de estilo CSS.

El get_template_directory_uri (). '/ href' se usa para obtener la ruta del directorio de la plantilla actual. Concatenará la ruta actual con el archivo respectivo. Entonces, aquí, debe definir la ubicación de su archivo CSS (href). Puedes ver cómo definí la ruta de ese archivo CSS: get_template_directory_uri (). '/ assets / css / style-starter.css '.

Ahora, podemos eliminar el enlace de la hoja de estilo CSS del archivo header.php y reemplazarlo con el siguiente código y guardar el archivo.

 <? php wp_head (); ?>

Wp_head () es un gancho esencial de WordPress que se define en la sección <head> </head> de header.php.

Cuando visite su sitio de WordPress, notará que los archivos CSS están realmente en la cola de su nuevo tema de WordPress, pero aún así, el diseño no está en orden. Es porque aún no ha configurado los scripts JS.

En header.php, tengo una hoja de estilo CSS y la registré solo en functions.php. Pero, ¿y si tiene varias hojas de estilo? En ese caso, debe definir wp_register_style () para cada hoja de estilo. ¡No te preocupes! Puede tomar un ejemplo del siguiente paso, donde tengo varios scripts JS. El proceso es el mismo, por lo que aclarará sus consultas y lo ayudará a comprender cómo hará ese trabajo.

Paso 8: configurar JavaScript

El tema HTML con el que está trabajando utiliza JavaScript, y en el archivo footer.php, los archivos JavaScript ya se están llamando en formato HTML. Para ejecutar estos archivos JS, todo lo que necesita hacer es seguir las mismas acciones que realizó en el paso anterior.

Abra su archivo footer.php y busque " <script src = " con " CTRL + f ". Esto le ayudará a encontrar todos los archivos JS que tiene. En mi caso, tengo cinco, y aquí necesito registrarlos y ponerlos en cola.

A continuación, debe abrir su archivo functions.php y pegar el siguiente código:

 función add_script ()

{

   wp_register_script ('js-script', get_template_directory_uri (). '/assets/js/jquery-3.3.1.min.js', array ('jquery'), 1.1, verdadero);

   wp_enqueue_script ('js-script');

   wp_register_script ('cambiar', get_template_directory_uri (). '/assets/js/theme-change.js', array ('jquery'), 1.1, verdadero);

   wp_enqueue_script ('cambiar');

   wp_register_script ('emergente', get_template_directory_uri (). '/assets/js/jquery.magnific-popup.min.js', array ('jquery'), 1.1, verdadero);

   wp_enqueue_script ('ventana emergente');

   wp_register_script ('carrusel', get_template_directory_uri (). '/assets/js/owl.carousel.js', array ('jquery'), 1.1, verdadero);

   wp_enqueue_script ('carrusel');

   wp_register_script ('bootstrap', get_template_directory_uri (). '/assets/js/bootstrap.min.js', array ('jquery'), 1.1, verdadero);

   wp_enqueue_script ('bootstrap');

}

add_action ('wp_enqueue_scripts', 'add_script');

Puede ver que la estructura del código es la misma que hizo anteriormente en la parte de configuración de CSS. Pero aquí, usará wp_register_script en lugar de style. Registra y pone en cola cada archivo JS en la misma función.

Ahora, puede eliminar todos los enlaces del script JS (tengo cinco) del archivo footer.php , luego pegar la siguiente línea de código al final del código (arriba de la etiqueta </body>) y guardar el archivo.

 <? php wp_footer (); ?> 

Ahora, abra su sitio en su navegador y notará que el nuevo tema de WordPress funciona bien, pero aún así, le faltan algunas imágenes.

Paso 9: configurar imágenes

Este proceso es sencillo y aquí debe definir la ruta de las imágenes.

Primero, abra su archivo index.php y busque “< img src = ” con “ CTRL + f ”. Esto le ayudará a encontrar todos los archivos de imagen que tiene. En mi caso, tengo ocho, y aquí necesito el camino para todos.

Dar un camino a las imágenes; agregue el siguiente código PHP dentro de las etiquetas src y guarde el archivo.

 <img src = "<? php echo get_template_directory_uri (). '/ assets / images / p1.jpg';?>" alt = "" class = "img-fluid radius-image" />

<img src = "<? php echo get_template_directory_uri (). '/ assets / images / p2.jpg';?>" alt = "" class = "img-fluid radius-image" />

<img src = "<? php echo get_template_directory_uri (). '/ assets / images / p3.jpg';?>" alt = "" class = "img-fluid radius-image" />

<img src = "<? php echo get_template_directory_uri (). '/ assets / images / p4.jpg';?>" alt = "" class = "img-fluid radius-image" />

<img src = "<? php echo get_template_directory_uri (). '/ assets / images / p5.jpg';?>" alt = "" class = "img-fluid radius-image" />

<img src = "<? php echo get_template_directory_uri (). '/ assets / images / p6.jpg';?>" alt = "" class = "img-fluid radius-image" /> 

Ahora, su tema se verá similar al tema HTML y buscará todas las imágenes.

Pero carecerá de funciones de WordPress, como cambiar el título del sitio y el menú de navegación de WordPress.

Paso 10: Habilite el título personalizado en WordPress

Si ingresa al panel de administración de WordPress y cambia el título del sitio web, no afectará el título del sitio. Para habilitar esta función, puede utilizar la función incorporada de WordPress bloginfo () con el parámetro " nombre " entre las etiquetas del título en el archivo header.php y guardar el archivo.

 <? php bloginfo ('nombre'); ?> 

Y de manera similar, debe usar la función incorporada de WordPress bloginfo () con el parámetro " nombre " entre las etiquetas h1 en el archivo header.php y guardar el archivo.

 <? php bloginfo ('nombre'); ?> 

Ahora, su tema recogerá el título que estableció en Configuración -> General-> Título del sitio dentro del panel de administración de WP.

Paso 11: Agregue el menú de navegación de WordPress en WordPress

Cuando visite el administrador de WordPress de su sitio y navegue hasta Apariencia, no verá una opción para Menú.

Primero debe habilitar Menú agregando la siguiente línea de código en el archivo functions.php.

 add_theme_support ('menús'); 

Esto habilitará la funcionalidad de Menú en su tema, pero necesita alguna configuración para administrar los menús desde su tablero de WP.

Primero, busque dónde está el menú de navegación de su tema HTML y luego reemplácelo usando la función incorporada de WordPress wp_nav_menu (); Puede leer más sobre esta función aquí.

En este tema, el header.php contiene el menú de navegación.

Busque las siguientes líneas de código:

 <ul class = "navbar-nav mx-lg-auto">

<li class = "elemento de navegación activo">

<a class="nav-link" href="index.html"> Página principal <span class = "sr-only"> (actual) </span> </a>

</li>

<li class = "nav-item @@ about__active">

<a class="nav-link" href="about.html"> Acerca de </a>

</li>

<li class = "nav-item @@ contact__active">

<a class="nav-link" href="contact.html"> Contacto </a>

</li>

</ul> 

Reemplace las líneas anteriores con:

 <? php wp_nav_menu (array ('menu_class' => 'navbar-nav mx-lg-auto', 'container' => 'ul',)); ?>

Su menú de WordPress ahora aparecerá en su tema y agregará flexibilidad a su tema empresarial de WordPress.

¡Terminando!

Espero que este artículo le haya ayudado a comprender cómo convertir una plantilla o un sitio HTML en un tema de WordPress. Este es un tutorial detallado en el que he cubierto once pasos para demostrar el proceso.

Si tiene alguna pregunta o consulta, no dude en preguntar en cualquier momento en la sección de comentarios a continuación.