¿Sabes que puedes construir tu propio tema de WordPress sin aprender PHP primero? ¿Y si te dijera que sólo necesitas 15 minutos?
Digamos que ya tienes una página web HTML que deseas migrar a WordPress porque has estado escuchando muchas cosas buenas acerca de esta plataforma. La buena noticia es que no tienes que empezar de cero y puedes migrar todo tu sitio fácilmente.
Tal vez el ejemplo anterior no sea el caso. Es posible que uno de tus clientes quiera convertir su sitio web HTML y pasarse a WordPress, y vosotros os preguntáis cual es el camino más fácil. O tal vez lo que deseas es aprender una nueva habilidad para tu desarrollo de temas con WordPress.
Cualquiera que sea la razón por la que estas aquí, en el momento en que termine este tutorial, tendrás las bases que necesitas para empezar a crear temas para WordPress impecables desde HTML. Vamos a pedir prestados un par de códigos PHP de varios lugares para poner todo junto y poder empezar desde ahí.
Sin perder un segundo más, vamos a ver que hace falta.
Que necesitas
- Una plantilla completa HTML con su hoja de estilo CSS (puedes descargar y utilizar esta si no tienes nada para empezar)
- Una instalación de WordPress con al menos un tema de WordPress. Vamos a pedir prestado un par de códigos PHP del tema Twenty Fifteen
- Un editor de código
- 15 minutos de tu tiempo más o menos
Lo primero es lo primero…
Crea una carpeta en el escritorio donde almacenarás tu tema de WordPress. Elige el nombre que quieras. Yo voy a nombrar el nombre de esta web ReInSpirit. Todos los archivos que creamos vivirán en esta carpeta. Es la misma carpeta que vamos a comprimir, y luego subir a nuestra instalación de WordPress como nuestro nuevo tema.
Además, éstas son las plantillas HTML que estamos usando para este tutorial:
Index.html
<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Como crear un tema WordPress desde HTML - ReInSpirit</title> <link rel="stylesheet" type="text/css" media="all" href="style.css"/> </head> <body> <div id="wrap"> <header class="header"> <p>Esta es la sección de cabecera. Ponga su logotipo y otros detalles aquí.</p> </header><!-- .header --> <div class="content"> <p>Esta es la zona de la página principal. Vamos a sustituir esto con las entradas del blog.</p> </div><!-- .content --> <div class="sidebar"> <p>Esta es la barra lateral</p> </div><!-- .sidebar --> <footer class="footer"> <p>Y este es el pie de página.</p> </footer><!-- .footer --> </div><!-- #wrap --> </body> </html>
Style.css
#wrap{margin: 0 auto; width:95%; margin-top:-10px; height:100%;}
.header{width:99.8%; border:1px solid #999;height:135px;background-color: #1be;}
.content{width:70%; border:1px solid #999;margin-top:5px;background-color: #999;}
.sidebar{float:right; margin-top:-54px;width:29%; border:1px solid #999;background-color: #1d5;}
.footer{width:99.8%;border:1px solid #999;margin-top:10px;background-color: red;}
Designación de tu tema WordPress
WordPress tiene que reconocer el tema después de la instalación. Como tal, tenemos que nombrar el tema de manera adecuada o nunca vamos a poder activarlo. Uso del editor de código, crear un nuevo archivo style.css, y guardarlo en la carpeta del tema.
Pega el contenido del style.css existente (el que viene con la plantilla html) a tu nuevo style.css y agrega el siguiente código en la parte superior:
/* Theme Name: El nombre de tu tema ejemplo. Reinspirit Theme URI: La URL de tu tema ej. http://tusitio.com Description: Una breve descripción de tu tema Version: 1.0 o cualquier otra versión si lo prefieres Author: Tu nombre de usuario Author URI: Tu dirección web ej. http://tusitio.com Tags: Tags para localizar tu tema en el repositorio de temas de WordPress ej. reinspirit, HTML, tema, etc. License: GNU General Public License v2.0 */
Esta información le dice a WordPress todo lo que necesita para identificar tu nuevo tema de WordPress. Sin esta información, no se puede elegir y activar el tema a través del panel de WordPress.
La parte importante es el nombre del tema, pero siempre es una buena práctica incluir todos los demás detalles.
Fragmentando index.html en los archivos PHP
Ahora, con el nombre del tema de WordPress en su lugar, vamos a dividir la plantilla HTML principal (index.html) en una serie de archivos PHP. Todo lo que necesitas es un index.php y style.css para tener un tema de WordPress completo, pero lo mejor es romper tu tema en diferentes archivos de plantilla, cada uno con una función especializada, y luego volver a ponerlos juntos utilizando códigos PHP conocidos como llamadas a funciones.
Vamos a romper nuestra plantilla HTML en cuatro archivos de plantilla para index.php, header.php, sidebar.php y footer.php. Estos archivos PHP albergarán secciones de nuestro nuevo tema correspondiente, es decir, el contenido principal, la cabecera, la barra lateral y el pie de página en ese orden.
Header.php
Vamos a comenzar con header.php para ir empezando. Usa el editor de código, crea un nuevo archivo y el nombre de header.php. Siempre asegúrate de que incluyes las extensiones correctas (por ejemplo, .php, .css, etc) De lo contrario, vas a crear archivos de texto inútiles.
A continuación, tenemos que rellenar este archivo con el código en cuestión de un tema de WordPress. El código que vamos a pedir prestado es similar en la mayoría de los temas, pero vamos a utilizar Twenty Fifteen.
Inicia sesión en tu instalación de WordPress y dirígete hacia Apariencia > Editor. Esto debe abrir la pantalla para editar temas. Debes ver el style.css del tema activo actual. Si Twenty Fifteen no es su tema activo, no te preocupes. En el lado derecho arriba de la pantalla puedes seleccionar el tema que quieres editar:
Haz clic en el menú desplegable para seleccionar Twenty Fifteen y buscar el style.css de Twenty Fifteen. No nos interesa este archivo ahora.
Ve a header.php (mostrado como cabecera) en plantillas, y una vez que este archivo lo tienes en el editor, copia el código de la etiqueta
<!DOCTYPE html> de la apertura <body <?php body_class(); ?>>
La etiqueta de apertura puede tener un aspecto diferente en función del tema que estés usando, pero si estás utilizando Twenty Fifteen debes obtener el código que está por encima. Aquí está el código completo que obtuve desde el archivo de cabecera en Twenty Fifteen sólo para ahorrar tiempo:
<!DOCTYPE html> <html <?php language_attributes(); ?> class="no-js"> <head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <meta name="viewport" content="width=device-width"> <link rel="profile" href="http://gmpg.org/xfn/11"> <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>"> <!--[if lt IE 9]> <script src="<?php echo esc_url( get_template_directory_uri() ); ?>/js/html5.js"></script> <![endif]--> <?php wp_head(); ?> </head> <body <?php body_class(); ?>>
Pega este código en tu header.php y guardar los cambios. Luego añade:
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />
….en cualquier lugar entre las etiquetas
<head>
en busca de tu archivo de hoja de estilo style.css para los estilos. Además, agrega:
<title><?php wp_title( '|', true, 'right' ); ?></title>
.. bajo el código anterior para cuidar el título del sitio. Este es el título que aparece en la pestaña o ventana del navegador cuando tu sitio carga. No te preocupes lo más mínimo si todo esto te parece extraño y confuso, te prometo que todo tendrá sentido en algún momento.
Guarda todos los cambios. Tu header.php debería verse así:
<!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js">
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />
<title><?php wp_title( '|', true, 'right' ); ?></title>
<!--[if lt IE 9]>
<script src="<?php echo esc_url( get_template_directory_uri() ); ?>/js/html5.js"></script>
<![endif]-->
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
Nuestro header.php ya está listo. Es el momento de construir el siguiente archivo index.php.
index.php
Vamos a construir el archivo principal de plantilla index.php, que es básicamente el archivo que reúne los demás archivos PHP para crear un tema completo.
Desde nuestra plantilla index.html, te darás cuenta de que tenemos la sección de encabezado en la parte superior, el área de contenido principal justo debajo de él, la barra lateral a la derecha, y el pie de página en la parte inferior.
Nuestro tema tendrá la misma estructura, y luego vamos a añadir nuestras entradas de blog en el área de la página principal. Pero primero, vamos a construir la estructura principal de index.php.
Abre index.php en tu editor de código y añade estas tres líneas:
<?php get_header(); ?> <?php get_sidebar(); ?> <?php get_footer(); ?>
Vamos a añadir algo de código entre las dos primeras líneas, pero primero vamos a averiguar lo que significan estas tres líneas. La primera se va al header.php que ya hemos creado, el segundo obtiene el sidebar.php, y el footer.php para el tercero. Esto pondrá de nuevo juntos nuestros archivos de plantillas para construcción de una página completa.
El código que vamos a añadir entre las dos primeras líneas se hará cargo de las entradas del blog, que no se contabilizan en los otros archivos de plantilla.
Cómo añadir entradas
Para visualizar las entradas, utilizaremos una función PHP especial conocida como el loop (bucle). No es nada del otro mundo, sólo es una pieza especializada de código que peina tu base de datos de WordPress para los posts, y luego los muestra en tu blog. Vamos a añadir el loop entre
<?php get_header(); ?> y <?php get_sidebar(); ?>
para ser claros. Pega el siguiente código:
<?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><!--.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><!--. entry--> <footer class="post-footer"> <div class="comments"><?php comments_popup_link( 'Leave a Comment', '1 Comment', '% Comments' ); ?></div> </footer><!--.post-footer--> </div><!-- .post--> <?php endwhile; /* rewind or continue if all posts have been fetched */ ?> <nav class="navigation index"> <div class="alignleft"><?php next_posts_link( 'Older Entries' ); ?></div> <div class="alignright"><?php previous_posts_link( 'Newer Entries' ); ?></div> </nav><!--.navigation--> <?php else : ?> <?php endif; ?>
Nota: Tenemos que rodear el loop con los contenedores div del index.html para atender a un estilo más adelante. Por lo tanto, el index.php final debe quedar así:
<?php get_header(); ?> <div id="wrap"> <header class="header"> <p>Esta es la sección de cabecera. Ponga su logotipo y otros detalles aquí.</p> </header><!--header--> <div class="content"> <?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><!--.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><!--. entry--> <footer class="post-footer"> <div class="comments"><?php comments_popup_link( 'Leave a Comment', '1 Comment', '% Comments' ); ?></div> </footer><!--.post-footer--> </div><!-- .post--> <?php endwhile; /* rewind or continue if all posts have been fetched */ ?> <nav class="navigation index"> <div class="alignleft"><?php next_posts_link( 'Older Entries' ); ?></div> <div class="alignright"><?php previous_posts_link( 'Newer Entries' ); ?></div> </nav><!--.navigation--> <?php else : ?> <?php endif; ?> </div><!--.content--> <?php get_sidebar(); ?> <?php wp_footer(); //Crucial footer hook! ?> <?php get_footer(); ?> </div><!--.wrap>
Eso es todo. Ahora vamos a crear las plantillas de la barra lateral y pie de página.
sidebar.php
Este es un trabajo fácil. Sólo tienes que copiar el código de
<div class=”sidebar”> a </div>
a tu sidebar.php así:
<div class="sidebar"> <p>Esta es la barra lateral</p> </div><!--.sidebar-->
Guarda los cambios.
footer.php
Del mismo modo, copia el código de
<div class = "footer"> a </div>
a tu footer.php así:
<footer class="footer"> <p>Y este es el pie de página.</p> </footer><!--.footer-->
A continuación, añade las siguientes líneas por debajo de la etiqueta del cierre
</footer>
Estas son las lineas:
<?php wp_footer(); //Crucial footer hook! ?> </body> </html>
Vemos los cierres
</body> y </html>
en footer.php. Sí, no te olvides de añadirlos. En este punto tu footer.php debe verse así:
<footer class="footer"> <p>Y este es el pie de página.</p> </footer><!--.footer--> <?php wp_footer(); //Crucial footer hook! ?> </body> </html>
Tu index.php debe ser similar a:
<?php get_header(); ?> <div id="wrap"> <header class="header"> <p>Esta es la sección de cabecera. Ponga su logotipo y otros detalles aquí.</p> </header><!--header--> <div class="content"> <?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><!--.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><!--. entry--> <footer class="post-footer"> <div class="comments"><?php comments_popup_link( 'Leave a Comment', '1 Comment', '% Comments' ); ?></div> </footer><!--.post-footer--> </div><!-- .post--> <?php endwhile; /* rewind or continue if all posts have been fetched */ ?> <nav class="navigation index"> <div class="alignleft"><?php next_posts_link( 'Older Entries' ); ?></div> <div class="alignright"><?php previous_posts_link( 'Newer Entries' ); ?></div> </nav><!--.navigation--> <?php else : ?> <?php endif; ?> </div><!--.content--> <?php get_sidebar(); ?> <?php wp_footer(); //Crucial footer hook! ?> <?php get_footer(); ?> </div><!--.wrap>
Y tu nuevo style.css debería ser algo como:
/*
Theme Name: El nombre de tu tema ejemplo. Reinspirit
Theme URI: La URL de tu tema ej. http://tusitio.com
Description: Una breve descripción de tu tema
Version: 1.0 o cualquier otra versión si lo prefieres
Author: Tu nombre de usuario
Author URI: Tu dirección web ej. http://tusitio.com
Tags: Tags para localizar tu tema en el repositorio de temas de WordPREss ej. reinspirit, HTML, tema, etc.
License: GNU General Public License v2.0
*/
body {
font-family: arial, helvetica, verdana;
font-size: 0.8em;
width: 100%;
height: 100%;
}
.header {
background-color: #1be;
margin-left: 14%;
top: 0;
border-width: 0.1em;
border-color: #999;
border-style: solid;
width: 72%;
height: 250px;
}
.content {
background-color: #999;
margin-left: 14%;
margin-top: 5px;
float: left;
width: 46%;
border-width: 0.1em;
border-color: #999;
border-style: solid;
}
.sidebar {
background-color: #1d5;
margin-right: 14%;
margin-top: 5px;
float: right;
border-width: 0.1em;
border-color: #999;
border-style: solid;
top: 180px;
width: 23%;
}
.footer {
background-color: red;
margin-left: 14%;
float: left;
margin-top: 5px;
width: 72%;
height: 50px;
border-width: 0.1em;
border-color: #999;
border-style: solid;
}
Screenshot
Ahora, vamos a crear una captura de pantalla para el nuevo tema de WordPress. Puede ser cualquier imagen, pero lo mejor es tomar una captura de pantalla de su tema en la acción.
Una captura de pantalla que puedes utilizar
Aparte de eso, hay algunas cosas a tener en cuenta. En primer lugar, tu screenshot debe ser una imagen .png. En segundo lugar, debe ser 600px de ancho y 450px de alto. En tercer lugar, debes guardar la imagen como screenshot.png en tu carpeta del tema.
Poniendo todo junto
A estas alturas, debes tener un tema de WordPress trabajando aunque un poco simple. Puedes agregar un estilo como consideres oportuno, pero hasta aquí debes ser capaz de crear un tema de trabajo de WordPress desde HTML.
En la segunda parte de este post, vamos a añadir menús de navegación, widgets y hablar sobre el archivo functions.php entre otras cosas. En otras palabras, la mayoría de las características que nos gusta de WordPress no están en nuestro nuevo tema, ya que este tutorial sólo cubre lo básico.
Mientras tanto guarda todos tus archivos, incluyendo la captura de pantalla en tu carpeta del tema, comprime la carpeta en un archivo .ZIP, y sube tu nuevo tema. Puedes obtener una vista previa o activar el tema para ver en acción.
Últimas lineas
Si has seguido estos pasos correctamente, no hay nada que te impida la creación de temas de WordPress desde HTML. Por lo tanto, no hay nada que te impida avanzar para ser un desarrollador de WordPress de pleno derecho en ningún momento.
Aprender PHP no es duro, su sintaxis es un poco diferente de HTML. Una vez que aprendas las bases, especialmente cómo las diferentes partes de un tema de WordPress juegan juntas, puedes ir creando tus temas en cualquier momento.
Ah, por cierto, aquí están los archivos de nuevo:
Eliminar banner de un tema en la barra superior de WordPress
Que es un Framework para WordPress y que ventajas tiene
Como Cambiar el Color de los Botones en WooCommerce
Como incluir saltos de enlaces en una misma página con WordPress
30 Themes Wordpress Responsive Gratis listos para Descargar
Excelente trabajo, muy simple, ahora a la espera de la segunda parte. espero que pronto.
Saludos desde Argentina
Gracias Roberto. Saludos desde Sevilla!
Gracias por el post muy sencillo de seguir, una pregunta ¿Seria lo mismo si ya tengo una pagina en Bootstrap?
Hola Enrique. Bootstrap es un framework que instalamos con un diseño prefabricado y el procedimiento tendría que ser diferente
Gracias
En teoría es igual, solo tienes que enlazar correctamente los archivos de bootstrap en el header.php
Suena y se ve muy sencillo, partir desde un sitio web ya con sus estilos y todo bonito ya se vuelve tarea facil.
Lo realmente bueno es crearte una web propia desde cero y luego adaptarla o pasarla a wordpress con todos sus archivos por separado, ademas de agregar las funciones basicas para habilitar lo esencial.
Pero todo se aprende, lo digo porque despues de ver y praticar por varias semanas por fin pude hacer ya mi segunda web para wordpress.
En mi caso yo primero hago la web en html y ya luego divido los archivos, he visto que eso mismo recomiendan los «expertos».
Aun soy medio novato con el css3 y html5 pero le voy aprendiendo mas cada vez, ahora mi meta es Javascript y Php 😀
Aqui el screenshot aun no la uso pero ya esta funcional.
http://imgur.com/TitFOHi
Guardo este post porque hay varias cosas que me serviran, gracias.
Pd. Feliz año nuevo a todos.
Gracias Emmanuel por pasarte a comentar. Tu eres como yo en ese aspecto, me gusta aprender y tocar un poco de todo. Feliz año nuevo y abundancia para el nuevo año 😉
Oye quieres decir que importas o copias el css en gral para hacer uno solo?¿Y la parte de dividir pones que divides todo pero no mencionas lo que va dentro de cada seccion y como queda ,eso me confundió
Hola Pedro, primero quiero felicitarte por el post, esta muy bueno y me estan funcionando tus pasos. sin embargo no logro ubicar la segunda parte, queria saber si me podrias ayudar con esto ya que es de muchisiiimaa importancia para mi. Gracias, espero puedas ayudarnos. Saludos.
una pregunta rápida. Si tengo varias páginas, portada, contacto, quienes somos y blog.
El loop lo pongo solo en la de blog que es la que va a llevar el contenido dinámico?. Las demás van a ser estáticas y no modificables nada de nada. Estás paginas estáticas, las configuro igual que has hecho tu aqui en el post, exceptuando lo de no ponerle el loop y ¿algo más? así tal cual.
gracias
Así es Israel
Hola, no entiendo muy bien el procedimiento.
He creado el header.php:
pero, con mi html que hago????
Hola Ramiro. El HTML va fragmentado en cuatro archivos de plantilla para el index.php, header.php, sidebar.php y footer.php. Estos archivos PHP albergarán las secciones de nuestro nuevo tema, es decir, el contenido principal, la cabecera, la barra lateral y el footer en ese orden.
Y el javascript donde iria ?
Gracias
Aquí https://codex.wordpress.org/Using_Javascript#JavaScript_in_Template_Files
Hola muchisimas gracias po este excelente post…lo he llevado a cabo y queria donde puedo encontrar la segunda parte de este artículo
Hola Jordi. Si hay muchas peticiones me pondré con ello en breve
y si solo quiero agregar mi pagina de inicio ?
he creado mi pagina principal y es la unica que quiero cambiar en mi tema
como le hago para agregara a mi template actual
Pues creando el index.php, el header, el footer y pasar los estilos css como dice el tutorial
Hola Pedro, tengo que migrar este sitio HTML a Wordpress. Y lo veo muy complicado. Mi cliente quiere que le quede exactamente igual. Pero tiene muchas páginas y estilos distintos. ¿Hay manera de pasarlo sin tener que saber de código? ¿Hay forma de que se copie todo el sitio y quede ya funcionando igualito?
Muchas gracias y disculpa la molestia
Hola Emiliano. Me temo que no hay forma de pasarlo igual sin saber de código, pero algún plugin de diseño te puede facilitar mucho las cosas. Te dejo algunos de esta lista https://reinspirit.com/los-mejores-plugins-arrastrar-y-soltar-para-el-diseno-en-wordpress/
Muchísimas gracias Pedro!!
Aprovecho para desearte un Feliz Año Nuevo y que tengas un excelente 2017.
🙂
Hola Pedro, Muchas gracias por compartir este post. Seguro nos a servido a muchos. Quiero preguntarte cuando tendrías lista la segunda parte, pues creo que sera igual o mejor que este.
Muchos saludos desde Bogotá
Hola Manuel. Pues debido a las peticiones de vosotros intentaré tenerlo para el mes que viene. Saludos
Muchas gracias por este post Manuel. Todavía no lo he aplicado pero estoy segura de que me va a ayudar muchísimo para comprender la estructura de WP. Yo diseñe hace unos años la página para mi negocio utilizando Expression Web y lo hice con css y html unicamente. Despues me pase a una página de WP para que mi página fuera responsive y tuviera más acceso a mis potenciales clientes. Utilicé el tema customizr, y aunque me gusta mucho, mi página es lentísima en comparación con la antigua. Así pues me puse a aprender como mejorar el SEO, he empezado a aprender css3 y con tu explicación seguro que puedo hacer mi propia plantilla, como a mi me guste. Es lo malo de haber aprendido sin plantillas, que luego no te gusta que te limiten 🙂 Muchísimas gracias de nuevo.
Perdona Pedro, me lié con tu nombre.
jejeje no pasa nada Lola, eso pasa en las mejores familias. Gracias por contar tu experiencia y verás que con WP se abre un amplio abanico de posibilidades gracias a sus plantillas y plugins, y si encima sabes algo de html y css pues ya tienes el mundo a tus pies ;). Saludos!
Logre hacer todo Pedro!!! Muchas gracias, gran post. Aguardo con ansias la segunda parte. Abrazo!
Hola Pedro, antes que nada, felicitarte por tu gran post.
Te comento, he seguido paso a paso todo el proceso, que muy bien explicas, y el problema me surge cuando voy a instalar el tema y Wordpress me dice que no se ha podido instalar porque falta la hoja de estilos css. Creo que he podido cometer algún error en el primer paso.
Gracias de antemano y un saludo.
Hola Fernando. Revisa todo de nuevo y mira si te has dejado algo sin poner, como el archivo style.css. También puede que dicho archivo no tengas el código bien escrito.
Muy buenas noches amigo Pedro Mendez desde Mérida – Venezuela, yo realicé está página, y me gustaría integrarla al Wordpress, por la sencilla razón que necesito lo referente al Boletín de Suscripción, y lo referente a las redes sociales, observé este tema o plantilla arscode-social-slider, y lo tiene es Wordpress y realmente me gustó bastante, por esa razones quiero integrarla, por lo que tú explicar creó que si es posible. Gracias de antemanos
Hola Ender. Para incluir un boletín de suscripción y compartir en redes sociales no necesitas un WordPress. Lo puedes incluir sin problemas en tu sitio insertando los códigos en los sitios correspondientes. Saludos
Saludos amigo, gracias por responder he estado buscando este Pluging arscode-social-slider, y realmente todas las busquedas me mandan que es para Wordpress, por eso era mi inquietud
Bueno, este tutorial, me ha encantado, es simple, eficaz y util.
Muchísimas gracias por tomarte el tiempo necesario para hacerlo posible.
A partir de aquí a cambiar estilos, a poner funciones de wp, etc.
GRACIAS
Gracias a ti por comentar. Que tengas una buena semana. Saludos!
Hola Pedro, muy interesante tu post.
Espero puedas ayudarme con un proyecto que estoy realizando, ahora mismo estoy estudiando en Francia y necesito pasar una página web que realicé con html, css y javascript a wordpress.
La verdad soy algo novato pero logré crear mi página web con brackets, el problema es que no tengo idea de cómo pasar todo a wordpress y hacerlo funcional. He seguido tu tutorial al pié de la letra pero me encuentro con algunas dudas y pues, espero puedas ayudarme.
Ya pasé todo mi código html y css a wordpress como mencionas en tu tutorial, sin embargo, al momento de abrir la plantilla con Wordpres me aparece todo el texto desordenado. Estoy suponiendo que es a causa de que no he importado las imágenes de mi web, pero no tengo idea de como hacerlo y por cierto, en tu tutorial en la parte «poniendo todo junto» dices que hay que comprimir todo en zip (todo el qué?) y subir el tema a wordpress. Cómo se hace esto exactamente?
Muchas gracias por el tutorial y tu tiempo y espero puedas ayudarme.
Saludos desde Tarbes, Francia.
Hola Gonzalo. Tienes que comprimir todos tus archivos y carpetas en un zip para poder activar tu tema como dice el tutorial. Primero tienes que saber como se sube un tema de un archivo.zip para realizar esa operación, y seguir la misma estructura que cualquier otro theme. Saludos!
Hola Pedro buen día.
He hecho todo tal cual tu tutorial, incluso he aprendido a como importar los temas desde el panel de Wordpress o con el explorador de windows, sin embargo lo único que le falta a mi sitio para estar completo en wordpress son las imágenes. Sabes si se tiene que modificar el código para que wordpress las reconozca? Normalmente tengo todos mis archivos de mi página en una carpeta con los php y estilos fuera, y todas las imágenes en una carpeta llamada img. Con brackets eh estado trabajando con la visualización en vivo y todo sin problemas.
Gracias
Hola Gonzalo. Las imágenes en WordPress van en un formato distinto. Si no tienes conocimientos en sistemas te recomiendo que las subas a WordPress y luego las pongas en el lugar correspondiente. Saludos!
Hola… necesito ayuda urgente u.u
Compré un tema para una página de un cliente, pero al darme cuenta, el tema está en HTML y no tengo idea del lenguaje por que todas las páginas las creo en Wordpress, necesito pasar esa plantilla o template a Wordpress pero no entiendo nada de este post… Auxilio, voy a perder el cliente… Gracias.
Hola Andrea. Si te corre prisa, la mejor opción es que compres un tema premium con un constructor de páginas. O también instalar un plugin drag & drog en un tema que tengas a mano. Saludos!
Cuánto me cobras por hacerlo? Tengo todo listo. Sólo necesito pasar a WordPress.
Buenas,
Ponte en contacto conmigo arriba en la sección de contacto.
Saludos
Buenas tardes, Pedro encontre tu este tema buscando informacion yo soy nuevo en esto de las paginas web, estoy aprendiendo a base de tutoriales en internet y videos, me gustaria saber como puedo mejorar mi sitio basado en HTML5.
este es mi sitio que me aconsejarias.
De antemano mil gracias y estare trabajando en el tutorial que dejaste para wordpress.
Buenas,
El sitio web solo se ve una página en mantenimiento con gráficos muy de los 80. Te aconsejo que instales WordPress, un tema nuevo y empieces un diseño nuevo desde el principio. Saludos
Hola Pedro, tu post está bien explicado 😉
En él comentas que… «En la segunda parte de este post, vamos a añadir menús de navegación, widgets y hablar sobre el archivo functions.php entre otras cosas». ¿Dónde puedo acceder a éste?
Buenas Arturo,
Pues creo que no hice la segunda parte. Pero me pongo en ello y pongo el enlace al final de esta entrada.
Saludos