- 1. Curso avanzado de programacin y configuracin de Wordpress
Curso de Wordpress
2. Curso avanzado de programacin y configuracin de
WordpressInstalacin de Wordpress Instalacin en Servidor Obtener
Wordpress Descargamos la ltima versin de Wordpress el eldirectorio
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 programacin y configuracin de Wordpress
Instalacin de Wordpress Creacin 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 programacin y configuracin de Wordpress
Instalacin de Wordpressmysql grant all privileges on wordpress_db.*
towordpressdbuser@'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 programacin y
configuracin de Wordpress Instalacin de Wordpress Conectar
Wordpress con la base de datos (Fichero de configuracin) El fichero
bsico de configuracin de Wordpress en "wp-config.php", que es
precisamente el que tendremosque modificar para aadir los datos de
conexin a labase de datos. El fichero de configuracin no existe por
lo quedeberemos de copiar el fichero plantilla que proveeWordpress
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 programacin y configuracin de
WordpressInstalacin de Wordpress Entre las opciones del fichero
encontramos las configuraciones respectivas a la conexin 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 programacin y
configuracin de Wordpress Instalacin 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 giveeach a unique *
prefix. Only numbers, letters, and underscores please! */
$table_prefix = 'wp_'; 8. Curso avanzado de programacin y
configuracin de Wordpress Instalacin de Wordpress Creacin de las
tablas de Wordpress en su base de datos Dejemos que Wordpress lo
haga solo. Wordpress, finalizando la instalacin Accedemos a la url
del host. (ref: wordpress.conf)http://wordpress.irontec.com/
Wordpress nos redirigir a una pgina de instalacin. 9. Curso
avanzado de programacin y configuracin de WordpressInstalacin de
Wordpress 10. Curso avanzado de programacin y configuracin de
Wordpress Instalacin de Wordpress Seguimos el formulario y
Wordpress crear las tablas en la base de datos. Por ltimo nos
ofrecer el usuario y contrasea del administrador que apuntaremos
para posteriormente cambiarla. 11. Curso avanzado de programacin y
configuracin de WordpressInstalacin de Wordpress 12. Curso avanzado
de programacin y configuracin de WordpressInstalacin de Wordpress
Hacemos login y ya est instalado Wordpress. * Cambiar la contrasea.
13. Curso avanzado de programacin y configuracin de
WordpressInstalacin de Wordpress Optimizacin de URLs Por defecto
Wordpress escribe y recibe las URLs mediante parmetros
(consulta-valor). Hoy en da la tendencia es utilizar URLs SEO, que
optimiza el posicionamiento en los motores de bsqueda (Google). Url
permite generar URLs SEO de manera muy sencilla. Entramos al panel
de administracin Settings Permalinks: 14. Curso avanzado de
programacin y configuracin de WordpressInstalacin de Wordpress 15.
Curso avanzado de programacin y configuracin de WordpressInstalacin
de Wordpress Elegimos el formato que ms 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 programacin y configuracin de
WordpressInstalacin de Wordpress ej: /%postname%/ Convertiremos
"http://wordpress.irontec.com/?p=1"
en"http://wordpress.irontec.com/hello-world/". 17. Curso avanzado
de programacin y configuracin de WordpressInstalacin 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 mdulo "rewrite" de apache: # a2enmod
rewrite ; /etc/init.d/apache2 restart 18. Curso avanzado de
programacin y configuracin de WordpressInstalacin de Wordpress
Localizacin de Wordpress Obteniendo ficheros Se pueden obtener los
ficheros de traduccin de Wordpress en
http://codex.wordpress.org/WordPress_in_Your_Language en muchos
idiomas. Como ejemplo bajaremos el paquete de idioma
decastellano:wordpress@lander:/var/www/blog/files/langs$
wgethttp://carrero.es/wp-content/uploads/2007/05/wp2.8.4-es_ES.zip
19. Curso avanzado de programacin y configuracin de
WordpressInstalacin de Wordpress Y lo descomprimimos en el
directorio de "languages" dewordpress (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
programacin y configuracin de Wordpress Instalacin de Wordpress
Configurando el Idioma de Wordpress Wordpress no tiene un switcher
(user friendly) de idiomaspor lo que para ver Wordpress en otro
idioma hay quedefinirlo en el fichero de configuracin principal
"wp-config.php". /** * WordPress Localized Language, defaults to
English. * Change this to localize WordPress. A corresponding MO
file forthe chosen * language must be installed to
wp-content/languages. For example,install * de.mo to
wp-content/languages and set WPLANG to 'de' toenable German *
language support. */ define ('WPLANG', 'es_ES'); 21. Curso avanzado
de programacin y configuracin de WordpressInstalacin de Wordpress
Una vez hecho este cambio Wordpress estar traducido. 22. Curso
avanzado de programacin y configuracin de Wordpress Localizacin de
Wordpress Ficheros PO y MO Wordpress utiliza el sitema "gettext"
para su traduccin.Gettext utiliza tres tipos de ficheros para crear
y almacenarlas cadenas de traduccin: .POT (Portable Object
Template) Es el fichero que recoge todas las cadenas que se
encuentran en el cdigo 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
programacin y configuracin de WordpressLocalizacin de Wordpress .MO
(Machine Object) Es el fichero fichero binario resultante de la
compilacin del fichero ".po". Ejemplo de cmo se recogen los datos
en un fichero ".po": 24. Curso avanzado de programacin y
configuracin de WordpressLocalizacin 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
traduccin 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 traduccin. 25. Curso
avanzado de programacin y configuracin de Wordpress Localizacin de
Wordpress Herramientas de localizacin 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 automticamente los ficheros al guardarlos. Abrimos el
fichero ".po" con esta herramienta que nosfacilita la traduccin de
las cadenas del proyecto. 26. Curso avanzado de programacin y
configuracin de Wordpress Localizacin de Wordpress 27. Curso
avanzado de programacin y configuracin de Wordpress Localizacin de
Wordpress Hemos traducido la cadena "Dashboard" como
"SuperEscritorio" y una vez guardado el resultado es: 28. Curso
avanzado de programacin y configuracin de WordpressExtendiendo
Wordpress (Temas)Los temas en Wordpress se albergan en el
directorio "wp- content/themes/", donde Wordpress mirar
automticamente para cargarlos y poder activarlos mediante la
administracin. 29. Curso avanzado de programacin y configuracin de
WordpressExtendiendo Wordpress (Temas) Partes de un tema Los temas
de Wordpress requieren de al menos dosficheros, "index.php" y
"style.css". style.css En este fichero se declara el tema, es el
fichero queWordpress "parsear" para obtener los datos del tema. La
declaracin 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 programacin y configuracin de
WordpressExtendiendo 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 programacin y
configuracin de Wordpress Extendiendo Wordpress (Temas) index.php
Este fichero alberga la estructura bsica de la pgina. 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 funcin obtendremos lacabecera (ttulo
del blog, ...).div id="container"div id="content" 32. Curso
avanzado de programacin y configuracin de WordpressExtendiendo
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 programacin y
configuracin 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'), "tttttspan class="edit-link"", "/spanntttttspan
class="meta-sep"|/spann" ) ? 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 pgina. ?php endwhile; ? 34. Curso avanzado de
programacin y configuracin 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 programacin y configuracin de
Wordpress Extendiendo Wordpress (Temas) Ms 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 pginas. * category.php * El tema de las
categoras. 36. Curso avanzado de programacin y configuracin 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 bsqueda. * 404.php *
404. En muchos de los temas que nos podamos descargar de Internet
encontraremos un fichero llamado "functions.php". Este fichero
suele contener mtodos y funciones que habitualmente se usar para
dibujar contenido o escribir funciones propias para el manejo del
tema. 37. Curso avanzado de programacin y configuracin de
WordpressExtendiendo 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 programacin y configuracin de WordpressExtendiendo 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 programacin y configuracin de
Wordpress Extendiendo Wordpress (Temas)|-- screenshot.png |--
search.php |-- sidebar.php |-- single.php `-- style.css 1
directory, 26 files 40. Curso avanzado de programacin y
configuracin de Wordpress Extendiendo Wordpress (Temas) Instalacin
de un tema Disponemos de gran cantidad de temas en
"http://wordpress.org/extend/themes/" que nos servirn 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 programacin y
configuracin de WordpressExtendiendo Wordpress
(Temas)wordpress@lander-laptop:/var/www/blog/files/themes$
wgethttp://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 administracin de Wordpress en el men
de administracin de temas. El tema se activar y el resultado: 42.
Curso avanzado de programacin y configuracin de Wordpress
Extendiendo Wordpress (Temas) 43. Curso avanzado de programacin y
configuracin 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 dinmica es ir
reescribiendo los ficheros que queremos para poner nuestra propia
estructura y estilo. 44. Curso avanzado de programacin y
configuracin de WordpressExtendiendo Wordpress (Temas) Una manera
para facilitar la identificacin 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 identificacin. #page{
float:none; width:1024px; margin:0 auto; /*example*/ border:1px
solid red; } 45. Curso avanzado de programacin y configuracin de
Wordpress Extendiendo Wordpress (Temas) 46. Curso avanzado de
programacin y configuracin de Wordpress Extendiendo Wordpress
(Temas) Pero lo ms comn para empezar a desarrollar un tema es
extenderse de otro o sobre escribirlo ya que de esta manera
disminuiremos la opcin de error y dispondremos de multitud de
mtodos 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 estn
desarrollados para que con las mnimas modificaciones de cdigo HTML,
PHP o Javascript, apliquemos nuestros propios estilos a nuestro
Wordpress. 47. Curso avanzado de programacin y configuracin 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 programacin y
configuracin 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 configuracin. Este tema en
concreto es muy fcil de modificar y el cdigo est bastante
documentado. Sandbox ofrece varias configuraciones de la estructura
de Wordpress modificando una lnea en la hoja de estilos: 49. Curso
avanzado de programacin y configuracin de WordpressExtendiendo
Wordpress (Temas)/* Two-column with sidebar on left from the
/examples/ folder */ @import url('examples/2c-l.css'); 50. Curso
avanzado de programacin y configuracin de WordpressExtendiendo
Wordpress (Temas)/* Two-column with sidebar on right from the
/examples/ folder */ @import url('examples/2c-r.css'); 51. Curso
avanzado de programacin y configuracin de WordpressExtendiendo
Wordpress (Temas)@import url('examples/3c-l.css'); 52. Curso
avanzado de programacin y configuracin de Wordpress Extendiendo
Wordpress (Temas) Recursos para desarrolladores y documentacin 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
programacin y configuracin de WordpressExtendiendo 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 programacin y
configuracin de Wordpress Extendiendo Wordpress (Plugins)Plugins
Los plugins en Wordpress se albergan en el directorio
"wp-content/plugins/", donde Wordpress mirar automticamente para
cargarlos y poder activarlos mediante la administracin. 55. Curso
avanzado de programacin y configuracin de Wordpress Extendiendo
Wordpress (Plugins) 56. Curso avanzado de programacin y
configuracin 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 programacin y configuracin de
WordpressExtendiendo 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 administracin de Wordpress. 58. Curso
avanzado de programacin y configuracin 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 declaracin de un plugin: ?php Plugin Name: Hello Dolly Plugin
URI: http://wordpress.org/# Description: This is not just a plugin,
it symbolizes the hope andenthusiasm of an entire generation summed
up in two words sungmost famously by Louis Armstrong: Hello, Dolly.
When activatedyou will randomly see a lyric from citeHello,
Dolly/cite in theupper right of your admin screen on every page.
Author: Matt Mullenweg Version: 1.5.1 Author URI: http://ma.tt/ */
59. Curso avanzado de programacin y configuracin de Wordpress
Extendiendo Wordpress (Plugins) El cdigo: 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 programacin y configuracin de
WordpressExtendiendo 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_footeraction is called add_action('admin_footer',
'hello_dolly'); Lanza una funcin en una accin especifica que en
este caso es en el admin_footer 61. Curso avanzado de programacin y
configuracin de WordpressExtendiendo 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 programacin y configuracin de
WordpressExtendiendo Wordpress (Plugins)add_action('admin_head',
'dolly_css'); Lanza una funcin en una accin 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 programacin y
configuracin de Wordpress Extendiendo Wordpress (Plugins)
Instalacin 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$
wgethttp://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 programacin y configuracin de Wordpress Extendiendo
Wordpress (Plugins) Por ltimo deberemos acceder al panel de
administracin de Wordpress y activar el plugin. 65. Curso avanzado
de programacin y configuracin de Wordpress Extendiendo Wordpress
(Plugins) Este plugin en concreto sirve para sacar vdeos aleatorios
de Youtube que previamente hemos definido en una lista. 66. Curso
avanzado de programacin y configuracin de Wordpress Extendiendo
Wordpress (Plugins) El plugin ofrece un Widget de Wordpress que
deberemosactivar. 67. Curso avanzado de programacin y configuracin
de WordpressExtendiendo Wordpress (Plugins) El resultado: 68. Curso
avanzado de programacin y configuracin 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 documentacin sobre el
mismo y hacer un plugin que interactue de diferentes maneras con
Wordpress. 69. Curso avanzado de programacin y configuracin 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 programacin y
configuracin de WordpressExtendiendo Wordpress (Plugins) Declaracin
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 leerla informacin del plugin y ofrecerlo en su lista
parapoder instalarlo. 71. Curso avanzado de programacin y
configuracin de Wordpress Extendiendo Wordpress (Plugins) 72. Curso
avanzado de programacin y configuracin 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 programacin y configuracin 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 compondrn este plugin. */
/* * * Definimos la variable SP_TEXT_DOMAIN * */
define('SP_TEXT_DOMAIN','simple_plugin'); 74. Curso avanzado de
programacin y configuracin de WordpressExtendiendo Wordpress
(Plugins)/* * En esta variable tendremos almacenado el nombre
distintivo delplugin. * Se usar para el texte domain de nuestro
plugin. */ /* * ####### FICHEROS Y LIBRERAS */ /* * * Cargamos
nuestro fichero de funciones * */ 75. Curso avanzado de programacin
y configuracin de WordpressExtendiendo Wordpress
(Plugins)require_once (dirname(__FILE__).'/libs/functions.php'); /*
* Este fichero lo utilizaremos para cargar y escribir funciones. */
/* * * cargamos la adminsitracin para nuestro plugin * */
require_once (dirname(__FILE__).'/admin/admin.php'); 76. Curso
avanzado de programacin y configuracin de Wordpress Extendiendo
Wordpress (Plugins)/* * Este fichero controlar y cargar lo
necesario para la zona deadminstracin */ /* * * 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 pblica */ 77. Curso
avanzado de programacin y configuracin de Wordpress Extendiendo
Wordpress (Plugins) Pginas y opciones de administracin de los
plugins Este plugin ofrecer dos pginas de administracin delmismo.
El fichero de control es "/admin/admin.php": /* * Este fichero es
el que mediante acciones y funciones de wordpres * cargar la zona
de administracin de nuestro plugin. */ 78. Curso avanzado de
programacin y configuracin de WordpressExtendiendo Wordpress
(Plugins) /* * INIT * * en la accin admin_init de Wordpress * se
lanzar la funcin que hayamos definido. */ 79. Curso avanzado de
programacin y configuracin de Wordpress Extendiendo Wordpress
(Plugins)function sp_admin_init(){ /* * $jsLibs, es un array donde
hemos definido qu libreras de javascript * queremos tener cargadas
en la zona de adminstracin. * * Wordpress pone a nuestra disposicin
diferentes libreras, * que pueden ser cargadas mediante su "alias".
* *http://codex.wordpress.org/Function_Reference/wp_enqueue_script
* * En esta direccin tenemos la lista de las libreras disponibles
*/ 80. Curso avanzado de programacin y configuracin de
WordpressExtendiendo Wordpress (Plugins)$jsLibs =
array('jquery','jquery-ui-core','jquery-ui-tabs'); foreach ($jsLibs
as $lib) wp_enqueue_script($lib); /* * wp_enqueue_script() es la
funcin de Wordpress que encola * las libreras que llamamos. */ /* *
i_wp_add es una clase que hemos implementado para cargar y encolar
* diferentes libreras 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 programacin y
configuracin de WordpressExtendiendo Wordpress
(Plugins)add_action('admin_init', 'sp_admin_init'); /* * PAGES * *
Mediante la accin admin_menu, cargaremos los mens que * necesitemos
para nuestro plugin. */ function sp_admin_page_1(){ /* * Este
fichero dibujar y gestionar una pgina de administracin */ include(
dirname(__FILE__).'/sp_admin_page_1.php'); } 82. Curso avanzado de
programacin y configuracin de WordpressExtendiendo Wordpress
(Plugins)function sp_admin_page_2(){ } /* * sp_add_menu_pages () *
* Es la funcin que se llamara en la accin admin_menu * * Se
encargar de cargar en el men de administracin, los * mens y submens
que declaremos * */ 83. Curso avanzado de programacin y
configuracin de WordpressExtendiendo Wordpress (Plugins)function
sp_add_menu_pages (){ add_menu_page( 'Simple Plugin Admin Page 1',
//Ttulo de la pgina 'Simple Plugin', //Nombre del botn del men 1,
//Prioridad 'sp_admin_page_1.php', //fichero 'sp_admin_page_1'
//funcin ); 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 programacin y
configuracin 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 lia href="#tabs-1"?php echo
__('holamundo',SP_TEXT_DOMAIN) ?/a/li lia href="#tabs-2"?php echo
__('Simple Plugin test2',SP_TEXT_DOMAIN) ?/a/li /ul 85. Curso
avanzado de programacin y configuracin 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
__('nmero de veces de hola mundo',SP_TEXT_DOMAIN) ?/th tdinput
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 tdinput type="text"
name="sp_hola_mundo_border_color" value="?php echo
get_option('sp_hola_mundo_border_color'); ?" //td /tr 86. Curso
avanzado de programacin y configuracin de WordpressExtendiendo
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"
pTAB2/p /div /div 87. Curso avanzado de programacin y configuracin
de WordpressExtendiendo Wordpress (Plugins) Este fichero est
preparado para albergar diferentes tabs (jquery-ui-tabs) para dar
una mejor apariencia a nuestro plugin, pero lo ms interesante que
podemos encontrar es el contenido que est en el primer "tab".
Encontramos un formulario estndar de Wordpress cuya funcin es
mostrar un formulario para administrar valores y guardarlos
automticamente. Estos valores los podremos recuperar mediante la
funcin de Wordpress "get_option()". 88. Curso avanzado de
programacin y configuracin de Wordpress Extendiendo Wordpress
(Plugins) En esta captura vemos cmo se han generado dos botones de
administracin para nuestro plugin. 89. Curso avanzado de
programacin y configuracin de WordpressExtendiendo Wordpress
(Plugins) En esta captura vemos las pestaas que hemos definido y el
formulario de administracin resultante. 90. Curso avanzado de
programacin y configuracin de Wordpress Extendiendo Wordpress
(Plugins) La segunda pestaa. 91. Curso avanzado de programacin y
configuracin de Wordpress Extendiendo Wordpress (Plugins)
Estructura del plugin (2), directorios de administracin . |-- admin
| |-- admin.php | |-- css | | `-- admin_style.css | |-- js | | `--
admin_script.js | `-- sp_admin_page_1.php (...) 92. Curso avanzado
de programacin y configuracin de Wordpress Extendiendo Wordpress
(Plugins) Contenido del plugin en la zona pblica La forma ms
habitual de sacar contenido al Blog es hacer filtros. Para nuestro
plugin hemos creado una pgina de Wordpress y hemos escrito en el
cuerpo de la pgina el tag de control que hemos definido para
nuestro plugin. 93. Curso avanzado de programacin y configuracin de
Wordpress Extendiendo Wordpress (Plugins) 94. Curso avanzado de
programacin y configuracin de Wordpress Extendiendo Wordpress
(Plugins) El tag de nuestro plugin es
"[simple_plugin|hola_mundo]".Nuestro plugin recibir como variable
de configuracino carga lo que encuentre despus del smbolo | . El
fichero de control de la zona pblica es"simple_plugin_public.php":
/** Este fichero es el que mediante acciones y funciones de
wordpres* cargar nuestro plugin en la zona pblica.*/ 95. Curso
avanzado de programacin y configuracin de WordpressExtendiendo
Wordpress (Plugins) /* * INIT * * en la accin init de Wordpress *
se lanzar la funcin que hayamos definido. */ /* * Inclumos 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 programacin y
configuracin 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
programacin y configuracin de Wordpress Extendiendo Wordpress
(Plugins)add_action('init', 'sp_init'); /* * WIDGET * * en la accin
plugins_loaded de Wordpress * se lanzar la funcin que hayamos
definido para cargar los * widgets que el plugin ofrezca. */
add_action("plugins_loaded", array('simple_plugin','widgets')); 98.
Curso avanzado de programacin y configuracin 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 programacin y configuracin
de WordpressExtendiendo 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 programacin
y configuracin de WordpressExtendiendo Wordpress (Plugins)static
public function load_filter(){ /* * Add filter de Wordpress * * *
Esta funcin 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 programacin y configuracin de WordpressExtendiendo
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 programacin y configuracin 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 programacin y configuracin de
WordpressExtendiendo 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 programacin y
configuracin de WordpressExtendiendo 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 programacin y configuracin 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 programacin y configuracin de
WordpressExtendiendo 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 programacin y configuracin de WordpressExtendiendo
Wordpress (Plugins) La clase del plugin nos permitir ir
desarrollando sobre ella diferentes opciones para el plugin. 108.
Curso avanzado de programacin y configuracin de Wordpress
Extendiendo Wordpress (Plugins) 109. Curso avanzado de programacin
y configuracin de Wordpress Extendiendo Wordpress (Plugins)
Mediante este plugin hemos conseguido sacar en la zonapblica un
"hola mundo" en una pgina y en un widget. 110. Curso avanzado de
programacin y configuracin de WordpressExtendiendo Wordpress
(Plugins) Localizacin de plugins Para la localizacin de los plugins
Wordpress pone a nuestra disposicin 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$
mkdirwordpress-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 programacin y configuracin de
WordpressExtendiendo 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 autilizar 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.potsimple_plugin-es_ES.po 112. Curso avanzado de
programacin y configuracin 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 programacin y configuracin de WordpressExtendiendo 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 programacin y configuracin de
WordpressExtendiendo Wordpress (Plugins) Enlaces de documentacin y
funciones ms 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
programacin y configuracin de WordpressExtendiendo 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 programacin y configuracin de WordpressConectando
Wordpress con el mundo Ejemplo de conexin con Facebook (Facebook
Connect) wordpress@lander-laptop:/var/www/blog/files/plugins$
wgethttp://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 ningn momento su clave al blog/sitio al que accede. 117.
Curso avanzado de programacin y configuracin de WordpressConectando
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 informacin 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 estadsticas De forma automtica el plugin crea un
usuario de Wordpress con la informacin del perfil Facebook, que
posteriormente podr editar el usuario. 118. Curso avanzado de
programacin y configuracin de WordpressConectando 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 programacin y
configuracin de Wordpress Ejemplo de conexin con Twitter 120. Curso
avanzado de programacin y configuracin de WordpressCmo hacer un
backup de nuestro blog 121. Curso avanzado de programacin y
configuracin de Wordpress Otros usos derivados de Wordpress
Wordpress MU Wordpress Shop 122. Curso avanzado de programacin y
configuracin de Wordpress Licencia Copyleft Copyright 123. Curso
avanzado de programacin y configuracin de WordpressLicencia
Copyleft Este documento est protegido bajo la licencia
Reconocimiento-Compartir Igual 2.1 Espaa de Creative Common
(http://creativecommons.org/licenses/by- nd/2.1/es/) Copyright 2009
Irontec Copyright 2009 Lander Ontoria Se permite la copia,
modificacin, distribucin, uso comercial y realizacin de la obra,
siempre y cuando se reconozca la autora 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 traduccin de la nota orientativa de
la licencia original completa (jurdicamente vlida).
