WordPress WebDev

Usando WordPress para desarrollo web akobashikawa@helicecuatro.com 20121204

Contenido
Contenido Introduccin Escenario XAMPP - Instalacin WordPress - Instalacin Dreamweaver - Configuracin WordPress - Theming Theming Bsico Theming con Initializr

Introduccin
WordPress es un administrador de contenidos, o CMS, que facilita la publicacin de contenido web. Y tambin el desarrollo de sites dinmicos, si se usa de modo avanzado, como se propone en esta gua. Aqu se describe una forma de configurar un entorno de desarrollo de sites dinmicos usando WordPress y Dreamweaver.

Escenario
La gua ha sido probada en una PC con Windows 7, XAMPP 1.8.1, Chrome 23 y Dreamweaver CS6. Pero hay otras combinaciones. Por ejemplo, previamente he usado XAMPP 1.7.2, Firefox 4 y Dreamweaver CS5. Para escribir cdigo tambin se puede usar Sublime Text 2 o Notepad++, pero el Live View de Dreamweaver resulta muy til. Las rutas de instalacin y otras preferencias funcionan bien para mi forma de trabajo en particular, pero son solo referenciales. Si otra otras, simplemente adapte lo que aparece en la gua. Finalmente, alguien podra usar Linux, Mac, u otro conjunto de herramientas para hacer algo similar.

XAMPP - Instalacin
WordPress es una aplicacin web PHP / MySQL. Es decir, est escrita en PHP, se conecta a una base de datos MySQL y requiere de un servidor web con soporte para ello. Puede ser alojado en la mayora de hostings, comerciales y gratuitos, disponibles en Internet. Para desarrollo local, se puede usar XAMPP: Ir a http://www.apachefriends.org/es/xampp.html Entrar a XAMPP for Windows, Download, XAMPP y descargar el zip (http:// www.apachefriends.org/download.php?xampp-win32-1.8.1-VC9.zip).
Se podra usar la versin exe, pero la versin del zip tiene varias ventajas. No requiere ser instalado por el sistema, simplemente se extrae a cualquier carpeta. Incluso podra ponerse en un USB. Y hasta tener varias versiones de XAMPP (por ejemplo, a veces se requiere XAMPP 1.7.2 para trabajar con Drupal 6). Tambin se podra usar la versin Lite, pero la versin completa trae un servidor email, que permite simular de modo ms completo el ambiente de un hosting.

Extraer los archivos y colocarlos en una carpeta. Aqu se supondr C:\bin\dev\xampp181\

Hablando de XAMPP, las rutas que se mencionen sern relativas a la carpeta XAMPP, excepto cuando se indique otra cosa.

Ejecutar setup_xampp.bat Aparecer la ventana de comandos, con unos mensajes. Al final, pulsar Esc para continuar.

Ejecutar xampp-control.exe para usar el panel de control de XAMPP. Aparecer una ventana de dilogo para elegir el lenguaje. Puede elegir la bandera USA para ingls. Finalmente, la ventana del panel de control:

Para iniciar Apache, hacer click en su botn Start. Puede ser que Windows solicite la primera vez una confirmacin para ejecutar el programa. Luego, para verificar que Apache est funcionando, en un navegador entrar a http:// localhost Aparecer el homepage de su instalacin de XAMPP:

La carpeta web es htdocs. Normalmente se abre index.html pero index.php tiene la preferencia, si estuviera presente. El homepage aparece como resultado de abrir index.php, el cual hace una redireccin hacia la carpeta xampp, y muestra finalmente a splash.php. Para ver la info del PHP en el servidor, ubicar la carpeta de XAMPP, entrar a la carpeta htdocs y crear el archivo phpinfo.php con el contenido: <?php phpinfo(); ?> Luego, usando el navegador, entrar a http://localhost/phpinfo.php

Para iniciar MySQL, hacer click en su boton Start. Puede ser que Windows solicite la primera vez una confirmacin para ejecutar el programa. Luego, si se hace click en su botn Admin, se abrir en el navegador la pgina http:// localhost/phpmyadmin/ , que permite administrar las bases de datos.
Puede ser conveniente definir un usuario root y su contrasea:

En el administrador de archivos, entrar a la carpeta mysql y, seleccionando la carpeta bin, abrir la ventana de comandos all (SHIFT + CLICK DERECHO, Abrir ventana de comandos aqui) En la ventana de comandos, ejecutar: mysqladmin -u root password mysql Esto asigna la contrasea mysql para el usuario root. No es una contrasea muy segura, pero se trata de un entorno de desarrollo y es fcil de recordar. Si ahora se refrescara la pgina http://localhost/phpmyadmin/, se obtendra un mensaje de error. Es necesario indicarle a phpmyadmin la nueva contrasea usada por mysql, editando el archivo de configuracin phpMyAdmin\config.inc.php: $cfg['Servers'][$i]['password'] = 'mysql'; Luego se puede acceder a http://localhost/phpmyadmin/ normalmente.

Para iniciar Mercury (el servidor email) haciendo click en su botn Start. Puede ser que Windows solicite la primera vez una confirmacin para ejecutar el programa.
La configuracin puede requerir cierto trabajo (Einrichtung von Sendmail mit Google-MailAccount(sendmail.ini) unter XAMPP 1.8.0):

En php/php.ini, que la configuracin contenga algo como: ... [mail function] ; smtp_port = 25 sendmail_from = xxx@gmail.com sendmail_path = "\"C:\bin\dev\xampp181\sendmail\sendmail.exe\" -t"

En sendmail/sendmail.ini, que la configuracin tenga algo como: [sendmail] smtp_server=smtp.gmail.com smtp_port=587 smtp_ssl=tls tls_certcheck off

error_logfile=error.log debug_logfile=debug.log auth_username=xxx@gmail.com auth_password=xxx

Para probar el email, se puede crear la pgina emailtest.php y luego entrar a http:// localhost/emailtest.php: <html> <body> <?php //http://www.w3schools.com/php/php_mail.asp if (isset($_REQUEST['from'])) //if "email" is filled out, send email { //send email $to = $_REQUEST['to'] ; $from = $_REQUEST['from'] ; $subject = $_REQUEST['subject'] ; $message = $_REQUEST['message'] ; if (mail($to, $subject, $message, "From:" . $from)) { echo "Mail sended"; } else { echo "Error"; } echo ". Thank you for using emailtest"; } else //if "email" is not filled out, display the form { echo "<form method='post' action='emailtest.php'> From: <input name='from' type='text'><br> To: <input name='to' type='text'><br> Subject: <input name='subject' type='text'><br> Message:<br> <textarea name='message' rows='15' cols='40'></textarea><br> <input type='submit'> </form>"; } ?> </body> </html>

Puede ser conveniente tener los archivos web en un directorio aparte, como Dropbox, y conectarlos con un enlace. Esto permite que mltiples versiones de XAMPP compartan un directorio web. Para crear el enlace, hay que ejecutar unos comandos de consola como Administrador:

En el Menu Inicio de Windows, en la caja Buscar programas y archivos, ingresar cmd Cuando aparece el icono de cmd.exe, hacerle click derecho y elegir Ejecutar como administrador. Puede ser que Windows solicite una confirmacin antes de proseguir. En la ventana de comandos que se abre, ordenar ir a la carpeta htdocs:
cd C:\bin\dev\xampp181\htdocs

Luego, crear el enlace al directorio de dropbox que contiene los archivos web compartidos:
mklink/D dropbox C:\Users\xxx\Dropbox\htdocs

WordPress - Instalacin
Crear un sitio web con Wordpress consiste en crear la carpeta con los archivos web, y crear la base de datos asociada. El sitio se puede desarrollar localmente y luego exportarlo a algn hosting. En este caso, el site se llama wp101. Ir a http://wordpress.org/download/ Descargar el zip (http://wordpress.org/latest.zip) Usar aqu la versin en ingls. Extraer los archivos y colocarlos dentro de la carpeta web. En este caso htdocs\dropbox\sites\wp101, de modo que el site se puede ver en http://localhost/ dropbox/sites/wp101
Hablando de un sitio WordPress, las rutas que se mencionen son relativas a su carpeta, excepto cuando se indique otra cosa.

Entrar a http://localhost/dropbox/sites/wp101/ Aparece una pantalla para iniciar el proceso de instalacin de WordPress.

Hacer click en Create a Configuration File. Se inicia el proceso de instalacin de WordPress.

Hacer click en Lets go! Se solicitan los parmetros de la base de datos. Para crear la base de datos, en otra ventana, ingresar a http://localhost/ phpmyadmin/ (en el panel de control de XAMPP, hacer click en el botn Admin correspondiente a MySQL). Hacer click en Bases de datos En la seccin Crear base de datos, ingresar wp101 como nombre y elegir utf8_general_ci como Cotejamiento.

Hacer click en Crear Volver a la pantalla donde se solicitaban los parmetros de la base de datos e ingresarlos: Database Name: wp101 User name: root Password: mysql Database Host: localhost Table Prefix: wp_ Aparece una pantalla indicando que est listo para comunicarse con la base de datos.

Hacer click en Run the install Se solicitan los parmetros del sitio. Ingresar los parmetros del sitio: Site Title: WP 101 Username: admin Password: admin Your E-mail: xxx@xxx Privacy: [x] Allow search engines to index this site.

Hacer click en Install WordPress Si todo sale bien, aparece la pantalla Success!

En este momento ya se podra ingresar a http://localhost/dropbox/sites/wp101

Para continuar hacia el panel de administracin, hacer click en Log In Aparece la pantalla de ingreso.

Tambin se podra ir directamente a esta pgina entrando a http://localhost/dropbox/sites/ wp101/wp-login.php

Ingresar los datos del administrador: Username: admin Password: admin

Hacer click en Log In. Aparece el panel de administracin, o dashboard.

Dreamweaver - Configuracin
Iniciar Dreamweaver En el men, entrar a Site, New Site... Aparece el dilogo Site Setup Ingresar los datos del sitio: Site WP 101 Site Name: Local Site Folder: C:\Users\compaq\Dropbox\htdocs\sites\wp101\ Servers, +, Basic XAMPP Server name: Local/Network Connect using: C:\Users\compaq\Dropbox\htdocs\sites\wp101 Server Folder: Web URL: http://localhost/dropbox/sites/wp101/ , Advanced PHP MySQL Testing Server: Servers [ ]Remote [x]Testing XAMPP: Luego, aparece el sitio en las lista desplegable del panel Files. Al elegir abrir index.php, Dreamweaver pregunta si deseamos que explore las dependencias. Luego de responder que s, aparecer abierto index.php y todos los archivos dependientes, como los includes, estilos y scripts.

Al hacer click en Live, se puede ver la pgina tal como la mostrara un navegador. As, es ms cmodo ver cmo influyen los cambios en los archivos.

WordPress - Theming
En WordPress, un tema es un conjunto de archivos que se determina el diseo grfico de la pgina. Para administrar los temas, se ingresa al dashboard, Appearance, Themes. Es posible descargar temas de Internet y activarlos. Uno puede usar esos temas tal cual o adaptarlos. Tambin es posible hacer desde cero nuevos temas. Los archivos de un tema se colocan dentro de una carpeta en wp-content\themes. Por ejemplo, el tema helloworld tendra la carpeta wp-content\themes\helloworld.

Theming Bsico
El tema mnimo consta de un archivo style.css y un archivo index.php, ambos en blanco. Eso basta para que WordPress lo reconozca y muestre en el dashboard. Luego se puede ir incorporando paso a paso lo que se requiera. style.css puede contener en su cabecera un comentario con la info a mostrar en el dashboard (sin info, el nombre del autor es Anonymous y no hay nmero de versin ni descripcin). index.php contiene el html/php que se usar para mostrar la pgina. WordPress dispone de varias funciones que ayudan a mostrar el contenido. functions.php puede contener bibliotecas adicionales de funciones y objetos tiles.

Tcnicamente, no hay obligacin de usar las funciones de Wordpress. Un site ya desarrollado se podra incluir fcilmente como template y luego ir reemplazando paso a paso el contenido esttico por el dinmico. A continuacin un ejemplo que muestra cmo se pueden usar algunas funciones bsicas:
myminimal\style.css /* Theme Name: My Minimal Theme URI: Author: Rulo Kobashikawa Author URI: http://akcdev.blogspot.com Description: My Minimal theme Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: minimal, simple Text Domain: minimal */ @import url("css/reset.css"); html { height: 100%; } body { width: 100%; height: 100%; } #page { width: 80%; margin: 0 auto; height: 100%; } #page hr { clear: both; } #header { width: 100%; } #content { width: 70%; float: left; } #sidebar { width: 28%; float: right; } #footer { clear: both; width: 100%; }

donde reset.css se puede obtener de http://meyerweb.com/eric/tools/css/reset/ myminimal\index.php <?php get_header(); ?> <?php get_sidebar(); ?> <div id="content"> <?php $args = array( 'order'=> 'ASC', 'orderby' => 'date' ); $postslist = get_posts( $args ); foreach ($postslist as $post) : setup_postdata($post); ?> <div id="post-<?php the_id(); ?>"> <?php the_date(); ?> <br /> <?php the_title(); ?> <?php the_excerpt(); ?> </div> <?php endforeach; ?> </div> <?php get_footer(); ?>

myminimal\functions.php <?php function pr($x, $ret=FALSE) { $result = '<xmp>' . print_r($x, TRUE) . '</xmp>'; if ($ret) { return $result; } else { print($result); } }

Theming con Initializr

initializr.com permite obtener rpidamente una base para iniciar un site html5. Entrar a http://www.initializr.com/ Elegir las opciones y descargar el zip Al extraer los archivos, se obtiene una carpeta initializr. Renombrarla como el tema deseado y colocarla en la carpeta de temas wp-content\themes. Por ejemplo, wpcontent\themes\myinitializr Crear style.css

/* Theme Name: My Initializr Theme URI: Author: Rulo Kobashikawa Author URI: http://akcdev.blogspot.com Description: My Initializr theme Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: minimal, simple Text Domain: minimal */ @import url("css/normalize.css"); @import url("css/main.css");

Renombrar index.html como index.php y adaptarla:

<!DOCTYPE html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title><?php bloginfo('name'); ?> | <?php wp_title(); ?></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" /> <script src="js/vendor/modernizr-2.6.2.min.js"></script> </head> <body> <p>Hello world! This is HTML5 Boilerplate.</p> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/ jquery.min.js"></script> <script>window.jQuery || document.write('<script src="js/vendor/ jquery-1.8.3.min.js"><\/script>')</script> <script src="js/main.js"></script> </body> </html>

Referencias
Editing a WordPress theme with Dreamweaver CS5 Part 1: Learning the basics http://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt1.html Editing a WordPress theme with Dreamweaver CS5 Part 2: Setting up your site http://www.adobe.com/devnet/dreamweaver/articles/dw_wordpress_pt2.html