Embed Size (px)
Citation preview
I. RESULTADOS DE APRENDIZAJE
Que el estudiante sea capaz de:
• Realizar la instalación de plugins para Wordpress
• Personalizar blogs utilizando temas
• Crear sus propios temas
II. PROCEDIMIENTO
Ejercicio #1: Agregar un plugin de encuesta en el blog de WordPress
1. Ingresa al back-end del sitio web local de WordPress instalado en su PC, redactando la
siguiente URL:
http://localhost/wordpress/wp-admin
2. Luego haz clic en la opción de menú Plugins. Esta acción le permitirá ingresar al
directorio de plug-ins ya instalados, observe la imagen a continuacion:
UNIVERSIDAD DON BOSCO
FACULTAD DE INGENIERIA
ESCUELA DE COMPUTACIÓN
Ciclo II
Desarrollo de aplicaciones web con Gestores de Contenidos
Guía N° 6
Manejo de plugins y temas de WordPress
2
3. Realice la búsqueda del plugin (wp-polls) a utilizar en la práctica. Para ello, localice en la
parte superior al botón Añadir nuevo y haga clic sobre el mismo.
Luego, digite en el cuadro de búsqueda al nombre del plugin: wp-polls
4. Localice al plugin WP-Polls y haga clic sobre su nombre o sobre botón Mas detalles.
Recorra las fichas (Descripción, FAQ y Capturas de pantalla), para obtener información
del funcionamiento del mismo.
5. Hacer clic en el botón Instalar ahora y espere un momento mientras se instala WP-Polls.
6. Finalmente, localice nuevamente al plug.in WP-Polls y de clic en botón Activar.
7. Una vez activado el plugin podrá observar en el menú principal (a la izquierda) a una
nueva opción con el nombre del plugin (Encuestas).
3
8. Ubique el cursor del ratón sobre el nombre del plugin añadido (Encuestas) y del menú
emergente, seleccione Añadir encuesta.
9. En el formulario a continuación, ingrese los datos de la nueva encuesta. Para agregar la
3er respuesta, de clic en botón Añadir respuesta.
4
10. Cuando complete la redacción de la encuesta, presione el botón Añadir encuesta.
En la parte superior del formulario, se mostrara una confirmación de la creación de la
nueva encuesta.
WS-Poll informa que usted deberá usar un shortcode [poll id=”2”] cuando desee
agregar esta encuesta en alguna Entrada del gestor.
11. Del menú principal, ubique al plugin Encuestas y de clic en opción Gestionar encuestas.
12. Verifique que la encuesta anterior se ha creado, que tenga el id=2, que la pregunta
aparezca precedida de la expresión Se muestra/Displayed y que esté disponible (Abierta)
como se muestra a continuación.
Tome nota del ID de la encuesta, ya que ese dato lo utiliza luego, en este caso el ID de la
encuesta es 2.
5
13. Para continuar, configuramos las opciones generales de la encuesta. Haga clic sobre la
opción de menú Opciones de la encuesta (Poll options).
14. Observar las opciones de la encuesta.
Luego, localice y modifique el color de fondo y del borde de las barras; investigue como
se redactan los colores en formato hexadecimal.
Recorra el contenido del formulario hasta la seccion Orden de las respuestas a la
encuesta. Marque la opción Orden aleatorio.
Ubique el final del contenido y de clic en botón para guardar los cambios realizados a
encuesta.
15. Proceda a crear una Entrada, colocando el cursor sobre menú Entradas y haciendo clic
sobre la opción Agregar una nueva (Add New).
16. En esta nueva Entrada, redacte unos 5 parrafos con información general relacionada a
WordPress, incluyendo a logos, imágenes, etc. Finalmente, publique la entrada.
17. Ahora, procedera a incluir la encuesta creada en los pasos anteriores.
Para ello, dentro de los parrafos de contenido redactados en la Entrada actual (acerca de
WordPress), abra un párrafo vacio, en donde usted desea ver la encuesta.
18. Ubique el cursor en este párrafo vacio y luego, digite ahí al shortcode [poll id=”2”].
Observe un ejemplo:
19. Publique nuevamente la Entrada anterior y observe el cuestionario que aparece en
reemplazo del shortcode redactado en párrafo elegido en el paso anterior.
6
20. Ahora agregaremos la encuesta como un Widget1. Para ello, haga clic en la opción
Apariencia (Appearance) y cuando se desplieguen las opciones de menú, hacer clic en
Widgets.
21. Buscar el widget Encuesta y hacer clic sobre ese mismo nombre. De esa forma se ha
agregado al área de Widget.
22. Hacer clic en Añadir Widget.
Dentro del contenido de este formulario actual, localice el cuadro Barra Lateral del blog.
Luego modifique el Titulo y elija el cuestionario a mostrar, con estos valores:
1 Es una pequeña aplicación o programa, usualmente presentado en archivos o ficheros pequeños que son ejecutados por un motor de widgets o Widget Engine. Entre sus objetivos están dar fácil acceso a funciones frecuentemente usadas y proveer de información visual
7
Confirme cambios con un clic en enlace Hecho...
23. Cargar nuevamente el front-end y observe si aparece la encuesta. Puede votar en la
encuesta y observar qué sucede al hacerlo. Al votar, observará una gráfica de resultados.
Notará que la encuesta aparece en el footer del sitio.
Ejercicio #2: Instalar el plugin Google Maps para WordPress.
1. Ingresar de nuevo al directorio de plugins del sitio web de WordPress. Haga clic en Añadir
nuevo e ingrese la siguiente cadena de búsqueda dentro del campo de texto para buscar un
plugin.
2. Hacer clic en el enlace del plugin con mayor rating de parte de los usuarios. Esto le garantiza
que el plugin ha funcionado apropiadamente a criterio de los usuarios que lo han utilizado.
8
3. De clic sobre el nombre del plugin elegido (WP Google Maps) y lea que funciones que
desarrollaría dentro de las Entradas de su website bajo WordPress.
4. Haga clic en botón Instalar ahora y espere a que se instale. Luego de clic en botón Activar.
Se crea un acceso a las Mapas en el menú principal.
5. Una vez activado el plugin, recorra su contenido, para leer las funciones que proporciona su
activación.
6. Procederemos a usar el plugin WP googlemaps.
7. Haga clic en submenú Configuracion. Luego, dentro de la ficha Mapas, localice y modifique
el campo Maps Engine por la opción OpenLayers.
Recorra el contenido del formulario y al final, de clic en botón Guardar Configuracion>>.
8. Haga clic en el submenú Mapas. Se muestra el siguiente contenido de información:
Observe el parámetro ID y Shortcode. Este último servirá para agregar ese único Mapa en el
contenido de las Entradas del website, de manera similar a las encuestas creadas con el
plugin WP-Polls.
9
9. Haga clic en botón Editar. Se abre una ventana con un par de opciones, de clic al botón
inferior.
10. Vuelva a entrar en botón Editar.
En la ventana de configuración del Mapa, localice a sección Marcadores y en el parámetro
Direccion/GPS, digite El Salvador y de clic en botón Agregar Marcador.
11. Luego, localice a sección Tus Marcadores, seleccione el marcador (Mark) por defecto (ID 0)
y borrelo, para que el Mapa solo señale a un lugar (El Salvador).
12. Retorne al inicio del formulario. Localice y de clic en el botón Guardar Mapa.
13. Finalmente, de la pestaña Configuracion General, selección y copie el código corto
(shortcode) que aparece en la opción Short Code
14. Retornar a la edición de la Entrada que ha creado acerca de WordPress y agregar un párrafo
que describa a la ubicación del creador del sitio web. Luego, en un párrafo libre, incluya el
shortcode copiado del paso anterior.
15. Verifique en el front-end al resultado, por ejemplo:
10
Ejercicio #3: Instalar temas para WordPress.
El proceso para cambiar el tema predeterminado de WordPress es similar al utilizado para un
plugin. Vamos a suponer que descargamos un tema de las fuentes confiables que se han
mencionado en clase y en esta guía de práctica. Con el archivo del tema descargado en
formato .zip, debe ingresar a la parte administrativa de WordPress y seguir el siguiente proceso.
NOTA: Los temas de esta práctica se han descargado desde el sitio: http://topwpthemes.com/.
Primero debe descargar alguno de los temas de este sitio web.
1. Hacer clic sobre el menú Apariencia y al desplegarse las opciones en la opción Temas.
Al ingresar en la página Instalar temas, podrá buscar temas por palabras clave en el nombre
del tema. También podrá subir al servidor temas que se hayan descargado previamente.
2. Hacer clic en el enlace Agregar nuevo (Add new) y luego hacer clic en Subir tema (Upload
Theme)
3. Presione el botón Seleccionar archivo (.zip) para localizar el archivo de tema que desea subir
al servidor donde tiene alojado el sitio WordPress.
4. Utilice el diálogo Carga de archivos para localizar el archivo de tema que desea subir al
servidor. Seleccione el archivo y luego haga clic sobre el botón Abrir.
11
5. Presionar el botón Instalar ahora (Install Now), para que WordPress suba el archivo
comprimido al servidor
6. Verifique que el proceso de instalación del tema se ha realizado correctamente. Esto será
avisado mediante un mensaje. Haga clic en el enlace Vista previa (Live Preview) para tener un
demo del tema, sin afectar el sitio web todavía.
7. Visualizar el tema y determine si se adecúa a sus necesidades. Luego, si la apariencia del
tema le parece bien. Haga clic en el botón Guardar y activar (Save & Activate) en el panel
izquierdo de la visualización.
8. Al actualizar el front-end en el navegador podrá visualizar el cambio de tema.
Ejercicio #4: Configurar un tema propio como tema de WordPress.
En este ejercicio intentaremos crear un tema muy básico para WordPress, pero creándolo nosotros
mismos desde cero, para luego instalarlo y activarlo como el tema principal de nuestro blog.
1. Lo primero que haremos será crear una carpeta con el nombre que deseemos para nuestro
tema. Vamos a nombrar esta carpeta TemaDGC y la guardaremos en Mis documentos o en el
Escritorio de Windows.
2. Dentro de esta carpeta colocaremos todos los archivos y carpetas requeridos por WordPress
para que nuestro tema sea válido y funcional. Al final, deberíamos tener una estructura como
la que se muestra a continuación en la carpeta TemaDGC.
12
3. Crearemos con el Notepad++ o con el PHPDesigner nuestro archivo style.css y agregaremos
las siguientes líneas de código. Observe que estas primeras líneas son comentarios. Sin
embargo, es algo requerido por WordPress para validar nuestro css. En estas líneas se está
nombrando e identificando el template para que WordPress lo use en la galería de temas
disponibles.
/*
Theme Name: Tema Cerocreativo
Theme URI: http://www.cerocreativo.cl
Description: Un tema creado desde cero siguiendo el tutorial de Cerocreativo.cl
Author: Cerocreativo.cl
Author URI: http://www.cerocreativo.cl
Version: 1.0
*/
4. Guardamos el archivo como style.css. Por el momento solo colocaremos estas líneas, más
adelante continuaremos con los estilos para nuestro tema. Recuerde que el tema debe
guardarse en la carpeta TemaDGC que acaba de crear.
5. Vamos a crear ahora el archivo index.php, en el que incluiremos las siguientes líneas de
código.
<?php get_header(); ?>
<div id="contenido">
<?php if(have_posts()) : ?>
<?php while(have_posts()) : the_post(); ?>
13
<div class="post" id="post-<?php the_ID(); ?>">
<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<div class="post-contenido">
<?php the_content(); ?>
<p class="post-metadata">
<?php _e('Archivado en:'); ?>
<?php the_category(', ') ?>
<?php _e('Escrito por:'); ?>
<?php the_author(); ?><br />
<?php comments_popup_link('Sin Comentarios', '1 Comentario', '%
Comentario'); ?>
<?php edit_post_link('Editar', ' | ', ''); ?>
</p>
</div>
</div>
<?php endwhile; ?>
<div class="paginador">
<?php posts_nav_link(); ?>
</div>
<?php endif; ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
IMPORTANTE: En este archivo se han utilizado algunas funciones propias de WordPress (no de
PHP) en varias líneas. Por ejemplo, en las líneas 1, 25 y 26 se han utilizado funciones como
get_header(), get_sidebar() y get_footer(). El propósito de estas funciones es bastante obvio.
6. Guardamos el archivo como index.php siempre ubicándolo en la carpeta de nuestro tema
TemaDGC.
7. Crearemos el archivo header.php. En este archivo se incluirán meta tags, título del sitio o blog
y descripción, hojas de estilo del sitio y scripts de JavaScript, de ser necesarios. Además, se
puede incluir un menú personalizado que se mostrará en todas las páginas del blog. Este no es
14
el menú de navegación principal. Digite las siguientes líneas en el Notepad++ o en PHP
Designer.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php
bloginfo('charset'); ?>" />
<title>
<?php if (is_home()) { ?>
<?php bloginfo('name'); ?> - <?php bloginfo('description'); ?>
<?php } else { ?>
<?php wp_title($sep = ''); ?> - <?php bloginfo('name'); ?>
<?php } ?>
</title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css"
media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed"
href="<?php bloginfo('rss2_url'); ?>" />
<?php wp_head(); ?>
</head>
<!-- Cuerpo del documento -->
<body>
<div id="contenedor">
<div id="header">
<h1>
<a href="<?php echo get_option('home'); ?>" title="<?php bloginfo('name'); ?> - <?php
bloginfo('description'); ?>">
<?php bloginfo('name'); ?> - <?php bloginfo('description'); ?>
</a>
</h1>
<div id="menu-principal">
<?php wp_nav_menu(array( 'theme_location' => 'menuprincipal')); ?>
15
</div>
</div>
8. Guarde el archivo como header.php, siempre en la carpeta de nuestro tema TemaDGC.
9. Vamos a crear ahora, una barra lateral personalizada, en la que puedan agregarse nuestros
propios widgets para poder cargarlos desde el Back-end de WordPress. Para ello digite en el
Notepad++ o en el PHP Designer el siguiente código y guarde el archivo como sidebar.php:
<div id="sidebar">
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar() ) :
else : ?>
<?php endif; ?>
</div>
NOTA: Con el código anterior, ya se puede mostrar una barra lateral personalizada, el resto del
trabajo lo hace el archivo functions.php
10. A continuación, crearemos el archivo single.php que será utilizado cuando accedamos a un
artículo en particular, ya sea que hayamos ingresado al artículo desde el archivo de categorías,
etiquetas, búsqueda o listado general.
Este archivo single.php será cargado de forma automática, siempre que no especifiquemos lo
contrario. La estructura del archivo es similar a la del index.php, con la salvedad que en el
ciclo o lazo, se mostrará la información de un único artículo.
Digite en el Notepad++ o en PHP Designer las siguientes líneas.
<div id="contenido">
<?php if(have_posts()) : ?>
<?php while(have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<div class="post-contenido">
<?php the_content(); ?>
<p class="post-metadata">
16
<?php _e('Archivado en:'); ?>
<?php the_category(', ') ?>
<?php _e('Escrito por:'); ?>
<?php the_author(); ?><br />
<?php comments_popup_link('Sin Comentarios', '1 Comentario', '%
Comentario'); ?>
<?php edit_post_link('Editar', ' | ', ''); ?>
</p>
</div>
<div class="post-comentarios">
<?php comments_template(); ?>
</div>
</div>
<?php endwhile; ?>
<div class="paginador">
<?php previous_post_link('< %link') ?>
<?php next_post_link(' %link >') ?>
</div>
<?php endif; ?>
</div>
11. Guarde el archivo single.php en la carpeta de nuestro tema TemaDGC.
12. En este paso crearemos el archivo más fácil de crear llamado comments.php que únicamente
cuenta con una sola línea. Esto se debe a que WordPress ha reinventado el sistema de
comentarios, haciendo super sencillo entenderlo, personalizarlo y estandarizarlo para plugins
externos. Digite la siguiente línea de código en el Notepad++ o PHP Designer y guarde el
archivo como comments.php en la carpeta del tema.
<?php comment_form(); ?>
13. Crearemos ahora el archivo page.php que se encargará de mostrar el contenido que hayamos
definido para cada nueva página de la sección Páginas de nuestro blog. Viene siendo una
especie de clon del archivo single.php. Digite el siguiente código y guárdelo con el nombre
page.php
17
<div id="contenido">
<?php if(have_posts()) : ?>
<?php while(have_posts()) : the_post(); ?>
<div class="post pagina" id="pagina-<?php the_ID(); ?>">
<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<div class="post-contenido">
<?php the_content(); ?>
<p class="post-metadata">
<?php _e('Archivado en:'); ?> <?php the_category(', ') ?> <?php _e('Escrito
por:'); ?> <?php the_author(); ?><br />
<?php comments_popup_link('Sin Comentarios', '1 Comentario', '%
Comentario'); ?> <?php edit_post_link('Editar', ' | ', ''); ?>
</p>
</div>
</div>
<?php endwhile; ?>
<div class="paginador">
<?php posts_nav_link(); ?>
</div>
<?php endif; ?>
</div>
14. Crearemos ahora el archivo archive.php que será utilizado en múltiples instancias. Por
ejemplo, cuando se seleccione para visualizar una categoría, una etiqueta, los artículos de un
autor, los artículos de una fecha determinada, etc. Digite las siguientes líneas en el Notepad++
o PHP Designer y guarde el archivo como archive.php.
<div id="contenido">
<?php if(have_posts()) : ?>
18
<?php while(have_posts()) : the_post(); ?>
<?php $post = $posts[0]; ?>
<?php /* Si es un archivo para categorías */ if (is_category()) { ?>
<h2>Archivo para la categoría <?php single_cat_title(); ?>:</h2>
<?php /* Si es un archivo para etiquetas */ } elseif( is_tag() ) { ?>
<h2>Artículos etiquetados como: <?php single_tag_title(); ?></h2>
<?php /* Si es un archivo diario */ } elseif (is_day()) { ?>
<h2>Archivo para <?php the_time('F jS, Y'); ?>:</h2>
<?php /* Si es un archivo mensual */ } elseif (is_month()) { ?>
<h2>Archivo para <?php the_time('F, Y'); ?>:</h2>
<?php /* Si es un archivo anual */ } elseif (is_year()) { ?>
<h2>Archivo para <?php the_time('Y'); ?>:</h2>
<?php /* Si es el archivo de autor */ } elseif (is_author()) { ?>
<h2>Archivo del autor</h2>
<?php /* Si el archivo ha sido paginado */ } elseif (isset($_GET['paged']) &&
!empty($_GET['paged'])) { ?>
<h2>Archivo del blog</h2>
<?php } ?>
<div class="post pagina" id="post-<?php the_ID(); ?>">
<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<div class="post-contenido">
<?php the_content(); ?>
<p class="post-metadata">
<?php _e('Archivado en:'); ?> <?php the_category(', ') ?>
<?php _e('Escrito por:'); ?> <?php the_author(); ?><br />
<?php comments_popup_link('Sin Comentarios', '1 Comentario', '%
Comentario'); ?>
<?php edit_post_link('Editar', ' | ', ''); ?>
</p>
</div>
</div>
<?php endwhile; ?>
<div class="paginador">
19
<?php posts_nav_link(); ?>
</div>
<?php endif; ?>
</div>
15. En este paso crearemos el archivo footer.php que es junto al header.php y el sidebar.php uno
de los que comúnmente se utilizan en todas las páginas del sitio web. En este archivo se
muestran principalmente información del creador o dueño del sitio web, enlaces de
posicionamiento e información de contacto. Digite las siguientes líneas de código en el
Notepad++ o en el PHP Designer y guarde el archivo como footer.php.
</div>
<div id="piedepagina">
<a href="http://www.udb.edu.sv" title="Sitio web oficial de la Universidad Don Bosco">
Universidad Don Bosco (sitio web oficial)
</a>
</div>
</body>
</html>
16. Hemos llegado al punto más importante y delicado, que es la creación del archivo
functions.php. Este archivo es muy delicado y gracias a todo el poder que proporciona al
programador, conlleva también a una gran responsabilidad.
Cometer un error en este archivo puede dar de baja a todo el sitio web de WordPress.
Considere siempre, antes de modificar hacer un respaldo de este archivo, por cualquier
emergencia que surja al modificarlo. Digite las siguientes líneas y guárdelas como
functions.php.
<?php
//Agregamos soporte para menus personalizados
add_action('init','registrar_menu');
//Registramos un nuevo menu personalizado
function registrar_menu() {
register_nav_menu('menuprincipal', __('Menu Principal'));
20
}
// Registro Sidebar
register_sidebar(
array('name' => 'Sidebar Personalizada',
'id' => 'sidebar-personalizada',
'description' => 'Estos Widgets se mostrarán en la sidebar personalizada.'
)
);
?>
17. El siguiente paso consiste en copiar toda la carpeta del tema que colocamos en Mis
documentos o en el Escritorio de Windows y pasarla a la carpeta de temas del WordPress.
En nuestra instalación local debería estar en C:\wamp\www\wordpress\wp-content\themes.
18. Al hacer clic sobre apariencia y luego seleccionar la opción temas, aparece el nuevo tema
creado
III. INVESTIGACIÓN COMPLEMENTARIA
21
Investigue como crear un nuevo usuario y explicar los diferentes tipos de roles que hay.
22
Alumno:
HOJA DE EVALUACIÓN
DE GUÍAS DE PRÁCTICA
Actividad a
evaluar
Criterio a evaluar Cumplió Puntaje
SI NO
Desarrollo de la
Práctica
Logro terminar todas las partes de la guía de
laboratorio (20%).
Presentó la evidencia del desarrollo de cada una de las
partes a su docente (30%)
Trabajo de manera correcta y ordenada la guía de
laboratorio y el funcionan de todas las configuraciones
planteadas en la misma (25%)
PROMEDIO:
Investigación
complementaria
Envió la investigación complementaria en la fecha
indicada (25%)
PROMEDIO:
Carnet:
Docente: Fecha:
Título de la guía: No.:
