Muchas empresas siguen confiando en los sitios web HTML simples para su presencia en línea. Estos sitios web en HTML suelen ser estáticos, lo que significa que tendrás que editar el código para cambiar incluso un pequeño detalle del sitio web. Sin embargo, para evitar esto, puedes convertir tu sitio web HTML a WordPress.
En este tutorial, te enseñaré cómo convertir HTML a un tema empresarial de WordPress. Esto mantiene todos los elementos HTML intactos y te da la flexibilidad de WordPress para personalizar cualquier elemento fácilmente.
Si estás familiarizado tanto con HTML como con WordPress, entonces este tutorial es bueno para ti. Si usted es un novato, trate de hacer esto con un sitio web ficticio en su localhost como XAMPP.
- Convertir un sitio web HTML a WordPress
- Qué archivos de WordPress necesita
- Configuración de CSS, JavaScript e imágenes
- Añadir funciones de WordPress para añadir funcionalidad
Convirtiendo un sitio HTML a un tema de WordPress
Para este tutorial, he escogido un tema de negocios HTML gratuito de aquí. Las técnicas seguirán siendo las mismas al convertir cualquier tema de negocios. Si tiene preguntas sobre el tema de su negocio, simplemente deje un comentario o un correo electrónico, y estaré encantado de responder.
Sigamos adelante. En primer lugar, eche un vistazo a su tema HTML y marque los elementos de la cabecera, el cuerpo principal y el pie de página.
Encabezado: El encabezado incluirá la parte de la sección superior.
Cuerpo principal: Es una página larga, así que he alejado el zoom para hacer 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 tengas WordPress instalado en tu localhost como XAMPP (es decir, en tu ordenador). Si no es así, ya hemos cubierto una guía detallada para ayudarle a instalar y configurar WordPress localmente.
Paso 2: Crear su 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, necesitas acceder a tu carpeta de temas y crear una nueva carpeta.
Ahora, abre la carpeta XAMPP > htdocs > carpeta WordPress (en mi caso es testing) > wp-content > themes.
En la carpeta Themes, verás todos tus temas de WordPress instalados. Crea una nueva carpeta y nombra tu tema.
Paso 3: Crear archivos PHP
La carpeta del tema recién creado está vacía, y necesitas crear algunos archivos para que sea funcional. Para esto, necesitas lanzar tu editor de código (VS Code) y abrir toda la carpeta del tema de WordPress (en mi caso, farhan-wordpress-theme).
Ahora crea los siguientes archivos esenciales de WordPress para organizar mejor tu tema.
- style.css (contiene los detalles del tema y los archivos CSS)
- index.php (sirve para el contenido principal si no se declaran otros archivos opcionales)
- header.php (contiene los elementos de cabecera del tema)
- footer.php (contiene los elementos de pie de página del tema)
- functions.php (contiene las funciones que en el tema de WordPress)
Paso 4: Copiar las carpetas CSS, Imágenes y JavaScript (JS)
Desde su tema HTML (descargado anteriormente), copie la carpeta de activos (carpetas CSS, JS e imágenes) a su nueva carpeta de temas de WordPress.
Después de mover a su nueva carpeta de temas de WordPress, se verá así:
Paso 5: Activar un nuevo tema de WordPress
Ahora, usted ha añadido las carpetas importantes que se requieren para cualquier tema wp. A continuación, abra su sitio de WordPress en su navegador y acceda a su panel de control. Navegue a Apariencia > Temas, y verá que su nuevo tema ha sido añadido a esta sección.
Este tema parece vacío. Para añadir 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).
/* Theme Name: Farhan WordPress Theme Author: Farhan Description: Convert HTML to WordPress theme. Version: 1.0 */
Para el banner, necesitas añadir un archivo de imagen a la carpeta de tu nuevo tema. El tamaño de la imagen debe ser de 800 por 600, y el nombre de la imagen debe ser Screenshot (formato png).
Una vez que hayas añadido el archivo screenshot.png, actualiza tu panel de control de wp-admin, y el banner de imagen aparecerá.
Ahora, puedes ver la información del tema cuando haces clic en el banner.
A continuación, simplemente haga clic en Activar.
Paso 6: Convertir el código HTML en el encabezado, el índice y el pie de página
El encabezado, el pie de página y el cuerpo principal están marcados con comentarios HTML para añadirlos 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. Tienes que copiar desde <!DOCTYPE html> hasta </header> y guardarlo.
Del mismo modo, copia los elementos del pie de página y del cuerpo principal desde index.html en footer.php e index.php, respectivamente.
Para el pie de página, copia desde <footer> (en mi caso, hay un nombre de clase definido en la etiqueta footer, así que no te confundas) hasta </html> en el archivo footer.php y guárdalo.
A continuación, copie todo el código después de la etiqueta </header> y justo antes del <footer> en index.php y guárdelo.
Añade la función de WordPress get_header() al principio y get_footer() al final del archivo index.php.
El 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.
Añade el siguiente código en la parte superior del archivo index.php y guárdalo.
<?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 el CSS
El hecho de que su tema se vea raro es porque los archivos CSS no están aplicados al tema.
Ya ha copiado la carpeta CSS del tema HTML a la carpeta del tema de WordPress. Ahora, necesita llamar a estos archivos CSS para completar el aspecto del tema.
Tenga en cuenta que los nombres de sus archivos CSS pueden ser diferentes, así que compruebe dos veces antes de realizar este proceso.
Encontrarás tus hojas de estilo CSS en el archivo header.php, por lo que debes buscar «rel=»stylesheet» « mediante CTRL+f.
Después de eso, elimine las hojas de estilo de fuentes de Google porque no las necesitamos. Ahora, sólo necesito registrar la hoja de estilos CSS real, es decir, <link rel=»stylesheet» href=»assets/css/style-starter.css»>.
WordPress no entiende la estructura normal de la hoja de estilos CSS; por eso necesito poner en cola y registrar la hoja de estilos CSS. Vaya al archivo functions.php y añada el siguiente código.
<?php
function add_css()
{
wp_register_style('first', get_template_directory_uri() . '/assets/css/style-starter.css', false,'1.1','all');
wp_enqueue_style( 'first');
}
add_action('wp_enqueue_scripts', 'add_css');
El wp_register_style le ayudará a registrar su hoja de estilos CSS.
La función get_template_directory_uri() . ‘/href’ se utiliza para obtener la ruta actual del directorio de la plantilla. Concatenará la ruta actual con el archivo respectivo. Así que aquí, usted necesita definir la ubicación de su archivo CSS (href). Puedes ver cómo he definido la ruta de ese archivo CSS: get_template_directory_uri() . ‘/assets/css/style-starter.css’.
Ahora, podemos eliminar el enlace de la hoja de estilos CSS del archivo header.php y sustituirlo por el siguiente código y guardar el archivo.
<?php wp_head(); ?>
El wp_head() es un gancho esencial de WordPress que se define bajo la sección <head> </head> de header.php.
Cuando visites tu sitio de WordPress, notarás que los archivos CSS están encauzados a tu nuevo tema de WordPress, pero aún así, el diseño no está en orden. Esto se debe a que aún no has configurado los scripts JS.
En el header.php, tengo una hoja de estilo CSS, y la registré sólo en functions.php. ¿Pero qué pasa si tienes varias hojas de estilo? En ese caso necesitas definir wp_register_style() para cada hoja de estilo. No te preocupes. Puedes tomar un ejemplo del siguiente paso, donde tengo múltiples scripts JS. El proceso es el mismo, así que despejará tus dudas y te ayudará a entender cómo harás 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 están siendo llamados 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=» mediante «CTRL+f». Esto te ayudará a encontrar todos los archivos JS que tengas. En mi caso, tengo cinco, y aquí necesito registrar y poner en cola todos ellos.
A continuación, tienes que abrir tu archivo functions.php y pegar el siguiente código:
function add_script()
{
wp_register_script('js-script', get_template_directory_uri() . '/assets/js/jquery-3.3.1.min.js', array ( 'jquery' ), 1.1, true);
wp_enqueue_script( 'js-script');
wp_register_script('change', get_template_directory_uri() . '/assets/js/theme-change.js', array ( 'jquery' ), 1.1, true);
wp_enqueue_script( 'change');
wp_register_script('popup', get_template_directory_uri() . '/assets/js/jquery.magnific-popup.min.js', array ( 'jquery' ), 1.1, true);
wp_enqueue_script( 'popup');
wp_register_script('carousel', get_template_directory_uri() . '/assets/js/owl.carousel.js', array ( 'jquery' ), 1.1, true);
wp_enqueue_script( 'carousel');
wp_register_script('bootstrap', get_template_directory_uri() . '/assets/js/bootstrap.min.js', array ( 'jquery' ), 1.1, true);
wp_enqueue_script( 'bootstrap');
}
add_action('wp_enqueue_scripts', 'add_script');
Puedes ver que la estructura del código es la misma que hiciste antes en la parte de configuración de CSS. Pero aquí, usarás wp_register_script en lugar de style. Usted registra y pone en cola cada archivo JS en la misma función.
Ahora, puedes eliminar todos los enlaces de secuencias de comandos JS (yo tengo cinco) del archivo footer.php, luego pega la siguiente línea de código al final del código (encima de la etiqueta </body>) y guarda el archivo.
<?php wp_footer(); ?>
Ahora, abra su sitio en su navegador, y se dará cuenta de que el nuevo tema de WordPress está funcionando bien, pero todavía, tiene algunas imágenes que faltan.
Paso 9: Configurar las imágenes
Este proceso es sencillo, y aquí, necesitas definir la ruta de las imágenes.
Primero, abre tu archivo index.php y busca «<img src=» mediante «CTRL+f». Esto te ayudará a encontrar todos los archivos de imágenes que tienes. En mi caso, tengo ocho, y aquí necesito la ruta de todos ellos.
Para dar una ruta a las imágenes, añada el siguiente código PHP dentro de las etiquetas src y guarde el archivo.
<img src="https://www.cloudways.com/blog/html-to-wordpress/<?php echo get_template_directory_uri()."/assets/images/p1.jpg'; ?>" alt="" class="img-fluid radius-image" /> <img src="https://www.cloudways.com/blog/html-to-wordpress/<?php echo get_template_directory_uri()."/assets/images/p2.jpg'; ?>" alt="" class="img-fluid radius-image" /> <img src="https://www.cloudways.com/blog/html-to-wordpress/<?php echo get_template_directory_uri()."/assets/images/p3.jpg'; ?>" alt="" class="img-fluid radius-image" /> <img src="https://www.cloudways.com/blog/html-to-wordpress/<?php echo get_template_directory_uri()."/assets/images/p4.jpg'; ?>" alt="" class="img-fluid radius-image" /> <img src="https://www.cloudways.com/blog/html-to-wordpress/<?php echo get_template_directory_uri()."/assets/images/p5.jpg'; ?>" alt="" class="img-fluid radius-image" /> <img src="https://www.cloudways.com/blog/html-to-wordpress/<?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 obtendrá todas las imágenes.
Pero, carecerá de las características de WordPress, como cambiar el título del sitio y el menú de navegación de WordPress.
Paso 10: Habilitar el título personalizado en WordPress
Si entra en el panel de administración de WordPress y cambia el título del sitio web, no afectará al título del sitio. Para habilitar esta característica, puede utilizar la función incorporada de WordPress bloginfo() con el parámetro «nombre» entre las etiquetas de título en el archivo header.php y guardar el archivo.
<?php bloginfo( 'name' ); ?>
Y del mismo modo, es necesario utilizar 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( 'name' ); ?>
Ahora, tu tema recogerá el título que establezcas en Configuración -> General-> Título del sitio dentro del panel de WP-admin.
Paso 11: agregue el menú de navegación de WordPress en WordPress
Cuando visite el administrador de WordPress de su sitio y navegue a Apariencia, no verá una opción para el Menú.
Usted necesita para activar el menú en primer lugar mediante la adición de la siguiente línea de código en el archivo functions.php.
add_theme_support( 'menus' );
Esto habilitará la funcionalidad de los menús en su tema, pero necesita alguna configuración para gestionar los menús desde su panel de control de WP.
En primer lugar, encuentre donde 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.
Encuentre las siguientes líneas de código:
<ul class="navbar-nav mx-lg-auto"> <li class="nav-item active"> <a class="nav-link" href="https://www.cloudways.com/blog/html-to-wordpress/index.html">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item @@about__active"> <a class="nav-link" href="about.html">About</a> </li> <li class="nav-item @@contact__active"> <a class="nav-link" href="contact.html">Contact</a> </li> </ul>
Sustituir las líneas anteriores por:
<?php wp_nav_menu( array( 'menu_class' => 'navbar-nav mx-lg-auto', 'container' => 'ul', )); ?>
Su menú de WordPress ahora se mostrará en su tema y añadirá flexibilidad a su tema de negocio de WordPress.
¡Terminando!
Espero que este artículo te haya ayudado a entender cómo convertir una plantilla o sitio HTML en un tema de WordPress. Este es un tutorial detallado donde he cubierto once pasos para demostrar el proceso.
