"DIGICAP® adm itios Web con WordPress tracién de Contenido para Indice indice. 1. Introduccion a Wordpres s. Sistemas de Gestién de Contenido 0 CMS, Qué es un Blog ? Qué es WordPress? Caracteristicas de WordPress como aplicacién CMS descargable..... 2. Instalando y configurando WordPress. Requisitos basicos para trabajar con WordPress. Servidor web y servidor web local, Servidor we b. Servidor web local. Instalacién de servidor web local Appserv. Configurando una base de datos para WordPress en servidor de prueb a. Publicacién de archivos WordPress en servidor de prueba con Dreamweave| Configuracién de WordPress desde el navegado Instalacién del idioma espafiol en WordPress. 3, Administracién de WordPress. Ingresar al Dashboard o Tablero. Configuracién de usuarios en WordPress. Opciones generales de WordPress. 4, Generando y publicando contenido con WordPress... Opciones generales de escritur a Tipos de contenidos y modos de edicién. Asignacién de categorias. i ikea ee) Asignacién de tags 0 etiqueta s. 29 Guardar y publicar articulos en WordPress. Visualizar el Blog.. ‘Agregando Vinculo ‘Administrando Elementos Multimedi Insertar Imagenes desde la biblioteca. Insertar una pelicula Flash. (©2009 Cristién Rosa para DIGICAP® versién corregida por DIGICAPS - www.digicap.ct__Pigina I de 42*"DIGICAP® Administracién de Contenido para Sitios Web con WordPress 5, Trabajando con Themes de WordPres s.. Estructura de archivos en WordPress Estructura de un Theme, Trabajando con el index.ph p.. Ingresando cédigo PHP. La Funci6n bloginf Llamando a otros archivos desde inde x. Insertando “El Loop "... Trabajando con header.php.... Trabajando con sidebar.ph p. Trabajando con footer.ph p. Trabajando con style.css. Instalando el them e.. (©2009 Cristién Rosa para DIGICAP® versién corregida por DIGICAPS - www.digieap.cl_Pigina 2 de 42“"DIGICAP: CAPACTAGON DIGITAL n de Contenido para Sitios Web con WordPress 1. Introduccién a Wordpress Ya no es sorpresa decir que Intemet se ha convertido en el acceso a la gran plataforma comercial del siglo XI a través de la Web, red mundial que en el itimo tiempo ha sufrido cambios en la manera que los usuarios la utilizan, potenciado esta Plataforma y el acceso a sus contenidos. Antiguamente cuando se requeria de un sitio web, se necesitaba de los servicios de uno o varios especialistas para que lo desarrollase. Generalmente, estos especialistas, se encargaban de actualizar los contenidos después de hacer el sitio web. Hoy en dia, las tecnologias y las comunidades de desarrolladores de cédigo abierto han ermitido que un usuario comtin pueda crear y administrar un sitio web, sin tener necesarlamente un manejo avanzado en el tema. En este contexto, los “Sistemas de Gestién de Contenido” han empezado a jugar un rol importante, al entregar herramientas para que usuarios sin mayores conocimientos puedan tener su propio sitio web, pudiendo personalizar el contenido y el disefio de estos sistemas. Sistemas de Gestién de Contenido o CMS Los “Sistemas de Gestién de Contenido”, CMS 0 “Content Managment System” en inglés, son aplicaciones web compuestas por un conjunto de archives alojados en un servidor web y conectados a una base de datos que permiten la creacién, administracién y edicién de contenidos en un sitio web de manera descentrada, sin depender de un sélo computador 0 de un administrador Unico, que funcionan completamente en el servidor web a través de una serie de herramientas y editores de! tipo WYSIWYG ' que facilitan su funcionamiento. Estos sistemas también permiten, entre otras cosas, la creacién de usuarios con distintos privilegios para trabajar en el sitio. Como el contenido est siendo almacenado en una base de datos, los CMS se articulan de tal forma que es posible separar el contenido de! disefio, permitiendo al usuario personalizar la apariencia visual del sitio a través del CMS. Existen una gran cantidad de aplicaciones CMS, tanto de cardcter comercial como gratuitas bajo la licencia GPL *. Dentro de este titimo grupo podemos encontrar aplicaciones como Drupal, Joomla y WordPress, siendo este ultimo uno de los mas “WYSIWYG “what you see is what you get” en espafiol "lo que ves es lo que obtienes” htto://es.wikipedia.org/wiki/WYSIWYG * GPL o General Public License http://es.wikipedia.org/viki/GNU_General_Public_License (©2009 Cristién Rosa para DIGICAP® versién corregida por DIGICAPS - www.digicap.cl Pagina 3 de 42“DIGICAP® ami CAPACTAGON DIGITAL stracién de Contenido para Sitios Web con WordPress populares CMS por su répida configuracién para implementar sitios estructurados como blog * éQué es un Blog? Un blog 0 bitécora es una estructura de sitio web en la cual los contenidos se organizan cronoldgicamente clasificados en categorfas. La patabra blog proviene de las palabras web y log, esta uitima significa bitdcora. Por lo general un blog se organiza a partir de una pgina principal, en la que aparecen las Uitimas entradas de contenido escritas por uno 0 mas usuarios, con un menti de navegacién donde estan las categorias. Entre las caracteristicas de un blog estd la posibilidad de permitir comentarios de usuarios suscritos y no suscritos al blog, y la de publicar articulos como un alimentador de noticias en formatos RSS’, RDF 0 Atom?, Io que permite que la gente pueda ser “seguidora” de un blog. Las aplicaciones mas ocupadas para generar blog son Blogger y Wordpress, éQué es WordPress? ‘Tomando lo anteriormente explicado, podemos decir que WordPress es un sistema de gestién de contenidos enfocado a la creacién y administracién de blogs, aunque actualmente podemos encontrar sitios armados en WordPress para otros formatos, tales como: revistas digitales, sitios corporativos y hasta sitios gubernamentales. Existen dos modos de utilizar Wordpress: + WordPress como un servicio web. Con este modo el usuario debe entrar y registrarse en wordpress.com, de esa manera obtiene una cuenta gratuita "Un biog, 0 en espafiol también una bitécora, es un sitio Web periédicamente actualizado que recopila cronolégicamente textos o articulos de uno 0 varios autores, apareciendo primero el mas reciente, donde e! autor conserva siempre a libertad de dejar publicado lo que crea pertinente." Definicién de Blog en http://es.wikipedia.org/wiki/Blog 2RSS es una familia de formatos de fuentes web codificados en XML. Se utiliza para suministrar ‘a suscriptores de informacién actualizadafrecuentemente.” Definicién de RSS en htp://es.nikipedia.ora/wiki/RSS 3 RDF y Atom "La versién 1.0 del lenguaje RSS también es conocida como RDF. Por este motivo algunos feeds o canales RSS estén etiquetados como "RSS 1.0" 0 "RDF" y guardados en archivos con extensién ".rdf". Atom también es un sublenguaje XML. No se corresponde ni se basa en ninguna version de RSS, pero es un formato muy similar a éste y que sobre todo tiene e! mismo objetivo: permitir la distribucién de contenides y noticias de sitios web.” Definiciones en http://www.microsiervos.cornVarchivo/internet/que-es-rss-y-xmb-rdf-atom. html (©2009 Cristién Rosa para DIGICAP® version corregida por DIGICAPS - www.digicap.cl_Pigia 4 de 42“DIGICAP® Administ CAPACTAGON DIGITAL para tener un blog en los servidores de WordPress, teniendo un subdominio de wordpress.com, por ejemplo: “miblog.wordpress.com". En este modo, el usuario tiene todas las funcionalidades de Wordpress como generador de blogs, ppero con limitaciones para configuraciones mas avanzadas. + WordPress como una aplicacién CMS descargable. Entrando a wordpress.org, el usuario puede descargar Wordpress como una aplicacién pera instalar en un servidor web proplo y configurarlo, personalizéndolo de acuerdo a sus propias necesidades, en este modo se centraré este manual Caracteristicas de WordPress como aplicacién CMS descargable Wordpress es un software de cédigo abierto, lo que significa que muchos desarrolladores pueden participar en su desarrollo y mejorario, Word Press esté realizado en base a aplicaciones de servidor programadas en el lenguaje PHP’. Desde la versién 2.7.1 WordPress tiene una serie de mejoras que se mencionan a continuacién: * Facil instalacién, actualizacién y personalizacién de la aplicacién, gracias al uso de plantillas que sirven para establecer a apariencia y estructura del blog mediante widgets, que son complementos de las plantilas para darles un mayor grado de personalizacién y flexibilidad con plugins que expanden las funcionalidades de Wordpress + La capacidad de crear y ordenar articulos y paginas estaticas en categorias, subcategorias y etiquetas ("tags"), * El soporte de miltiples blogs dentro de un mismo servidor con lo opcién de Miiltiples autores 0 usuarios, con perfiles especificos que establecen distintos niveles de permisos para trabajar en Wordpress. + La posibilidad de generar borradores de los articulos para poder salvarlos y rogramar sus fechas de publicacién. + Proteccién del articulo con contrasefia en caso de haber més de un administrador. * Publicacién de articulos y aprobacién de comentarios via E-mail. + La generacién de "permalinks” 0 enlaces permanentes para los articulos que mejoren la indexacién de contenido en buscadores. “PHP es un lenguaje de programacién interpretado, disefiado originalmente para la creacién de paginas web dindmicas.” Definicion de PHP en http://es.wikipedia.org/wiki/PHP n de Contenido para Sitios Web con WordPress (©2009 Cristién Rosa para DIGICAP® versién corregida por DIGICAPS - www.digicap.cl Pagina S de 42“"DIGICAP® n de Contenido para Sitios Web con WordPress + Distribucién de los articulos y de las discusiones a través de RDF, RSS y Atom, * Subir archivos multimedia como imagenes y peliculas Flash via Web. * Un constante esfuerzo por parte de la comunidad de desarrolladores y disefiadores de WordPress para generar plantillas y aplicaciones que cumplan con esténdares recomendados por la W3C !. The World Wide Web Consortium hitp://www.w3.0rg (©2009 Cristién Rosa para DIGICAP® versién corregida por DIGICAPS - www.digicap.cl_Pigina 6 de 42“"DIGICAP: Instalando y configurando WordPress Requisitos basicos para trabajar con WordPress Para hacer correr WordPress es requisito tener lo siguiente: + Un servidor web Apache funcionando. + PHP versién 4.3 0 superior, lenguaje de servidor con el que funciona WordPress. + MySQL versién 4.0 0 superior como motor de base de datos con el que WordPress almacena los datos. Los requisitos nombrados anteriormente estén disponibles en el 99% de los planes de webhosting, El otro requisito es conseguir la aplicacién que se descarga desde Wordpress.org, exactamente en: http://wordpress.org/download El otro paso légico seria cargar via FIP los archivos, dejar que el instalador de WordPress hiciese su trabajo y luego empezar a publicar articulos. Pero si lo que nosotros buscamos es personalizar WordPress, instalando y modificando plantillas, plugins y widgets, es altamente recomendable hacerlo primero en un servidor web local. Servidor web y servidor web local ‘Antes de instalar un servidor web local es importante saber qué es un servidor web. Servidor web Un servidor web es un programa que se efecuta continuamente en un computador, el cual Implementa el protocolo HTTP (HyperText Transfer Protocol) disefiado para transferir los archivos de! sitio web que aloja el computador hacia e! computador del usuario que los solicita utilizando el navegador. En otras palabras, cuando alguien escribe http: //www.digicap.cl en su navegador, lo que hace es realizar una peticién HTTP al servidor web de la direccién de destino. Ei servidor responde al cliente (el ‘computador del usuario) enviando el cédigo HTML de la pagina, que es interpretado y exhibido en la ventana del navegador. n de Contenido para Sitios Web con WordPress (©2009 Cristién Rosa para DIGICAP® versién corregida por DIGICAPS - www.digicap.cl Pagina 7 de 42“DIGICAP® ami tracién de Contenido para itios Web con WordPress Arquitectura bésica del modelo cliente/servidor: el cliente solicita un archive y el servidor lo dewelve, Cuando Ilega el momento en que el usuario entra a un sitio web donde debe realizar tuna consulta a una base de datos, el servidor requiere de un lenguaje que se comunique con ta base de datos y haga la consulta para luego devolver los datos en cédigo HTML que muestre el navegador. sexvooR we Lo anterior es el proceso de una aplicacién del lado del servidor, en otras palabras, son aplicaciones que el usuario no ve directamente, pero que estén funcionando gracias a los de archivos colocados en el servidor web. WordPress funciona de esta manera. Servidor web local Se puede instalar un servidor local o servidor de prueba en el computador que estemos utilizando para trabajar, de esta forma podremos probar el funcionamiento de las aplicaciones web antes de publicar el sitio con WordPress en un servidor web. Cuando se instala un servidor local, se instalan una serie de programas en el ‘computador que permiten tener la misma funcionalidad que tiene un servidor web. (©2009 Cristién Rosa para DIGICAP? versién corregida por DIGICAP® - www.digicap.cl__Pigna Bde 42*"DIGICAP® Administracién de Contenido para Sitios Web con WordPress Instalaci6n de servidor web local Appserv Cuando instalamos un servidor local, instalamos el servidor (Apache), el médulo de servidor que interpretaré un lenguaje que se ejecute en él (PHP) y un motor de base de datos (MySQL), todas estas son aplicaciones independientes de empresas distintas, pero existen instaladores que nos permiten instalar los tres programas de una sola vez. Ocuparemos el Appserv que se consigue bajéndolo desde: http://www.appservnetwork.com Atencién: Appserv instala un servidor local en computadores con Windows, y este ‘manual explicaré cémo instalarlo en esa plataforma, para los usuarios de equipos ‘Macintosh se recomienda la instalacién de MAAMP como servidor de prueba. 1. Al descargar el programa apareceré un instalador con el siguiente icono. 2. Luego se debe hacer doble clic y se inicia el asistente de instalacién del Appserv. Las dos primeras pantallas dan la bienvenida y el acuerdo de licencia, como se muestra en los siguientes gréticos. Welcome tothe AppSen 25.7 Soup wizard Ls 5 5 2. o 2 (©2009 Cristién Rosa para DIGICAP® versién corregida por DIGICAPS® - www.digicap.cl_Pigina 9 de 42= ""DIGICAP® Administracién de Contenido para Sitios Web con WordPress Spee tartan sttaremene iments se | om 3. La pantalla que sigue nos indica donde indica el instalador en C:\AppSev instalarto, preferentemente dejarlo como ‘Pesta tantra encom 4, El siguiente cuadro muestra los componentes que se instalan, Aparte de los tres Componentes tradicionales, se instala un cuarto componente que es muy importante, nos referimos a phpMyAdmin programa que se encargaré de administrar la base de datos con la que se trabaje. (©2009 Cristin Rosa para DIGICAP® versién corregida por DIGICAP®- www.digicap.cl_Pigna 10 de 42,*"DIGICAP® Administracién de Contenido para Sitios Web con WordPress 5. Después de seleccionar todos los componentes, el instalador de AppServ nos pedir configurar apache. Como se muestra en el siguiente gréfico, en el campo que dice Server Name debemos escribir /ocalhost, en el campo Administrator's Email Address podemos colocar un correo ficticio por se un servidor de prueba, por Ultimo en HTTP Port deberos dejar el valor de 80, que es el que viene por defecto. Sew nn meen) i ended 1 6. Por Ultimo, el instalador de Appserv nos pide configurar MySQL, ingresando el password que queremos ocupar y el juego de caracteres a utilizar (UTF-8 Unicode) (©2009 Cristién Rosa para DIGICAP® versién corregida por DIGICAP®- www.digicap.cl_Pigna 11 de 42,= *"DIGICAP® Administracién de Contenido para Sitios Web con WordPress — Sates Pee tr Rattan WS se ‘nase ——— at sos | 7 crm or Wack then) F euice es Ce] oe | 7. Una vez terminada la instalacién, empezaré nuestro computador. Gomploting tho AppSory 25.7 Setup Wicard Bammsct is ie is By Fe ry a> EX > Saleen) Saar} a correr el servidor de prueba en 8, Para comprobar que el servidor de prueba esté funcionando, basta con abrir un navegador y en la barra de direccién escribir http://localhest, asi veremos la pagina de entrada del servidor de prueba como se rmuestra en el siguiente grafico. (©2009 Cristién Rosa para DIGICAP® versién corregida por DIGICAP®- www.digicap.cl_ Pigna 12 de 42,*"DIGICAP® Administracién de Contenido para Sitios Web con WordPress ‘The AppServ Open Project -2.5.8 for Windows heey oetabne anger Vein 238.2 Sth etomatonveman 23 Cone Lng et + eany way ot Wena, Datatane Serve Wit APRON) Configurando una base de datos para WordPress en servidor de prueba Como se mencioné anteriormente phpMyAdmin es un programa que nos permite administrar nuestra base de datos a través de una interfaz de usuario, si no se instala phpMyAdmin la administraci6n de MySQL se tlene que hacer directamente editéndo cédigo, 1. Para instalar WordPress debemos tener ya creada una base de datos. SI vemos la pagina de inicio de nuestro servidor local Appserv, hay dos titulos vinculados al comienzo: - phpMyAdmin Database Manager - PHP Information 2. Al entrar a phpMyAdmin debernos ingresar el usuario que por defecto en el servidor de prueba es root para el administrador y la contrasefia es la que pusimos al momento de configurar MySQL. e ‘foe annie iene rac Br Hoi 3. Una vez que se acepta la contrasefia entramos a la pantalla principal de phpMyAdmin, que estara compuesta por dos columnas: la izquierda nos mostrar las bases de datos existentes y a la derecha las opciones generales de configuracién, busquemos la que dice Crear Nueva Base de Datos, le pondremos un nombre (©2009 Cristién Rosa para DIGICAP® versién corregida por DIGICAP®- www.digicap.cl_Pigna 13 de 42,"DIGICAP: n de Contenido para Sitios Web con WordPress acorde a su contenido, para Iuego presionar el botén Crear (si aparecen las opciones en inglés se puede buscar la opcién de lenguaje y cambiar a espafiol), © Crear nueva base de datos © hwordprbael (Dokejeniento Luego de eso apareceré un mensaje informando sobre la creacién de la base de datos yen la columna izquierda apareceré nuestra base de datos. El cero que aparece a la derecha indica que la base de datos no tiene tablas. Debemos recordar que MySQL es un motor de base de datos que genera base de datos relacionales, lo que significa que el conjunto de la informacién se encuentra agrupada © estructurada en tablas de datos que pueden ser relacionadas entre si. Sobre la creacién de tablas y las formas que estas deben estructurarse, no es necesario Preocuparse ya que de esto se encarga el instalador de WordPress. Publicacin de archivos WordPress en servidor de prueba con Dreamweaver Cuando tenemos creada nuestra base de datos, el siguiente paso es colocar los archivos en el servidor web. El tema es saber dénde se deben colocar nuestros archivos cuando trabajamos con un servidor de prueba. Cuando colocamos en el navegador http://localhost en realidad nos estamos dirigiendo al siguiente directorio de nuestro computador C:\AppServ\wwaw, siendo la carpeta www la asignada por el servidor para colocar los archivos que serén visualizados en el navegador. A continuacién configuraremos en Dreamweaver lo necesario para empezar a trabajar con WordPress. 1. El primer paso es descomprimir el archivo .zip a la cerpeta WordPress. No es obligatorio que se llame asi, pero al abrir a carpeta deben verse todos los archivos, como se muestra en el siguiente gréfico. Una vez hecho esto colocamos la carpeta donde podamos ubicarla mejor para trabajar. (©2009 Cristin Rosa para DIGICAP® versién corregida por DIGICAP® - www.digicap.cl_Pigna 14 de 42,*DIGICAP” Administracién de Contenido para Sitios Web con WordPress O= OB PB is sd 2. El segundo paso es configurar Dreamweaver. Abrimos el programa y definimos un ‘nuevo sitio. En /ocal Info ubicamos la carpeta donde hemos descomprimido WordPress. Stee [soci ecko er: | mers rd et creo) Como no necesitamos un sitio remoto por el momento, dejamos esa categoria intacta. La categoria que tenemos que configurar es “Testing Server” como se muestra en el siguiente grafico. (©2009 Cristidn Rosa para DIGICAP® versién corregida por DIGICAP®- www.digicap.cl_ Pagina 15 de 42,*"DIGICAP® Administracién de Contenido para Sitios Web con WordPress Cee Gs5) En “Server Model” debemos seleccionar la opcién PHP MySQL. En “Access”, como el servidor de prueba esté en nuestro computador, pondremos Local/Network. Por timo, en “Testing Server folder", buscaremos la ruta a C:\AppServ\www, como lo muestra el siguiente gréfico. ‘ics ek ot ef dere x) ery Jotem Ce) Namen See Coe) Para finalizar en URL prefix debemos poner http://localhost/el-nombre-de- nuestra-carpeta/ Esta opcién es necesaria para poder previsualizar los archivos desde Dreamweaver. (©2009 Cristidn Rosa para DIGICAP® versién corregida por DIGICAP®- www.digicap.cl_ Pagina 16 de 42,*"DIGICAP® Administracién de Contenido para Sitios Web con WordPress Una vez completado el proceso la Cache permitird trabajar con la estructura de archivos en el sitio definido. 3. El siguiente paso es abrir el archivo llamado wp-config-sample.php para su configuracién. Al abrirlo desde la vista de cédigo, debemos introducir los valores para las opciones “define” en DB_NAME, DB_USER, DB_PASSWORD y DB_HOST, como se muestra en el siguiente gréfico. YrSgL vecringe - tou oan get fo REE your wee Hoar ++ 4 toe name of the datatane for NoesPren lsefsne(*08 MME", ‘nombreDeLaBsseDeD8tc0") 1 + myo daestare username + [sersne(*De OSE, ‘nombreded: lse auracoUce a HoMERE De USUARIO , QUE EN UN SERVIDOR DE FRUERA ES root 8 bys aecanase [serine ("ne _passwcna’ 4 ty nostnane l4ersne ("0m HOST", ‘iocathore'): Una vez que hemos ingresado los datos que se solicitan, guardamos el archivo y lo renombramos como wp-config.php, este archivo contiene la informacién general para funcionar. 4. Una vez renombrado el archivo debernos colocar los archivos de WordPress en el servidor de prueba. Para esto expandimos el panel de archivos utilizando este botén (ly luego presionames el botén para visualizar el servidor de prueba i! . Para finalizar apretamos el botén de conectar (35 para visualizar el servidor de prueba tal como deberia mostrarse a continuacién. (©2009 Cristidn Rosa para DIGICAP® versién corregida por DIGICAP®- www.digicap.cl_Pigna 17 de 42,DIGICAP Administracién de Contenido para Sitios Web con WordPress ‘CAPAGTAGON DIGITAL Para colocar los archivos en el servidor de prueba, seleccionamos la carpeta raiz del sitio local y con el botén colocar archivos femmes el sitio completo en el servidor de local. ere = Estos pasos son similares a los necesarios para colocar WordPress en un servidor remoto via FTP, seleccionando el botdn Site Files (Archivos del sitio) en vez del botén Testing Server (Servidor de Prueba). (©2009 Cristidn Rosa para DIGICAP® versién corregida por DIGICAP®- www.digicap.cl_ Pagina 18 de 42,*"DIGICAP® Administracién de Contenido para Sitios Web con WordPress Configuracién de WordPress desde el navegador Una vez que ya estén los archivos de WordPress en el servidor de prueba, abrimos un navegador y nos dirigimos a http://localhost/la-carpeta-que-creamos, deber’ aparecer la siguiente pantalla. ee QW worvpress —s ES Los primeros dos datos que nos solicita es Blog Title el nombre del sitio y Your E- mail el correo electrénico de contacto del administrador (debe ser el verdadero ya que permite recuperar la clave ademds de otras atribuciones). Luego se presiona el botén install Wordpress. Listo, hemos instalado Wordpress, (©2009 Cristin Rosa para DIGICAP® versién corregida por DIGICAP®- www.digicap.cl_Paigna 19 de 42,*"DIGICAP® Administracién de Contenido para Sitios Web con WordPress = a (QVworvrress A final de la instalacién nos daré el nombre de usuario y la contrasefia. La contrasefia se genera aleatoriamente. Es necesario anotaria para luego modificarla en las opciones de administracién. Tnstalacién del idioma espafiol en WordPress Dado a la rapidez con que salen las versiones de WordPress, muchas veces las versiones en espafiol quedan rezagadas por la demora de traduccién, lo hace que la disponibilidad e instalacién en inglés sea mayor. Si uno instalé WordPress en Inglés y quiere pasar a espafiol, basta con bajar el instalador en castellano, reemplazar todos Ios archivos menos el wp-config.php. Una vez reemplazado los archivos, abrimos wp-config.php y agregamos en la linea de cédigo correspondiente al dato WPLANG se indica el valor es_ES como se muestra en el siguiente gréfico. Braivest, _§ carreapeaning Wf (©2009 Cristiin Rosa para DIGICAP® versién corregida por DIGICAP®- www.digicap.cl_ Pagina 20 de 42,""DIGICAP® Administracién de Contenido para Sitios Web con WordPress 3. Administracién de WordPress Ingresar al Dashboard 0 Tablero Una vez instalado WordPress, lo que sigue a continuacién es configurar las opciones que presenta, para eso vamos a http://localhost/nombre-de-la-carpeta/wp- login.php ahi entraremos al administrador de WordPress con el usuario admin y la contrasefia que el sistema generé para nosotros. QV worvrress Una vez dentro entramos al Dashboard. £1 Dashboard es el panel general de administracién que esté organizado en dos columnas: La columna izquierda muestra las opciones de administracién y la columna derecha las Ultimas actividades realizadas en el sitio y las tiltimas actualizaciones existentes, (©2009 Cristisn Rosa para DIGICAP® versién corregida por DIGICAP®- www.digicap.cl_ Pagina 21 de 42,*"DIGICAP® Administracién de Contenido para Sitios Web con WordPress Desde la columna derecha del Dashboard un administrador puede ver el estado de avance de los articulos, los Ultimos comentarios de usuarios, incluso suscritos como anénimos. Una de las caracteristicas nuevas que tiene el Dashboard desde la versién 2.7 es la capacidad de crear un articulo de manera répida a través de la opcién Quick Press. Configuracién de usuarios en WordPress Lo primero que debemos hacer dentro del dashboard es ir a la opcién Users 0 Usuarios. Al hacer clic vemos que aparece la lista de los usuarios que estan registrados. Por defecto sdlo aparece el admin que es el usuario que se crea con WordPress, aprovechamos la oportunidad de personalizar nuestra contrasefia. Al hacer clic sobre el recuadro de imagen aparece el mensaje de editar, presionamos y salen los detalles de las Opciones Personales. Users ASN = a3 En Profile u Opciones Personales podemos ingresar nuestros datos personales, datos de contacto y el nickname que queremos que aparezca al momento de publicar el Post. ‘Al final de las opciones estd el recuadro que nos permite cambiar nuestro password, Una vez cambiado el password actualizamos nuestro perfil. Para crear nuevos usuarios vamos al panel de usuario a la opcién add new o afiadir, al presionar nos sale un pequefio formulario para ingresar los datos basicos: Nombre de usuario (User name), nombre (First name) y apellido (Last name) correo, website (si se tiene) y por Uikimo el rol que tiene el usuario dentro de wordpress. (©2009 Cristin Rosa para DIGICAP® version corregida por DIGICAP®- www.digicap.cl_Pigna 22 de 42,*"DIGICAP® Administracién de Contenido para Sitios Web con WordPress @® Add New User Un usuario puede adquirir los siguientes roles: ‘Subscriber 0 Suscriptor: sélo puede entrar al Dashboard para ver las novedades y editar su propio perfil Contributor 0 Colaborador: Puede crear borradores pero no puede publicar. Autor: Puede publicar articulos 0 posts creados por él Editor: Puede editar los articuls de todos los usuarios (incluso los del Administrador), puede gestionar las categorias, los enlaces, comentarios y paginas, pero no puede instalar extensiones ni crear usuarios. Administrador: tiene control total del manejo y configuracién de WordPress, Opciones generales de WordPress Las opciones generales 0 General Settings nos permiten personalizer aspectos generales del sitio. Basta con cliquear el botén Settings para entrar y personalizar. (©2009 Cristin Rosa para DIGICAP® versién corregida por DIGICAP®- www.digicap.cl_Pigna 23 de 42,*"DIGICAP® Administracién de Contenido para Sitios Web con WordPress + El Titulo del Blog: que es el nombre de nuestro sitio 0 blog. Normalmente aparece en el encabezado del sitio. + Descripcién corta o Tag Line: Es una breve descripcién que aparece después del titulo de tu blog. Se trata que sea una frase que complemente el titulo general + Direccién de email: Aqui se incluye el correo del administrador del blog. Se utiliza solo con fines administrativos y no aparece disponible para los visitantes del sitio. + Direccién URL del blog y de Direccién URL WordPress: Especifica dénde se instala WordPress y la URL de entrada del Blog, por lo general siempre son la misma ruta y se genera de manera automética. + Membrecia: Seleccionar si los usuarios deben registrarse e identificarse para comentar. Al activar esta opcién uno puede definir el tipo de rol del usuario, + Zona horaria: Define el uso horario del blog, importante cuando se tiene ‘muchos autores y se programan las publicaciones + Formato de fecha y formato hora: permiten configurara como se generan las fecha y horas importante al momento de desplegar cuando se publica un articulo. (©2009 Cristidn Rosa para DIGICAP® versién corregida por DIGICAP®- www.digicap.cl__Pigna 24 de 42,“"DIGICAP® n de Contenido para Sitios Web con WordPress + Las semanas empiezan en: Es el primer dia de la semana que debe aparecer en el calendario, por defecto empieza con lunes. Después de configurar estas opciones selecciona el botén “Guardar cambios” al final de la pagina, Una vez configuradas las opciones generales de WordPress podemos comenzar a generar articulos. (©2009 Cristidn Rosa para DIGICAP® versién corregida por DIGICAP®- www.digicap.cl_Pagna 25 de 42,"DIGICAP® Administ n de Contenido para Sitios Web con WordPress 4. Generando y publicando contenido con WordPress Opciones generales de escritura Generar contenido en Wordpress es un proceso relativamente facil, antes de empezar a escribir nuestro contenido es prudente ver las opciones de escritura de WordPress, esto a través de de una interfaz de formulario que se puede personalizar. Desde el Dashboard en el panel de Settings se selecciona la opcién Writing o Escritura (| Writing Settings ‘ize of the post box : im marti Conver emoticons ihe ic) and Soto grape on lay By WerePree shoud core inva nested XAT. auto Defauit Post Category ore si] Desde el panel Writing Settings podemos configurar las siguientes opciones: + Size of the post box (Tamafio de la caja de texto): Aqui se puede configurar el tamaiio del espacio del drea de texto de nuestro formulario, que se utiliza para redactar los articulos. El tamafio predeterminado es de 10 lineas. + Formatting (Las opciones de formato): Esta opcién permite a WordPress convertir caracteres en emoticons y corregir XHTML Invalido si copiamos nuestro texto directamente desde una pagina web, + Default Post Category (Categoria Predeterminada): Esta opcién asigna tuna categoria predeterminada para los posts en caso que el usuario no haya seleccionado una. Una vez que hemos personalizado esta categoria vamos a escribir contenido de paginas, de articulos o post. + Las Paginas: Una Pagina en WordPress cumple la funcién de mostrar el contenido estatico en el Blog o sitio web, por lo general se ocupa para secciones como “Acerca de” o “Quiénes Somos”, + Los Articulos © Post: son la forma central de generacién de contenidos organizados en orden cronolégico se pueden asignar en categorias. La categoria, @ diferencia de las paginas, son secciones dindmicas donde se muestran los articulos de dicha categoria. (©2009 Cristin Rosa para DIGICAP® versién corregida por DIGICAP® - www.digicap.cl_Pigna 26 de 42,*"DIGICAP® Administracién de Contenido para Sitios Web con WordPress Tipos de contenidos y modos de edicién Para comenzar a escribir, basta ir desde el Dashboard al panel de Post o Entradas y seleccionar la opcién add new o crear. Si fuese una pagina habria que ir al panel pages y poner add new 0 crear. Edit Add New ES Togs tegones AI cliquear la opcién entramos a la interfaz para crear articulos, como lo muestra la imagen @ continuacién. 5 Add New Post Las Mascotas: una infinita compafia Uploader we Mewar Birla «> -<9>0 themina mascotaproviene del fanchs mascote, v4 aca 3 parton o animal que por {eaar buena fortuna, sn de taimi. “

cs todas as socedades humans as mascotassuponen un fenbmena soca muy agua. En la mayor Asignaci6n de categorias Cuando tenemos listo el articulo hay que asignarle una categoria, para esto vamos al recuadro Categorias que esta en la esquina inferior de la pantalla, Categories NI Categories Most Used ( uncategorzea Mascon (©2009 Cristién Rosa para DIGICAP® versién corregida por DIGICAP®- www.digicap.cl_ Pagina 28 de 42,= *"DIGICAP® Administracién de Contenido para Sitios Web con WordPress Al crear una nueva Categoria podemos generarla como: una nueva, una pariente 0 subcategoria de otra. Un articulo puede tener mas de una categoria, si no se le asigna tuna categoria el articulo queda con la opcién predefinida en las opciones de escritura. Asignacién de tags o etiquetas En blogging un tag 0 etiqueta es una palabra 0 concepto que se asigna a un articulo que engloba la idea del articulo. Las etiquetas son transversales a las categorias, y se tienden a desplegar por orden de popularidad, en otras palabras, por cuantas veces una misma etiqueta ha sido ocupada en distintos articulos. Tags ‘mascotas, compafiia Aas ‘Choose from the most popular taas No tags found! Guardar y publicar articulos en WordPress Cuando se termina de escribir un articulo hay dos pasos @ seguir: guardarlo como un borrador o publicario. Cuando decidimos guardarlo en borrador lo hacemos para seguir trabajando 0 para que otro usuario lo corrija antes de publicarlo. Al Momento de publicar, podemos elegir tuna publicacién inmediata 0 programar una fecha de publicacién, (©2009 Cristidn Rosa para DIGICAP® versién corregida por DIGICAP®- www.digicap.cl_Pigna 29 de 42,*"DIGICAP® Administracién de Contenido para Sitios Web con WordPress Visualizar el Blog, Para visualizar basta con ir a view site o tipiar la URL del servidor de prueba. Para poder configurar cudntos articulos podremos ver por pagina, volvemos al Dashboard, al panel Setting a la opcién Reading o Lectura. + Front page Displays: define si lo que aparece en la pagina principal son los Lltimos post o una pagina estética, + Blog pages show at most: Perrrite definir cudntos post o articulos aparecerén en la pagina principal y en las categorias. + Syndication feeds show the most recent: Permite definir cudntos post o articulos apareceran en un feed de noticias. WY Reading Settings ron uae does Poe = pon, Season ete senha (10 re Agregando Vinculos Como en todo sitio, es necesario colocar vinculos a otros sitios de interés, WordPress puede hacerlo, basta con ir al panel de enlaces y crear enlaces 0 editar los que vienen (©2009 Cristiin Rosa para DIGICAP® versién corregida por DIGICAP®- www.digicap.cl_ Pagina 30 de 42,a *"DIGICAP® Administracién de Contenido para Sitios Web con WordPress con la instalacién. Al igual que los articulos, WordPress puede agrupar los vinculos en categorias, como se muestra en el siguiente grafico. cates 8 og Administrando Elementos Multimedia Desde las versiones mas recientes de WordPress hay un concepto llamado “Media brary”, en la versién espafiol “Biblioteca de objetos”, que nos permite administrar las végenes, peliculas Flash, documentos PDF, etc. Para empezar la administracién, basta con ir al panel Media (Objetos en castellano) y seleccionar Add New: } Dashboard (9) Upload New Media choose ies to a ) You are using the Flash uploader. Problems? Try the Browstr uploader instead, After a fle has been uploaded, you can add tiles and descriptions Dentro de las opciones buscamos Select Files para subir el archivo que queremos colocar. Una vez seleccionada la imagen, aparece un cuadro de didlogo que nos pide agregar datos relacionados al archivo que hemos subido, en el caso de las imagenes nos pide los siguientes datos: Title (titulo), Caption (leyenda) y Description (descripcién). 1 Caption se utiliza como texto alternativo, agregando su contenido en el atributo alt de la etiqueta . El contenido de Description apareceré visible bajo la imagen. (©2009 Cristién Rosa para DIGICAP® versién corregida por DIGICAP®- www.digicap.cl__Pigna 31 de 42,BIGICAP? Administracién de Contenido para Sitios Web con WordPress Hide ie + bby Gielen Flubby en su nuevo hogar Description Una vez que se ingresan los datos, se guardan y quedan en nuestra Biblioteca de objetos. Insertar ImAgenes desde la biblioteca ‘Ya hemos subido nuestras imagenes y podemos insertarlas en los articulos 0 paginas, para ésto vamos a editar el articulo, yendo al panel Post o Entrada, para asi seleccionar el articulo y editarlo. Una vez ahi, podemos ver en la barra de iconos, sobre el recuadro donde se ingresa nuestro texto, el icono con la etiqueta “Add an Image" para agregar una imagen, como se muestra en el siguiente gréfico. Upload/insert fm) [ s Bor a : (©2009 Cristién Rosa para DIGICAP® versién corregida por DIGICAP®- www.digicap.cl_ Pagina 32 de 42,"DIGICAP® nami stracién de Contenido para itios Web con WordPress Cuando seleccionamos la opcién Add an Image, se abre un recuadro dando la opcién de colocar nuestra imagen desde: el computador, desde una URL, 0 desde la biblioteca. From Computer From URL Media Library ‘A Types | images Show all dates ¥) is ‘A| seleccionar desde la biblioteca de Imagenes y presionar Show, se desplegard la lnformacién de la Imagen més las opciones de “Alineamiento” (Alignment) y “Tamafio" (Size) con una serie de opciones que nos permiten redimensionar la imagen en tres tamafios predeterminados a parte del original. La opcién Size no redimensiona ala fuerza, sino que genera una nueva imagen remuestreada. Una vez ajustadas esas opciones presionamos el botén insert into Post. ion ite vr * bony Description _—_generaimente due ah Men © None 7 taht OM Canter OoM Right © Thumbeail © Meum Large Fall sie = asoxiso) “(00%285) (02s 768) O72 2304) ret Pen alte Si queremos cambiar los valores que adquiere la imagen al redimensionarse, ponemos Iral panel de Settings a la opdién Media. (©2009 Cristin Rosa para DIGICAP® versién corregida por DIGICAP®- www.digicap.cl_Pagna 33 de 42,*"DIGICAP® Administracién de Contenido para Sitios Web con WordPress Insertar una pelicula Flash Insertar una pelfcula Flash, en su archivo SWF — ", tiene una mayor comipejidad insertar una imagen como veremos a continuacién. 1. Para insertarlo hay que ir a las opciones avanzadas de edicién del post que aparecen presionando el siguiente botén |= 2. Luego buscamos el botén de Insert/edit embedded media como se muestra en la siguiente imagen. roo -) Ul mA Ge 2 (Ege eo) |e 3, Luego apareceré un cuadro con dos pestafia: + La pestafia General que nos pedir insertar la URL donde est la pelicula Flash y las dimensiones que debe tener. + La pestafia Advance o Avanzado mostraré opciones més especificas de la pelicula Flash. Luego de definir las opciones debe presionarse el botén Update para que se inserte la pelicula Flash en el post. a ey a "SWF deficin en http://en.wikipedia.org/wiki/SWF que (©2009 Cristidn Rosa para DIGICAP® versién corregida por DIGICAP®- www.digicap.cl_Pigna 34 de 42,"DIGICAP: 5- Trabajando con Themes de WordPress Ya tenemos gran parte de nuestro contenido listo, ahora el siguiente paso es cambiar el aspecto visual, a través del uso 0 creacién de plantillas para Wordpress, que en su terminologia actual se le conoce como Themes, Estructura de archivos en WordPress Antiguamente existia la plantilla de WordPress que consistia basicamente en: + Unarchivo index.php que contenia la pagina estructurada en XHTML *, con una serie de scripts en PHP, que llamaban a la base de datos de WordPress para generar el contenido, + Unarchivo style.css con todas las reglas de estilo para la plantilla, + Unarchivo comments.php que se llamaba cuando se queria comentar 0 leer los comentarios, La estructura de WordPress era como se muestra en el siguiente gréfico. D- reer pro i> Debido a la rigidez de esta estructura se reemplazé por el actual esquema de los ‘Themes, Desde Ia versién 1.5 de WordPress, el archivo index.php se subdividid en varios archivos para una mayor modularidad y personalizacién a través del tablero de WordPress. Entonces un Theme de WordPress se podria entender como un conjunto de plantillas que trabajan juntas para generar la interfaz gréfica del sitio, Un Theme modifica e! modo en que el sitio es mostrado, siendo capaz de configurarse hasta por secciones especificas si es necesario, lo que no se podia hacer con la plantilla, antigua por la falta de modularidad. XHTML definicién en http://es.wikipedia.org/wiki/XHTML (©2009 Cristin Rosa para DIGICAP® versién corregida por DIGICAP®- www.digicap.cl_Pagna 35 de 42, n de Contenido para Sitios Web con WordPressRIGIGAP Administracién de Contenido para Sitios Web con WordPress ‘APAGTAGON DIGITAL Estructura de un Theme Un Theme puede adquirir diferentes estructuras dependiendo de los grados de complejidad y funcionalidad de nuestro sitio. La estructura mas comiin, aunque no necesariamente la més simple, es la que se muestra en el siguiente gt En esta estructura los archivos funcionan de la siguiente forma: ‘header. php es e! encabezado de la pagina, que también puede contener la etiqueta head del XHTML. sidebar. php es la navegacién que contendra los links de paginas estaticas y categorias creadas en nuestro block, tales como: el calendario, los archivos, etc. footer. php es el tradicional pie de pagina. index.php es el archivo que contiene a todos los demas, donde se coloca e! cédigo para el contenido principal. comments. php para los comentarios. style.css el Ia hoja de estilo. (©2009 Cristisn Rosa para DIGICAP® versién corregida por DIGICAP®- www.digicap.cl_Pagna 36 de 42,SRIGICAB? Administracién de Contenido para Sitios Web con WordPress ‘Trabajando con el index.php El archivo index.php es el archivo que muestra los contenidos de otros archivos PHP, ppero también es el archivo donde se genera el contenido principal del sitio. En el index esté el esqueleto XHTML del Theme en general. Empezaremos por generar el esqueleto, para eso abrimos un nuevo documento con Dreamweaver y generaremos 5 divs con los nombres de “contenedar”, “encabezado", “navegacion", “contenido_principal” y “pie”. Para ayudarnos, colocamos comentarios en HTML como lo muestra la imagen a continuacién. <:DOCTYPE esl PUBLIC *-//W3C//DID XHTML 1.9 Teansitional//EN* I “scce: seed sorgrtu enc /o/saia-veanaiedonal-dea"> SIMI tent eatnesnncepc ees socg/i209/aal > | t neva hetp-equiv="Content-Type” content="text/htsl; charset=ute- Sollee cittecatities tcmeseeretti> proers al) pees cf o EMEIEZA EL EACAE I cise tovenpnasecns cases f Q eeeteca 1a uae P30 case sa-rnavegecion"> 2 : a gaceoe ad eke BURA atv icmpier>saive 2B) caso , la del titulo del ht, entre otras cosas, + bloginfo(‘html_type'): Define qué tipo de HTML se usa. + bloginfo(‘charset’): Define el juego de caracteres. + bloginfo('name'): Devuelve el nombre del sitio, + bloginfo('description’): Devuelve la descripcién del sitio. + bloginfo('stylesheet_url"): Devuelve la ruta de la hoja de estilo. Veamos algunos de los cédigos que se usan en index.php con bloginfo en el siguiente grafico. Baevavcone Llamando a otros archivos desde index Para llamar a los otros archivos, existe una serie de funciones asignadas como veremos a continuacién. (©2009 Cristién Rosa para DIGICAP® versién corregida por DIGICAP®- www.digicap.cl_Pagna 38 de 42,*"DIGICAP® Administracién de Contenido para Sitios Web con WordPress jernavegacicn”><7pop get_eidebar()? 7> pe/dive Tal como Jo indican sus nombres, get_header() llama al archivo header.php, get_sidebar() llama al archivo sidebar.php y get_footer() footer.php Insertando “El Loop” Dentro de la terminologia de WordPress, el Loop es la funcién encargada de mostrar los contenidos, se le conoce como “the Loop" ya que la funcién consiste en crear un Ciclo que permite crear los articulos. La dimensién y complejidad del loop va @ depender de cudntos elementos queramos mostrar, para entender la ldgica insertaremos la secuenca més sencilla como se muestra en el siguiente grafico. contenide prinespal"> En esta secuencia la funcién While mostrada en color verde, dice que mientras hayan post en la base de datos, el loop generaré el titulo del articulo a través de la funcién the_title() y el contenido a través de la funcién the_content(). Hay que recalear que de esta forma el contenido se genera como lo hemos ingresado en el cuadro de edicién del dashboard. En el caso del titulo aparece como texto plano, y para darie formato hay que asignarle las respectivas etiquetas XHTML alrededor de las lineas del PHP. (©2009 Cristién Rosa para DIGICAP® versién corregida por DIGICAP®- www.digicap.cl_Pigna 39 de 42,*"DIGICAP® Administracién de Contenido para Sitios Web con WordPress Si queremos ver el loop de forma completa, podemos ver el que esti en el archivo index.php de! theme “default” de WordPress. ‘Ya conocemas los cédigos necesarlos en el index.php, ahora veremos el cédigo en los. otros archivos. ‘Trabajando con header.php El archivo header.php va a contener la informacién del encabezado de nuestra pagina. En este caso insertaremos los valores que se requieren para mostrar el titulo. ‘" > Como se muestra en el gréfico anterior, hay cédigos que estén dentro de la etiqueta hi (titulo principal) como la etiqueta que permite indicar el vinculo gracias a la funcién bloginfo(‘url’) que devuelve la url del sitio. ‘Trabajando con sidebar.php El sidebar es el archivo donde se despliega la navegacién general del sitio, este archivo puede presentar las lineas de cédigo que se muestran en el siguiente grafico. Todos los cédigos mostrados en sidebar vienen ya vinculados y con el elemento “I anidado, es por eso que a cada linea se le coloca alrededor la etiqueta ul. + wp_list_categories(‘show_count=1&title_I categorias del sitio. genera todas las, + wp_get_z pasados. irchives(‘type=monthly’): genera los archivos de articulos + wp_list_pages('sort_column=menu_order&depth=18title_li todas las “paginas” o secciones del sitio. Trabajando con footer:php £1 archivo footer. php, tal como lo indica su nombre, sirve para colocar el pie de pagina. Este ple puede ser solo el nombre del sitio y su vinculacién con WordPress, mas los vinculos principales del sitio 0 el nombre del creador del sitio. En el siguiente grafico veremos un pie de pagina simple. genera (©2009 Cristin Rosa para DIGICAP® versién corregida por DIGICAP®- www.digicap.cl__Pigna 40 de 42,= *"DIGICAP® Administracién de Contenido para Sitios Web con WordPress Wwerdpresa.crg/" Need pep the author ("eamelit); P

Al ya tradicional bloginfo('name’) agregamos la funcién the_author(‘namef’ funcién que devuelve el nombre completo del autor del blog. ‘Trabajando con style.css El archivo style.css estar nuestra hoja de estilo y va a depender de cémo nosotros queramos armar nuestro sitio. a informacién relevante para el buen funcionamiento en el tablero es una serie de comentarios que deben estar al principio, como los que aparecen a Ya tenemos lo necesario para empezar a armar el theme, ahora el resultado depende de qué queremos obtener con el proyecto, cual es nuestro grado de manejo de CSS y cuanto profundizaremos con la documentacién oficial de WordPress. Tnstalando el theme Una vez que hemos acabado de armar el theme, este debe estar colocado dentro de la carpeta themes que esta dentro de la carpeta wp-content. sidebar. php 5 (©2009 Cristian Rosa para DIGICAP® versién corregida por DIGICAP®- www.digicap.cl_ Pagina 41 de 42,arRICARe Administracién de Contenido para Sitios Web con WordPress Luego de subir nuestra carpeta al servidor vamos a la zona de administracién, a la seccién que dice Appearance 0 Aspecto en castellano. uit EE Manage Themes Luego hacemos clic sobre el vinculo del theme que queremos asignar, se abriré un recuadro con un preview del theme a asignar, como se muestra a continuacién. Si estamos interesados en asignar la plantilla simplemente vamos a la esquina superior derecha para presionar el botén Activate theme (aparece el nombre del theme que tengamos aplicado), y listo, la plantilla ya quedé asignada. (©2009 Cristiin Rosa para DIGICAP® versién corregida por DIGICAP®- www.digicap.cl_Pigna 42 de 42,"DIGICAP® lira ‘Anexo 1: Uso de Widgets y Plugins en WordPress Indice Anexo 1: Uso de Widgets y Plugins en WordPress fndice Anexo 1... ie Uso de Widgets en WordPress... Qué es un Widget. Los Widgets en WordPress. Configurando un Widget... Colocando el cédigo para usar Widgets en un tema propio. Uso de Plugins en WordPres 5... Formas de instalacién de plugin s.. Cédigos para hacer funcionar los plugins en nuestros temas. (©2010 Cristian Rosa para DIGICAP® versién corregida por DIGICAP*-www.digicap.cl_ Pagina 1 de S“"DIGICAP® APACTAGOM DIGITAL Anexo I: Uso de Widgets y Plugins en WordPress Uso de Widgets en WordPress éQué es un Widget? Un Widget es una pequefia aplicacion, que entre sus objetivos esté el dar un fécil acceso, manejo e informacién a una serie de funciones de todo tipo para el usuario. Por lo general, suelen reunirse varios Widgets en un elemento de interfaz gréfica, como por ejemplo: una ventana, una barra de tareas o una caja de texto. Los Widgets en WordPress En el caso de WordPress los Widgets son parte del conjunto de opciones configurables que todo Theme o Tema puede tener. Esto permite que el usuario pueda configurar el despliegue de una serie de médulos de informacién en una zona definida del tema, como por ejemplo: las categorias, las paginas, los articulos mas leidos, etc. WordPress viene con un conjunto de Widgets para que el usuario pueda configurar y ademas permite instalar otros Widgets medinte plugins. Los plugins son desarrollados por particulres 0 empresas y estan disponibles en la Web. En www.wordpress.org est la mayor cantidad de plugins disponibles. Configurando un Widget Para configurar los Widget de WordPress hay que ir al panel Theme o Apariencia donde encontramos el botén Widgets. Bi Apariencs Pops @ Umuatios Tl Herramientas Austen La pantalla que aparece nos muestra en la columna izquierda todos los Widgets posibles con una breve descripcién de su funcidn. Para activar el Widget, se debe arrastrar el recuadro deseado con el mouse hacia él 0 los paneles de la derecha, y luego es posible configurar sus opciones. (©2010 Cristian Rosa para DIGICAP® versién corregida por DIGICAP*-www.digicap.cl Pagina 2. de S"DIGICAP® een ‘Anexo 1: Uso de Widgets y Plugins en WordPress A Widgets am wo tin Dc cnnn om) eae rere Arrastrar (ecsacaane ———} en serena te Cuando se guarda la configuracién del Widget, el médulo aparecera en la interfaz del sitio publicado. Es importante aclarar que, gran parte de los temas disponibles para WordPress estén armados de tal manera que al activar los Widgets se borran los médulos visualizados en forma predefinida. Colocando el cédigo para usar Widgets en un tema propio Para poder utilizar Widgets en un tema que hemos creado, debe sequirse una serie de pasos, 1. Primero debe existir el archivo index.php ya relacionado con sidebar.php (explicado en el capitulo 5 del manual). 2. Luego se debe crear un archivo llamado functions.php para contener el cédigo con la funcién que llama a los Widgets, como aparece a continuacién: ‘

', ‘after_Widget' => ‘

’ "before_title' => '

'', ”: ) > =" tituloWidget">' (©2010 Cristian Rosa para DIGICAP® versién corregida por DIGICAP*-www.digicap.cl Pagina 3. de S“"DIGICAP® (APACTAGOR DIGITAL Anexo I: Uso de Widgets y Plugins en WordPress. Lo que hace este cédigo es llamar a la funcién register_sidebar() que es la que llama a los Widgets. Notaran que dentro de esta funcién hay unos parémetros con el nombre de before y after. Las declaraciones ‘before_Widget' y ‘after_Widget’ permitirén ingresar cédigo HTML para dar forma a la caja que contiene el Widget. Las declaraciones ‘before_title’ y ‘after_title' sirven para asignar la etiqueta que muestra el titulo del Widget. 3. Ahora debemos ir al archivo sidebar.php y agregar el siguiente cédigo: Después de estos pasos se activan los Widgets en nuestro tema para poder utilizarlos. Es importante aclarar que si no se disponen estos cédigos, el tema no puede llamar a los Widgets. (©2010 Cristian Rosa para DIGICAP® version corregida por DIGICAP*-www.digicap.cl Pagina 4 de S"DIGICAP® (APACTAGON DIGITAL Anexo I: Uso de Widgets y Plugins en WordPress Uso de Plugins en WordPress Los plugins son aplicaciones que se instalan en WordPress para darle més funcionalidad. La diferencia entre los plugins y los Widgets, es que los Widgets tienden a funcionar de manera similar en su configuracién y solo permiten cambios en una zona acotada de la interfaz del sitio, en cambio los plugins presentan distintas formas de configuracién y un amplio rango de modificacién en WordPress. Formas de instalacién de plugins Hay 3 formas de instalacién de plugins en WordPress, dos de las cuales son a través del Dashboard o el escritorio. El primer paso es ir al panel plugins y seleccionar Afiadir Nuevo. & Plugins sins -Afiadir nuevo Editor 1. Una opcién desde pantalla de instalacién es a través de un buscador que se conecta con el sitio WordPress haciendo la descarga y la instalacién directamente. A continuacién se muestran los pantallazos para aclarar los pasos de instalacién. Pantalla para buscar pluggins Instalar plugins cent po admin say tustcas some COMMENES axes amt Saat fed tun ually Google image images wast suc: is lIKS maa page miss stn eumas DIUGIN POSt posts 13s seo casas SIGDAF sca acs exes sts as twitter wan Widget woos warts Pantalla Resultados de la busqueda de pluggins (©2010 Cristian Rosa para DIGICAP® versién corregida por DIGICAP*-www.digicap.cl_ Pagina S de S""DIGICAP® (APACTAGON DIGITAL Anexo I: Uso de Widgets y Plugins en WordPress. % Instalar plugins it celekey srr tebetetets tren coker 7 teteteted —— err Gey Son 5 2. Otra forma de instalar es desde la misma pantalla de instalacién teniendo el pluggin ya descargado en el computador, que por lo general esté comprimido como zip. Este archivo no se debe descomprimir para poder instalarse desde la pantalla Subir. * Instalar plugins Buscar | Suble | Destacedos | Populares | Re: Instalar un plugin en formato -zip ‘Si tienes un plugin en un archivo .2p, puedes subiroe instalato desde aqui [CernAvcoaOen (IER) (antler shore 3. La tercera manera de instalacién es la manual, que consiste en descomprimir el archivo zipeado 0 .zip. Luego la carpeta descomprimida deber ser ubicada en “wp-content/plugins” como se muestra en las siguientes imagenes. (©2010 Cristian Rosa para DIGICAP® versién corregida por DIGICAP*-www.digicap.cl_ Pagina 6 de S= ""DIGICAP® (APAGTAGOR DIGTAL Anexo I: Uso de Widgets y Plugins en WordPress ers serene Hist BED En estas tres opciones hay que finalizar el proceso para poder utilizar el plugin, para lo cual es necesario ir al panel de Plugins y presionar el botén Activar plugin desde el recuadro de descripcién Cédigos para hacer funcionar los plugins en nuestros temas Para hacer funcionar los plugins de un tema que se disefie, es necesario que ingresar la siguiente linea de cédigo dentro de la etiqueta head del HTML . (©2010 Cristian Rosa para DIGICAP® version corregida por DIGICAP*-www.digicap.cl Pagina 7 de S“"DIGICAP® (APACTAGON DIGTAL ‘Anexo I: Uso de Widgets y Plugins en WordPress La funcién wp_head() devuelve toda la informacion que tiene que ver con el funcionamiento intrinseco de WordPress, como por ejemplo los cédigos de los plugins. Existen algunos plugins que requieren de un cédigo adicional para que funcionen. El siguiente cédigo se debe poner dentro de la etiqueta HTML body para que se se cargue el plugin Esta linea cambia al final, dependiendo del plugin que se instale, y siempre se deben consultar las instrucciones de instalacién del plugin para copiar y colocar correctamente este cédigo, ya sea en la pagina de WordPress 0 en Ia pagina del autor del plugin. (©2010 Cristian Rosa para DIGICAP® versién corregida por DIGICAP*-www.digicap.cl_ Pagina 8 de S