WordPress. Ejercicios (4)

En construcciónAlgunas capturas están pendientes de actualizar a la versión WordPress 4.4.

En esta lección se proponen ejercicios para conocer y utilizar WordPress. Se pueden consultar las soluciones de estos ejercicios de WordPress, aunque se recomienda intentar realizarlos primero sin recurrir a estas soluciones.

WordPress (4) 1 - Contenido destacado

El tema Twenty Fifteen permite:

El tema Twenty Fourteen permitía:

  1. Imagen destacada
  2. Contenido destacado
    • Definir el nombre de la etiqueta que identificará el contenido destacado (la etiqueta predeterminada es featured o destacado).
    • Asignar a las entradas con imagen destacada la etiqueta elegida para identificar el contenido destacado (featured u otra).
    • Asignar la disposición Carrusel al contenido destacado.
    • Comprobar el funcionamiento del carrusel en la portada del blog.
    • Asignar la disposición Rejilla al contenido destacado.
    • Comprobar el funcionamiento de la rejilla en la portada del blog.

WordPress (4) 2 - Personalizar el tema Twenty Fifteen

En construcciónEstas capturas están pendientes de actualizar a la versión WordPress 4.4.

En este ejercicio se personalizará el tema predeterminado Twenty Fifteen.

  1. Colores

    Modificar el color de los elementos principales. Por ejemplo:

    WordPress. Personalizar tema

    Para elegir colores, se pueden utilizar aplicaciones web como Adobe Color CC que generan paletas de colores.

    WordPress. Personalizar tema

WordPress (4) 3 - Modificar la traducción de WordPress

En este ejercicio se modificará la traducción de WordPress al español.

WordPress utiliza GNU gettext para gestionar las traducciones. En GNU gettext hay tres tipos de archivos:

Para crear archivos .pot o .po se puede utilizar cualquier editor de texto, pero existen programas específicos como poedit. Para crear archivos .mo se necesitan las utilidades GNU gettext o los programas como poedit.

  1. Modificar el texto del aviso"Página no encontrada".
    • Cuando se pide una página que no existe, WordPress muestra el siguiente mensaje:

      WordPress. Mensaje de página no encontrada

    • Ese mensaje se encuentra en la traducción del tema empleado.
    • Instalar poedit y modificar con él el archivo de traducción es_ES.po que contiene el mensaje de página no encontrada. Al guardar el archivo .po, poedit genera automáticamente el archivo .mo.
    • Comprobar que se ha modificado el mensaje:

      WordPress. Mensaje de página no encontrada

WordPress (4) 4 - Crear un tema hijo

Los temas de WordPress pueden modificarse directamente, pero es mejor no modificar los temas directamente, ya que si los temas se actualizan, los cambios que hayamos realizado se perderán. Por ello se recomienda crear temas hijo (en inglés, child themes), de manera que las modificaciones realizadas queden a salvo en las actualizaciones.

  1. Cree un tema hijo del tema Twenty Sixteen de acuerdo con las instrucciones de la documentación oficial de WordPress: Child themes. Compruebe el nuevo tema que se muestra en WordPress:

    WordPress. Tema hijo

  2. Añada en el directorio del tema un archivo screenshot.png (600px x 450px o mejor, 1200 x 900px) (ejemplo). Compruebe que la imagen se muestra en WordPress:

    WordPress. Tema hijo

  3. Añada en la hoja de estilo del tema hijo la regla:
    .site {
      background-color: lightblue;
    }    
  4. Seleccione el tema hijo y compruebe que que se aplica:

    WordPress. Tema hijo

WordPress (4) 5 - Modificar la hoja de estilo del tema hijo

En construcciónEstas capturas están pendientes de actualizar a la versión WordPress 4.4.

Las reglas CSS que se escriban en el archivo style.css del tema hijo se añaden a las del tema orginal.

Para averiguar el selector a escribir en la hoja de estilo se recomienda utilizar el Inspector de Firefox (o de Chrome o de IE), que se abre mediante el menú Herramientas > Desarrollador web. En la lección Herramientas de Desarrollador Web de los apuntes de HTML / CSS se comentan estas herramientas.

WordPress. Tema hijo

Como muestra la imagen anterior (haga clic en ella para verla con más detalle) el proceso es el siguiente:

  1. Haga clic en el selector de elementos.
  2. Haga clic en el elemento que quiere modificar.
  3. En la parte inferior izquierda se muestran las etiquetas (y en su caso, sus clases e ids) que afectan al elemento seleccionado
    <body class="home blog custom-background">
    <div id="page" class="hfeed site">
      <a class="skip-link screen-reader-text" href="#content">Ir al contenido</a>
      <div id="sidebar" class="sidebar">
        <header id="masthead" class="site-header" role="banner">
          <div class="site-branding">
            <h1 class="site-title">
              <a href="http://localhost/wordpress/" rel="home">
                WebApps blog
  4. En la parte inferior derecha, en la pestaña "Computada", se muestran las reglas de la hoja de estilo que afecta al elemento seleccionado. En este caso la regla es la de la etiqueta <a>.

En este caso, no se debe añadir la regla

/* =Theme customization starts here
-------------------------------------------------------------- */
a {
  color: red;
}  

porque afectaría no sólo al título sino a todos los enlaces del blog. Para que sólo afecte al título principal deberíamos escribir un selector más específico:

/* =Theme customization starts here
-------------------------------------------------------------- */
h1.site-title a {
  color: red;
}  

... para obtener aparentemente el resultado deseado:

WordPress. Tema hijo

El problema es que si hacemos clic en alguna entrada, el título deja de verse en rojo, ya que WordPress modifica las etiquetas. Si volvemos a analizar la página:

WordPress. Tema hijo

nos podemos dar cuenta de que hay que ampliar la regla para considerar las dos situaciones:

/* =Theme customization starts here
-------------------------------------------------------------- */
p.site-title a, h1.site-title a {
  color: red;
}  

  1. Cambiar el estilo de cuatro elementos del interfaz, como en la imagen siguiente:

    WordPress. Tema hijo

  2. Cambie el estilo del elemento del interfaz, como en la imagen siguiente:

    WordPress. Tema hijo

  3. Cambie el estilo del elemento del interfaz, como en la imagen siguiente:

    WordPress. Tema hijo WordPress. Tema hijo

  4. Cambie el estilo del elemento del interfaz, como en la imagen siguiente:

    WordPress. Tema hijo

WordPress (4) 6 - Modificar una plantilla de página del tema hijo

En construcciónEstas capturas están pendientes de actualizar a la versión WordPress 4.4.

Para modificar una plantilla de página en el tema hijo, hay que copiar la página del tema original, copiarla en la carpeta del tema hijo y modificarla.

  1. Cambiar el contenido de la página 404 que se muestra cuando se solicita contenido no existente:

    WordPress. Página 404 modificada

    Nota: Para saber qué código html hay que incluir en la plantilla de la página 404, se puede incluir una imagen y cambiar el color de texto en una entrada cualquiera y ver el código fuente generado.

WordPress (4) 7 - Google Fonts (css)

En construcciónEste ejercicio está pendiente de actualizar a la versión WordPress 4.4.

Las páginas web pueden utilizar todo tipo de fuentes utilizando el mecanismo de las fuentes web (véase, por ejemplo, la lección lección de Fuentes web de los apuntes de HTML/CSS).

Google ofrece un servicio de alojamiento de fuentes web llamado Google Fonts, cuyo suyo evita a nuestro servidor el tráfico necesario para descargar las fuentes en los clientes. Las fuentes de Google Fonts se pueden utilizar directamente, sin necesidad de instalar ningún plugin, modificando la hoja de estilo del tema utilizado.

Para ello, se debe:


  1. Personalizar el tema de manera que se utilicen las fuentes Montserrat Alternates y Over the Rainbow de Google Fonts en los títulos del sitio y de las entradas, respectivamente (tanto cuando se está viendo la página principal del blog como cuando se ha hecho clic en una entrada):

    WordPress. Google Fonts

WordPress (4) 8 - Google Fonts (plugin) (optativo)

En construcciónEste ejercicio está pendiente de comprobar en la versión WordPress 4.4.

El plugin Easy Google Fonts permite integrar las fuentes de Google Fonts en WordPress.

WordPress. Plugin Easy Google Fonts

  1. Instalar el plugin Easy Google Fonts, que añade dos apartados en el panel de administración de WordPress:
    • un apartado Tipography en la página de personalización del tema
    • un apartado Google Fonts en la sección de ajustes
  2. Modificar la hoja de estilo del tema de manera que se utilicen las mismas fuentes elegidas al realizar el ejercicio anterior.

    WordPress. Google Fonts

WordPress (4) 9 - Otros temas

En construcciónPor escribir.

WordPress (4) 10 - Otros (optativo)

En construcciónPor escribir.