Hoy en AyudaWordPress.com

Migrar de HTML a WordPress
WP Symposium, otro modo de convertir WordPress en una red social
Poster + Automattic = WordPress móvil con integración de Dropbox y más

Posted: 16 Jun 2013 01:04 PM PDT

Aún hay muchas webs en HTML, quizás más de las recomendables, pues hasta no hace muchos años era el estándar que te ofrecían desarrolladores a lo largo y ancho del mundo.

La principal desventaja de tener una web en HTML es que el contenido es estático, requiriendo la creación o modificación expresa del HTML para tener contenido nuevo, algo ya caduco y en desuso con la introducción de los sistemas de gestión de contenidos (CMS).

Si es tu caso, y tienes una web en HTML con un buen montón de páginas creadas no te apures pues es bastante fácil pasar de HTML a WordPress. Vamos a ver los dos asuntos que tienes que abordar.

1. Convertir páginas HTML a WordPress

Hay un paso previo, y es instalar un WordPress donde acomodar tus páginas en HTML. Una vez lo tengas hay varias maneras de pasar de páginas HTML a entradas (o páginas) WordPress:

Hacerlo a mano. Si no tienes muchas páginas no te compliques, simplemente copia y pega el texto de la página HTML en el editor de entradas de WordPress y publica.
URL cloner sería otra opción, pues es un increíble plugin permite importar contenido de cualquier URL a WordPress.
HTML Import, un sencillo plugin que, una vez activo, te ofrece una amplia página de ajustes para importar cualquier web HTML a WordPress. Es muy preciso y efectivo.

2. Convertir el diseño HTML a WordPress

Mi consejo sería que no te compliques e instales uno de los miles de maravillosos temas WordPress que existen, pero si tienes algún cariño especial por un diseño HTML previo hay algunas cosas que debes saber.

Crea el tema WordPress

Lo primero es crear una carpeta y nombrarla con el nombre del tema que quieras. Luego hay que crear dos nuevos archivos, style.css e index.php, y colocarlos en esa carpeta. Son los únicos archivos que WordPress necesita, lo creas o no. Ahora copia y pega el código de tu archivo CSS original en el fichero style.css recién creado. Al principio añade lo siguiente:

/*  Theme Name: Remplaza esto con el nombre de tu tema.  Theme URI: La URL donde vas a ofrecer tu tema (si quieres)  Description: Una breve descripción.  Version: 1.0  Author: Tu nombre  Author URI: La URL de tu web personal o la que quieras.  */

Estos comentarios identifican el tema cómo hecho para WordPress. Tu hoja de estilos ya estaría lista.

2.1 Descuartiza el HTML

Lo podría decir más finamente pero la realidad es que un tema WordPress es una especie de HTML descuartizado, o dicho más finamente, “deconstruido“. De paso, hay que incorporar las llamadas PHP que harán que el HTML se comunique con la base de datos, imprescindible en cualquier CMS para archivar la información dinámica del contenido.

Los temas WordPress son varios archivos PHP donde hay llamadas que reclaman el código del resto de archivos para mostrarlos en un orden determinado. La estructura básica de un tema WordPress sería: cabecera (header.php) que llama al bloque de contenido (índex.php) y este a su vez a la barra lateral de recursos de navegación (sidebar.php) para, al final, cerrar con un pié de página informativo (footer.php).

WordPress, en vez de tener todo este código HTML en un solo archivo lo “descuartiza” en varios que se “llaman” entre ellos mediante PHP.

Así que, para empezar, debes ir a tu código HTML y añadir unas marcas en los 4 lugares principales donde planees hacer los cortes del código para estas 4 secciones principales. Por supuesto, esto asumiendo que tu diseño previo contiene esos elementos (cabecera, cuerpo, barra lateral y pié), sino adáptalo a lo que tengas.

Así que, siguiendo el ejemplo, crea 3 nuevos archivos: header.php, sidebar.php y footer.php, y sitúalos en la carpeta del tema que creaste antes.

Antes de ponernos revisa el código del fichero header.php del tema Twenty Ten que viene por defecto en toda instalación de WordPress. Observa el PHP utilizado entre las etiquetas . Copia este código en tu nuevo archivo header.php. Ahora abre el HTML original y copia el código marcado previamente para la cabecera (primera sección) en este archivo header.php, justo debajo de la sección . Guarda y cierra.

Ahora abre el archivo index.php que creaste al principio y copia la segunda sección de tu código HTML original que marcaste como tal antes. Guarda y cierra también.

Haremos lo mismo con las siguientes secciones en los nuevos ficheros sidebar.php y footer.php que crearemos.

2.2 Ajusta la maquinaria

Una vez hecho lo anterior tu código HTML original debería estar ya descuartizado en 4 archivos distintos (header.php, index.php, sidebar.php, footer.php). Así que ahora toca ponerlos a funcionar juntos usando unas líneas de PHP.

Abre el archivo index.php, que debería contener el HTML de la segunda sección de tu código original. Añade esta línea al principio de todo:

<?php get_header(); ?>

Ahora vamos al final de este mismo archivo y añadimos lo siguiente:

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

Con estas tres líneas de código PHP estamos diciendo a WordPress que recupere y muestre tus archivos header.php, sidebar.php y footer.php dentro de tu archivo índex.php.

Con esto tu código ya está en marcha y reconocido por WordPress, listo para mostrarlo adecuadamente. A partir de este momento si quieres cambiar algo en la barra lateral no hay que modificar el fichero index.php sino solo las pocas líneas de sidebar.php, por ejemplo. Tu diseño ya está “deconstruido“.

2.3 El Loop

El index.php ya está casi terminado. El paso final es insertar el contenido dinámico en el código. Para eso existe WordPress, y mediante PHP es muy fácil recuperarlo.

El Loop es la función PHP de WordPress utilizada para llamar y mostrar las publicaciones dinámicas desde la base de datos donde están almacenadas.

Copia este código y pégalo en tu nuevo archivo index.php (dentro del div que estés usando para la parte del 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( 'j M y' ); ?></div>          <h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="Enlace permanente a <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>          <div class="author"><?php the_author(); ?></div>      </div><!--fin de cabecera de entrada-->      <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( 'Deje un comentario', '1 comentario', '% comentarios' ); ?></div>      </div><!--end post footer-->    </div><!--end post-->  <?php endwhile; /* rebobina o sigue si se han obtenido todas las entradas */ ?>    <div class="navigation index">      <div class="alignleft"><?php next_posts_link( 'Entradas anteriores' ); ?></div>      <div class="alignright"><?php previous_posts_link( 'Entradas siguientes' ); ?></div>    </div><!--fin navegación-->  <?php else : ?>  <?php endif; ?>

Esta es una versión básica del Loop. WordPress lo usará para mostrar tus publicaciones y comentarios.

2.4 Para finalizar

Sube la carpeta de tu tema por FTP dentro de la carpeta /wp-content/themes/ donde esté instalado WordPress, o desde el instalador de temas de WordPress.

Actívalo y ya tienes tu tema WordPress con el diseño previo. Debes tener en cuenta, eso si, que es una versión muy básica de un tema WordPress, que puedes ampliar hasta el infinito revisando las tags de plantilla en el Codex, la biblia de WordPress.

Y sino, pues lo que te decía antes, que te olvides de lo viejo e instales algún maravilloso tema. Estos son los que más me gustan a mi.

WP Symposium, otro modo de convertir WordPress en una red social

Posted: 15 Jun 2013 11:43 AM PDT

wp symposium

Además del megaplugin BuddyPress y su integración bestial que convierte WordPress en una completa red social hace poco vimos que hay otro sistema para hacer prácticamente lo mismo, en aquella ocasión con alguna carencia, con Mingle. Pues bien, no son las únicas opciones de tener una red social con WordPress.

WP Symposium es un plugin que también añade funciones de red social a WordPress y que, cómo Mingle, también puedes mejorar con otros plugins específicos para el, cómo Toolbar para gestionar la barra social o Blog post para tener un blog dedicado a tu red social.

Luego, además de la versión gratis y GPL, puedes añadir opciones de pago que llevan sus funcionalidades hasta el infinito.

La contrapartida de WP Symposium frente a Mingle es que tiene tantos ajustes que configurar que intimida algo al principio, careciendo también de un sencillo asistente cómo BuddyPress, pero sus posibilidades son enormes así que es una opción que no debes descartar.

Poster + Automattic = WordPress móvil con integración de Dropbox y más

Posted: 14 Jun 2013 11:17 AM PDT

Tom Witkin, el creador de la aplicación móvil de gestión de blogs conocida cómo Poster, ha anunciado en su blog que se une al equipo de aplicaciones móviles de Automattic para incorporarse a tareas de diseño y programación, anunciando que la aplicación dejará de tener actualizaciones.

¿Qué significa esto?, pues que claramente en próximas versiones móviles de WordPress veremos incorporadas las funciones avanzadas de la aplicación Poster y alguna más que el bueno de Tom incorpore al proyecto.

Algunas de las utilidades que seguro veremos pronto serían presumiblemente las ya disponibles en Poster:

Soporte de tipos de entradas y páginas personalizadas
Campos personalizados
Formatos de entrada
Extractos
URLs personalizadas
Activar o desactivar comentarios
Entradas destacadas
Programación de entradas
Soporte de TextExpander Touch snippets
Cambio rápido de blog
Compartir las entradas en Twitter, Facebook, iMessage, email, o verlos en Safari sin salir de la aplicación
Copiar y Pegar desde cualquier otra aplicación móvil
Abrir documentos de texto o HTML desde otras aplicaciones y publicarlos directamente en cualquiera de tus blogs
Soporte integrado con Dropbox
Soporte de “Abrir en…” para lanzar un documento en cualquier aplicación y abrirlo en la aplicación móvil
Insertar imágenes en cualquier parte de una entrada