Cómo transformar un HTML a WordPress – Guía paso a paso

CATEGORÍA: wordpress
Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on whatsapp
WhatsApp

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.

header

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.

main body

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

footer

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.

create theme folder

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.

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

wordpress files

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.

html folders

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

wordpress folders and files

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.

activate wordpress theme

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).

adding scrrenshot png file

Una vez que hayas añadido el archivo screenshot.png, actualiza tu panel de control de wp-admin, y el banner de imagen aparecerá.

wordpress theme image

Ahora, puedes ver la información del tema cuando haces clic en el banner.

theme details

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.

header php file

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.

footer php file

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.

index php file

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(); ?>

adding heard at the top of index file

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(); ?>

add footer at the bottom of index file

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

site without css and js

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.

css stylesheet in header file

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');

register css file

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.

wordpress header hook

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.

after adding css file

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.

searching for js files

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.

enqueue js scripts

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(); ?>

wordpress footer hook

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.

theme after js and css

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.

search image files

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" />

calling images in wordpress

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

wordpress image files

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' ); ?>

wordpress title

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' ); ?>

h2 title

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

wordpress site title

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' );

add theme 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.

wordpress menu section

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>

wp menu code

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.

OTRAS PUBLICACIONES

domingo, 13 de junio de 2021

Si utilizas WooCommerce para tu tienda online, estás en el lugar adecuado. Somos conscientes y nos han dicho una y otra vez que no ... Leer más

sábado, 17 de abril de 2021

Lo más probable es que haya encontrado recientemente contenido que utiliza Schema Markup en forma de fragmentos enriquecidos, posiblemente incluso tan reciente como su ... Leer más

sábado, 17 de abril de 2021

Lo más probable es que haya encontrado recientemente contenido que utiliza Schema Markup en forma de fragmentos enriquecidos, posiblemente incluso tan reciente como su ... Leer más

sábado, 17 de abril de 2021

Si utilizas Rankmath, un excelente plugin para SEO y JetEngine un excelente plugin crear para contenidos a medida en el diseño de tú página ... Leer más

Agencia Diseño web Madrid

Castillo de Atienza, 1 - 1ºD
Las Rozas (Madrid) - España
Telf: (+34) 647 125 602
¿Quieres que tu web cargue rápido?
En Callibree usamos Cloudways
callibree diseño web
© 2021 Callibree Marketing Solutions S.L. Reservados todos los derechos