Cómo Convertir un sitio web HTML en WordPress Business Theme

Cómo Convertir un sitio web HTML en WordPress Business Theme

Muchas empresas todavía dependen de sitios web HTML simples para su presencia en línea. Estos sitios web HTML suelen ser estáticos, lo que significa que tendrá que editar el código para cambiar incluso un detalle menor en el sitio web. Para evitar eso, sin embargo, 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 intactos todos los elementos HTML y le da la flexibilidad de WordPress para personalizar cualquier elemento fácilmente.

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

• Convertir sitio web HTML a WordPress
• Qué archivos de WordPress necesita
• Configurar CSS, JavaScript e Imágenes
• Agregar funciones de WordPress para agregar funcionalidad

Convertir sitio HTML a Tema de WordPress

Para este tutorial, he elegido un tema comercial HTML gratuito desde aquí. Las técnicas seguirán siendo las mismas al convertir cualquier tema de negocio. 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. Primero, echa un vistazo a tu tema HTML y marca los elementos de encabezado, cuerpo principal y pie de página.Encabezado

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

Cuerpo principal: Es una página larga, así que alejé 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: Prerrequisitos

Espero que ya tengas WordPress instalado en tu host local como XAMPP (es decir, tu computadora). Si no, 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 bajo la carpeta htdocs. Para crear un tema de WordPress, necesitas acceder a tu carpeta de temas y crear una nueva carpeta.
Ahora, abra la carpeta XAMPP > htdocs > Carpeta de WordPress (en mi caso, está probando) > wp-content > temas.

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

Paso 3: Crear archivos PHP

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

Ahora crea los siguientes archivos esenciales de WordPress para organizar mejor tu tema.

1. estilo.css (contiene detalles del tema y archivos CSS)
2. índice.php (sirve el contenido principal si no se declaran otros archivos opcionales) encabezado
3. .php (contiene los elementos de encabezado del tema)
4. pie de página.php (contiene los elementos de pie de página del tema)
5. funciones.php (contiene funciones que se activan en el tema de WordPress)

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

Desde su tema HTML (descargado anteriormente), copie la carpeta assets (carpetas CSS, JS e imágenes) a su nueva carpeta de temas de WordPress.

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

Paso 5: Activar un nuevo tema de WordPress

Ahora, ha agregado las carpetas importantes que se requieren para cualquier tema wp. A continuación, abra su sitio de WordPress en su navegador e inicie sesión en su panel de control. Navegue hasta los temas Apariencia > 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, abre tu estilo.archivo css (creado anteriormente) y pegue el siguiente código y guárdelo (ctrl+s).

/*Theme Name: Farhan WordPress ThemeAuthor: FarhanDescription: Convert HTML to WordPress theme.Version: 1.0*/

Para el banner, debe agregar un archivo de imagen a su carpeta de tema nuevo. 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 la captura de pantalla.archivo png, actualice su panel de administración wp y aparecerá el banner de imagen.

Ahora, puede ver la información del tema al hacer 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, el pie de página y el 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 de encabezado del índice.html del tema descargado en el encabezado.archivo php creado en la carpeta temas de WordPress. ¡Necesita copiar desde <!DOCTYPE html> hasta < / header> y guárdelo.

Del mismo modo, Copie sobre el pie de página y los elementos del cuerpo principal desde index.html en pie de página.php e índice.php, respectivamente.

Para el pie de página, copie desde < pie de página> (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 pie de página.archivo php y guárdelo.

A continuación, copie todo el código después de la etiqueta </header> y justo antes del pie de página <> para indexarlo.php y guárdalo.

Añadir la función de WordPress get_header () en la parte superior y get_footer () al final del índice.archivo php.

La función get_header() es una función integrada que llama al encabezado.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 índice.archivo php y guárdelo.

<?php get_header(); ?>

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

<?php get_footer(); ?>

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

Paso 7: Configuración de CSS

El hecho de que tu tema se vea raro es porque 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, necesita llamar a estos archivos CSS para completar el aspecto del tema.

Tenga en cuenta que los nombres de sus archivos CSS pueden diferir, así que verifique dos veces antes de realizar este proceso.

Encontrará sus hojas de estilo CSS en el encabezado.archivo php, por lo que necesita buscar «rel =» hoja de estilos «» con CTRL + f.

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

WordPress no entiende la estructura normal de hojas de estilos CSS; es por eso que necesito encolar y registrar la hoja de estilos CSS. Ve a las funciones.archivo php y agregue el siguiente código.

<?phpfunction 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.

El get_template_directory_uri (). ‘/href ‘ se usa para obtener la ruta de directorio de la plantilla actual. Concatena la ruta actual con el archivo respectivo. Así que aquí, necesita 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 hoja de estilos CSS del encabezado.archivo php y reemplazarlo con el siguiente código y guardar el archivo.

<?php wp_head(); ?>

El wp_head () es un gancho de WordPress esencial que se define en la sección <head> </head> del encabezado.php.

Cuando visite su sitio de WordPress, notará que los archivos CSS están en cola para 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 el encabezado.php, tengo una hoja de estilos CSS, y la registré solo en funciones.php. Pero, ¿qué pasa si tienes varias hojas de estilo? En ese caso, necesita definir wp_register_style () para cada hoja de estilo. No te preocupes! Puedes 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 está usando JavaScript y en el pie de página.archivo 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.

Abre el pie de página.archivo php y búsqueda de «<script src = » por «CTRL + f». Esto te ayudará a encontrar todos los archivos JS que tengas. En mi caso, tengo cinco, y aquí me tengo que registrar y poner en cola todos ellos.

A continuación, debe abrir sus funciones.archivo php y pegue 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');

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ás wp_register_script en lugar de style. Usted registra y encuela cada archivo JS en la misma función.

Ahora, puede eliminar todos los enlaces de scripts JS (tengo cinco) del pie de página.archivo php, luego pegue la siguiente línea de código al final del código (arriba de la etiqueta </body>) y guarde 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í, tiene algunas imágenes faltantes.

Paso 9: Configurar Imágenes

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

Primero, abra su índice.archivo php y búsqueda de «< img src = » por «CTRL + f». Esto te ayudará a encontrar todos los archivos de imagen que tengas. En mi caso, tengo ocho, y aquí necesito el camino para todos ellos.

Para dar una ruta 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 obtendrá 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: Habilitar Título personalizado en WordPress

Si entras en el panel de administración de WordPress y cambias el título del sitio web, no afectará el título del sitio. Para habilitar esta función, puede usar la función incorporada de WordPress bloginfo() con el parámetro «nombre» entre las etiquetas de título en el encabezado.archivo php y guardar el archivo.

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

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

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

Ahora, tu tema recogerá el título que configuraste 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 el menú agregando la siguiente línea de código en las funciones.archivo php.

add_theme_support( 'menus' );

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

Primero, encuentre dónde está su menú de navegación de 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 encabezado.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="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>

Reemplazar 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 de negocios de WordPress.

Terminando!

Espero que este artículo te haya ayudado a entender cómo convertir una plantilla HTML o un sitio a un tema de WordPress. Este es un tutorial detallado donde 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.