WordPress. Ejercicios (4)

En construcciónNo he terminado de actualizar estos ejercicios a la versión WordPress 4.7.

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.

El objetivo de esta página de ejercicios es practicar el uso de temas en WordPress. Los temas permiten modificar completamente el aspecto visual de WordPress. El directorio de temas de WordPress se puede visitar en https://es.wordpress.org/themes/. Los temas se instalan y desinstalan en WordPress desde el menú Apariencia.

Los ejercicios de esta lección tratan varios aspectos relacionados:

WordPress (4) 1 - Imagen destacada

Asocie una imagen a una de las entradas, que se mostrará en la parte superior:

WordPress. Imagen destacada

El tamaño más conveniente de la imagen destacada depende del tema que aplique WordPress. Yo diría que para el tema Twenty Seventeen conviene que el ancho sea de 1000px.

La imagen del ejemplo es Venecia (Basílica de San Marcos). En los ejercicios siguientes se han utilizado otras imágenes de Venecia:

Escuela Grande de San Marcos Basílica de San Marcos San Francesco della Vigna Palacio de San Marcos Tetrarcas Casa en Venecia Riva degli Schiavoni

WordPress (4) 2 - Personalizar el tema Twenty Seventeen

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

  1. Icono del sitio

    Añada un icono al sitio web.

    WordPress. Icono del sitio

    Duda WordPress recomienda que la imagen del icono del sitio sea una imagen cuadrada de 512px de lado. Ignoro por qué pide una imagen tan grande. En el ejemplo se ha gastado esta imagen: favicon webapps 512x512

  2. Cabecera multimedia

    Cambie la imagen de la cabecera del blog.

    Establezca un vídeo de cabecera en el blog (por ejemplo, un vídeo disponible en Youtube).

  3. Portada estática

    Referencia: ¿Qué es el parallax?

    Modifique el aspecto de la web configurando una portada estática para obtener un resultado similar a este:

    Para ello:

    • Abra la opción Portada estática del menú Personalizar.
    • Elija como Página frontal una página estática.
    • Elija como Portada una de las páginas del blog (la página elegida será la primera que se mostrará en la web).
    • Elija como Página de entradas una nueva página llamada Entradas (no hace falta escribir nada en ella).
    • Abra la opción "Opciones del tema" que se añade al menú Personalizar al elegir página estática.

      Duda A veces, aunque se haya elegido página estática como página frontal, el apartado "Opciones del tema" deja de mostrarse en el menú Personalizar, o no permite elegir el contenido de las secciones. Parece que saliendo y volviendo a entrar como usuario administrador, el problema desaparece.

    • Elija como Contenido de las secciones de la página principal otras páginas del blog. Elija entre ellas la página Entradas.
    • En cada una de las páginas, asigne una imagen destacada, que se utilizará como imagen de fondo.
  4. CSS adicional

    Una de las novedades del tema Twenty Seventeen es que permite el usuario modificar el propio tema con CSS. En versiones anteriores, era necesario o bien editar el tema (algo desaconsejado porque una actualización del tema puede destruir el trabajo realizado) o crear un tema hijo (como se propone en esta misma lección en un ejercicio posterior). Esta nueva herramienta viene muy bien para hacer pequeñas modificaciones de estilo, pero para grandes cambios sigue siendo más aconsejable crear temas hijos.

    Como las sentencias CSS se añaden a la hoja de estilo del tema, hay que tener en cuenta tanto la estructura del documento como de la hoja de estilo. La manera más sencilla de averiguar los selectores a utilizar es utilizar el inspector de Firefox (o de Chrome o de IE).

    El Inspector de Firefox se abre mediante el menú Herramientas > Desarrollador web o mediante la tecla F12. En la lección Herramientas de Desarrollador Web de los apuntes de HTML / CSS se comentan estas herramientas.

    A continuación se comenta cómo se utilizaría el Inspector de Firefox para modificar el título del blog.

    Firefox. Inspector

    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 hfeed has-header-image has-sidebar colors-light">
        <div id="page" class="site">
          <a class="skip-link screen-reader-text" href="#content">Ir al contenido</a>
          <header id="masthead" class="site-header" role="banner">
            <div class="custom-header">
              <div class="custom-header-media">
                <div id="wp-custom-header" class="wp-custom-header">
                  <img src="http://192.168.1.4/wordpress/wp-content/themes/twentyseventeen/assets/images/header.jpg"
                    width="2000" height="1200" alt="WebApps Blog" />
                </div>
              </div>
              <div class="site-branding">
                <div class="wrap">
                  <div class="site-branding-text">
                    <h1 class="site-title"><a href="http://192.168.1.4/wordpress/" rel="home">WebApps Blog</a></h1>
      ...
    4. En la parte inferior derecha, en la pestaña "Computada", se muestran todas las reglas de las hojas de estilo que afectan al elemento seleccionado. Todas se muestran tachadas menos la más específica, que es la que se aplica. En este caso la regla es body.has-header-image .site-title a.
    5. En el apartado "CSS adicional" si sólo se tiene en cuenta la estructura html del documento, las reglas pueden no dar ningún resultado. Por ejemplo, si se añade la regla:

      /*
      Puedes añadir tu propio CSS aquí.
      
      Haz clic en el icono de ayuda de arriba para averiguar más.
      */
      h1 {
        color: red;
      }  

      ... el título no cambiaría de color. Pero si utilizamos el mismo selector que se muestra en la pestaña "Computada" del Inspector

      /*
      Puedes añadir tu propio CSS aquí.
      
      Haz clic en el icono de ayuda de arriba para averiguar más.
      */
      body.has-header-image .site-title a {
        color: red;
      }  

      ... entonces sí que cambia el color del título.


      Modifique el color de los elementos principales. Por ejemplo:

      WordPress. CSS adicional WordPress. CSS adicional

      WordPress. CSS adicional

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:

Los archivos .pot o .po son archivos de texto que se pueden editar con cualquier editor de texto plano, pero existen editores específicos como poedit. Sin embargo los archivos .mo son archivos compilados y para crearlos se necesitan las utilidades GNU gettext o programas específicos como poedit.

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

      WordPress. Mensaje de página no encontrada

    • Esos mensajes se encuentran en el archivo de la traducción del tema empleado.
    • Instale poedit y modifique el archivo de traducción es_ES.po (ambos mensajes). Al guardar el archivo .po, poedit genera automáticamente el archivo .mo.
    • Compruebe que se muestran los nuevos mensajes:

      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 Seventeen de acuerdo con las instrucciones de la documentación oficial de WordPress: Child themes. Compruebe que el nuevo tema se muestra en WordPress:

    WordPress. Tema hijo

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

    WordPress. Tema hijo

  3. Active el tema hijo.

    WordPress. Tema hijo

  4. Añada en la hoja de estilo del tema hijo (no en el apartado CSS adicional, sino en la propia hoja de estilo mediante la opción Editor de WordPress) la regla obtenida en el ejercicio anterior para cambiar el color del título:
    body.has-header-image .site-title a {
      color: yellow;
    }    
  5. Compruebe que el color del título ha cambiado:

    WordPress. Tema hijo

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

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


  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

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

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)

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


En construcciónA partir de aquí, los ejercicios no están actualizados a la versión WordPress 4.7.

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

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.