Os presento el nuevo blog CoLabores.net donde seguiré escribiendo a partir de ahora. En realidad es el mismo que el anterior, pero alojado en un servidor propio y con nuevas funcionalidades que el alojamiento en WordPress.com no permite. Algunas eran realmente importantes para este blog, como poder añadir feeds, tener varios idiomas, varias columnas de posts… Y todo lo que supone no tener acceso a modificar la apariencia y la funcionalidad, que es la virtud principal de wordpress. Entiendo perfectamente que sean tan restrictivos en lo que permiten en su alojamiento, porque puede dar pie a blogs automatizados como portales que sólo copian contenido para posicionarse mientras “gastan” el alojamiento. Esto se lo puede permitir Google con Blogger y su ventaja infraestructural (y lo hemos usado para algunos proyectos cuando no sabíamos todo lo que ahora voy aprendiendo ).

En fin, ya tengo alojamiento propio y un poquitito de tiempo, pero sobretodo curiosidad por aprender a desarrollar temas en wordpress. Antes ya había personalizado temas, pero ahora quería aclarar lo que sabía y ordenarlo: cuál es la estructura de wordpress, programación en php, diseño web.. Todo esto para ser más libre y autónoma en mi pequeño espacio en internet.

La primera novedad es el nombre CoLabores.net. Más corto y “latino” que el anterior CommonHouseWorks, y creo que más pegadizo y, sobretodo, flexible y abierto. Labor es en español, portugués, catalán y no sé si alguno más, el trabajo del hogar, del campo, de la fábrica o del parto que se realiza poco a poco y con esfuerzo, incluso tiene cierta connotación de realizarse con las manos… El prefijo viene de comunes, cotidianos y compartidos. Y de todas estas cosas hablo por aquí. Lo que más me gusta es que la palabra incluye Lab, porque este blog sirve como mi laboratorio de investigación de muchos laboratorios… Una que se lía con las palabras y no para… 😉

Por fin en varios idiomas (inglés, español y, si puedo, en català) y sin tener que duplicar posts con el plugin para wordpress qTranslate. Lo he encontrado muy fácil de instalar, configurar y usar. Aunque aún me falta añadir algunos links en la cabecera para que sea totalmente funcional.

Y esto tiene que ver con la mayor novedad. He cambiado el tema oulipo y he instalado uno que descargué en lasindias.info indianofila. Lo que más me gusta es que tiene dos columnas, una la voy a dedicar a largos posts de desarrollo de la investigación (maxiposts) y la otra a posts cortos con noticias, referencias, comentarios,.. (miniposts). Tuve que decidir entre añadir una columna al tema oulipo o añadir “falsos widgets” a indianofila porque no está “widgetizado“. Como el archivo de indianofila está bastante bien explicado y es mucho más legible, me decidí por lo segundo.

He conseguido comprender cómo funciona el php y wordpress e instalarme y usar el software necesario para trabajar en local más rápido y sin miedo a equivocarme. Aún faltan muchas cosas por hacer, como afinar el diseño y apropiármelo, añadir más feeds, páginas y explicaciones, links… poco a poco.

A continuación dejo los pasos a seguir para hacer una instalación local de wordpress y unos básicos sobre su programación, espero que os sea útil:

Lo primero que hay que hacer es contratar un alojamiento web en un servidor y comprar un dominio, una dirección web. Si no viene ya instalado o no tenéis la opción one-click wordpress install en ese alojamiento, no pasa nada, porque el wordpress es muy sencillo de instalar. Aquí lo explican, y más abajo yo lo comento un poco más al explicar la instalación en un servidor local. A partir de ahí vuestra plantilla y código php son totalmente editables y accesibles desde Escritorio > Apariencia > Editor

Si ya habéis hecho esto alguna vez y habéis trasteado algún detalle pequeñito en el CSS, como las fuentes o enlaces, sabéis que es un proceso lento y poco agradecido porque cada vez tenéis que guardar los cambios y previsualizar. Además se corre el riesgo de “romper” algo y esto hace que vayamos aún más lento. Así que es una buena idea instalar el software necesario para “simular” un servidor en tu propio ordenador e instalar ahí wordpress y tu blog para hacer pruebas. Yo he usado Xampp y Aptana Studio ambos open-source y multiplataforma. Son muy sencillos de instalar. Xampp sirve para que tu ordenador funcione como si tuvieras instalado un servidor web Apache, y sobre él los lenguajes de programación MySQL, PHP y Perl. Y Aptana Studio sirve para editar el código y previsualizar en un entorno muy cómodo.

Una vez instalados, debes abrir Xampp y iniciar Apache y MySQL al menos (te pedirá la contraseña de administrador). Para comprobar que funciona, abre una ventana en tu navegador y escribe http://localhost/. Te abre una ventana donde está la información de tu instalación. Es ahora cuando hay que instalar wordpress en ese servidor “simulado” que ofrece Xampp. Ve a la carpeta de aplicaciones y en Xampp > htdocs es donde debes copiar el paquete de instalación wordpress. Puedes nombrarlo como quieras, en mi caso, colabores. Por tanto la ruta de acceso será http://localhost/colabores

Pero antes de poder acceder hay que crear una base de datos en el servidor, que será la que consulte el tema para mostrar las páginas que le pedimos al servidor. Para el que no lo sepa, WordPress funciona con tres elementos básicos: su “sistema operativo” que es un gestor de contenidos escrito en php (el paquete de instalación de wordpress); el tema que dicta la funcionalidad y la apariencia; y la base de datos, que es donde en realidad se guardan los posts, comentarios, etiquetas,.. Así que en la pantalla http://localhost/ abajo a la izquierda hay que ir a phpMyAdmin y crear una nueva base de datos, nombrándola, por ejemplo wordpress

Es ahora cuando tienes que configurar tus datos de acceso. Abre con un editor de texto el archivo wp-config-sample.php que está dentro de la carpeta de wordpress y modifica:

// ** MySQL settings ** //
define(‘DB_NAME’, ‘wordpress’); // The name of the database
define(‘DB_USER’, ‘root’); // Your MySQL username
define(‘DB_PASSWORD’, ”); // …and password (needs to be empty, just for local install)
define(‘DB_HOST’, ‘localhost’); // 99% chance you won’t need to change this value

y listo!! accediendo a http://localhost/colabores debería aparecer tu blog, tal como lo dejaste la última vez.

(si queréis más detalles de la instalación en windows yo consulté este tutorial en inglés con imágenes)

Ahora ya está todo preparado para que podáis editar el blog en local. Para eso yo he empezado a usar Aptana Studio, pero cualquier editor de texto serviría. Lo bueno de usar estos “entornos de desarrollo web” es la rapidez de edición y previsualización y que resaltan el código y sus fallos. En Window > Showview > Web Browser Editor podéis añadir una pestaña de navegador web, introduciendo ahí http://localhost/colabores previsualizas los cambios que vas guardando en las otras pestañas con un simple ctrl+S.

(Algo que no he conseguido es importar mi base de datos (los posts que ya tengo escritos) al servidor local, porque cuando lo hacía me redireccionaba al servidor externo. Esto es bastante lógico, pero yo pensaba que hacía algo mal y lo intenté muuuchas veces. Finalmente copié manualmente algunos posts y ya. En cualquier caso descubrí este plugin WordPress Database Backup para hacer backups de la base de datos)

Y a editar, pero… ¿cómo funciona un tema de wordpress?

Como ya he dicho, el tema es el que marca la funcionalidad y el aspecto de la página. La funcionalidad con los archivos .php y el aspecto con el archivo .CSS En WordPress a diferencia de blogger están separados, entre ellos y en pequeños paquetes de información, que determinan la cabecera, el pie, la barra lateral, etc, y van llamándose unos a otros para conformar el tema. El archivo principal del tema es el index.php que básicamente es así:

<?php
get_header();
if (have_posts()) :
while (have_posts()) :
the_post();
the_content();
endwhile;
endif;
get_sidebar();
get_footer(); 
?>

Éste es el famoso Loop de WordPress las órdenes que le hacen tomar los otros paquetes de información que están guardados en archivos separados: header.php (la cabecera), footer.php (el pie)… Pero puede complicarse cuanto se quiera. En la plantilla que estoy usando ahora indianofila aparecen dos loops que forman las dos columnas según las categorías. Lo hacen definiendo un nuevo Query (cadena de consulta) para la segunda columna:

<?php if (have_posts()) : ?>
<?php $numPosts = get_option(‘posts_per_page’);
$paged = (get_query_var(‘paged’)) ? get_query_var(‘paged’) : 1;
query_posts(‘showposts=’.$numPosts.’&paged=’.$paged.’&category_name==”maxiposts”‘);
?>
<?php while (have_posts()) : the_post(); ?>
 
<?php
$miniposts = new WP_Query(); ?>
<?php $miniposts->query(‘category_name=miniposts&showposts=3’); ?>
<? if($miniposts->have_posts()) : ?>
<? while($miniposts->have_posts()) : $miniposts->the_post(); ?>
<?php endwhile; ?>
<?php endif; ?>
 

Después hay que decidir dónde se sitúan esas consultas en el blog. Para ello estructuran el código en <div> agrupaciones que nombran “objetos” que luego podemos llamar en la hoja de estilo style.css y darles el lugar y la apariencia que queramos. En indianofila por ejemplo, se definen estos <div> entre la cabecera, el pie y el contenido. En la plantilla base que me descargué el content-sup estaba sin usar y es ahí (bajo los maxiposts) que he añadido Feeds de otros blogs con Feevy:

ESTRUCTURA
— CONTAINER
— BRANDING
— NAV
— CONTENT
— CONTENT-MAIN
— CONTENT-SUB
— CONTENT-SUP
— SITEINFO
 
<div id=”content-sup”>
<h2>Otros del MasterDIWO</h2>
<!– feevy sin tags –>
<div id=”feevy”>
<script type=’text/javascript’ src=’http://www.feevy.com/code/20518/white’></script>
</div>
</div><!– /#content-sup –>

Hasta aquí un resumen de cómo hackear temas de WordPress en un servidor local. Primero instalar y configurar el blog en local y después empezar a comprender cómo funciona la estructura de WordPress, para poder hacer cambios. Aunque se me quedan muchas cosas en el teclado… según vaya trasteando más el blog y aprendiendo iré compartiéndolo aquí.

15 comments on “Las entrañas del nuevo blog. Cómo hackear temas de WordPress en un servidor local

  • Me has dejado flipado, Ester 😀

    El nuevo nombre me encanta, y en cuanto a este post, veo que vas muy adelantada ya en el manejo de WordPress, has hecho un muy buen esfuerzo de aclaración de tus conocimientos y además literalmente me has adelantado en lo de instalar un servidor local, cosa que yo intenté (y creo que logré) apenas hace un par de semanas y aún no acabo de pillar del todo 😉

    ¡Genial!

  • Parece que el qTranslate te la ha liado un poco con las fechas, ya me ha pasado a mí alguna vez también. Pero es una maravilla de plugin.

  • Hola Jorge, ¿cómo vas por las tierras del norte?

    gracias por comentar y por los piropos 😉 La verdad es que me lío con un algo que parece rápido y al final me engancho. Yo ya lo había hecho pero no me acordaba bien, por eso decidí escribirmelo en un post. Lo que más me cuesta es concienciarme a trabajar anotando y publicando para que luego no sea un esfuerzo tan grande y me queden posts tan largos..

    Si tienes problemas con lo del servidor local, pregúntame y seguimos aprendiendo… Yo, por ejemplo, no he conseguido lo de importarme los post que ya tengo publicados para previsualizarlos en local por el tema de la base de datos, pero bueno, tampoco es tan útil…

    A ver si arreglo pronto lo de las fechas y la aperiencia del blog, que está “cogido con agujas”

    Gracias otra vez!

  • ¿Has probado ir a herramientas/exportar (y luego seleccionas WordPress) en tu blog online, y luego a importar el .xml resultante que te descargues, desde el blog local? Debería funcionar 🙂

  • Pues eso es lo primero que probé, porque así se hace de un blog online a otro. Pero al importar desde el escritorio del blog en local da un problema de no poder acceder a la base de datos local y escribir sobre ella… Será un tema de permisos, porque cada vez que copias algo en el htdocs del Xampp te pide la clave de administrador de usuario.

    Por eso luego probé con el WordPress Database Backup que funciona pero extrañamente me redirecciona l blog online cada vez que hago click en algo del blog en local. Encontré alguna información relacionada, en este foro hablan de usarlo al revés, escribir en local y luego subirlo online con ese sistema y entiendo que les funciona.
    http://wordpress.org/support/topic/is-a-data-base-created-under-xampp-a-valid-backup-for-your-hosted-wordpress

    Gracias por el intento, seguimos investigando que seguro que lo sacamos!

  • Sí, para que funcionara lo primero, deberías dar permisos de superusuario a toda la carpeta de htdocs, así dejará de pedírtelos cada dos por tres.

    Seguro que en Mac se hace parecido a Linux (ambos están basados en Unix), es ejecutar un comando en terminal y listo.

    En mi caso:

    sudo chmod -c 777 -R [ruta de la carpeta]

    O igual puedes modificarlo desde las propiedades de la carpeta.

  • Sí, para lo primero deberías darle permisos de administrador “superusuario” a la carpeta htdocs, no te puedo asegurar que con eso funcione porque no he llegado a lograrlo yo mismo: el archivo de exportación es de más de 2 Mb y no me deja importarlo.

    En Linux se hace bastante fácil lo de los permisos, copiando un comando en la terminal, desde Mac seguramente será parecido, o a lo mejor desde las propiedades de carpeta mismo.

    En mi caso era así:

    sudo chmod -c 777 -R /rutadetucarpeta/htdocs/

    En cualquier caso, busca el equivalente para Mac y hazlo, te ahorrarás meter claves cada dos por tres.

  • Por cierto, gracias al post me animé a acabar de instalar un servidor local y la verdad es que funciona muy bien, perfecto para desarrollar temas de wordpress 🙂

    • Probaré lo del “superusuario” en el próximo avance del blog, gracias. Mientras tanto, me alegro que haya servido para animarte, Jorge. Parece que escribir y compartir los procesos de aprendizaje tiene su recompensa 😉

      (he pensado en añadir a Masterdiwo un feed de los comentarios en los blogs, para reflejar que la conversación se va animando y animarla aún más..)

  • Respecto al tema de las fechas en los comentarios, lo he resuelto simplemente quitando todo el código en los Settings del Plugin qTranslate. Editas cada idioma y dejas los campos dateformat y timeformat en blanco sale la fecha bien por defecto. Qué cosas!

  • Lo de añadir un feed de comentarios al blog puede funcionar para animarnos, pero saldrán publicados con un formato un poco raro, descontextualizados. Lo que sí molaría es que todos nos agregáramos los feeds de comentarios del resto a una carpeta DIWO en nuestro lector RSS, o quizás algo que mande un aviso en twitter…

  • Hola, si bien he instalado tanto en local como en hosting recien empiezo en todo esto y la verdad hay cosas que con la edicion de wordpress no logro sacar.
    Me interesaria retocar el theme de alguna forma y una vez realizado subirlo al hosting pero sigo sin lograr las modificaciones, algun tuto porfavor !!!
    gracias.
    PD soy muy novato

Leave a Reply

Your email address will not be published. Required fields are marked *