" /> Crear Plantilla WordPress – convertir HTML a WordPress – Radio Movida – Movida106 │ Emisora Dominicana
REPRODUCTOR OPCIONAL PARA MOBILES PULSA PLAY PARA ESCUCHAR
Home / Crear Plantilla WordPress – convertir HTML a WordPress

Crear Plantilla WordPress – convertir HTML a WordPress

Sitios convertir HTML a WordPress Sitios

En el principio (de la web) todos los sitios web se hicieron con nada más que texto y HTML estático. Ahora, sin embargo, más de 20 años después, la web es un lugar muy diferente. Los sitios web son mucho más complejos. Proporcionan experiencias más ricas y más agradable para los creadores de sitios y visitantes por igual.

Compruébelo usted mismo, el primer sitio web del mundo! Véalo en directo aquí .

Esto es en gran parte gracias a proyectos de código abierto como WordPress. Lo cual, en los últimos diez años más o menos, ha tenido éxito en su misión fundamental para democratizar la publicación en línea (y mucho más en el proceso) para que cualquier persona con una instalación de WordPress y el Tema de la derecha / plugins puede tener un sitio web moderno con un diseño avanzado y funcionalidad. Sin codificación, ni siquiera HTML! -Requerido.

Esta es Divi por su servidor, Temas elegantes. Este es uno de los temas para WordPress más avanzados en el mercado hoy en día. Y se requiere la capacidad de codificación cero a usar!

Es por esto que a Avid usuarios de WordPress como yo, que es casi difícil de creer que en 2015 alguien todavía podría estar en funcionamiento una página web HTML estático en lugar de un sitio web de WordPress con un tema y plugins. Pero el hecho es que todavía hay una gran cantidad de sitios activos en HTML sólo por ahí. (O HTML con un poco de CSS.)

Por supuesto, estos propietarios de sitios pueden tener buenas razones para no actualizar o convertir. Tal vez su contenido del sitio y nunca cambia el formato simple y de diseño ya existentes es útil? O puede que sea menos de una molestia de preocuparse por mantener actualizado un sitio de WordPress? Ambas son razones válidas (entre otros). Los principales ejemplos de “No fijo lo que no está roto.”

Sin embargo, tengo la sensación de que estos podrían no ser la principal razón alguna (tal vez muchos) no han dado el salto. La más obvia es que simplemente no saben cómo convertir su sitio HTML en un sitio de WordPress. Sobre todo sin perder el contenido o la necesidad de hacer el formato excesiva en una página por página.

Afortunadamente, como suele ser el caso con WordPress, hay un número de maneras de resolver este problema. He recopilado algunas de las opciones a continuación.

Sus opciones para convertir un sitio HTML estático a un sitio de WordPress

¿Cómo se decide convertir su sitio HTML estático en un sitio de WordPress, sin duda, dependerá de sus preferencias personales, / inversión monetaria, y el nivel de habilidad tiempo deseado con el código. Usted tiene que ser el que decida que es mejor para usted, pero con las siguientes resúmenes usted debe ser capaz de decidir rápidamente y pasar directamente a la información más relevante en este post para su situación específica.

Hay tres opciones principales:

1. Cree manualmente un tema de WordPress basado en su sitio HTML estático actual.

Para ello será necesario entrar en su código. Usted tendrá que acceder a su directorio actual sitio a través de FTP y utilizar su código existente como punto de partida. Desde allí se tendrá que crear los archivos necesarios para un tema de WordPress y copiar partes de código del códice de WordPress. Esto es bastante simple y directo si tiene alguna experiencia con HTML, CSS, y un poco de PHP.

2. Instalar un tema pre-hechos y simplemente migrar su contenido.

Esta es probablemente la mejor opción en la intersección de la simplicidad y valor. Asumiendo que ya tiene alojamiento para su sitio web actual, que sólo tendrá que gastar dinero si decide comprar un tema premium. El plugin vamos a utilizar para importar contenido está disponible gratuitamente en el WordPress Plugin oficial del repositorio.

3. Pagar a tener un HTML para WordPress servicio de conversión de recrear su sitio.

Esta es la solución más fácil, ya que no requiere hacer mucho de nada. Sin embargo, no hará mucho para usted familiarizarse con WordPress y el costo variará dependiendo de quién decide contratar. No voy a estar cubriendo esta opción en las siguientes secciones, porque si esta es la ruta por la que está interesado, sólo tiene que hacer una búsqueda rápida para los proveedores de servicios y que se hará cargo del resto.

Preparación para la conversión de HTML a WordPress

No importa qué ruta usted decide tomar a continuación, hay algunas cosas que usted querrá hacer antes de la inmersión.

La primera es la elección de un plan de alojamiento . Usted querrá mirar por encima de las opciones que están ahí fuera y decidir sobre un paquete que mejor se adapte a sus necesidades. O tal vez desea crear una instalación local de WordPress en su lugar? Siempre se puede migrar a un servicio de alojamiento más tarde.

Una vez que haya elegido, tendrá que instalar WordPress e iniciar sesión en administración de WP. Este es el punto en el que nuestros dos posibles caminos se dividen.

La conversión manualmente su sitio HTML estático a WordPress

Si su objetivo es no sólo para conseguir el contenido desde el sitio HTML estático en WordPress, sino también duplicar su diseño actual, esto significa que usted tendrá que crear su propio tema personalizado. Afortunadamente, eso no es tan difícil como puede parecer en un principio. Sólo implica la creación de unas cuantas carpetas y archivos, un poco de copiar y pegar, y luego subir el resultado.

Vas a necesitar un editor de código como sublime o Notepad ++ y acceso tanto del directorio de su sitio en HTML y su nuevo WordPress del directorio de instalación.

Paso 1: Crear una carpeta de temas nuevos y archivos necesarios

En el escritorio, cree una nueva carpeta para almacenar sus archivos de tema. Darle el nombre que desea que su tema a ser nombrado.

A continuación, cree un par de archivos (que van todos en su nueva carpeta de temas) en el editor de código. No hacer nada para ellos por el momento. Sólo hay que dejar abierta para su posterior edición.

  • style.css
  • index.php
  • header.php
  • sidebar.php
  • footer.php

Paso 2: copia existente de estilos CSS en Nueva

Si usted está buscando para duplicar un diseño, esto probablemente significa que tiene al menos un poco de CSS que desea guardar. Así que el primer archivo que va a querer hacer es editar el archivo de Style.css.

Para empezar, añada lo siguiente a la parte superior de su archivo.

/*
Theme Name: Replace with your Theme's name.
Theme URI: Your Theme's URI
Description: A brief description.
Version: 1.0
Author: You
Author URI: Your website address.
*/

Después de esta sección, simplemente pegar su CSS existente a continuación. Guarde y cierre el archivo.

Paso 3: Separar el código HTML actual

Antes de entrar en el paso tres, te voy a dar una breve nota sobre el funcionamiento de WordPress. WordPress utiliza PHP para llamar y recuperar piezas de los datos de su base de datos subyacente. Cada archivo que estamos usando en este pequeño tutorial está diseñado para contar WordPress qué parte del contenido del sitio se va a mostrar y dónde.

Así que cuando digo que vamos a “picar” el código HTML existente, lo que realmente estamos haciendo es simplemente cortar y pegar partes de su código existente en los diferentes archivos que acabamos de crear, por lo que WordPress sabrá dónde mostrar ellos.

Aquí vamos.

En primer lugar, abrir de su sitio actual  index.html archivo. Resaltar todo, desde la parte superior del archivo a la apertura  div class =”principal” de la etiqueta. Copiar y pegar esta sección en su  header.php archivo, guardar y cerrar.

En segundo lugar, volver a su  index.html archivo. Resalte el  = a un lado la clase”barra lateral” elemento y todo dentro de él. Copiar y pegar esta sección en su  sidebar.php archivo, guardar y cerrar.

En tercer lugar, en su  index.html  seleccionar todo después de la barra lateral y copiar y pegar en su  footer.php archivo, guardar y cerrar.

Por último, en su  index.html archivo, seleccione todo lo que está a la izquierda (esta debe ser la sección de contenido principal) y pegarlo en su  index.php archivo. Guardar, pero no cierre todavía.

Usted  puede cerrar su  index.html archivo ahora sin embargo y pasar a las etapas finales. ¡Casi termino!

Paso 4: Finalizar el archivo index.php

Para finalizar el tema de su nuevo  index.php archivo que necesita para asegurarse de que puede acceder a la otra sección (además del contenido principal) que se encuentra en los otros archivos que ha creado. O en otras palabras, poner de nuevo juntos los elementos que acabamos de “picado”.

En la parte superior de su  index.php archivo, coloque la siguiente línea de php.

<?php get_header(); ?>

A continuación, en la parte inferior de su  index.php archivo, colocar estas líneas de php.

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

Y, por último, hay que añadir lo que se llama The Loop. Esta es la parte principal de PHP que utiliza WordPress para mostrar el contenido de la entrada a los visitantes. Por lo que el paso final en la creación de su nuevo tema  index.php archivo está añadiendo el siguiente código dentro de la sección de contenido.

<?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><!--end post 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>
    <!--end entry-->
    <div class="post-footer">
       <div class="comments"><?php comments_popup_link( 'Leave a Comment', '1 Comment', '% Comments' ); ?></div>
    </div><!--end post footer-->
    </div><!--end post-->
<?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><!--end navigation-->
<?php else : ?>
<?php endif; ?>

Guarde su  index.php y cerrar. Usted es el tema ya está terminado! Todo lo que queda es para subirlo a su sitio web WordPress.

Paso 5: suba su nuevo tema

Ahora que ha creado sus archivos de temas y hacer que se almacenan dentro de su nueva carpeta de temas, vas a necesitar para acceder a su nuevo directorio de instalación de WordPress.

Coloque su nueva carpeta de temas dentro de  / wp-content / themes / . A continuación, vaya de nuevo a  WP Administración> Apariencia> Temas y su tema recién creado debería aparecer allí. Vaya por delante y que se active!

Todo lo que queda por hacer en este momento es poblar su nuevo sitio web WordPress con el contenido de su sitio antiguo. Siga junto con la sección de abajo (pasando por alto la parte acerca del uso de un tema pre-hechos) para ver cómo se hace.

Usando un tema pre-hechos WordPress e importación de contenido HTML

Si los pasos anteriores parecen demasiado intensivo o requiere mucho tiempo para, a continuación, puede estar seguro, no hay otra manera. En lugar de convertir cualquier diseño que se esté trabajando en este momento en un tema de WordPress, usted puede tomar ventaja de cualquiera de los miles de temas disponibles en el mercado más amplio de WordPress.

Hay temas libres y hay temas de primera calidad. Antes de decidir qué es mejor para usted, es posible que desee leer sobre qué temas están diseñados para atender a sus necesidades y navegar por la categoría de temas aquí en Temas elegantes y en otros lugares.

Una vez que haya elegido un tema que le guste (y tener su paquete de archivos zip descargado) que querrá volver a WP Administración> Apariencia> Temas> Agregar nuevo e instalar / activar su nuevo tema de WordPress.

Una vez hecho esto, tendrá un sitio web nuevo WordPress y el tema, pero poco más. Al previsualizar su sitio, estará vacío de contenido y probablemente se vería especie de aburrido. Eso es bueno, porque la próxima vamos a importar el contenido de su sitio antiguo.

En administración WP ir a Plugins> Agregar nuevo y la búsqueda de un plugin llamado HTML Importación 2  por Stephanie Leary. Una vez que este plugin está instalado y activado, siga el manual del usuario útil para importar todo el directorio de páginas HTML. Completar con imágenes!

Después de esto usted tendrá todo el contenido de edad que viven en WordPress y formateado en su nuevo tema. O bien, si ha creado su propio tema anterior, su sitio debe mirar más o menos igual que antes, solo se ejecutan en WordPress.

En conclusión

Si ha utilizado este post como una guía para la migración de su sitio web en WordPress entonces usted acaba de incorporarse a una de las mayores comunidades de código abierto en el mundo. ¡Bienvenido! Es un lugar divertido con una gran cantidad de desarrolladores, diseñadores, bloggers, HUM, y más, todo edificio, jugar y crear con WordPress y temas de WordPress / plugins.

Si ha “atrapado el insecto WordPress” el funcionario WordPress.org página web está llena de temas útiles, plugins y otros recursos. Si desea ajustar aún más sus archivos de temas, explorar la Codex para las extremidades aparentemente sin fin, trucos y variaciones.

Y, por supuesto, esperamos que se pega alrededor para charlar en los comentarios y suscribirse para más entradas de blog en el futuro.

Artículo en miniatura a través de Max Griboedov / shutterstock.com

Comments

comments