Cursowordpress 091124113422 Phpapp02

Curso avanzado de programacin y configuracin de Wordpress
Curso de Wordpress
Instalacin de Wordpress
Instalacin en Servidor
Obtener Wordpress Descargamos la ltima versin 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
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)
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 configuracin) El fichero bsico de configuracin de Wordpress en "wpconfig.php", que es precisamente el que tendremos que modificar para aadir los datos de conexin a la base de datos. El fichero de configuracin 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-configsample.php wp-config.php
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');
/** 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_';
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.
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.
Hacemos login y ya est instalado Wordpress.
* Cambiar la contrasea.
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:
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%
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 mdulo "rewrite" de apache:

# a2enmod rewrite ; /etc/init.d/apache2 restart
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 de castellano:
wordpress@lander:/var/www/blog/files/langs$ wget http://carrero.es/wp-content/uploads/2007/05/wp2.8.4es_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/wpincludes/languages$ unzip ../../../files/langs/wp2.8.4es_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 configuracin principal "wpconfig.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.
Ficheros PO y MO
Wordpress utiliza el sitema "gettext" para su traduccin. Gettext utiliza tres tipos de ficheros para crear y almacenar las 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.
.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":
#: 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.
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 nos facilita la traduccin 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 "wpcontent/themes/", donde Wordpress mirar automticamente para cargarlos y poder activarlos mediante la administracin.
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 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
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 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 la cabecera (ttulo 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-d\TH: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="metanav"»/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'), "\t\t\t\t\tspan class=\"edit-link\"", "/span\n\t\t\t\t\tspan 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 pgina. ?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() ? ?php get_footer() ? Carga los paneles laterales. Carga el pie.
Ms ficheros "imprescindibles" para un tema * style.css * index.php * comments.php
* El tema de dibuja los comentarios. * El tema de los popup de los comentarios. * Es el fichero que se usar para mostrar un solo post. * El tema de las pginas. * El tema de las categoras.
* comments-popup.php
* single.php
* page.php
* category.php
* author.php
* El tema del autor. * Cuando se llama a una fecha, el formato se coge de este fichero. * El fichero de bsqueda. * 404.
* date.php
* search.php
* 404.php
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.
Estructura del tema "default" wordpress@lander-laptop:/var/www/blog/wordpress/wpcontent/themes/default$ tree .

. |-- 404.php |-- archive.php |-- archives.php |-- comments-popup.php |-- comments.php |-- footer.php |-- functions.php |-- header.php |-- image.php

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

|-- screenshot.png |-- search.php |-- sidebar.php |-- single.php `-- style.css 1 directory, 26 files
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/":

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/wpcontent/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:
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.
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; }
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.
Referencias:
http://www.plaintxt.org/themes/sandbox/ http://www.jdavidmacor.com/2007/09/17/wordpress-themebuilding-resources/
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:

/* 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 documentacin en la red
* Temas Wordpress:
* http://wordpress.org/extend/themes/ * http://codex.wordpress.org/ * http://codex.wordpress.org/Theme_Development * http://codex.wordpress.org/Stepping_Into_Templates * http://codex.wordpress.org/Template_Tags
* Desarrollo (Api del desarrollador de Wordpress):

* Temas en blanco:
* http://www.jdavidmacor.com/2007/09/17/wordpresstheme-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 automticamente para cargarlos y poder activarlos mediante la administracin.
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 administracin de Wordpress.
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 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 citeHello, 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 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) ] ); }

// 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 funcin en una accin 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 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.
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$ wget http://downloads.wordpress.org/plugin/random-youtube-video.zip
Descomprimir el plugin en "wp-content/plugins/":

wordpress@lander-laptop:/var/www/blog/wordpress/wpcontent/plugins$ unzip ../../../files/plugins/random-youtubevideo.zip
Por ltimo deberemos acceder al panel de administracin de Wordpress y activar el plugin.
Este plugin en concreto sirve para sacar vdeos 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 documentacin 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 "wpcontent/plugins/" para nuestro plugin.
wordpress@lander-laptop:/var/www/blog/wordpress/wpcontent/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/wpcontent/plugins/simple_plugin$ touch simple_plugin.php
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 leer la informacin 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 compondrn 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 LIBRERAS */ /* * * Cargamos nuestro fichero de funciones * */

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

/* * Este fichero controlar y cargar lo necesario para la zona de adminstracin */ /* * * 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 */
Pginas y opciones de administracin de los plugins
Este plugin ofrecer dos pginas de administracin 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 administracin de nuestro plugin. */
/* * INIT * * en la accin admin_init de Wordpress * se lanzar la funcin que hayamos definido. */

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_scri pt * * En esta direccin tenemos la lista de las libreras disponibles */

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

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

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

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');
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 __('hola mundo',SP_TEXT_DOMAIN) ?/a/li lia 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 __('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

/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
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()".
En esta captura vemos cmo se han generado dos botones de administracin para nuestro plugin.
En esta captura vemos las pestaas que hemos definido y el formulario de administracin resultante.
La segunda pestaa.
Estructura del plugin (2), directorios de administracin

. |-- admin | |-- admin.php | |-- css | | `-- admin_style.css | |-- js | | `-- admin_script.js | `-- sp_admin_page_1.php (...)
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.
El tag de nuestro plugin es "[simple_plugin|hola_mundo]". Nuestro plugin recibir como variable de configuracin o 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. */
/* * 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 */

load_plugin_textdomain( SP_TEXT_DOMAIN, 'wpcontent/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 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'));
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 funcin 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 pblica un "hola mundo" en una pgina y en un widget.
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$ mkdir wordpress-i18n ; cd wordpress-i18n wordpress@lander-laptop:/var/www/blog/wordpress/wordpressi18n$ svn export http://svn.automattic.com/wordpressi18n/tools/trunk/ tools
Para generar el fichero ".pot":
wordpress@lander-laptop:/var/www/blog/wordpress/wordpressi18n/tools$ php makepot.php wp-plugin ../../wpcontent/plugins/simple_plugin/ ../../wpcontent/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/wpcontent/plugins/simple_plugin/languages$ cp simple_plugin.pot simple_plugin-es_ES.po
Estructura del plugin (3), plugin completo

wordpress@lander-laptop:/var/www/blog/wordpress/wpcontent/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

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

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 conexin 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/wpcontent/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.
* 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.
* 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 conexin con Twitter
Cmo 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 Espaa de Creative Common (http://creativecommons.org/licenses/bynd/2.1/es/)
Copyright 2009 Irontec <contacto@irontec.com> Copyright 2009 Lander Ontoria <lander@irontec.com> 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).

Cursowordpress 091124113422 Phpapp02

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Cursowordpress 091124113422 Phpapp02

Cargado por

Copyright:

Formatos disponibles

Curso avanzado de programacin y configuracin de Wordpress

Curso avanzado de programacin y configuracin de Wordpress

wordpress@lander:/var/www/blog$ wget http://wordpress.org/latest.zip

Extraemos los ficheros del archivo "latest.zip":

Curso avanzado de programacin y configuracin de Wordpress

Curso avanzado de programacin y configuracin de Wordpress

Curso avanzado de programacin y configuracin de Wordpress

Curso avanzado de programacin y configuracin de Wordpress

Curso avanzado de programacin y configuracin de Wordpress

Curso avanzado de programacin y configuracin 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)

Wordpress nos redirigir a una pgina de instalacin.

Curso avanzado de programacin y configuracin de Wordpress

Curso avanzado de programacin y configuracin de Wordpress

Curso avanzado de programacin y configuracin de Wordpress

Curso avanzado de programacin y configuracin de Wordpress

Hacemos login y ya est instalado Wordpress.

Curso avanzado de programacin y configuracin de Wordpress

Curso avanzado de programacin y configuracin de Wordpress

Curso avanzado de programacin y configuracin de Wordpress

Curso avanzado de programacin y configuracin de Wordpress

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

Curso avanzado de programacin y configuracin de Wordpress

Hay que crear un fichero .htaccess:

Y habilitar el mdulo "rewrite" de apache:

Curso avanzado de programacin y configuracin de Wordpress

wordpress@lander:/var/www/blog/files/langs$ wget http://carrero.es/wp-content/uploads/2007/05/wp2.8.4es_ES.zip

Curso avanzado de programacin y configuracin de Wordpress

wordpress@lander:/var/www/blog/wordpress/wpincludes/languages$ unzip ../../../files/langs/wp2.8.4es_ES.zip

Curso avanzado de programacin y configuracin de Wordpress

Configurando el Idioma de Wordpress

Curso avanzado de programacin y configuracin de Wordpress

Una vez hecho este cambio Wordpress estar traducido.

Curso avanzado de programacin y configuracin de Wordpress

.PO (Portable Object)

Curso avanzado de programacin y configuracin 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":

Curso avanzado de programacin y configuracin de Wordpress

Curso avanzado de programacin y configuracin de Wordpress

Curso avanzado de programacin y configuracin de Wordpress

Curso avanzado de programacin y configuracin de Wordpress

Curso avanzado de programacin y configuracin de Wordpress

Extendiendo Wordpress (Temas)

Curso avanzado de programacin y configuracin de Wordpress

Extendiendo Wordpress (Temas)

Curso avanzado de programacin y configuracin 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; }

Curso avanzado de programacin y configuracin de Wordpress

Extendiendo Wordpress (Temas)

Curso avanzado de programacin y configuracin de Wordpress

Extendiendo Wordpress (Temas)

Curso avanzado de programacin y configuracin de Wordpress

Extendiendo Wordpress (Temas)

Curso avanzado de programacin y configuracin de Wordpress

Extendiendo Wordpress (Temas)

Curso avanzado de programacin y configuracin de Wordpress