Un ejemplo podría ser un mapa contenido en una sóla imagen para una agencia de viajes, las zonas serían los continentes y los países. Al pulsar sobre cada país se dirige al usuario a una página web con la información correspondiente a ese lugar que se desea visitar.

En el caso de que la URL a mostrar sea otra imagen quizás nos interesaría que el usuario no abandone la página actual y se le muestre la información en una ventana con el típico efecto Lightbox. Si usas WordPress es muy fácil conseguir este efecto, no hace falta instalar ningún plugin.

WordPress incluye una librería jQuery (javascript) llamada Thickbox que utiliza para las ventanas del panel de administración. Podemos hacer uso de ella cuando la necesitemos para las imágenes en un post.

Puesto que nos interesa un mapa de imagen para los posts de WordPress, el tratamiento es el mismo que si usaras un enlace normal a una imagen con Thickbox. La diferencia está en el atributo HTML <area> que define una zona de un mapa de imagen en vez de un enlace.

Ejemplo:
<area class="thickbox" shape="rect" coords="108, 20, 227,118"
href="http://tudominio/tu-imagen.jpg" title="Bonito monitor"
alt="Bonito monitor" >

Es decir, al igual que añadíamos la clase class=”thickbox” para un enlace
<a class=”thickbox”… >
hacemos lo mismo con
<area class=”thickbox”
dejando el resto igual que en cualquier otro mapa de imagen.

Al hacer clic en la zona de la imagen referida al monitor se ejecutará Thickbox con la imagen que se le indique en la URL. Por supuesto, debes subir las imágenes que usará Thickbox.

Aquí el código completo:

<img src="http://dominio.com/mapa.jpg" width="350" height="250"
 border="0" usemap="#mimapa">
<map name="mimapa" id="mimapa">
<area class="thickbox" shape="rect" coords="108, 20, 227,118"
href="http://dominio.com/cuadrado.jpg" >
<area class="thickbox" shape="circle" coords="51, 137, 36"
href="http://dominio.com/circulo.jpg" >
<area class="thickbox" shape="polygon" coords="249, 109, 336, 119, 321,
192, 283, 211, 186, 185, 233, 169"
href="http://dominio.com/poligono.jpg" >
</map>

Recuerda que para que funcione lo anterior debes decirle a WordPress en tu theme que quieres usar Thickbox cargando los scripts necesarios con la función <?php add_thickbox(); ?>

Si no usas WordPress también puedes hacer uso de Thickbox. Está disponible en este enlace, puedes descargarlo y seguir las instrucciones. Normalmente se trata de añadir a la cabecera de tu sitio web la URL a los archivos javascript necesarios para Thickbox incluída la hoja de estilos correspondiente, que puedes personalizar.

Quizás no sepas que WordPress incorpora su propio Lightbox, no hace falta instalar ningún plugin para conseguir este bonito efecto.

WordPress incluye una librería jQuery (javascript) llamada Thickbox que utiliza para las ventanas emergentes de varios menús del Escritorio. Se usa sobre todo en el visor de themes, cuando subes archivos e imágenes al servidor, en la galería de imágenes, editor de imágenes, etc.

Por lo que habrás imaginado que Thickbox no sólo permite ventanas emergentes con imágenes, sino además, textos, páginas web, botones, formularios, ventanas modales, etc.

Podemos hacer uso de Thickbox cuando lo necesitemos en un post sin necesidad de plugins adicionales. Para ello hay que decirle a WordPress que cargue los scripts jQuery, Thickbox y la hoja de estilos para el cuadro del efecto emergente. Tan sencillo como añadir al archivo functions.php del theme la siguiente línea:

<?php add_thickbox(); ?>

Con esto tu theme ya estará en disposición de usar Thickbox, WordPress se encarga de insertar los scripts necesarios para su funcionamiento.

Para el caso de una imagen, en el enlace que quieras incluir la imagen para Thickbox añades class=”thickbox”. El uso sería,

<a href="segunda_imagen.jpg" class="thickbox">
<img src="primera_imagen.jpg" /></a>

De manera que al pinchar sobre primera_imagen.jpg actuará Thickbox con segunda_imagen.jpg.

Este es un ejemplo,

Más ejemplos,

Enlace a cuadro de diálogo iframe

Código:
<a href="http://url_al_formulario/iframe.html?keepThis=true
&TB_iframe=true&height=500&width=640" title="Página Web o Formulario"
class="thickbox">iframe</a>

Enlace a ventana modal iframe Modal

Código:
<a href="http:/url_a_ventana/iframemodal.html?TB_iframe=true
&height=320&width=400&modal=true" title="Ventana modal"
class="thickbox">iframe Modal</a>

Por supuesto, iframemodal.html debe contener un botón para poder cerrar la ventana. El código es el siguiente:

<input id="Login" value="- Ok -" onclick="self.parent.tb_remove();"
type="submit">

Añadir que es posible cargar los scripts para Thickbox sólo desde un post. De esta manera evitas que se carguen scripts innecesarios que no vas a usar en otras páginas o posts. La solución pasa por crear un shortcode que añadirás al final del post dónde quieras utilizar Thickbox.

Por ejemplo:

<?php

function carga_thickbox() {
   add_thickbox();
}

add_shortcode('thickbox', 'carga_thickbox');
?>

Esto lo añades al archivo functions.php de tu theme. Cuando quieras usarlo en un post llamas al shortcode thickbox (entre corchetes []) que cargará los scripts sólo para ese post, tal como he hecho yo en este post.

Existen diferentes programas de diseño web que permiten generar fácilmente el código HTML necesario para crear las distintas áreas de la imagen. También es posible crear mapas de imágenes con javascript o con aplicaciones On Line realizadas con cualquiera de los lenguajes de programación existentes. Pero realmente no es tan complicado hacerlo a mano si le echamos un poco de imaginación.

Por ejemplo, mueve el ratón sobre la siguiente imagen y observa la barra de estado del navegador, te indica unos valores. De igual forma si haces clic en cualquier zona de la imagen verás al final de la URL unos valores indicados como ?x,y que indican las coordenadas del punto elegido. Estas coordenadas en pixeles se toman desde la esquina superior izquierda de la imagen. Para esta imagen empiezan en 0,0 y terminan en 350, 250, que corresponde a la esquina inferior derecha.

Pues lo mismo puedes hacer cuando necesites generar un mapa de imagen. Creas un archivo con el nombre que prefieras y extensión .html, por ejemplo, mapa.html. Lo guardas en cualquier carpeta de tu disco duro y lo ejecutas en tu navegador web cuando te haga falta. Lo único a tener en cuenta son las medidas de tu imagen. Para el caso concreto este es el código utilizado:

<html>
<head>
<title>Test Mapa</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<a href="#">
<img src="mapa.jpg" width="350" height="250" border="0" ismap="ismap" />
</a>

</body>
</html>

Ahora con nuestro “generador de coordenadas”, vamos a obtener las coordenadas de las zonas seleccionables que abren enlaces, pueden ser páginas web, otras imágenes o una dirección de email.

La especificación HTML permite crear áreas en forma de rectángulos, circulos y polígonos. Las áreas se definen con el atributo “shape” (rect, circle, polygon) y “coords” es una lista de coordenadas dependiendo del área definida. Las etiquetas correspondientes en nuestro ejemplo para cada uno de ellos son:

<area shape="rect" coords="108, 20, 227, 118" href="cuadrado.html">
<area shape="circle" coords="51, 137, 36" href="circulo.html">
<area shape="polygon" coords="249, 109, 336, 119, 321, 192,
283, 211, 186, 185, 233, 169" href="poligono.html">

Siendo los números los valores en pixeles para formar las distintas figuras como ya dije antes.

Los valores para rectángulos y polígonos se toman siempre desde la esquina superior izquierda de la figura. Para el rectángulo o cuadrado tomamos dos pares de valores “x, y” siendo “x” el número de pixeles en horizontal “y” el número de pixeles en vertical para cada punto que buscamos. Empezando por la esquina superior izquierda y terminando por la esquina inferior derecha de la figura (monitor), 108, 20, 227,118 esto le dirá al navegador que nuestro rectángulo tiene 119 px de largo por 98 de alto.

Para el circulo se necesitan dos valores, el primero es el par punto central “x, y” y el segundo el radio de la circunferencia. En nuestro caso 51, 137, 36

Para el caso de polígonos es un poco más complicado porque tenemos que tomar los pares de valores “x, y” de cada vertice. Nuestro polígono tiene seis vertices, empezando por el superior izquierdo, son, 249, 109, 336, 119, 321, 192, 283, 211, 186, 185, 233, 169

No es necesaria tanta presición en la medida, se puede hacer aproximadamente, no se notará si hay un pixel de más o de menos.

Vamos a verlo para la imagen de ejemplo.

Este es el código completo que debes poner en tu web, blog de WordPress, Joomla, etc:

<img src="http://dominio.com/mapa.jpg" width="350" height="250"
 border="0" usemap="#mimapa">
<map name="mimapa" id="mimapa">
<area shape="rect" coords="108, 20, 227,118"
href="http://dominio.com/cuadrado.html" target="_blank">
<area shape="circle" coords="51, 137, 36"
href="http://dominio.com/circulo.html" target="_blank">
<area shape="polygon" coords="249, 109, 336, 119, 321, 192, 283, 211,
 186, 185, 233, 169" href="http://dominio.com/poligono.html"
target="_blank">
</map>

Recordar que cada mapa de imagen debe tener un nombre, en este caso “mimapa”. Si usas varios en el mismo código identifica cada uno con nombres diferentes.

Este será el resultado, cuando pases el ratón por encima de la zona seleccionable observarás que el cursor del ratón cambia indicando que se trata de un enlace.

Se entiende por jerarquía de archivos el orden con que WordPress carga los archivos de un theme necesarios para generar la página web. Esta preferencia o prioridad dependerá de lo que se va a mostrar en cada momento, post, página, categoría, tag, etc.

En cada caso WordPress busca archivos con nombres concretos en el directorio del theme y utiliza el que coincide con la consulta que se ha realizado. Si no puede encontrar un archivo con el nombre correspondiente, salta al siguiente nombre en la jerarquía de archivos.

Comprender como funciona la jerarquía de archivos de WordPress es importante a la hora de personalizar un theme y configurarlo para generar la información según de que página se trate.

Las últimas versiones de WordPress incorporan nuevas funcionalidades como los Custom Post Types (tipos de post personalizados) y las taxonomías. Esto hace que se amplíe la jerarquía para adaptar estos cambios a la vez que se facilita la creación de themes.

En la versión 2.9 ya se modificó un poco la jerarquía al permitir que se llamara a las páginas y categorías por su identificador ID y por su slug (versión amigable del nombre). De manera que page-{id}.php, page-{slug}.php, category-{id}.php y category-{slug}.php podían formar parte de los archivos de un theme.

Los archivos que se añaden a la lista existente a partir de la versión 3.0 son:

- front-page.php – Puede usarse como página de inicio o página de posts, viene a sustituir a la página estática de inicio del menú Ajustes, Lectura.
- single-{post_type}.php – Para el post individual de un Custom Post Type
- taxonomy.php – Para las taxonomías
- taxonomy-{taxonomy}.php – Para una taxonomía concreta
- taxonomy-{taxonomy}-{slug}.php – Para un slug concreto de una taxonomía.
- author-{id}.php – Para la página de un autor concreto por su ID
- author-{nicename}.php – Para la página de un autor concreto por su nicename

En la versión 3.1 se añadió archive-{post_type}.php para los archivos de un Custom Post Type. Es decir, si tenemos un Post Type llamado juegos, al seleccionar la url miblog.com/juegos WordPress cargará el archivo archive-juegos.php.

Por supuesto, también hay que añadir a esta lista las plantillas para las páginas personalizadas, que comienzan por:

<?php
/*
Template Name: Mi Template
*/
?>

Así queda la jerarquía de archivos de WordPress a la fecha actual Codex.

Aunque también tiene algunos inconvenientes sobre todo a la hora de personalizar el aspecto del foro. Puesto que bbPress es un plugin, el concepto de theme para bbPress no existe, sólo hay un theme para el blog al que añadimos los archivos de bbPress para integrar el foro.

Pero esto no significa que no podamos aplicar nuestros estilos para que el foro se asemeje lo mejor posible a nuestro Blog. También podemos retocar la información que se muestra en el foro aunque eso requiera un conocimiento mayor del código de bbPress.

Vamos por partes, para que bbPress pueda ser personalizado tanto en diseño como en contenido los archivos del foro deben estar situados en el directorio del theme.

La opción más recomendable es crear un Child Theme o tema hijo y poner los archivos dentro. De esta manera no perderás el trabajo realizado al actualizar el theme. Si el theme lo has creado tú mismo también podría ser interesante y más cómodo instalar los archivos del foro en la carpeta de un tema hijo así no te “llenas” con tantos archivos.

En este ejemplo vamos a crear un Child Theme o tema hijo para el foro.

Se hace de la siguiente manera:

1 – Crea un directorio en el directorio themes con el nombre que desees, podría ser algo como forodetutheme.
2 – Copia todos los archivos (menos functions.php y style.css) del directorio /plugins/bbpress/bbp-themes/bbp-twentyten al directorio del Child Theme creado, en este ejemplo forodetutheme. No se trata de copiar el directorio bbp-twentyten sino los archivos y directorios que hay dentro.

Es decir, los archivos necesarios son todos los que empiezan por archive, page, single y taxonomy, más los directorios bbpress, css y js, y los archivos en ellos. El archivo screenshot.png lo puedes modificar por una imagen adecuada que identifique tu foro.

3 – La hoja de estilos bbpress.css del foro se encuentra en la carpeta css de tu Child theme, copiada en el punto anterior. Puedes añadir todo el contenido de este archivo al archivo style.css de tu Child theme o importar bbpress.css mediante @import url(“./css/bbpress.css”);

Lo haremos de la segunda forma. Creamos un archivo style.css en el directorio del teme hijo. El contenido de style.css es el siguiente:

/*
Theme Name: Foro de tutheme
Theme URI: http://www.loquequieras.com
Description: Alguna descripción si lo deseas
Version: 1.0
Author: Tu nombre
Template: tuthemepadre
*/

@import url("../tuthemepadre/style.css");
@import url("./css/bbpress.css");

4 – Crea un archivo functions.php en tu theme (el Child Theme) y añade la siguiente línea:
<?php add_theme_support( 'bbpress' ); ?>
Con esto le dices a WordPress que tu theme tiene soporte para bbPress o lo que es lo mismo que tu theme usará su propia plantilla para el foro.

Si activas el Child Theme que has creado para el foro observarás que ya no “integra” tan bien como antes cuando usabamos el plugin con su propio “theme”. Muchos elementos quedan fuera de su sitio o han perdido los estilos. De eso se encargaba una parte del código que viene con el plugin.

Por tanto, ahora queda personalizar el diseño del foro modificando la hoja de estilos para adaptarlo al aspecto del theme y los archivos PHP según lo que quieras mostrar.

¿Por qué hay que modificar la hoja de estilos? Pues además de lo dicho anteriormente porque el plugin bbPress viene con un Child Theme para el theme Twenty Ten y los estilos corresponden a este theme. Por ejemplo, los contenedores del foro se llaman como los del blog #container y #content, si coinciden con los de tu theme pues no tendrás que hacer gran trabajo.

Normalmente estos estilos se adaptan muy bien a la mayoría de themes pero es posible que tengamos que modificarlos por los que correspondan. Algunos themes llaman a #container como #wrapper o #main todo esto debes tenerlo en cuenta.

Una idea sería crear un Child Theme del theme Twenty Ten siguiendo los pasos anteriores y después modificas el foro como creas oportuno trabajando con los archivos php. De esta forma no tendrías que preocuparte por los estilos CSS. Posteriormente ya podrías crear tu hoja de estilos para que el foro se adapte mejor a otros themes.

En un próximo artículo veremos con más detalle cómo realizar algunos cambios.

De esta forma se puede actualizar un theme sin correr el riesgo de perder las modificaciones que hayamos realizado al sobreescribir los archivos. Usar temas hijos es la manera recomendada de hacer modificaciones en un theme.

Para realizar un tema hijo creamos un directorio en el directorio themes, con el nombre que querramos, como si de otro theme se tratase y añadimos un archivo style.css válido. El contenido del archivo style.css del tema hijo debe ser el siguiente:

/*
Theme Name: Mi Theme Child
Theme URI: http: //ejemplo.com/
Description: Tema hijo de Mi Theme
Author: Tu nombre
Author URI: http: //ejemplo.com/acercade/
Template: temapadre
Version: 0.1.0
*/

Lo único diferente a un style.css habitual es la existencia de la línea Template: temapadre. En este caso indica a WordPress que es un tema hijo de temapadre, que es la carpeta o directorio del tema padre. Lógicamente debes sustituirlo por el nombre del directorio de tu theme. Sólo es necesario este archivo para crear un tema hijo aunque lo habitual es poder ampliar las posibilidades del tema padre con otros archivos.

Las demás líneas del archivo style.css son opcionales, sólo son obligatorias Theme Name y Template

El nombre del directorio después de Template: es sensible a minúsculas y mayúsculas, es decir debe escribirse tal como figura el directorio.

Hay que tener en cuenta que el archivo style.css del tema hijo “sobreescribe” el style.css del tema padre. Si quieres conservar los mismos estilos que el tema padre tienes dos opciones:
1 – Usar una copia del style.css del tema padre y añadir la línea Template: temapadre
2 – Usar la regla @import para cargar la hoja de estilos del tema padre, tal como sigue:

/*
Theme Name: Mi Theme Child
Template: temapadre
Version: 0.1.0
*/

@import url("../temapadre/style.css");

A partir de esta línea puedes poner tus propios estilos para el tema hijo.

El resto de archivos tienen un funcionamiento diferente a style.css. Si no existe algún archivo en el tema hijo WordPress usará el archivo correspondiente en el tema padre. Ejemplo, si el tema hijo no posee un archivo llamado category.php WordPress utilizará el archivo category.php del tema padre. Esto significa que cada vez que modifiques un archivo debes guardarlo en el directorio del tema hijo si quieres que se utilice en su lugar.

Para el archivo functions.php del tema hijo debes tener en cuenta un par de detalles. Puesto que tienen preferencia los archivos del tema hijo sobre los del tema padre las funciones que uses debes tenerlas en el archivo functions.php del tema hijo, de esta manera no perderás los cambios cuando actualices el theme. Así mismo puedes “reescribir” con tu propio código las funciones del tema padre declarándolas otra vez en el archivo functions.php del tema hijo. Especial cuidado con reescribir funciones del tipo add_theme_support('post-formats') declaradas en el tema padre.

Por último, cuando incluyas archivos desde functions.php del tema hijo, necesitarás usar STYLESHEETPATH en vez de TEMPLATEPATH.

Ejemplo,
require_once( STYLESHEETPATH . '/trayecto/al/archivo/en/tema/hijo.php' );

Fuente: Codex WordPress

Lo habitual es utilizar el mismo sidebar en todos los archivos con lo que la información que se muestra al visitante en la zona de widgets es la misma independientemente de la página que esté visitando. Esto no tiene por qué ser así, es posible hacer uso de un sidebar concreto según se trate de páginas, categorías, archivos, etc.

Además podemos crear otras zonas para widgets diferentes a la barra o columna lateral, como el header o el footer. Esto facilita ordenar y mostrar diferente información al ampliar las zonas disponibles.

Mediante la función get_sidebar() le decimos a WordPress que cargue el archivo sidebar.php, que debe contener el código necesario para mostrar los widgets que se deseen en el sidebar. Esta función se encuentra en los archivos del theme (la mayoría) en los que interesa disponer de widgets. De la misma forma get_sidebar(‘otros’) le dirá a WordPress que cargue un archivo llamado
sidebar-otros.php que contendrá un código diferente al sidebar por defecto. Sólo tenemos que sustituir un archivo por otro para cargar el sidebar que nos interese.

Veamos un caso más completo con el uso de widgets. Para hacer esto procederemos de la siguiente manera:

1 – Declaramos en el archivo functions.php del theme los sidebars que contendrán los widgets. En el ejemplo, he creado 4 zonas para widgets llamadas Principal, Widgets Paginas, Widgets Categorias y Widgets Single. Puedes añadir las que desees y llamarlas como prefieras, en realidad con 3 zonas puede ser más que suficiente.

2 – Creamos tantos archivos sidebar como zonas independientes querramos.

Lo mejor es copiar el archivo sidebar.php y guardarlo con los nombres que necesitemos. Después hacemos las modificaciones a la hora de llamar a los distintos sidebars. En este ejemplo, sidebar-principal.php podría tener el siguiente aspecto:

<?php if ( ! dynamic_sidebar( 'mi-widget-principal' ) ) : ?>
<?php endif; ?>

Para sidebar-categorias.php :

<?php if ( ! dynamic_sidebar( 'mi-widget-categorias' ) ) : ?>
<?php endif; ?>

Para sidebar-paginas.php :

<?php if ( ! dynamic_sidebar( 'mi-widget-paginas' ) ) : ?>
<?php endif; ?>

Para sidebar-single.php :

<?php if ( ! dynamic_sidebar( 'mi-widget-single' ) ) : ?>
<?php endif; ?>

3 – Ubicamos en cada archivo (index.php, category.php, page.php, single.php, etc) el sidebar que deseemos (Ver Jerarquía de archivos). Para el archivo category.php en la llamada al sidebar modificamos donde pone

<?php get_sidebar(); ?>
por
<?php get_sidebar('categorias'); ?>

Esto hará que las categorías sólo usen el archivo sidebar-categorias.php que es el encargado de mostrar el sidebar mi-widget-categorias, y así con los restantes archivos donde quieras que figure cada sidebar:
<?php get_sidebar('principal'); ?>
<?php get_sidebar('paginas'); ?>
<?php get_sidebar('single'); ?>

También puedes tener varios sidebars en el mismo archivo sidebar.

¿Y si quisiera diferentes sidebars para diferentes páginas? Fácil, crea una plantilla para la página y le pones el o los sidebars que prefieras, como si quieres añadirlos todos. Exactamente igual que harías con los archivos index.php, category.php, single.php en el ejemplo anterior.

Como puedes comprobar dispones de múltiples combinaciones.

Para crear la plantilla de la página puedes copiar el archivo page.php sin olvidar poner al principio:

<?php
/*
* Template Name: Tu plantilla
*
*/
?>

Después la seleccionas desde el menú como plantilla para la página.

A continuación el código del archivo functions.php para el ejemplo anterior:

<?php

function mi_widgets_init() {

  // Sidebar principal.
  register_sidebar( array(
  'name' => __( 'Principal'),
  'id' => 'mi-widget-principal',
  'description' => __( 'Sidebar principal para widgets'),
  'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
  'after_widget' => '</li>',
  'before_title' => '<h3 class="widget-title">',
  'after_title' => '</h3>',
  ) );

  // Sidebar para categorias
  register_sidebar( array(
  'name' => __( 'Widgets Categorias'),
  'id' => 'mi-widget-categorias',
  'description' => __( 'Sidebar para widgets en categorias'),
  'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
  'after_widget' => '</li>',
  'before_title' => '<h3 class="widget-title">',
  'after_title' => '</h3>',
  ) );

  // Sidebar para paginas
  register_sidebar( array(
  'name' => __( 'Widgets Paginas'),
  'id' => 'mi-widget-paginas',
  'description' => __( 'Sidebar para widgets en paginas'),
  'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
  'after_widget' => '</li>',
  'before_title' => '<h3 class="widget-title">',
  'after_title' => '</h3>',
  ) );

  // Sidebar para single
  register_sidebar( array(
  'name' => __( 'Widgets Single'),
  'id' => 'mi-widget-single',
  'description' => __( 'Sidebar para widgets en single'),
  'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
  'after_widget' => '</li>',
  'before_title' => '<h3 class="widget-title">',
  'after_title' => '</h3>',
  ) );
}

/* Registramos los sidebars ejecutando
mi_widgets_init() con el hook widgets_init. */
add_action( 'widgets_init', 'mi_widgets_init' );
?>

Los valores de ‘before_widget’, ‘after_widget’, ‘before_title’ y ‘after_title’ los he tomado del theme Twenty Ten puedes poner los que correspondan a tu theme o los valores que prefieras.

WordPress es un software para blogs de código abierto (Open Source) creado por Automattic. WordPress.com utiliza el mismo WordPress que te puedes descargar de WordPress.org. Con WordPress.com el alojamiento y mantenimiento del software corre a cargo de Automattic. Con WordPress.org necesitas contratar un servidor de terceros para el alojamiento y la instalación del software.

Ventajas de WordPress.com
- Es gratis y fácil de configurar
- No tienes que preocuparte de actualizaciones, spam, backups, seguridad, etc
- Tu blog se encuentra en cientos de servidores por lo que es improbable que sufra caídas debido al tráfico
- Se realizan copias de tus posts automáticamente
- Puedes obtener tráfico extra de blogs del dia y tags
- Puedes encontrar otros bloggers
- Usa SSL (conexión segura) de manera que nadie puede acceder a tu cuenta aunque uses wifi

Inconvenientes de WordPress.com
- Sólo existen poco más de 100 themes para elegir (se añaden más cada dia) los cuales puedes modificar CSS pero no puedes instalar tus propios themes
- No puedes modificar el código de los archivos PHP de tu blog
- No puedes subir plugins
- Te introducen publicidad que no deseas

Si quieres añadir o modificar themes, añadir o modificar códigos PHP, instalar plugins y eliminar publicidad, deberás pagar por ello.

Ventajas de WordPress.org
- Posibilidad de instalar themes
- Posibilidad de instalar plugins
- Formar parte de una gran comunidad
- Control total para cambiar código si estás preparado técnicamente

Inconvenientes de WordPress.org
- Necesitas un buen servidor que puede costar entre 7 y 12 dólares al mes, o cientos de dólares si superas los límites por alto tráfico
- Son necesarios algunos conocimientos técnicos para configurar y poner en marcha el blog
- Necesitas controlar el SPAM
- Debes realizar backups
- Necesitas realizar las actualizaciones de nuevas versiones de forma manual
- Posibilidad de caídas del servidor en momentos de mucho tráfico

WordPress.org es un software libre para blogs. Con WordPress.org puedes instalar themes y plugins, añadir tu propia publicidad, editar la base de datos y cualquier modificación en el código fuente PHP. Cualquiera puede descargar el software libremente pero debe instalarlo en un servidor para ponerlo en marcha. Los servidores web por lo general no son gratis. El alojamiento de tu propio software de WordPress puede ser divertido pero está lleno de responsabilidades para el blogger. Si administras mal tu servidor puedes perder el blog por completo.

WordPress.org proporciona software para el blog, listas de correo de la comunidad, Foros de soporte de la comunidad, documentación y themes y plugins libres.

También existen desarrolladores especializados en la realización de interesantes themes y sitios para WordPress, CodePoet

WordPress.com es diferente. No tienes que descargar software, pagar por hospedaje o gestión de un servidor web. Cuando te registras para realizar tu blog en WordPress.com obtienes una URL como “tuweb.wordpress.com” o puedes “mapear” un dominio tipo “tuweb.com” sin el “.wordpress.com” final. No puedes controlar el software ni la base de datos; FTP y acceso a ficheros no están incluídos. WordPress.com está basado en una versión multisitio de WordPress que no permite subir themes o plugins (aunque la mayoría de los plugins populares vienen incorporados en WordPress.com). JavaScript como para YouTube están soportados, pero por razones de seguridad algunos de los códigos serán desactivados. CSS también tiene restricciones por razones de seguridad, pero puedes adquirir un módulo que te permite editar tu CSS totalmente.

Sin cargo, WordPress.com ofrece alojamiento web, ilimitadas bases de datos redundantes con copias de seguridad, actualizaciones automáticas, foro de soporte de la comunidad, administración y themes en varios idiomas, estadísticas de tráfico real, seguimiento de comentarios, rankings de posts y blogs, y otras características no disponibles en otros sitios. Todo esto es libre para los blogs en WordPress.com.

WordPress.com es una iniciativa comercial de Automattic, una compañía iniciada por los desarrolladores fundadores de WordPress y su personal está compuesto por desarrolladores a tiempo completo, diseñadores y agentes de soporte. Funciona en una versión multisitio de WordPress, software de código abierto. Los desarrolladores de Automattic contribuyen regularmente en WordPress.org así la comunidad puede beneficiarse.

WordPress.com ofrece módulos de pago como manera de proporcionar características premium evitando a los bloggers alojar sus blogs en otros lugares.

Fuente: Traducido integramente de WordPress.com aunque con ligeras modificaciones.