Cursowordpress 091124113422-phpapp02

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


Instalación de Wordpress● 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"»

http://codex.wordpress.org/Template_Tags

http://codex.wordpress.org/Stepping_Into_Templates



«?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="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'), "\t\t\t\t\t«span class=\"edit-link\"»", "«/span»\n\t\t\t\t\t«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/":wordpress@lander-laptop:/var/www/blog/wordpress/wp-

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_script

* * 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_Developers) 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":

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

wordpress@lander-laptop:/var/www/blog/wordpress/wp-content/plugins$ unzip ../../../files/plugins/fbconnect_1_2_1.zip

– El uso de este plugin permite: ● * Acceder al blog (login) con un usuario de Facebook,

siendo Facebook el que valida el usuario sin que este indique en ningún momento su clave al blog/sitio al que accede.



● * 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 <[email protected]>

Copyright © 2009 Lander Ontoria <[email protected]>

Se permite la copia, modificación, distribución, usocomercial y realización de la obra, siempre y cuando sereconozca la autoría de la misma, a no sea ser que seobtenga permiso expreso del autor. El autor no permitedistribuir obras derivadas a esta.

Esta nota no es la licencia completa de la obra, sinouna traducción de la nota orientativa de la licenciaoriginal completa (jurídicamente válida).

Cursowordpress 091124113422-phpapp02

Documents

Transcript of Cursowordpress 091124113422-phpapp02