Cuadro de autor


Discuta su proyecto

Sobre Nosotros

Somos un socio de Microsoft Gold con presencia en los Estados Unidos y la India. Somos un proveedor de servicios de TI dinámico y profesional que sirve a empresas y nuevas empresas, ayudándolas a enfrentar los desafíos de la economía global. Ofrecemos servicios en el área de Consulta e implementación CRM, Desarrollo de aplicaciones, Desarrollo de aplicaciones móviles, Desarrollo web y Desarrollo Offshore.

convertir manualmente html a tema de wordpress

¿Cómo convertir HTML manualmente a un tema de WordPress?

By pandey mayank / 5 de marzo de 2021

Marzo 15, 2021
¿Cómo convertir HTML manualmente a un tema de WordPress?

A lo largo del año, una de las mejores plataformas de código abierto como WordPress ha ganado una popularidad masiva en términos de su CMS simple y flexible, que se ha vuelto mucho más fácil para sus usuarios. Atrás quedaron los días en los que necesitabas un maestro de codificación para construir el sitio web de tu empresa.

Afortunadamente, ahora vivimos en una era altamente tecnológica, donde hay docenas de marcos que nos brindan excelentes plataformas de sistemas de administración de contenido.

El principal es, por supuesto, WordPress.

Nosotros, como empresa de desarrollo de software, recibimos muchas solicitudes en las que los clientes desean cambiar de HTML a WordPress para tener un mejor control de CMS.

Entonces, en este blog, le informaremos cómo puede convertir su sitio HTML estático a WordPress, debe tener algunos conocimientos básicos de HTML, CSS y PHP.

Hay tres formas de hacer esta conversión, pero en este blog te mostraremos la forma manual de hacerlo para que puedas tener una idea de qué cambios has hecho y cómo se están reflejando.

1. Conversión manual de HTML a WordPress

2. Conversión de HTML a través de un tema hijo de WordPress

3. Importación de contenido HTML a WordPress mediante un complemento

Conversión manual de HTML a WordPress

convertir manualmente html a tema de wordpress

Paso 1: cree una nueva carpeta de temas y archivos básicos

Lo primero que tienes que hacer es crear una carpeta de temas en tu escritorio o en cualquier directorio de tu computadora. Puedes nombrarlo como quieras que se llame tu tema.

Después de eso, vaya a cualquiera de sus editores de código y cree algunos archivos de texto y nómbrelos de la siguiente manera:

i) estilo.css

ii) índice.php

iii) encabezado.php

iv) barra lateral.php

v) pie de página.php

Paso 2: Copie el CSS existente en una nueva hoja de estilo

Para el siguiente paso; tendrá que copiar la codificación CSS de su sitio HTML existente en una hoja de estilo de WordPress.

Ahora, antes de copiar el HTML CSS, abra style.css y pegue lo siguiente:

/*Theme Name: Twenty TwentyTheme 
URI: https://wordpress.org/themes/twentytwenty
Author: John DoeAuthor 
URI: https://wordpress.org/
Description: Twenty Twenty 
themeVersion: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags: black, orange, brown, white, tan, yellow, light, one-column, two-columns, right-sidebar, flexible-width, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready
Text Domain: twentytwenty*/

Este es el encabezado de la hoja de estilo, tendrá que copiar toda la línea de código, incluido el comentario /*.....*/

A continuación, se describen los detalles de esta línea de código:

Nombre del tema: Esto puede ser lo que quieras

URL del tema: Dirección del sitio o información de la página de inicio

Autor: Puede ser tu nombre

URL del autor: Puede ser como hemos agregado anteriormente o puede agregar un enlace a su página de inicio o lo que tenga sentido.

Descripción: Opcional, puede ser como está o puede agregar cualquier descripción que desee. Aparecerá en el backend de WordPress.

Versión: Es básicamente la versión de tu tema. Dado que no es un tema de publicación, puede comenzar con 1.0 aquí.

Licencia, URI de licencia y etiquetas: Solo obligatorio si va a enviar el tema al directorio de WordPress para que otros lo usen. Si lo está guardando para usted, no se preocupe. Mantenlo como está.

Una vez que haya terminado agregando lo anterior en su archivo style.css; copie y pegue el CSS de su sitio HTML existente en este archivo. Guarde el archivo y ciérrelo.

Relacionado: Los mejores complementos de WordPress para la mejora de sitios web

Paso 3: separe su HTML existente

En WordPress para acceder a la información de la base de datos se utiliza PHP. Como resultado, su código HTML existente que reside en index.html debe separarse en partes, para que el CMS de WordPress pueda combinarlas correctamente.

Para lograr esto, deberá copiar partes del documento HTML original en diferentes archivos que haya creado en el primer paso.

Primero, abra su archivo index.html y luego revise su archivo de WordPress recién creado:

encabezado.php:

Desde el comienzo de su archivo HTML hasta el área de contenido principal, es decir o entra en el archivo header.php. Entonces, copie y pegue el código después de eso justo antes de que se muestre copiar y pegar lo siguiente

sidebar.php

Vuelva a comprobar su archivo index.html; encontrar y buscar o y observe la etiqueta de cierre . Ahora, todo lo que está dentro de esta sección, copie y pegue dentro del archivo sidebar.php; guardar y cerrar.

Footer.php

Ahora, todo lo que queda desde el final de la barra lateral (es decir, ) hasta el final del archivo index.html debe ser información de pie de página. Eso se agregará a este archivo. Después de eso, justo antes del corchete de cierre. etiqueta copiar y pegar siguiendo

guarda el archivo

Una vez que haya terminado con el archivo index.html, guárdelo y ciérrelo también

Además, lea: Debe usar la extensión Magento 2 para una funcionalidad adicional

Paso 4: finalice sus archivos header.php e index.php para WordPress

Ahora, los pasos finales que debe seguir para header.php e index.php son los siguientes formatos:

Busque el enlace en su sección que se ve así:

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

Reemplace el enlace con el enlace a continuación:

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

Ahora guarde y cierre el archivo header.php.

En su archivo index.php; ingrese lo siguiente, precisamente así:

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

Asegúrese de que el espacio entre las dos líneas de código anteriores sea el mismo, una tras otra. Esto se debe a que pegará el siguiente código de bucle (https://codex.wordpress.org/The_Loop)

El ciclo comienza aquí:

<?php if( have_posts() ) : ?>
    <?php while( have_posts() ) : the_post(); ?>
        <div id="post-<?php the_ID(); ?>"<?php post_class(); ?>>
            <div class="post-header">
                <div class="date">
                    <?php the_time( 'M j y'); ?>
                </div>
                <h2><a href="<?php the_permalink(); ?>"rel="bookmark"title="Permanent Link to <?php the_title_attribute(); ?>">
                <?php the_title(); ?></a></h2>
                <div class="author"><?php the_author(); ?>
                </div>
            </div><!--endpost header-->
            <div class="entry clear">
                <?php if( function_exists( 'add_theme_support') ) the_post_thumbnail(); ?>
                <?php the_content(); ?>
                <?php edit_post_link(); ?>
                <?php wp_link_pages(); ?> 
            </div><!--endentry-->
            <div class="post-footer">
                <div class="comments">
                <?php comments_popup_link( 'Leave a Comment', '1 Comment', '% Comments'); ?>
                </div>
            </div><!--endpost footer-->
        </div><!--endpost-->
    <?php endwhile; /* rewind or continue if all posts have been fetched */?>
    <div class="navigation index">
        <div class="alignleft">
            <?php next_posts_link( 'Older Entries'); ?>
        </div>
        <div class="alignright">
            <?php previous_posts_link( 'Newer Entries'); ?>
        </div>
    </div><!--endnavigation-->
    <?php else: ?>
<?php endif; ?>

Después de eso, guarde y cierre el archivo. El tema básico está listo.

Paso 5: sube tu nuevo tema

Para cargar su tema, siga los siguientes pasos:

1. Cree un archivo zip de su carpeta

2. Vaya a WordPress

3. Seleccione Apariencia-> Tema-> haga clic en Agregar nuevo en la parte superior.

4. Haga clic en Cargar tema.

5. Cargue su archivo zip y haga clic en Instalar ahora.

Una vez hecho esto, puede activar fácilmente su tema.

Estos son los pasos básicos que uno debe realizar si está cambiando su sitio HTML a un tema de WordPress manualmente. Aunque todavía queda mucho trabajo por hacer para migrar completamente el contenido de HTML a WordPress en términos de páginas.

Si ha seguido nuestro blog como guía para la migración de HTML a WordPress, bienvenido a bordo, se ha unido a una de las comunidades de código abierto de CMS más grandes del mundo.

[sc name = "Desarrollo web"]

A lo largo del año, una de las mejores plataformas de código abierto como WordPress ha ganado una popularidad masiva en términos de su CMS simple y flexible, que se ha vuelto mucho más fácil para sus usuarios. Atrás quedaron los días en los que necesitabas un maestro de codificación para construir el sitio web de tu empresa.

Afortunadamente, ahora vivimos en una era altamente tecnológica, donde hay docenas de marcos que nos brindan excelentes plataformas de sistemas de administración de contenido.

El principal es, por supuesto, WordPress.

Nosotros, como empresa de desarrollo de software, recibimos muchas solicitudes en las que los clientes desean cambiar de HTML a WordPress para tener un mejor control de CMS.

Entonces, en este blog, le informaremos cómo puede convertir su sitio HTML estático a WordPress, debe tener algunos conocimientos básicos de HTML, CSS y PHP.

Hay tres formas de hacer esta conversión, pero en este blog te mostraremos la forma manual de hacerlo para que puedas tener una idea de qué cambios has hecho y cómo se están reflejando.

1. Conversión manual de HTML a WordPress

2. Conversión de HTML a través de un tema hijo de WordPress

3. Importación de contenido HTML a WordPress mediante un complemento

Conversión manual de HTML a WordPress

convertir manualmente html a tema de wordpress

Paso 1: cree una nueva carpeta de temas y archivos básicos

Lo primero que tienes que hacer es crear una carpeta de temas en tu escritorio o en cualquier directorio de tu computadora. Puedes nombrarlo como quieras que se llame tu tema.

Después de eso, vaya a cualquiera de sus editores de código y cree algunos archivos de texto y nómbrelos de la siguiente manera:

i) estilo.css

ii) índice.php

iii) encabezado.php

iv) barra lateral.php

v) pie de página.php

Paso 2: Copie el CSS existente en una nueva hoja de estilo

Para el siguiente paso; tendrá que copiar la codificación CSS de su sitio HTML existente en una hoja de estilo de WordPress.

Ahora, antes de copiar el HTML CSS, abra style.css y pegue lo siguiente:

/*Theme Name: Twenty TwentyTheme 
URI: https://wordpress.org/themes/twentytwenty
Author: John DoeAuthor 
URI: https://wordpress.org/
Description: Twenty Twenty 
themeVersion: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags: black, orange, brown, white, tan, yellow, light, one-column, two-columns, right-sidebar, flexible-width, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready
Text Domain: twentytwenty*/

Este es el encabezado de la hoja de estilo, tendrá que copiar toda la línea de código, incluido el comentario /*…..*/

A continuación, se describen los detalles de esta línea de código:

Nombre del tema: Esto puede ser lo que quieras

URL del tema: Dirección del sitio o información de la página de inicio

Autor: Puede ser tu nombre

URL del autor: Puede ser como hemos agregado anteriormente o puede agregar un enlace a su página de inicio o lo que tenga sentido.

Descripción: Opcional, puede ser como está o puede agregar cualquier descripción que desee. Aparecerá en el backend de WordPress.

Versión: Es básicamente la versión de tu tema. Dado que no es un tema de publicación, puede comenzar con 1.0 aquí.

Licencia, URI de licencia y etiquetas: Solo obligatorio si va a enviar el tema al directorio de WordPress para que otros lo usen. Si lo está guardando para usted, no se preocupe. Mantenlo como está.

Una vez que haya terminado agregando lo anterior en su archivo style.css; copie y pegue el CSS de su sitio HTML existente en este archivo. Guarde el archivo y ciérrelo.

Relacionado: Los mejores complementos de WordPress para la mejora de sitios web

Paso 3: separe su HTML existente

En WordPress para acceder a la información de la base de datos se utiliza PHP. Como resultado, su código HTML existente que reside en index.html debe separarse en partes, para que el CMS de WordPress pueda combinarlas correctamente.

Para lograr esto, deberá copiar partes del documento HTML original en diferentes archivos que haya creado en el primer paso.

Primero, abra su archivo index.html y luego revise su archivo de WordPress recién creado:

encabezado.php:

Desde el comienzo de su archivo HTML hasta el área de contenido principal, es decir o entra en el archivo header.php. Entonces, copie y pegue el código después de eso justo antes de que se muestre copiar y pegar lo siguiente

sidebar.php

Vuelva a comprobar su archivo index.html; encontrar y buscar o y observe la etiqueta de cierre . Ahora, todo lo que está dentro de esta sección, copie y pegue dentro del archivo sidebar.php; guardar y cerrar.

Footer.php

Ahora, todo lo que queda desde el final de la barra lateral (es decir, ) hasta el final del archivo index.html debe ser información de pie de página. Eso se agregará a este archivo. Después de eso, justo antes del corchete de cierre. etiqueta copiar y pegar siguiendo

guarda el archivo

Una vez que haya terminado con el archivo index.html, guárdelo y ciérrelo también

Además, lea: Debe usar la extensión Magento 2 para una funcionalidad adicional

Paso 4: finalice sus archivos header.php e index.php para WordPress

Ahora, los pasos finales que debe seguir para header.php e index.php son los siguientes formatos:

Busque el enlace en su sección que se ve así:

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

Reemplace el enlace con el enlace a continuación:

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

Ahora guarde y cierre el archivo header.php.

En su archivo index.php; ingrese lo siguiente, precisamente así:

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

Asegúrese de que el espacio entre las dos líneas de código anteriores sea el mismo, una tras otra. Esto se debe a que pegará el siguiente código de bucle (https://codex.wordpress.org/The_Loop)

El ciclo comienza aquí:

<?php if( have_posts() ) : ?>
    <?php while( have_posts() ) : the_post(); ?>
        <div id="post-<?php the_ID(); ?>"<?php post_class(); ?>>
            <div class="post-header">
                <div class="date">
                    <?php the_time( 'M j y'); ?>
                </div>
                <h2><a href="<?php the_permalink(); ?>"rel="bookmark"title="Permanent Link to <?php the_title_attribute(); ?>">
                <?php the_title(); ?></a></h2>
                <div class="author"><?php the_author(); ?>
                </div>
            </div><!--endpost header-->
            <div class="entry clear">
                <?php if( function_exists( 'add_theme_support') ) the_post_thumbnail(); ?>
                <?php the_content(); ?>
                <?php edit_post_link(); ?>
                <?php wp_link_pages(); ?> 
            </div><!--endentry-->
            <div class="post-footer">
                <div class="comments">
                <?php comments_popup_link( 'Leave a Comment', '1 Comment', '% Comments'); ?>
                </div>
            </div><!--endpost footer-->
        </div><!--endpost-->
    <?php endwhile; /* rewind or continue if all posts have been fetched */?>
    <div class="navigation index">
        <div class="alignleft">
            <?php next_posts_link( 'Older Entries'); ?>
        </div>
        <div class="alignright">
            <?php previous_posts_link( 'Newer Entries'); ?>
        </div>
    </div><!--endnavigation-->
    <?php else: ?>
<?php endif; ?>

Después de eso, guarde y cierre el archivo. El tema básico está listo.

Paso 5: sube tu nuevo tema

Para cargar su tema, siga los siguientes pasos:

1. Cree un archivo zip de su carpeta

2. Vaya a WordPress

3. Seleccione Apariencia-> Tema-> haga clic en Agregar nuevo en la parte superior.

4. Haga clic en Cargar tema.

5. Cargue su archivo zip y haga clic en Instalar ahora.

Una vez hecho esto, puede activar fácilmente su tema.

Estos son los pasos básicos que uno debe realizar si está cambiando su sitio HTML a un tema de WordPress manualmente. Aunque todavía queda mucho trabajo por hacer para migrar completamente el contenido de HTML a WordPress en términos de páginas.

Si ha seguido nuestro blog como guía para la migración de HTML a WordPress, bienvenido a bordo, se ha unido a una de las comunidades de código abierto de CMS más grandes del mundo.

Servicios de Desarrollo Web

¿Está buscando una empresa de desarrollo web confiable? Nuestros desarrolladores web altamente calificados nos permiten ofrecer servicios de desarrollo web orientados a resultados. Póngase en contacto con nuestro equipo para comprender cómo podemos ayudarlo a lograr sus objetivos comerciales.

invitado
0 Comentarios
Comentarios en línea
Ver todos los comentarios
0
Me encantaría tus pensamientos, por favor comenta.x