Curso en línea Avanzado de creación de sitios web con WordPress

Transcripción

1 Tema 01 WordPress por dentro (Core) Curso en línea Avanzado de creación de sitios web con WordPress J u l i o S o l e r F a c u l t a d d e C o m u n i c a c i ó n y D o c u m e n t a c i ó n

2 Tabla de contenido 1. COMPONENTES CLAVE DE WORDPRESS FICHEROS FUENTE (FICHEROS CORE) LA BASE DE DATOS DE WORDPRESS 4 2. FUNCIONES DEL CODEX ETIQUETAS DE INCLUSIÓN ETIQUETAS DE INFORMACIÓN DEL BLOG ETIQUETAS DE LISTAS ETIQUETAS DE LOGIN ETIQUETAS DE POSTS ETIQUETAS DE COMENTARIOS EL LOOP DE WORDPRESS 14 EJERCICIOS 17 BIBLIOGRAFÍA Y ENLACES DE INTERÉS

3 1. Componentes Clave de WordPress En WordPress encontramos una serie de componentes que son la parte esencial de un Sitio WordPress. Estos componentes son los ficheros que hacen que todo funcione correctamente y la base de datos, donde residen todos los datos de nuestro sistema. Juntos, estos dos componentes hacen que se genere nuestra página web. Una vez generada la web, obtenemos dos tipos de página: el Área de Administración que tan sólo nosotros como administradores vemos y las páginas públicas que ve el resto del mundo. Vamos a entrar un poco más en detalle sobre estos componentes mencionados. 1.1 Ficheros Fuente (Ficheros Core) Como ya sabemos WordPress está formado por una serie de ficheros escritos en PHP, junto con ficheros en JavaScript y CSS, los cuales componen el paquete de una versión. En total unos 840 ficheros entre fuentes php, js, css e imágenes. En la carpeta raíz, aparte de los ficheros básicos encontramos tres carpetas en las que se divide principalmente el paquete de WordPress: WP-ADMIN: Incluirá todos los ficheros fuente necesarios para la administración de nuestro blog, opciones, permisos, etc WP-CONTENT: Contiene las carpeta Languages con los ficheros de lenguajes para cambiarle el idioma a nuestra instalación, la carpeta Plugins con los plugins que tengamos instalados, la carpeta Themes con los temas que tengamos instalados en nuestro Blog y la carpeta de Uploads donde se irán guardando todos los ficheros que vayamos subiendo al blog. WP-INCLUDES: Lleva dentro ficheros con funciones, scripts y demás elementos auxiliares para la correcta ejecución de la instalación

4 Junto a estas carpetas tenemos otros ficheros destacados cómo: wp-config.php: Fichero que tienen la configuración de nuestro WordPress con la información de acceso a la base de datos y su usuario, las frases aleatorias de seguridad, la codificación de caracteres utilizada, prefijo de la base de datos, etc index.php: Fichero principal que se ejecuta cuando accedemos a la URL de nuestro blog para cargar nuestro theme. Si nos damos cuenta, excepto cinco ficheros, los correspondientes a licencia, readme y xmlrpc, todos los demás comienzan su nombre con el prefijo wp, lo cual nos permite identificar más correctamente qué ficheros pertenecen al Core (ficheros base) de WordPress. Una vez dentro de cada carpeta los ficheros no contienen el prefijo. La mayoría de esos ficheros nunca van a ser utilizados para su edición, algunos raramente se van a editar y cierto conjunto de ficheros estarán en continuo uso sobre todo cuando editamos nuestro theme. 1.2 La Base de Datos de WordPress Para tener WordPress instalado y corriendo correctamente necesitamos configurar una base de datos MySQL. Esto es debido a que todo el contenido de nuestro blog no va a estar en ningún fichero del Core de nuestro WordPress, sino que todo va a estar en la base de datos. Los ficheros del Core de lo que se encargan únicamente es de acceder a dicha base de datos y mostrar su contenido para formar nuestra Web. La base de datos contiene nuestros posts, páginas, revisiones, comentarios, usuarios, la configuración de los plugins y las opciones de nuestra instalación. Para los que no hayan trabajado nunca con esta integración de ficheros y base de datos puede parecer un concepto algo abstracto. No existe un fichero que se pueda ver y consultar con todo el contenido de nuestro blog (excepto si tienes un fichero con una copia de la base de datos y sabes leerlo). En resumen, la Base de Datos es la parte MAS IMPORTANTE de nuestro WordPress y en temas siguientes veremos como hacerla más segura y en caso de catástrofe, cómo recuperar nuestros datos. 2. Funciones del Codex El Codex de WordPress es la página de Documentación oficial sobre el Sistema, la cual podemos encontrar en español en el siguiente link:

5 Esta página contiene todo lo relacionado con WordPress. Podríamos decir que es la Enciclopedia en la que encontraremos todo lo que queramos saber sobre el sistema. No vamos a ver toda la documentación, ya que para eso habría que dedicar un par de cursos más para poder verlo todo a fondo, pero si que vamos a comentar algunas de las funciones internas que vamos a encontrar en el Codex y que a lo largo del curso iremos tocando y usando para personalizar nuestro WordPress. Todas las funciones o Etiquetas de Plantilla del Codex se ejecutan en sentencias de PHP. Para los que nunca han tocado este lenguaje, no preocuparos ya que la dificultad es mínima y lo más normal es que utilicéis la función a convenir entre sentencias de PHP <?php FUNCION?>. En caso de tener que introducir más código se irá explicando cómo se hace. 2.1 Etiquetas de Inclusión get_header Incluye la plantilla de Cabecera contenida por defecto en el fichero header.php del directorio de nuestro theme actual Uso: <?php get_header( nombre );?> Parámetros: nombre Si tenemos varias cabeceras definidas le pasamos el nombre para obtener el fichero header [nombre].php get_sidebar Incluye la plantilla para nuestra Barra Lateral que se encuentra por defecto en el fichero sidebar.php del directorio de nuestro theme activo Uso: <?php get_sidebar( nombre );?> Parámetros: nombre Si tenemos varias cabeceras definidas le pasamos el nombre para obtener el fichero sidebar [nombre].php get_search_form Muestra el formulario de búsqueda definido en el fichero searchform.php de nuestro theme Uso: <?php get_search_form();?> comments_template Carga la plantilla de comentarios del directorio de nuestro theme actual. Uso: <?php comments_template( fichero, separador );?> Parámetros: fichero El nombre del fichero con la plantilla que queremos cargar

6 separador Si queremos separar los comentarios por tipo. Por defecto es false y no es necesario indicarlo. get_footer Incluye la plantilla de Pie de Página de nuestro blog que por defecto se encuentra en el fichero footer.php del directorio de nuestro theme actual Uso: <?php get_footer( nombre );?> Parámetros: nombre Si tenemos varias cabeceras definidas le pasamos el nombre para obtener el fichero footer [nombre].php 2.2 Etiquetas de Información del Blog bloginfo Muestra información sobre nuestro blog, la cual suministramos en nuestro Perfil de Usuario y Opciones Generales del Panel de Administración Uso: < php bloginfo( mostrar );?> Parámetros: mostrar admin_mail atom_url comments_rss2_url description url name Dependiendo de lo que queramos mostrar tenemos las siguientes opciones: del usuario Administrador URL de nuestro Feed Atom URL Feed RSS de Comentarios Descripción de nuestro blog URL de nuestro blog Título del blog stylesheet_directory template_directory Directorio de las hojas de estilo URL del directorio theme activo 1. Mostrar el título de nuestro Blog y su descripción <h1><?php bloginfo( name );?></h1> <h2><?php bloginfo( description );?></h2> Blog del Curso Avanzado de WordPress Seguimos aprendiendo WordPress - 6 -

7 2. Mostrar un link a nuestro Feed <a href= <?php bloginfo( atom_url );?> >Síguenos en nuestro Feed</a> <a href= >Siguenos en nuestro Feed</a> get_bloginfo Igual que la etiqueta anterior, pero lo que nos devuelve al hacer la consulta de la información la podemos almacenar para seguir trabajando con ella en PHP Uso: <?php $info = get_bloginfo( mostrar );?> 2.3 Etiquetas de Listas wp_list_authors Muestra una lista con los usuarios del blog y si son autores de algún post en forma de enlace a sus posts. Opcionalmente muestra el contador de posts de cada usuario Uso: <?php wp_list_authors( argumentos );?> Parámetros: argumentos optioncount exclude_admin show_fullname hide_empty En este caso podemos enlazar varios argumentos añadiendo & entre uno y otro. Número de post publicados del autor Excluir al usuario admin de la lista Mostrar nombre completo del autor No mostrar usuarios sin posts Los parámetros tienen los posibles valores a 0 (falso no activar) o 1 (verdad activar esta opción) Ejemplo: 1. Mostrar el nombre completo del usuario y el número de post publicados <ul> < php wp_list_authors( show_fullname=1&optioncount=1 );?> </ul> Julio Soler (34) Arturo Mellado (23) Marta Sánchez (20) Megan Fox (12) - 7 -

8 wp_list_categories Muestra una lista de categorías como enlaces Uso: <?php wp_list_categories( argumentos );?> Parámetros: argumentos En este caso podemos enlazar varios argumentos añadiendo & entre uno y otro. orderby order style Ordenar categorías alfabéticamente (name), por ID (ID) o por número de posts (count) de cada categoría. Orden Ascendente (ASC) o Descendente (DESC) Formato de lista sin numerar (list) o sin formato show_count Mostrar nº de posts de cada categoría (1) hide_empty Mostrar categorías sin posts (1) exclude include number Excluir categorías (separar ID por comas) Incluir solo las categorías indicadas (ID) Número de categorías a mostrar 1. Ordenar categorías por nombre e incluir los ID 1, 2, 3 y 8 únicamente <ul> </ul> <?php wp_list_categories( orderby=name&include=1,2,3,8 );?> Diseño Programación Web 2.0 WordPress 2. Excluir las categorías 1 y 2 y mostrar el número de post de cada una <ul> <?php wp_list_categories('exclude=1,2&show_count);?> </ul> Diseño (3) jquery (12) Themes (4) WordPress (17) - 8 -

9 wp_list_pages Muestra una lista de las páginas estáticas de nuestro Blog en forma de link a su correspondiente web Uso: <?php wp_list_pages( argumentos );?> Parámetros: argumentos En este caso podemos enlazar varios argumentos añadiendo & entre uno y otro. exclude include Excluir categorías (separar ID por comas) Incluir solo las categorías indicadas (ID) sort_column Ordenar la lista de páginas de diferentes formas: Alfabeticamente (post_title), Orden de Página (menu_order), Fecha (post_date), Identificador (ID) title_li number depth Titulo cabecera de la lista a mostrar Establece el número de páginas a mostrar Nivel de profundidad de las páginas a mostrar: 0 (muestra todas), 1 (solo las padre o superiores), 2,3, (páginas hijas) 1. Mostrar sólo las páginas 5,9 y 23 y titular la lista como WordPress <ul> <?php wp_list_pages('include=5,9,23&title_li=<h2>'. ('WordPress'). '</h2>' );?> </ul> WordPress Themes Plugins Soporte 2. Mostrar 3 páginas superiores <ul> <?php wp_list_pages('number=3&depth=1&title_li=<h2>páginas Superiores</h2>' );?> </ul> Páginas Superiores Blogger Drupal WordPress - 9 -

10 2.4 Etiquetas de Login wp_login_url Devuelve la URL que permite a un usuario hacer login para entrar al sistema Uso: <?php wp_login_url( redirigir );?> Parámetros: redigirir Si indicamos una URL, después de hacer login nos redirige a esa dirección 1. Uso por defecto: <a href="<?php echo wp_login_url();?>" title="login">login</a> 2. Login y volver a la página en la que estaba <a href="<?php echo wp_login_url( get_permalink() );?>" title="login">login</a> 3. Login e ir a la página principal <a href="<?php echo wp_login_url( get_bloginfo('url') );?>" title="login">login</a> wp_logout_url Devuelve la URL que permite salir de WordPress al igual que se hacía con wp_login_url Uso: <?php wp_logout_url( redirigir);?> wp_loginout Es una combinación de las dos funciones anteriores en la que si muestra un link para hacer login, o si el usuario ya está dentro muestra un link para salir. Uso: <?php wp_loginout( redirigir);?> 2.5 Etiquetas de Posts the_id Muestra el ID numérico del Post Uso: <?php the_id();?> the_title Muestra el Título del Post Uso: <?php the_title( antes, despues );?> Parámetros: antes despues Texto HTML a mostrar antes del título Texto HTML a mostrar después del título

11 Ejemplo: <?php the_title('<h3>', '</h3>');?> the_author Muestra el autor del post Uso: <?php the_author();?> the_permalink Muestra la URL del enlace permanente del post Uso: <?php the_permalink();?> <a href= <?php the_permalink();?> ><?php the_title();?></a> <a href= >Tema 1. WordPress por dentro (Core)</a> the_content Muestra el contenido del post actual Uso: <?php the_content( texto );?> Parámetros: texto Si la etiqueta  ha sido insertada en el contenido del post podemos definir qué texto queremos que aparezca en ese punto. 1. Cuando termine de mostrarse el resumen del post aparecerá Leer más <?php the_content('leer más...');?> 2. Mostrar la frase con el título del post <?php the_content("continuar leyendo ". the_title('', ''));?> 3. Elegir donde aparece y donde no <?php?> global $more; // Declaramos globalmente $more. $more = 0; // Establecemos que solo aparezca el contenido hasta <! more >. the_content("leer más..."); <?php?> global $more; $more = 1; the_content(); // Declaramos globalmente $more. // Establecemos que aparezca todo el contenido

12 the_excerpt Muestra un extracto del post (las 55 primeras palabras, pero terminándolo con [ ] en vez de un Leer más Uso: <?php the_excerpt();?> the_category Muestra una lista con los links a las categorías del post Uso: <?php the_category( separador );?> Parámetros: separador Separador que utilizamos para separar las distintas categorías 1. Separar con espacios <p>categorías: <?php the_category(' ');?></p> Categorías: Diseño Themes WordPress 2. Separar con comas <p>categorías: <?php the_category(', ');?></p> Categorías: Diseño, Themes, WordPress 3. Separar con flecha <p>categorías: <?php the_category(' > ');?></p> Categorías: Diseño > Themes > WordPress 4. Separar con punto <p>categorías: <?php the_category(' ');?></p> Categorías: Diseño Themes WordPress the_tags Mostrar un listado de enlaces a las etiquetas del post Uso: <?php the_tags( titulo, separador, terminar );?> Parámetros: titulo separador terminar Titulo de la lista de etiquetas Separador de las etiquetas Lo que va después de la lista

13 1. Lista de etiquetas separadas por comas y al final una línea en blanco <?php the_tags( Etiquetas:,,, < br /> ); Etiquetas: Curso, Diseño, jquery, Web Lista de etiquetas separados por flecha y al final una línea en blanco <?php the_tags( Etiquetas:, >, < br /> ); Etiquetas: Curso > Diseño > jquery > Web Lista no numerada de etiquetas: <?php the_tags( <ul><li>, </li><li>, </li></ul ); Curso Diseño jquery Web Etiquetas de Comentarios comments_number Muestra el numero total de comentarios, Trackbacks y Pingbacks de un post Uso: <?php comments_number( cero, uno, muchos );?> Parámetros: cero uno muchos Texto a mostrar si no hay comentarios Texto a mostrar si hay un comentario Texto para varios comentarios <p>este post tiene actualmente <?php comments_number('sin comentarios','1 comentario','% comentarios');?>.</p> Este post tiene actualmente 23 comentarios comment_author Muestra el autor del comentario Uso: <?php comment_author();?> <div>comentado por: <?php comment_author();?></div> Comentado por: Julio Soler

14 comment_author_ Muestra el mail del autor del comentario Uso: <?php comment_author_ ();?> <div> del autor del comentario: <?php comment_author_ ();?></div> del autor del comentario: comment_type Mostrar solo un tipo de comentario: comentario normal, Trackbacks o Pingbacks. Uso: <?php comment_type('comentario', 'Trackback', 'Pingback');?> Parámetros: Texto que aparece en cada caso según el comentario <p><?php comment_type( 1 Comentario, 1 Trackback, 1 Pingback );?> para <?php the_title();?>: </p> 1 Comentario para Tema 1. WordPress por dentro (Core) Comment_text Muestra el contenido de un comentario Uso: <?php comment_text();?> 3. El Loop de WordPress El Loop o bucle de WordPress es una estructura muy básica (en PHP) que permite mostrar los posts de nuestro blog accediendo para ello a la base de datos. (Lo utilizaremos en el Tema de Diseño de Themes/Apariencia) Tiene un aspecto genérico como este: <?php //El Bucle o Loop if (have_posts()) : while(have_posts()) ; the_post(); endwhile; else; endif;?>

15 Explicando rápidamente el código anterior, lo que hace es que si hay posts para mostrar (have_posts()) entonces mientras (while) los haya, ir uno a uno mostrándolo (the_post()). Visto así puede parecer de nuevo un concepto muy abstracto, pero para los menos entendidos no preocuparos, vamos a ver una explicación paso a paso con un ejemplo mucho más gráfico utilizando las funciones del apartado anterior, indicando primero el código en PHP del Loop y debajo su explicación: 1. <?php if (have_posts()) :?> Comprueba si hay posts publicados en el blog. En caso de que haya se ejecuta lo siguiente que viene debajo (de 2 a 13), sino saltamos a la <?php while (have_posts()) : the_post();?> Ahora mientras haya posts, aunque sólo sea uno, va a ir uno por uno y va a obtener una instancia a ese, o lo que es lo mismo, va a apuntar a los datos de ese post mientras no pase al siguiente de la base de datos, con lo que mientras está apuntando a él, tiene disponible todos los datos necesario sobre el post, los cuales vamos a utilizar seguidamente con funciones. 3. <div class= post id=post <?php the_id();?> > Aquí forma una sentencia en html obteniendo, mediante una llamada a una función, el ID del post con el que estamos trabajando. 4. <h2><a href= <?php the_permalink();?> rel= bookmark title= Enlace Permanente a <?php the_title()?> ><?php the_title();?></a></h2> En este caso va a formar un enlace cuyo link será el enlace permanente a ese post y cuyo texto del enlace va a ser el título del post. 5. <p class= meta > 6. <span>posteado el </span><?php the_time( F js, Y );?> <span>por</span> <?php the author();?> Obtiene la fecha del post y el autor que lo creó. 7. </p> 8. <?php the_content( Leer el resto del artículo );?> Muestra el contenido de la entrada. Si el post ha sido cortado en algún momento por la etiqueta  entonces mostrará hasta ahí para terminar con el texto Leer el resto del artículo. 9. <p><?php the_tags( Etiquetas:,,, <br /> );?> Muestra las etiquetas del post separadas por comas y con una línea en blanco al final de la lista. 10. Posteado en <?php the_category();?> Indica en que categoría ha sido añadido el post

16 11. <?php comments_popup_link( Sin comentarios, 1 comentario, % comentarios );?></p> Muestra el número de comentarios y el texto que aparece según la cantidad. 12. <?php next_posts_link( Antiguas entradas );?> Muestra un enlace a entradas anteriores. (Recordar que un blog va en orden inverso) 13. <?php previous_posts_link( Nuevas entradas );?> Muestra un enlace a nuevas entradas. 14. <?php else :?> 15. <h2>no existen posts </h2> En caso de que no existan posts publicados mostrará el mensaje No existen posts. Es mejor avisarle a la gente de que no hay. 16. <?php endif;?> Todo listo, ha terminado el Loop

17 Ejercicios IMPORTANTE: Los ejercicios han de entregarse dentro del entorno SUMA en el espacio de cada alumno. El fichero con los ejercicios deberá contener las explicaciones y capturas de pantallas necesarias y tener como nombre Tema01_NombreAlumno.pdf (Formato PDF). Ejercicio 1. Rellena el siguiente código (lo que va entre [ y ]) que simula la estructura de una página index.php de un WordPress con sus correspondientes sentencias en PHP que hemos ido viendo a lo largo del tema. <html> <head> <title>[nombre DEL BLOG]</title> <meta name= description content= [DESCRIPCIÓN DEL BLOG] /> </head> <body> <div id= cabecera > [FICHERO DE CABECERA header menu.php] <h1>[nombre DEL BLOG]</h1> <h2>[descripcion DEL BLOG]</h2> </div> <div id= feeds ><a href= [URL DEL FEED DEL BLOG] ></a></div> <div id= cajabusqueda >[FORMULARIO DE BUSQUEDA]</div> <div id= sidebar >[FICHERO DE SIDEBAR sidebar roja.php]</div> <div id= extrasidebar >[LISTA DE 5 CATEGORIAS DE MAYOR A MENOR NUMERO DE POSTS]</div> <?php if (have_posts()) :?> <?php while (have_posts()) : the_post();?> <div class= post id= post [ID DEL POST] > <h2> <a href= [PERMALINK DEL POST] title= Enlace Permanente a [TITULO DEL POST] >[TITULO DEL POST]</a> </h2> <p class= meta > Posteado el <?php the_time( F js, Y );?> por [AUTOR DEL POST] </p> [MOSTRAR Seguir leyendo SEGUIDO DEL TÍTULO DEL POST] <p> [ETIQUETAS SEPARADAS POR, CON EL TITULO Palabras clave: Y AL FINAL un <br /> ] Pertenece a la categoría [CATEGORIAS DEL POST SEPARADAS POR > ] y tiene actualmente [NUMERO DE COMENTARIOS] </p> <?php endwhile; endif;?> [FICHERO FOOTER footer redessociales.php] </body> </html>

18 Bibliografía y enlaces de interés 1. Codex de WordPress en Inglés (más completo) 2. Codex de WordPress en Español Hoja de chuletas de WordPress Digging into WordPress. Chris Coyier, Jeff Starr WordPress for Dummies. Lisa Sabin-Wilson. Tech/dp/