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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

http://mycronica.wordpress.com	919
http://pefmultimedia.wordpress.com	337
http://comosepuedehacer.wordpress.com	58
http://www.slideshare.net	36
http://www.red-geek.com.ar	26
https://si0.twimg.com	10
http://escolaycursos.usawordpress.com	4
http://red-geek.com.ar	3
http://luis	1
http://presentacion.org	1

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

by Irontec - Internet y Sistemas sobre GNU/Linux

Accessibility

Categories

Upload Details

Usage Rights

10 Embeds 1,395

Statistics

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