Tunea tu wordpress
Upcoming SlideShare
Loading in...5
×
 

Tunea tu wordpress

on

  • 3,620 views

Documentación del curso "Tunea tu WordPress de Enpresa Digitala"

Documentación del curso "Tunea tu WordPress de Enpresa Digitala"

Statistics

Views

Total Views
3,620
Slideshare-icon Views on SlideShare
3,616
Embed Views
4

Actions

Likes
3
Downloads
191
Comments
1

1 Embed 4

http://nuevoblogderamon.blogspot.com.es 4

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial LicenseCC Attribution-NonCommercial License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Tunea tu wordpress Tunea tu wordpress Presentation Transcript

    • Tunea tu WordPress: mejora elaspecto de tu blog/website enWordPress Iñaki Arenaza & Roberto Uribeetxeberria Mondragon Unibertsitatea {iarenaza,ruribeetxeberria}@mondragon.edu @iarenaza & @globotomy
    • ReconocimientosEsta presentación está basada en la presentación de ThadAllender, de Graph Paper Press (www.graphpaperpress.com),titulada “Theme development: an introduction to the basics oftheming with WordPress”Thad Allender ha concedido generosamente su permiso a IñakiArenaza para poder traducirla al español y ser usada en este curso. 2
    • Gestión de temas existentesPhoto by Ashtyn Renee on http://www.flickr.com/photos/ashtynrenee/5350445291/
    • Gestión de temasLos temas son una forma de configurar elaspecto de un sitio WordPress: la portada, losartículos, las páginas, las categorías, etc.Un tema es una colección de fichero quetrabajan juntos para producir una interfaz deusuario.Estos ficheros de denominan ficheros deplantilla, y pueden incluir plantillaspersonalizadas, ficheros de imagen, hojas deestilo CSS), páginas personalizadas así comolos ficheros de código necesarios (*.php).Vienen en forma de ficheros .zip
    • Gestión de temasAl ser tan variados y no necesarios para todoel mundo, no son parte de la versión estándarde WordPress (que sólo trae uno de serie:Twente Eleven).Es por ello que la práctica totalidad de losmismo son desarrollados por terceraspersonas y su madurez y calidad varíanmucho de unos a otros.Podemos encontrar muchos de ellos enhttp://wordpress.org/extend/themes/
    • Gestión de temasPara ver que temas tenemos instalados:
    • Gestión de temas - widgetsLos temas suelen ser más o menos configurables:
    • Gestión de temas - widgets
    • Gestión de temas - menús
    • Gestión de temas - menús
    • Gestión de temas – opciones de tema
    • Gestión de temas – fondo
    • Gestión de temas – cabecera
    • Gestión de temasPodemos instalar nuevos temas: Obteniendo el fichero .zip por nuestra cuenta, descomprimiéndolo y copiando/subiendo la carpeta con todo su contenido al directorio /wp-content/themes. Desde el dashboard, en la entrada del menú Apariencia. Esta opción a veces no funciona en algunos proveedores de hosting, por lo que no queda más remedio que usar la opción anterior.
    • Gestión de temas – instalar tema
    • Gestión de temas – instalar tema
    • Gestión de temas – instalar tema
    • Gestión de temas – instalar tema
    • Gestión de temas – instalar tema
    • Gestión de temas – instalar tema
    • Gestión de temas – instalar tema
    • Gestión de temas – borradoPara borrar los temas (no activos):
    • Gestión de temas – borrado
    • Gestión de temas – borrado
    • Gestión de temas – borradoPuede que algunos temas no se puedanborrar de esta forma (no tengamospermisos en disco para hacerlo desde eldashboard).En ese caso hay que borrar el directorio deltema de /wp-content/themes de formamanual (en el servidor o via FTP).
    • Gestión de plugins
    • Gestión de pluginsLos plugins son conjuntos de scripts PHPque añaden funcionalidad a WordPress.Vienen en forma de fichero .zip.A veces mejoran la funcionalidad existenteen WordPress y otras añadenfuncionalidades inexistentes.Hay una infinidad de plugins que cubrenfuncionalidades muy variadas: sistemas depuntuación de artículos, integración conredes sociales, SEO, analítica web,artículos multi-idioma, etc.
    • Gestión de pluginsAl ser tan variados y no necesarios para todo elmundo, no son parte de la versión estándar deWordPress.Es por ello que la práctica totalidad de losmismo son desarrollados por terceras personasy su madurez y calidad varían mucho de unos aotros.Podemos encontrar la mayoría de ellos enhttp://wordpress.org/extend/plugins/Casi todos ellos indican en su página en la basede datos de plugins para que versiones deWordPress son compatibles.
    • Gestión de plugins
    • Gestión de pluginsPara ver que plugins tenemos instalados:
    • Gestión de plugins
    • Gestión de plugins
    • Gestión de pluginsPodemos instalar nuevos plugins: Obteniendo el fichero .zip por nuestra cuenta, descomprimiéndolo y copiando/subiendo la carpeta con todo su contenido al directorio /wp-content/plugins. Desde el dashboard, en la entrada del menú Plugins. Esta opción a veces no funciona en algunos proveedores de hosting, por lo que no queda más remedio que usar la opción anterior.
    • Gestión de pluginsAlgunos (pocos) plugins necesitan accionesmanuales adicionales. Suelen indicar quéacciones son en el fichero README.txt quehay dentro del .zip.¡ATENCIÓN!: Un plugin con errores oincompatible con nuestra versión deWordPress puede dejar nuestro blog fuerade servicio. Hacer una copia de seguridad completa del blog antes de instalar un nuevo plugin, por si acaso.
    • Gestión de plugins - instalación
    • Gestión de plugins - instalación
    • Gestión de plugins - instalación
    • Gestión de plugins - instalación
    • Gestión de plugins - borradoPara deshabilitar/borrar los plugins:
    • Gestión de plugins - borrado
    • Gestión de plugins - borradoPuede que algunos plugins no se puedanborrar de esta forma (no tengamospermisos en disco para hacerlo desde eldashboard).En ese caso hay que borrar el directorio delplugin de /wp-content/plugins de formamanual (en el servidor o via FTP).
    • Creación de nuevos temasPhoto by ralphbijker on http://www.flickr.com/photos/17258892@N05/2588347668
    • Herramientas recomendadasFirefox: Firebug: http://getfirebug.com/ Web Developer: https://addons.mozilla.org/en-US/firefox/addon/web-developer/Chrome: Firebug Lite http://getfirebug.com/firebuglite Web Developer: http://chrispederick.com/work/web-developer/download/chrome/IE 6/7: Internet Explorer Developer Toolbarhttp://www.microsoft.com/download/en/details.aspx?id=18359IE 8/9: Developer Tools (incorporado) 43
    • Anatomía de un tema WordPressConjunto de ficheros usados paracrear el diseño y la funcionalidad deun sitio WordPresshttp://codex.wordpress.org/Theme_Development 44
    • Anatomía de un tema WordPressLos ficheros están en/wp-content/themes/Incluyen hojas de estilo, ficheros deplantillas y funciones, imágenes,código javascript, etc. 45
    • Anatomía de un tema WordPressstyle.css – La hoja de estilosprincipal. Es obligatorio incluirla enel tema.index.php – Plantilla principal. Si eltema incluye plantillas propias, elfichero debe existir.functions.php – Opcional. Funcionesde código PHP. Se carga automáti-camente durante la inicialización deWordPress. 46
    • Anatomía de un tema WordPresscomments.php – Plantilla para loscomentarios. Si no existe, se usa wp-comments.php.single.php – Plantilla para un artículoindividual. Usada cuando se solicitaun artículo determinado.Para este tipo de plantilla y el restode plantillas de consulta, se usaindex.php si la plantilla de ese tipo nose encuentra. 47
    • Anatomía de un tema WordPresspage.php – Plantilla de página. Usadacuando se solicita una página.category.php – Plantilla de categoría.Usada cuando se consulta unacategoría.tag.php – Plantilla de etiqueta. Usadacuando se consulta una etiqueta. 48
    • Anatomía de un tema WordPresstaxonomy.php – Plantilla detaxonomía. Usada cuando se consultauna taxonomía.author.php – Plantilla de autor. Usadacuando se consulta un autor.date.php – Plantilla de fecha/hora.Usada cuando se consulta una fechau hora. 49
    • Anatomía de un tema WordPressarchive.php – Plantilla de archivo.Usada cuando se consulta unacategoría, autor o fecha. Serásustituida por category.php,author.php o date.php, si existen,para las consultas respectivas.search.php – Plantilla de búsqueda.Usada cuando se realiza unabúsqueda. 50
    • Anatomía de un tema WordPress404.php – Plantilla 404 (NoEncontrado). Usada cuandoWordpress no puede encontrar unaentrada que concuerde con labúsqueda. 51
    • style.css/*Theme Name: Twenty TenTheme URI: http://wordpress.org/Description: Descripción del temaAuthor: the WordPress teamVersion: 1.2License: GNU General Public LicenseLicense URI: license.txtTags: black, blue, two-columns, ...*/ 52
    • functions.phpUn tema puede tener opcionalmente unfichero de funciones PHP, llamadofunctions.phpEste fichero actuá básicamente comoun plugin, y si está presente se cargaautomáticamente durante lainicialización de WordPress (tanto paralas páginas de administración como laspúblicas). 53
    • functions.phpAlgunos usos sugeridos para estefichero: Habilitar características del tema como sidebars, menús de navegación, miniaturas de los artículos, formatos de los artículos, cabeceras personalizadas, fondos personalizados y otros. Definir funciones usadas en varios de los ficheros de plantilla del tema. Crear el menú de opciones, dando al administrador opciones para ajustar colores, estilos, tipos de letra y otros aspectos del tema. 54
    • functions.phpEl tema por defecto de WordPresscontiene un fichero functions.php quedefine la mayoría de estasfuncionalidades, por lo que podemosusarlo como modelo.Puesto que el fichero functions.phpbásicamente opera como un plugin, lapágina Function_Reference[1] es elmejor sitio para ver qué podemos hacerdesde este fichero.[1] http://codex.wordpress.org/Function_Reference 55
    • Estructura de una página header.php sidebar.php index.php footer.phpCompuesta de tres bloques básicos: unacabecera, el cuerpo y un pie de página. Lasbarras laterales añaden funcionalidadextra. 56
    • index.php Source: http://www.flickr.com/photos/koalazymonkey/3627199749/Muestra el contenido desde “ElBucle” (título, artículos, etc.)Llama a get_header(), get_sidebar(),get_footer() 57
    • index.php<?php get_header(); ?><?php if (have_posts()) : while (have_posts()) : the_post();?><h1><a href="<?php the_permalink() ?>" rel="bookmark"title="Permanent link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1><?php the_content(); ?><?php endwhile; else: ?><p><?php _e(Sorry, no posts matched your criteria.); ?></p><?php endif; ?><?php get_footer(); ?> 58
    • header.phpLlamada conget_header() desdelos ficheros deplantilla.Incluye lo que Source: http://www.flickr.com/photos/dbreg2007/5679962186/in/photostreamviene antes de la etiqueta <body>,incluida ésta: información meta,scripts, hojas de estilo, nombre delsitio, navegación, etc. 59
    • footer.phpLlamada conget_footer().Incluye todo loque vienedespués delcuerpo y lasbarras laterales:créditos, Source: http://www.flickr.com/photos/mickeysucks/29719905/información de copyright, etc. 60
    • sidebar.phpSe le llama conget_sidebar ().Añade informacióncontextual del sitio.Habitualmenteincluye widgets. 61
    • Jerarquía de ficheros de plantillaOrden en que se eligen los ficherosde plantilla a utilizar para mostrar uncontenido determinado:http://codex.wordpress.org/Template_Hierarchy 62
    • Visualización de la portada1. home.php2. index.php 63
    • Visualización de artículos individuales1. single-{tipo_de_artículo}.php Por ejemplo, si el tipo de artículo es mis-videos, WordPress buscará el fichero single-mis-videos.php2. single.php3. index.php 64
    • Qué es un slugUnas pocas palabras que describenun artículo o una página.Son habitualmente una versión deURL amigable del título del artículo(generado automáticamente porWordPress).El slug del artículo http://wordpress.org/development/2006/06/wordpress-203/ es "wordpress-203". 65
    • Visualización de páginas1. plantilla-a-medida – Donde plantilla- a-medida es la plantilla asignada a la página.2. page-{slug}.php Si el slug es XYZ, se buscará el fichero page-XYZ.php3. page-{id}.php Si el ID es 99, WordPress buscará el fichero page- 99.php4. page.php5. index.php 66
    • Visualización de categorías1. category-{slug}.php Si el slug de la categoría es XYZ, se buscará el fichero category-XYZ.php2. category-{id}.php Si el ID es 99, se buscará el fichero category-99.php3. category.php4. archive.php5. index.php 67
    • Visualización de etiquetas1. tag-{slug}.php Si el slug es XYZ, se buscará el fichero tag-XYZ.php2. tag-{id}.php Si el ID 99, se buscará el fichero tag-99.php3. tag.php4. archive.php5. index.php 68
    • Visualización de autores1. author-{alias}.php Si el alias del autor es XYZ, se buscará el fichero author-XYZ.php2. author-{id}.php Si el ID es 99, se buscará el fichero author-99.php3. author.php4. archive.php5. index.php 69
    • Visualización de fechas1. date.php2. archive.php3. index.php 70
    • Visualización de búsquedas1. search.php2. index.php 71
    • Visualización de 404 (No Encontrado)1. 404.php2. index.php 72
    • Visualización de adjuntos1. {Tipo_MIME}.php El Tipo_MIME puede ser cualquier tipo MIME estándar: image, video, audio, application, etc. Se buscará image.php, video.php, audio.php, application.php, etc.2. attachment.php3. single.php4. index.php 73
    • Entorno de desarrolloPara poder ejecutar WordPresslocalmente: Wamp (MS Windows) http://www.wampserver.com/ Mamp (OSX) http://www.mamp.info/ Xampp (MS Windows y Linux) http://www.apachefriends.org/ Paquetes de Apache, MySQL y PHP de la distribución Linux usada. 74
    • Control de versionesSimplifica el desarrollo colaborativo,el seguimiento de cambios, lapublicación del tema, etc.Algunas opciones: Git: http://git-scm.com/ GitHub: http://github.com/ Mercurial: http://mercurial.selenic.com/ bitbucket: http://bitbucket.org/ Subversion: http://subversion.tigris.org/ 75
    • “El Bucle”Muestra cada uno de los artículospublicados en el bloghttp://codex.wordpress.org/The_Loop 76
    • “El Bucle”<?phpif (have_posts()) : while (have_posts()) : the_post();?>Añadir etiqueas de plantilla paramostrar el contenido del artículo.<?php endwhile; else: ?><p><?php _e(No hay artículos.); ?></p><?php endif; ?> 77
    • Artículos de consultaquery_posts(cat=1&showposts=5);http://codex.wordpress.org/Function_Reference/query_posts 78
    • query_posts()Se usa para controlar qué artículosse muestran en “El Bucle”: Un único artículo en la portada. Todos los artículos de un intervalo de tiempo. (Solo) El último artículo en la portada. Cambiar como se ordenan los artículos. Mostrar artículos de una única categoría. Excluir una o más categorías. 79
    • query_posts()<?php// Mostrar 5 artículos por páginaquery_posts(post_per_page=5);if (have_posts()) : while (have_posts()) : the_post();?>...<?php endwhile; else: ?>...<?php endif; wp_reset_query();?> 80
    • query_posts()<?php// Mostrar los artículos solicitados,// 5 por página, en orden ascendenteglobal $query_string;query_posts( $query_string .&order=ASC&post_per_page=5);if (have_posts()) : while (have_posts()) : the_post();?>... 81
    • query_posts()<?php// Mostrar sólo el artículo con ID=5query_posts( p=5 );if (have_posts()) : while (have_posts()) : the_post();?>... 82
    • query_posts()<?php// Mostrar sólo el adjunto con ID=5query_posts( attachement_id=5 );if (have_posts()) : while (have_posts()) : the_post();?>... 83
    • query_posts()<?php// Mostar artículos de categoría con// slug=category-slug, de 5 en 5query_posts(array(category_name => category-slug, posts_per_page => 5 ));if (have_posts()) : while (have_posts()) : the_post();?>... 84
    • query_posts()La función query_posts() estápensada para modificar sólo el Buclede la página principal.No esá pensada como una forma decrear Bucles secundarios en lapágina.Si queremos crear Bucles separadosfuera del Bucle principal, deberemosusar get_posts() en su lugar. 85
    • get_posts()get_posts(cat=1&numberposts=5);http://codex.wordpress.org/Template_Tags/get_posts 86
    • get_posts()<ul><?phpglobal $post;$args = array( numberposts => 5, offset=> 1, category => 1 );$myposts = get_posts( $args );foreach( $myposts as $post ) : setup_postdata($post); ?><li><a href="<?php the_permalink();?>"><?php the_title(); ?></a></li><?php endforeach; ?></ul> 87
    • Etiquetas de plantillaSe usan para mostrar informacióndinámica en las plantillas, o parapersonalizar el aspecto de las mismas.http://codex.wordpress.org/Template_Tags 88
    • Etiquetas includeSe usan dentro de un fichero deplantilla (p. ej. index.php) paraincluir/ejecutar el HTML/PHP de otrofichero de plantilla (p.ej. header.php)get_header(), get_footer(),get_sidebar(), get_template_part(),get_search_form(),comments_template().http://codex.wordpress.org/Include_Tags 89
    • Etiquetas includeget_header() - Incluye header.php oheader-{nombre}.phpget_footer() - Incluye footer.php ofooter-{nombre}.phpget_sidebar() - Incluye sidebar.php osidebar-{nombre}.php 90
    • Etiquetas includeget_template_part() - Incluye{slug}.php o {slug-nombre}.phpget_search_form() - Incluyesearchform.phpcomments_template() - Incluyecomments.php o wp-includes/theme-compat/comments.php 91
    • body_class()Ayuda a aplicar los estilos CSS deforma más efectiva, al aplicardiferentes clases al elemento<body>.Incluyendo esto en nuestra plantilla: <body <?php body_class(); ?>Obtenemos este HTML*: <body class=”archive category category-foto-diaria>http://codex.wordpress.org/Function_Reference/body_class 92
    • post_class()Como body_class(), ayuda a aplicar losestilos CSS, al aplicar diferentes clases alelemento donde se le incluye.Incluyendo esto en nuestra plantilla: <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>Obtenemos este HTML: <article id="post-99" class="post-99 post type-post category-XYZ tag-XYZ tag-IJK">http://codex.wordpress.org/Function_Reference/post_class 93
    • get_template_part()Permite recuperar elementosespecíficos de la plantilla, conbúsqueda jerárquica.http://codex.wordpress.org/Function_Reference/get_template_part 94
    • get_template_part()get_template_part(loop, index);Busca el fichero loop-index.php enel tema actual.Si no lo encuentra, busca loop.php.Si es un tema hijo y no encuentra losficheros anteriores, repite labúsqueda en el tema padre. 95
    • get_template_part()Todas las “plantillas principales”(archive.php, author.php,category.php, etc) usan estafuncionalidad para encontrar unaplantilla específica para el tipo devista. 96
    • Formatos de artículoMetadato que puede serusado por el tema parapesonalizar la visualizaciónde un artículo.La lista de formatos es fija(y estándar).Nueva característica apartir de WordPress 3.1.http://codex.wordpress.org/Post_Formats 97
    • Formatos de artículoTenemos que usaradd_theme_support() para decirle aWordPress que formatos vamos asoportar. add_theme_support( post-formats, array( aside, gallery ) );Hay que hacerlo en el ficherofunctions.php.Lo ideal es usar el hookafter_setup_theme para hacerlo 98
    • Formatos de artículoTambién tenemos que usaradd_post_type_support() para decirqué tipos de artículos soportan quétipos de formatos. add_post_type_support( page, post-formats ); add_post_type_support( mi_tipo_de_ articulo, post-formats ); 99
    • has_post_format()while ( the_loop() ): if ( has_post_format( gallery ) ) : // HTML para formato galería elseif ( has_post_format( video ) ) : // HTML para formato video elseif ( has_post_format( aside ) ) : // HTML para formato aside else : // HTML para el resto de artículos endif;endwhile; 100
    • get_post_format()while ( the_loop() ): get_template_part(format, get_post_format());endwhile; Si el formato es Link buscamos el fichero format-link.php. Si el formato es Aside, buscamos el fichero format-aside.php. Para artículos sin formato buscamos el fichero format-standard.php. Si no los encontramos, usamos format.php. 101
    • Añadir JavascriptUsar wp_enqueue_script() para añadirnuestros propios scripts o bibliotecas.http://codex.wordpress.org/Function_Reference/wp_enqueue_script 102
    • wp_enqueue_script()<?phpfunction mi_metodo_scripts() { // Script estándar de WordPress. // Ver lista de plugins estándar en // la página de la función wp_enqueue_script(scriptaculous);}add_action(wp_enqueue_scripts, mi_metodo_scripts);?> 103
    • wp_enqueue_script()<?phpfunction mi_metodo_scripts() { // Script propio de mi tema wp_enqueue_script(nuevoscript, plugins_url(/js/nuevoscript.js, __FILE__));}add_action(wp_enqueue_scripts, mi_metodo_scripts);?> 104
    • Etiquetas condicionalesPermiten cambiar qué se muestra, ycomo se muestra, en función de lascondiciones que cumple la página amostrar.http://codex.wordpress.org/Conditional_Tags 105
    • Etiquetas condicionales<?phpif ( is_home() || is_single() ) { // En la portada, o viendo un artículo // individual: ver todo el artículo the_content();}else { // En el resto de casos, sólo un // extracto. the_excerpt();}?> 106
    • Testeo y depuraciónwp-config.php: define(WP_DEBUG, true);http://wordpress.org/extend/plugins/theme-check/http://wordpress.org/extend/plugins/log-deprecated-notices/http://codex.wordpress.org/Theme_Development#Theme_Testing_ProcessPruebas unitarias para tu tema:http://codex.wordpress.org/Theme_Unit_Test 107
    • Referencias adicionalesAllan Cole, Raena Jackson Armitage, Brandon R.Jones, and Jeffrey Way. "Build Your Own WickedWordPress Themes". 2010. SitePoint Pty. Ltd.ISBN 978-0-9804552-9-8http://codex.wordpress.org/Theme_Developmenthttp://yoast.com/wordpress-theme-anatomy/http://codex.wordpress.org/Blog_Design_and_Layouthttp://codex.wordpress.org/Function_Referencehttp://www.evotech.net/blog/2007/06/introduction-to-firebug/ 108