1. Curso avanzado de programación y configuración de Wordpress
Curso de Wordpress

2. Curso avanzado de programación y configuración de Wordpress
Instalación de Wordpress
● Instalación en Servidor
– Obtener Wordpress
● Descargamos la última versión de Wordpress el el
directorio donde vamos a trabajar:
– wordpress@lander:/var/www/blog$ wget
http://wordpress.org/latest.zip
● Extraemos los ficheros del archivo "latest.zip":
– wordpress@lander:/var/www/blog$ unzip latest.zip

3. Curso avanzado de programación y configuración de Wordpress
Instalación de Wordpress
– Creación de la base de datos
● Creamos una base de datos y un usuario para nuestro
Wordpress:
wordpress@lander:/var/www/blog$ mysql -uroot -p
Enter password:
Welcome to the MySQL monitor. Commands end with ; or g.
Your MySQL connection id is 443
Server version: 5.0.51a-24+lenny2-log (Debian)
Type 'help;' or 'h' for help. Type 'c' to clear the buffer.
mysql» create database wordpress_db;
Query OK, 1 row affected (0.02 sec)

4. Curso avanzado de programación y configuración de Wordpress
Instalación de Wordpress
mysql» grant all privileges on wordpress_db.* to
wordpressdbuser@'localhost' identified by 'wordpressdbpass';
Query OK, 0 rows affected (0.00 sec)
mysql» flush privileges;
Query OK, 0 rows affected (0.00 sec)

5. Curso avanzado de programación y configuración de Wordpress
Instalación de Wordpress
– Conectar Wordpress con la base de datos (Fichero de
configuración)
● El fichero básico de configuración de Wordpress en "wp-
config.php", que es precisamente el que tendremos
que modificar para añadir los datos de conexión a la
base de datos.
● El fichero de configuración no existe por lo que
deberemos de copiar el fichero plantilla que provee
Wordpress llamado "wp-config-sample.php" y editarlo.
wordpress@lander:/var/www/blog/wordpress$ cp wp-config-
sample.php wp-config.php

6. Curso avanzado de programación y configuración de Wordpress
Instalación de Wordpress
● Entre las opciones del fichero encontramos las
configuraciones respectivas a la conexión a base de
datos, que modificaremos con nuestros valores.
// ** MySQL settings - You can get this info from your web host ** //
/** The name of the database for WordPress */
define('DB_NAME', 'wordpress_db');
/** MySQL database username */
define('DB_USER', 'wordpressdbuser');
/** MySQL database password */
define('DB_PASSWORD', 'wordpressdbpass');
/** MySQL hostname */
define('DB_HOST', 'localhost');

7. Curso avanzado de programación y configuración de Wordpress
Instalación de Wordpress
/** Database Charset to use in creating database tables. */
define('DB_CHARSET', 'utf8');
/**
* WordPress Database Table prefix.
*
* You can have multiple installations in one database if you give
each a unique
* prefix. Only numbers, letters, and underscores please!
*/
$table_prefix = 'wp_';

8. Curso avanzado de programación y configuración de Wordpress
Instalación de Wordpress
– Creación de las tablas de Wordpress en su base de datos
● Dejemos que Wordpress lo haga solo.
– Wordpress, finalizando la instalación
● Accedemos a la url del host. (ref: wordpress.conf)
http://wordpress.irontec.com/
● Wordpress nos redirigirá a una página de instalación.

9. Curso avanzado de programación y configuración de Wordpress
Instalación de Wordpress

10. Curso avanzado de programación y configuración de Wordpress
Instalación de Wordpress
● Seguimos el formulario y Wordpress creará las tablas en la
base de datos. Por último nos ofrecerá el usuario y
contraseña del administrador que apuntaremos para
posteriormente cambiarla.

11. Curso avanzado de programación y configuración de Wordpress
Instalación de Wordpress

12. Curso avanzado de programación y configuración de Wordpress
Instalación de Wordpress
● Hacemos login y ya está instalado Wordpress.
– * Cambiar la contraseña.

13. Curso avanzado de programación y configuración de Wordpress
Instalación de Wordpress
● Optimización de URLs
● Por defecto Wordpress escribe y recibe las URLs mediante
parámetros (consulta-valor). Hoy en día la tendencia es
utilizar URLs SEO, que optimiza el posicionamiento en los
motores de búsqueda (Google).
● Url permite generar URLs SEO de manera muy sencilla.
Entramos al panel de administración » Settings »
Permalinks:

14. Curso avanzado de programación y configuración de Wordpress
Instalación de Wordpress

15. Curso avanzado de programación y configuración de Wordpress
Instalación de Wordpress
● Elegimos el formato que más nos convezca o generamos
uno nosotros mismos mediante Custom Structure.
● Wordpress ofrece diferentes variables para crear nuestra
propia estructura:
(http://codex.wordpress.org/Using_Permalinks)
– %year%
– %monthnum%
– %day%
– %hour%
– %minute%
– %second%
– %postname%
– %post_id%
– %category%
– %tag%

16. Curso avanzado de programación y configuración de Wordpress
Instalación de Wordpress
● ej: /%postname%/
● Convertiremos "http://wordpress.irontec.com/?p=1" en
"http://wordpress.irontec.com/hello-world/".

17. Curso avanzado de programación y configuración de Wordpress
Instalación de Wordpress
● Hay que crear un fichero .htaccess:
«IfModule mod_rewrite.c»
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
«/IfModule»
● Y habilitar el módulo "rewrite" de apache:
# a2enmod rewrite ; /etc/init.d/apache2 restart

18. Curso avanzado de programación y configuración de Wordpress
Instalación de Wordpress
● Localización de Wordpress
– Obteniendo ficheros
● Se pueden obtener los ficheros de traducción de Wordpress
en
http://codex.wordpress.org/WordPress_in_Your_Language
en muchos idiomas.
● Como ejemplo bajaremos el paquete de idioma de
castellano:
wordpress@lander:/var/www/blog/files/langs$ wget
http://carrero.es/wp-content/uploads/2007/05/wp2.8.4-
es_ES.zip

19. Curso avanzado de programación y configuración de Wordpress
Instalación de Wordpress
● Y lo descomprimimos en el directorio de "languages" de
wordpress (si el directorio languages no existe, crearlo en
"wp-includes"):
●
wordpress@lander:/var/www/blog/wordpress/wp-
includes/languages$ unzip ../../../files/langs/wp2.8.4-
es_ES.zip

20. Curso avanzado de programación y configuración de Wordpress
Instalación de Wordpress
– Configurando el Idioma de Wordpress
● Wordpress no tiene un switcher (user friendly) de idiomas
por lo que para ver Wordpress en otro idioma hay que
definirlo en el fichero de configuración principal "wp-
config.php".
/**
* WordPress Localized Language, defaults to English.
* Change this to localize WordPress. A corresponding MO file for
the chosen
* language must be installed to wp-content/languages. For example,
install
* de.mo to wp-content/languages and set WPLANG to 'de' to
enable German
* language support.
*/
define ('WPLANG', 'es_ES');

21. Curso avanzado de programación y configuración de Wordpress
Instalación de Wordpress
● Una vez hecho este cambio Wordpress estará traducido.

22. Curso avanzado de programación y configuración de Wordpress
Localización de Wordpress
– Ficheros PO y MO
● Wordpress utiliza el sitema "gettext" para su traducción.
Gettext utiliza tres tipos de ficheros para crear y almacenar
las cadenas de traducción:
● .POT (Portable Object Template)
– Es el fichero que recoge todas las cadenas que se
encuentran en el código llamadas mediante las funciones
__() o _e().
● .PO (Portable Object)
– Es el fichero que contiene las traducciones en el idioma
que se desea utilizar. Referencia las cadenas en el idioma
original al idioma a traducir.

23. Curso avanzado de programación y configuración de Wordpress
Localización de Wordpress
● .MO (Machine Object)
– Es el fichero fichero binario resultante de la compilación del
fichero ".po".
● Ejemplo de cómo se recogen los datos en un fichero ".po":

24. Curso avanzado de programación y configuración de Wordpress
Localización de Wordpress
#: wp-admin/index.php:24
#: wp-admin/menu.php:28
msgid "Dashboard"
msgstr "Escritorio"
● En forma de comentario (#comentario) se muestra en qué
ficheros aparece la cadena. Ésto nos facilitará meter la
traducción en un ámbito o un contexto para conseguir una
mejor coherencia en las frases. "msgid" es la cadena real
que se encuentra en los ficheros; y "msgstr" es la
traducción.

25. Curso avanzado de programación y configuración de Wordpress
Localización de Wordpress
– Herramientas de localización
● POEDIT (http://www.poedit.net/download.php):
– Es un programa de escritorio que nos permite editar de
manera visual los ficheros ".po" y que compila
automáticamente los ficheros al guardarlos.
● Abrimos el fichero ".po" con esta herramienta que nos
facilita la traducción de las cadenas del proyecto.

26. Curso avanzado de programación y configuración de Wordpress
Localización de Wordpress
●

27. Curso avanzado de programación y configuración de Wordpress
Localización de Wordpress
● Hemos traducido la cadena "Dashboard" como "Super
Escritorio" y una vez guardado el resultado es:

28. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Temas)
Los temas en Wordpress se albergan en el directorio "wp-
content/themes/", donde Wordpress mirará automáticamente para
cargarlos y poder activarlos mediante la administración.

29. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Temas)
● Partes de un tema
– Los temas de Wordpress requieren de al menos dos
ficheros, "index.php" y "style.css".
– style.css
● En este fichero se declara el tema, es el fichero que
Wordpress "parseará" para obtener los datos del tema.
● La declaración del tema:
/*
THEME NAME: Example Theme 1
THEME URI: http://wordpress.irontec.com
DESCRIPTION: Tema de ejemplo 1
VERSION: 0.1
AUTHOR:Lander Ontoria
AUTHOR URI:
TAGS: developer

30. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Temas)
● El fichero es una hoja de estilos (CSS) donde escribiremos
nuestro css.
div#container {
float:right;
margin:0 0 0 -200px;
width:100%;
}
div#content {
margin:0 0 0 200px;
}

31. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Temas)
– index.php
● Este fichero alberga la estructura básica de la página.
● Wordpress tiene una estructura modular que permite
mediante llamadas a funciones obtener y dibujar
diferentes partes del contenido (
http://codex.wordpress.org/Template_Tags,
http://codex.wordpress.org/Stepping_Into_Templates ).
«?php get_header() ?» Mediante esta función obtendremos la
cabecera (título del blog, ...).
«div id="container"»
«div id="content"»

32. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Temas)
«?php while ( have_posts() ) : the_post() ?» Aquí nos encontramos
con un while que si hay posts nos los mostrará.
«div id="post-«?php the_ID() ?»" class="post-class"»
«h2 class="entry-title"»«a href="«?php the_permalink() ?»" title="«?
php printf( __('Permalink to %s'), the_title_attribute('echo=0') ) ?»"
rel="bookmark"»«?php the_title() ?»«/a»«/h2»
«div class="entry-date"»«abbr class="published" title="«?php
the_time('Y-m-dTH:i:sO') ?»"»«?php unset($previousday);
printf( __( '%1$s – %2$s'), the_date( '', '', '', false ),
get_the_time() ) ?»«/abbr»«/div»
«div class="entry-content"»
«?php the_content( __( 'Read More «span class="meta-
nav"»»«/span»') ) ?»
«?php wp_link_pages('before=«div class="page-link"»' . __( 'Pages:') .
'&after=«/div»') ?»
«/div»

33. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Temas)
«div class="entry-meta"»
«span class="author vcard"»«?php printf( __( 'By %s'), '«a class="url
fn n" href="' . get_author_link( false, $authordata-»ID,
$authordata-»user_nicename ) . '" title="' . sprintf( __( 'View all
posts by %s'), $authordata-»display_name ) . '"»' .
get_the_author() . '«/a»' ) ?»«/span»
«?php edit_post_link( __( 'Edit'), "ttttt«span class="edit-link"»",
"«/span»nttttt«span class="meta-sep"»|«/span»n" ) ?»
«span class="comments-link"»«?php
comments_popup_link( __( 'Comments (0)'), __( 'Comments (1)'),
__( 'Comments (%)') ) ?»«/span»
«/div»
«/div»«!-- .post --»
«?php comments_template() ?» Muestra el box de comentarios, ya
sea para un post o una página.
«?php endwhile; ?»

34. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Temas)
«div id="nav-below" class="navigation"»
«div class="nav-previous"»«?php next_posts_link(__( '«span
class="meta-nav"»««/span» Older posts')) ?»«/div»
«div class="nav-next"»«?php previous_posts_link(__( 'Newer posts
«span class="meta-nav"»»«/span»')) ?»«/div»
«/div»
«/div»«!-- #content --»
«/div»«!-- #container --»
«?php get_sidebar() ?» Carga los paneles laterales.
«?php get_footer() ?» Carga el pie.

35. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Temas)
– Más ficheros "imprescindibles" para un tema
● * style.css
● * index.php
● * comments.php
– * El tema de dibuja los comentarios.
● * comments-popup.php
– * El tema de los popup de los comentarios.
● * single.php
– * Es el fichero que se usará para mostrar un solo post.
● * page.php
– * El tema de las páginas.
● * category.php
– * El tema de las categorías.

36. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Temas)
● * author.php
– * El tema del autor.
● * date.php
– * Cuando se llama a una fecha, el formato se coge de
este fichero.
● * search.php
– * El fichero de búsqueda.
● * 404.php
– * 404.
● En muchos de los temas que nos podamos descargar de
Internet encontraremos un fichero llamado
"functions.php". Este fichero suele contener métodos y
funciones que habitualmente se usar para dibujar
contenido o escribir funciones propias para el manejo del
tema.

37. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Temas)
– Estructura del tema "default"
● wordpress@lander-laptop:/var/www/blog/wordpress/wp-
content/themes/default$ tree .
.
|-- 404.php
|-- archive.php
|-- archives.php
|-- comments-popup.php
|-- comments.php
|-- footer.php
|-- functions.php
|-- header.php
|-- image.php

38. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Temas)
|-- images
| |-- audio.jpg
| |-- header-img.php
| |-- kubrickbg-ltr.jpg
| |-- kubrickbg-rtl.jpg
| |-- kubrickbgcolor.jpg
| |-- kubrickbgwide.jpg
| |-- kubrickfooter.jpg
| `-- kubrickheader.jpg
|-- index.php
|-- links.php
|-- page.php
|-- rtl.css

39. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Temas)
|-- screenshot.png
|-- search.php
|-- sidebar.php
|-- single.php
`-- style.css
1 directory, 26 files

40. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Temas)
● Instalación de un tema
– Disponemos de gran cantidad de temas en
"http://wordpress.org/extend/themes/" que nos
servirán de base para que con ligeras modificaciones
podamos construirnos nuestros propios temas.
– Una vez hemos elegido qué tema queremos para
nuestro Wordpress o de que tema queremos partir el
primer paso es descargarlo y descomprimirlo en el
directorio "/wp-content/themes/":

41. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Temas)
wordpress@lander-laptop:/var/www/blog/files/themes$ wget
http://wordpress.org/extend/themes/download/arclite.2.02.zip
wordpress@lander-laptop:/var/www/blog/wordpress/wp-
content/themes$ unzip ../../../files/themes/arclite.2.02.zip
– El siguiente paso será habilitarlo desde la zona de
administración de Wordpress en el menú de
administración de temas. El tema se activará y el
resultado:

42. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Temas)

43. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Temas)
● Desarrollo de temas propios
– Para desarrollar un tema propio es necesario tener en
cuenta que hay que partir de dos ficheros,
"index.php" y "style.css". Una vez tenemos estos dos
ficheros la dinámica es ir reescribiendo los ficheros
que queremos para poner nuestra propia estructura y
estilo.

44. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Temas)
– Una manera para facilitar la identificación de las
diferentes partes de la estructura de Wordpress es
identificar las zonas mediante herramientas de
desarrollo (Firebug) e ir construyendo una hoja de
estilos que visualmente facilite la identificación.
#page{
float:none;
width:1024px;
margin:0 auto;
/*example*/ border:1px solid red;
}

45. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Temas)

46. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Temas)
– Pero lo más común para empezar a desarrollar un
tema es extenderse de otro o sobre escribirlo ya que
de esta manera disminuiremos la opción de error y
dispondremos de multitud de métodos ya escritos
para dibujar y gestionar el contenido.
– Internet nos ayuda a encontrar diferentes temas, pero
entre las opciones que encontraremos tenemos
"temas en blanco". Los temas en blanco están
desarrollados para que con las mínimas
modificaciones de código HTML, PHP o Javascript,
apliquemos nuestros propios estilos a nuestro
Wordpress.

47. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Temas)
– Referencias:
● http://www.plaintxt.org/themes/sandbox/
● http://www.jdavidmacor.com/2007/09/17/wordpress-theme-
building-resources/

48. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Temas)
● Sandbox
– Sandbox es un tema que viene completamente en blanco
con un estilo (CSS) pre formado con varias opciones de
configuración. Este tema en concreto es muy fácil de
modificar y el código está bastante documentado.
– Sandbox ofrece varias configuraciones de la estructura de
Wordpress modificando una línea en la hoja de estilos:

49. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Temas)
/* Two-column with sidebar on left from the /examples/ folder */
@import url('examples/2c-l.css');

50. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Temas)
/* Two-column with sidebar on right from the /examples/ folder */
@import url('examples/2c-r.css');

51. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Temas)
@import url('examples/3c-l.css');

52. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Temas)
● Recursos para desarrolladores y documentación en la
red
– * Temas Wordpress:
● * http://wordpress.org/extend/themes/
– * Desarrollo (Api del desarrollador de Wordpress):
● * http://codex.wordpress.org/
● * http://codex.wordpress.org/Theme_Development
● * http://codex.wordpress.org/Stepping_Into_Templates
● * http://codex.wordpress.org/Template_Tags

53. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Temas)
– * Temas en blanco:
● * http://www.jdavidmacor.com/2007/09/17/wordpress-
theme-building-resources/
● * http://www.plaintxt.org/themes/sandbox/
– * Debuging
● * Firebug

54. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Plugins)
Plugins
● Los plugins en Wordpress se albergan en el directorio
"wp-content/plugins/", donde Wordpress mirará
automáticamente para cargarlos y poder activarlos
mediante la administración.

55. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Plugins)

56. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Plugins)
● Partes de un plugin
– A diferencia de los temas de Wordpress, los plugins
solo requieren un fichero para funcionar.
Examinemos el plugin de "Hello Dolly":

57. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Plugins)
– hello.php
● Este fichero es el único del que se compone el plugin.
"Hello Dolly" es un plugin sencillo que lo único que
hace es sacar una frase aleatoria el la parte superior de
la zona de administración de Wordpress.

58. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Plugins)
● En este fichero se declara el plugin, es el fichero que
Wordpress "parseará" para obtener los datos del plugin.
● La declaración de un plugin:
«?php
Plugin Name: Hello Dolly
Plugin URI: http://wordpress.org/#
Description: This is not just a plugin, it symbolizes the hope and
enthusiasm of an entire generation summed up in two words sung
most famously by Louis Armstrong: Hello, Dolly. When activated
you will randomly see a lyric from «cite»Hello, Dolly«/cite» in the
upper right of your admin screen on every page.
Author: Matt Mullenweg
Version: 1.5.1
Author URI: http://ma.tt/
*/

59. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Plugins)
● El código:
function hello_dolly_get_lyric() {
/** These are the lyrics to Hello Dolly */
$lyrics = "Hello, Dolly
Well, hello, Dolly
It's so nice to have you back where you belong
You're lookin' swell, Dolly
I can tell, Dolly
Dolly'll never go away again";
// Here we split it into lines
$lyrics = explode("n", $lyrics);
// And then randomly choose a line
return wptexturize( $lyrics[ mt_rand(0, count($lyrics) - 1) ] );
}

60. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Plugins)
// This just echoes the chosen line, we'll position it later
function hello_dolly() {
$chosen = hello_dolly_get_lyric();
echo "«p id='dolly'»$chosen«/p»";
}
// Now we set that function up to execute when the admin_footer
action is called
add_action('admin_footer', 'hello_dolly'); Lanza una función en
una acción especifica que en este caso es en el admin_footer

61. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Plugins)
// We need some CSS to position the paragraph
function dolly_css() {
$x = ( 'rtl' == get_bloginfo( 'text_direction' ) ) ? 'left' : 'right';
echo "
«style type='text/css'»
#dolly {
position: absolute;
top: 4.5em;
margin: 0;
padding: 0;
$x: 215px;
font-size: 11px;
}
«/style» ";
}

62. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Plugins)
add_action('admin_head', 'dolly_css'); Lanza una función en una
acción especifica que en este caso es en el admin_header
● Los plugins de Wordpress se valen de diferentes hooks,
acciones y filtros para lanzar funciones, sustituir o dibujar
contenido.

63. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Plugins)
● Instalación de plugins
– Disponemos de una gran cantidad de plugins de
Wordpress que podremos descargar desde
http://wordpress.org/extend/plugins/ y en unos pocos
pasos activarlos para nuestro Wordpress.
– Obtener el plugin:
wordpress@lander-laptop:/var/www/blog/files/plugins$ wget
http://downloads.wordpress.org/plugin/random-youtube-video.zip
– Descomprimir el plugin en "wp-content/plugins/":
wordpress@lander-laptop:/var/www/blog/wordpress/wp-
content/plugins$ unzip ../../../files/plugins/random-youtube-
video.zip

64. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Plugins)
– Por último deberemos acceder al panel de administración
de Wordpress y activar el plugin.

65. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Plugins)
– Este plugin en concreto sirve para sacar vídeos aleatorios
de Youtube que previamente hemos definido en una
lista.

66. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Plugins)
– El plugin ofrece un Widget de Wordpress que deberemos
activar.

67. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Plugins)
– El resultado:

68. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Plugins)
● Desarrollo de un plugin propio
– Como ya hemos comentado anteriormente los
plugins de Wordpress solo necesitan de un fichero
para funcionar y donde son declarados, pero por qué
no estructurar un plugin de mejor manera.
– Vamos a crear un plugin llamado Simple Plugin para
desarrollar esta documentación sobre el mismo y
hacer un plugin que interactue de diferentes maneras
con Wordpress.

69. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Plugins)
– Estructura del plugin
● En un primer paso crearemos un directorio en "wp-
content/plugins/" para nuestro plugin.
– wordpress@lander-laptop:/var/www/blog/wordpress/wp-
content/plugins$ mkdir simple_plugin
● Y un fichero principal para declarar nuestro plugin y
cargar las diferentes funciones que vallamos a utilizar.
– wordpress@lander-laptop:/var/www/blog/wordpress/wp-
content/plugins/simple_plugin$ touch simple_plugin.php

70. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Plugins)
– Declaración del plugin
● simple_plugin.php:
/*
Plugin Name: Simple Plugin
Plugin URI: http://wordpress.irontec.com
Description: Simple Plugin Description.
Version: 1.0
Author: Lander Ontoria
Author URI: http://www.irontec.com
*/
Solamente con estos pasos Wordpress ya es capaz de leer
la información del plugin y ofrecerlo en su lista para
poder instalarlo.

71. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Plugins)

72. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Plugins)
– simple_plugin.php:
/*
* ####### VARIABLES
*/
/*
*
* Definimos la variable PLUGIN_URL
*
*/
if (!defined('PLUGIN_URL'))
define('PLUGIN_URL',WP_CONTENT_URL.'/plugins/');

73. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Plugins)
/*
* En esta variable tenemos la url completa hasta el directorio
* de plugins que utilizaremos en diferentes lugares de los
* ficheros que compondrán este plugin.
*/
/*
*
* Definimos la variable SP_TEXT_DOMAIN
*
*/
define('SP_TEXT_DOMAIN','simple_plugin');

74. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Plugins)
/*
* En esta variable tendremos almacenado el nombre distintivo del
plugin.
* Se usará para el texte domain de nuestro plugin.
*/
/*
* ####### FICHEROS Y LIBRERÍAS
*/
/*
*
* Cargamos nuestro fichero de funciones
*
*/

75. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Plugins)
require_once (dirname(__FILE__).'/libs/functions.php');
/*
* Este fichero lo utilizaremos para cargar y escribir funciones.
*/
/*
*
* cargamos la adminsitración para nuestro plugin
*
*/
require_once (dirname(__FILE__).'/admin/admin.php');

76. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Plugins)
/*
* Este fichero controlará y cargará lo necesario para la zona de
adminstración
*/
/*
*
* cargamos el fichero que controla nuestro plugin
*
*/
require_once (dirname(__FILE__).'/simple_plugin_public.php');
/*
* Este fichero controlará y cargará lo necesario para la zona pública
*/

77. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Plugins)
– Páginas y opciones de administración de los plugins
● Este plugin ofrecerá dos páginas de administración del
mismo.
● El fichero de control es "/admin/admin.php":
/*
* Este fichero es el que mediante acciones y funciones de wordpres
* cargará la zona de administración de nuestro plugin.
*/

78. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Plugins)
/*
* INIT
*
* en la acción admin_init de Wordpress
* se lanzará la función que hayamos definido.
*/

79. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Plugins)
function sp_admin_init(){
/*
* $jsLibs, es un array donde hemos definido qué librerías de
javascript
* queremos tener cargadas en la zona de adminstración.
*
* Wordpress pone a nuestra disposición diferentes librerías,
* que pueden ser cargadas mediante su "alias".
*
*
http://codex.wordpress.org/Function_Reference/wp_enqueue_scri
pt
*
* En esta dirección tenemos la lista de las librerías disponibles
*/

80. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Plugins)
$jsLibs = array('jquery','jquery-ui-core','jquery-ui-tabs');
foreach ($jsLibs as $lib) wp_enqueue_script($lib);
/*
* wp_enqueue_script() es la función de Wordpress que encola
* las librerías que llamamos.
*/
/*
* i_wp_add es una clase que hemos implementado para cargar y
encolar
* diferentes librerías propias. La clase se encuentra definida en
* "functions.php"
*/
i_wp_add::wp_add_css(PLUGIN_URL.'simple_plugin/admin/css/adm
in_style.css','admin');
i_wp_add::wp_add_js(PLUGIN_URL.'simple_plugin/admin/js/admin
_script.js','admin');
}

81. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Plugins)
add_action('admin_init', 'sp_admin_init');
/*
* PAGES
*
* Mediante la acción admin_menu, cargaremos los menús que
* necesitemos para nuestro plugin.
*/
function sp_admin_page_1(){
/*
* Este fichero dibujará y gestionará una página de administración
*/
include( dirname(__FILE__).'/sp_admin_page_1.php');
}

82. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Plugins)
function sp_admin_page_2(){
}
/*
* sp_add_menu_pages ()
*
* Es la función que se llamara en la acción admin_menu
*
* Se encargará de cargar en el menú de administración, los
* menús y submenús que declaremos
*
*/

83. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Plugins)
function sp_add_menu_pages (){
add_menu_page(
'Simple Plugin Admin Page 1', //Título de la página
'Simple Plugin', //Nombre del botón del menú
1, //Prioridad
'sp_admin_page_1.php', //fichero
'sp_admin_page_1' //función
);
add_submenu_page('sp_admin_page_1.php', 'Simple Plugin Admin
Page 2', 'Simple Plugin Conf', 1, 'sp_admin_page_2.php',
'sp_admin_page_2');
}
add_action('admin_menu', 'sp_add_menu_pages');

84. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Plugins)
● Fichero que cargará el primer menú
"/admin/sp_admin_page_1.php":
«div class="wrap"»
«h2»«?php echo __('Simple Plugin',SP_TEXT_DOMAIN) ?»«/h2»
«div id="tabscontent"»
«ul»
«li»«a href="#tabs-1"»«?php echo __('hola
mundo',SP_TEXT_DOMAIN) ?»«/a»«/li»
«li»«a href="#tabs-2"»«?php echo __('Simple Plugin test
2',SP_TEXT_DOMAIN) ?»«/a»«/li»
«/ul»

85. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Plugins)
«div id="tabs-1"»
«form method="post" action="options.php"»
«?php wp_nonce_field('update-options'); ?»
«table class="form-table"»
«tr valign="top"»
«th scope="row"»«?php echo __('número de veces de hola
mundo',SP_TEXT_DOMAIN) ?»«/th»
«td»«input type="text" name="sp_hola_mundo_times" value="«?
php echo get_option('sp_hola_mundo_times'); ?»" /»«/td»
«/tr»
«tr valign="top"»
«th scope="row"»«?php echo __('color del borde de hola
mundo',SP_TEXT_DOMAIN) ?»«/th»
«td»«input type="text" name="sp_hola_mundo_border_color"
value="«?php echo
get_option('sp_hola_mundo_border_color'); ?»" /»«/td»
«/tr»

86. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Plugins)
«/table»
«input type="hidden" name="action" value="update" /»
«input type="hidden" name="page_options"
value="sp_hola_mundo_times,sp_hola_mundo_border_color" /»
«p class="submit"»
«input type="submit" class="button-primary" value="«?php _e('Save
Changes') ?»" /»
«/p»
«/form»
«/div»
«div id="tabs-2"»
«p»TAB2«/p»
«/div»
«/div»

87. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Plugins)
● Este fichero está preparado para albergar diferentes tabs
(jquery-ui-tabs) para dar una mejor apariencia a nuestro
plugin, pero lo más interesante que podemos encontrar es
el contenido que está en el primer "tab". Encontramos un
formulario estándar de Wordpress cuya función es mostrar
un formulario para administrar valores y guardarlos
automáticamente. Estos valores los podremos recuperar
mediante la función de Wordpress "get_option()".

88. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Plugins)
● En esta captura vemos cómo se han generado dos botones
de administración para nuestro plugin.

89. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Plugins)
● En esta captura vemos las pestañas que hemos definido y el
formulario de administración resultante.

90. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Plugins)
● La segunda pestaña.

91. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Plugins)
– Estructura del plugin (2), directorios de administración
.
|-- admin
| |-- admin.php
| |-- css
| | `-- admin_style.css
| |-- js
| | `-- admin_script.js
| `-- sp_admin_page_1.php
(...)

92. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Plugins)
– Contenido del plugin en la zona pública
● La forma más habitual de sacar contenido al Blog es
hacer filtros.
● Para nuestro plugin hemos creado una página de
Wordpress y hemos escrito en el cuerpo de la página el
tag de control que hemos definido para nuestro plugin.

93. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Plugins)

94. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Plugins)
● El tag de nuestro plugin es "[simple_plugin|hola_mundo]".
Nuestro plugin recibirá como variable de configuración
o carga lo que encuentre después del símbolo | .
● El fichero de control de la zona pública es
"simple_plugin_public.php":
/*
* Este fichero es el que mediante acciones y funciones de wordpres
* cargará nuestro plugin en la zona pública.
*/

95. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Plugins)
/*
* INIT
*
* en la acción init de Wordpress
* se lanzará la función que hayamos definido.
*/
/*
* Incluímos la clase simple_plugin, el fichero contiene una clase de
* control y una clase que desarrolla el contenido del plugin.
*/
require_once(dirname(__FILE__).'/class.simple_plugin.php');
function sp_init(){
/*
* Cargamos los ficheros de idiomas de nuestros plugins
*/

96. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Plugins)
load_plugin_textdomain( SP_TEXT_DOMAIN, 'wp-
content/plugins/simple_plugin/languages/',
'simple_plugin/languages/');
/*
* Cargamos los ficheros de estilos y scripts de nuestro plugin
*/
$jsLibs = array('jquery','jquery-form','jquery-ui-core');
foreach ($jsLibs as $lib) wp_enqueue_script($lib);
i_wp_add::wp_add_css(PLUGIN_URL.'simple_plugin/css/style.css');
i_wp_add::wp_add_js(PLUGIN_URL.'simple_plugin/js/script.js');
/*
* Preparamos el filtro que contiene la clase controladora
*/
simple_plugin_ctrl::load_filter();
}

97. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Plugins)
add_action('init', 'sp_init');
/*
* WIDGET
*
* en la acción plugins_loaded de Wordpress
* se lanzará la función que hayamos definido para cargar los
* widgets que el plugin ofrezca.
*/
add_action("plugins_loaded", array('simple_plugin','widgets'));

98. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Plugins)
● La clase de control:
/*
*
* Clase que controla y carga el plugin
*
*/
class simple_plugin_ctrl{
static public function get_plugin_tag(){
return "simple_plugin";
}
static public function content_filter($content){
$preg = @preg_match_all('/['.self::get_plugin_tag().'|(?«conf»[^]]
+)]/', $content, $ret);

99. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Plugins)
if ($preg«=0) return $content;
foreach ($ret[0] as $n =» $match){
$match = str_replace(array('[','/','|',']'),array('[','/','|',']'),$match);
$content = ereg_replace($match , self::go($ret['conf'][$n]) ,
$content );
}
return $content;
}

100. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Plugins)
static public function load_filter(){
/*
* Add filter de Wordpress
*
*
* Esta función pasará el contenido de wordpress a nuestro filtro
*
* simple_plugin_ctrl::content_filter();
*
*/
add_filter('the_content', array('simple_plugin_ctrl','content_filter'));
}

101. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Plugins)
static public function go($conf){
/*
*
* Llamada a nuestro plugin
*/
$plg = new simple_plugin($conf);
if ($ret = $plg-»the_content()) return $ret;
return "";
}
}

102. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Plugins)
● La clase del plugin:
/*
*
* la clase del plugin
*/
class simple_plugin{
protected $conf;
protected $content;
protected $lock = false;

103. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Plugins)
public function __construct($conf){
$this-»conf = $conf;
switch ($this-»conf){
case "hola_mundo":
$this-»content = $this-»hola_mundo();
break;
default:
$this-»lock=true;
break;
}
}

104. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Plugins)
protected function hola_mundo(){
$html = '';
$times = (($t = get_option('sp_hola_mundo_times') )»0)? $t:1 ;
$border_color = (($t =
get_option('sp_hola_mundo_border_color') ))? $t:'transparent' ;
$str = __('hola mundo',SP_TEXT_DOMAIN).'«br /»'.__('¿Qué
hay?',SP_TEXT_DOMAIN) ;
for ($i=0;$i«$times;$i++)
$html.= '«p style="border:1px solid '.$border_color.';"»'.$str.'«/p»';
return $html;
}

105. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Plugins)
static public function hola_mundo_widget($args){
$plg = new simple_plugin(false);
extract($args);
$title = $args['widget_name'];
$html = $before_widget;
if($title != '') $html.= $before_title . $title . $after_title;
$html.= $plg-»hola_mundo();
$html.= $after_widget;
echo $html;
}

106. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Plugins)
public function the_content(){
if (trim($this-»content)!="" && $this-»lock === false) return
$this-»content;
return false;
}
static public function widgets(){
register_sidebar_widget(__('hola mundo',SP_TEXT_DOMAIN),
array('simple_plugin','hola_mundo_widget'));
}
}

107. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Plugins)
● La clase del plugin nos permitirá ir desarrollando sobre
ella diferentes opciones para el plugin.

108. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Plugins)

109. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Plugins)
● Mediante este plugin hemos conseguido sacar en la zona
pública un "hola mundo" en una página y en un widget.

110. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Plugins)
– Localización de plugins
● Para la localización de los plugins Wordpress pone a
nuestra disposición las "wordpress-i18n tools"
(http://codex.wordpress.org/I18n_for_WordPress_Deve
lopers) que podemos obtener mediante svn.
wordpress@lander-laptop:/var/www/blog/wordpress$ mkdir
wordpress-i18n ; cd wordpress-i18n
wordpress@lander-laptop:/var/www/blog/wordpress/wordpress-
i18n$ svn export http://svn.automattic.com/wordpress-
i18n/tools/trunk/ tools

111. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Plugins)
● Para generar el fichero ".pot":
wordpress@lander-laptop:/var/www/blog/wordpress/wordpress-
i18n/tools$ php makepot.php wp-plugin ../../wp-
content/plugins/simple_plugin/ ../../wp-
content/plugins/simple_plugin/languages/simple_plugin.pot
● Para generar las locales de cada idioma que vallamos a
utilizar hay que copiar el ".pot" y generar un ".po":
wordpress@lander-laptop:/var/www/blog/wordpress/wp-
content/plugins/simple_plugin/languages$ cp simple_plugin.pot
simple_plugin-es_ES.po

112. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Plugins)
– Estructura del plugin (3), plugin completo
wordpress@lander-laptop:/var/www/blog/wordpress/wp-
content/plugins/simple_plugin$ tree
.
|-- admin
| |-- admin.php
| |-- css
| | `-- admin_style.css
| |-- js
| | `-- admin_script.js
| `-- sp_admin_page_1.php
|-- class.simple_plugin.php
|-- css
| `-- style.css

113. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Plugins)
|-- images
|-- js
| `-- script.js
|-- languages
| |-- simple_plugin-es_ES.mo
| |-- simple_plugin-es_ES.po
| `-- simple_plugin.pot
|-- libs
| `-- functions.php
|-- simple_plugin.php
`-- simple_plugin_public.php
8 directories, 13 files

114. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Plugins)
– Enlaces de documentación y funciones más importantes
para desarrollar un plugin
http://codex.wordpress.org/Plugins
http://codex.wordpress.org/Writing_a_Plugin
http://codex.wordpress.org/Adding_Administration_Menus
http://codex.wordpress.org/Creating_Options_Pages
http://codex.wordpress.org/Template_Tags

115. Curso avanzado de programación y configuración de Wordpress
Extendiendo Wordpress (Plugins)
http://codex.wordpress.org/Plugin_API
http://codex.wordpress.org/Plugin_API/Action_Reference
http://codex.wordpress.org/Function_Reference
http://codex.wordpress.org/Function_Reference/add_action
http://codex.wordpress.org/Function_Reference/add_filter

116. Curso avanzado de programación y configuración de Wordpress
Conectando Wordpress con el mundo
● Ejemplo de conexión con Facebook (Facebook
Connect)
wordpress@lander-laptop:/var/www/blog/files/plugins$ wget
http://www.e-aula.com/download/fbconnect_1_2_1.zip
wordpress@lander-laptop:/var/www/blog/wordpress/wp-
content/plugins$ unzip ../../../files/plugins/fbconnect_1_2_1.zip
– El uso de este plugin permite:
● * Acceder al blog (login) con un usuario de Facebook,
siendo Facebook el que valida el usuario sin que este
indique en ningún momento su clave al blog/sitio al que
accede.

117. Curso avanzado de programación y configuración de Wordpress
Conectando Wordpress con el mundo
● * El usuario no necesita registrarse en el blog e indicar sus
datos de perfil dado que desde el blog/sitio al que accede
es posible recuperar la información del perfil del usuario
en Facebook(nombre, foto, sexo, ciudad, idioma,….).
Estos datos que tanto cuesta conseguir de un usuario
porque está harto de registrase en mil sitios, los podemos
explotar para personalizar el blog, generar estadísticas…
De forma automática el plugin crea un usuario de
Wordpress con la información del perfil Facebook, que
posteriormente podrá editar el usuario.

118. Curso avanzado de programación y configuración de Wordpress
Conectando Wordpress con el mundo
● * Es posible obtener la lista de amigos/contactos del usaurio
en Facebook, y generarinvitaciones para que accedan a
nuestro blog/sitio. Una forma de promocionar el sitio
mediante el maravilloso boca-oreja.
● * Es posible recuperar la lista de amigos que ya pertenecen a
la “comunidad” del blog/sitio.
● * La actividad que realiza el usuario en el blog/sitio (Ej.
comentar un post), se puedeenviar al minifeed de
Facebook, para que forme parte de su lifestream y otros
usuarios de Facebook puedan ver dicha actividad
(nuevamente el boca-oreja).
● * Es posible mostrar las últimas visitas a nuetro blog, con la
foto de los usuarios que han accedido mediante Facebook
Connect.

119. Curso avanzado de programación y configuración de Wordpress
Ejemplo de conexión con Twitter

120. Curso avanzado de programación y configuración de Wordpress
Cómo hacer un backup de nuestro blog

121. Curso avanzado de programación y configuración de Wordpress
Otros usos derivados de Wordpress
● Wordpress MU
● Wordpress Shop

122. Curso avanzado de programación y configuración de Wordpress
Licencia Copyleft
Copyright

123. Curso avanzado de programación y configuración de Wordpress
Licencia Copyleft
● Este documento está protegido bajo la licencia
Reconocimiento-Compartir Igual 2.1 España de Creative
Common (http://creativecommons.org/licenses/by-
nd/2.1/es/)
Copyright © 2009 Irontec
<contacto@irontec.com>
Copyright © 2009 Lander Ontoria
<lander@irontec.com>
Se permite la copia, modificación, distribución, uso
comercial y realización de la obra, siempre y cuando se
reconozca la autoría de la misma, a no sea ser que se
obtenga permiso expreso del autor. El autor no permite
distribuir obras derivadas a esta.
Esta nota no es la licencia completa de la obra, sino
una traducción de la nota orientativa de la licencia
original completa (jurídicamente válida).