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

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

Curso 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



– 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)



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)



– 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



● 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');



/** 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_';



– 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.



● 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.



● Hacemos login y ya está instalado Wordpress.

– * Cambiar la contraseña.



● 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:



● 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%



● ej: /%postname%/

● Convertiremos "http://wordpress.irontec.com/?p=1" en
"http://wordpress.irontec.com/hello-world/".



● 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



● 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



● 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



– 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');


● Una vez hecho este cambio Wordpress estará traducido.


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.



● .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":



#: 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.



– 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.



●



● Hemos traducido la cadena "Dashboard" como "Super
Escritorio" y una vez guardado el resultado es:


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.



● 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



● 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;
}



– 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"»



«?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»



«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; ?»



«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.



– 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.



● * 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.



|-- screenshot.png
|-- search.php
|-- sidebar.php
|-- single.php
`-- style.css

1 directory, 26 files



● 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/":



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:



● 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.



– 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;
}



– 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.



– Referencias:

● http://www.plaintxt.org/themes/sandbox/

● http://www.jdavidmacor.com/2007/09/17/wordpress-theme-
building-resources/



● 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:



/* Two-column with sidebar on left from the /examples/ folder */
@import url('examples/2c-l.css');



/* Two-column with sidebar on right from the /examples/ folder */
@import url('examples/2c-r.css');



@import url('examples/3c-l.css');



● 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



– * Temas en blanco:
● * http://www.jdavidmacor.com/2007/09/17/wordpress-
theme-building-resources/
● * http://www.plaintxt.org/themes/sandbox/

– * Debuging
● * Firebug


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.



● 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":



– 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.



● 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/
*/



● 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) ] );
}



// 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



// 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» ";
}



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.



● 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/":
content/plugins$ unzip ../../../files/plugins/random-youtube-
video.zip



– Por último deberemos acceder al panel de administración
de Wordpress y activar el plugin.



– Este plugin en concreto sirve para sacar vídeos aleatorios
de Youtube que previamente hemos definido en una
lista.



– El plugin ofrece un Widget de Wordpress que deberemos
activar.



– El resultado:



● 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.



– 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



– 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.



– simple_plugin.php:

/*
* ####### VARIABLES
*/

/*
*
* Definimos la variable PLUGIN_URL
*
*/

if (!defined('PLUGIN_URL'))
define('PLUGIN_URL',WP_CONTENT_URL.'/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');



/*
* 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
*
*/



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');



/*
* 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
*/



– 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.
*/



/*
* INIT
*
* en la acción admin_init de Wordpress
* se lanzará la función que hayamos definido.
*/



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
*/



$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');
}



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');
}



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
*
*/



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');



● 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»



«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»



«/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»



● 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()".



● En esta captura vemos cómo se han generado dos botones
de administración para nuestro plugin.



● En esta captura vemos las pestañas que hemos definido y el
formulario de administración resultante.



● La segunda pestaña.



– 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.



● 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.
*/



/*
* 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
*/



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();
}



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'));



● 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);



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;
}



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'));
}



static public function go($conf){
/*
*
* Llamada a nuestro plugin
*/
$plg = new simple_plugin($conf);

if ($ret = $plg-»the_content()) return $ret;
return "";
}
}



● La clase del plugin:
/*
*
* la clase del plugin
*/

class simple_plugin{
protected $conf;
protected $content;
protected $lock = false;



public function __construct($conf){
$this-»conf = $conf;

switch ($this-»conf){
case "hola_mundo":
$this-»content = $this-»hola_mundo();
break;
default:
$this-»lock=true;
break;
}
}



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;
}



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;
}



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'));

}
}



● La clase del plugin nos permitirá ir desarrollando sobre
ella diferentes opciones para el plugin.



● Mediante este plugin hemos conseguido sacar en la zona
pública un "hola mundo" en una página y en un widget.



– 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



● 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":
content/plugins/simple_plugin/languages$ cp simple_plugin.pot
simple_plugin-es_ES.po



– 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



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


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
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.



● * 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.



● * 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.


Ejemplo de conexión con Twitter


Cómo hacer un backup de nuestro blog


Otros usos derivados de Wordpress

● Wordpress MU
● Wordpress Shop


Licencia Copyleft

Copyright


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).

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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie Curso avanzado de programación y configuración de Wordpress

Ähnlich wie Curso avanzado de programación y configuración de Wordpress (20)

Mehr von Irontec

Mehr von Irontec (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

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