WordPress - Ejercicios (4) - Enunciados

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 (si estamos viendo la página principal del blog) o como imagen de fondo (si estamos viendo la página individual de la entrada):

WordPress. Imagen destacada WordPress. Imagen destacada

El tamaño más conveniente de la imagen destacada depende del tema elegido. De acuerdo con el manual de WordPress, el tamaño recomendado para el tema TwentyTwenty es de 1980px x 1485px .

Al mostrar la imagen como imagen de fondo, WordPress aplica un filtro de color que se puede eliminar o personalizar. En el ejercicio siguiente se trata este punto.

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 Twenty

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

  1. Icono del sitio

    Añada un icono al sitio web.

    WordPress. Icono del sitio

    WordPress recomienda que la imagen del icono del sitio sea una imagen cuadrada de 512px de lado. En el ejemplo se ha utilizado esta imagen: favicon webapps 512x512

  2. Logotipo del sitio

    Añada un logotipo al sitio web.

    WordPress. Icono del sitio

    WordPress recomienda que la imagen del icono del sitio sea una imagen de 240px de ancho y 180px de alto. En el ejemplo se ha utilizado esta imagen: logotipo webapps 240x180

  3. Colores

    El tema Twenty Twenty aplica un filtro de color a las imágenes destacadas.

    • Modifique el color aplicado:

      WordPress. Colores

    • Desactive el filtro de color:

      WordPress. Colores

  4. Página estática

    El tema Twenty Twenty permite definir como página de inicio una página estática. Es decir, que la página principal del blog no mostrará las entradas en orden cronológico inverso, sino una página fija.

    En caso de que el sitio web siga teniendo entradas, el tema Twenty Twenty permite definir también una página de entradas específica para mostrar las entradas en orden cronológico inverso. No es necesario dar contenido a esa página de entradas, es suficiente dar un nombre al configurar la página estática.

    Para poder acceder a la página que contiene las entradas, podemos incluir un enlace a ella en un menú, por ejemplo.


    Configure la portada estática para obtener un resultado similar a este:

    • La página principal muestra una página específica:

      WordPress. Portada estática

    • Al hacer clic en el enlace Blog se muestran las entradas del blog:

      WordPress. Portada estática

  5. CSS adicional

    El tema Twenty Seventeen introdujo la posibilidad de 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 informática se comentan estas herramientas.

    A continuación se comenta cómo se utilizaría el Inspector de Firefox para modificar la descripción del 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 primera columna de la parte inferior (izquierda) se muestra el código fuente html de la página y se resalta el elemento seleccionado:
      ...
      <div class="header-titles">
        <div class="site-logo faux-heading">
          <a href="http://192.168.1.13/wordpress/" class="custom-logo-link" rel="home">
            <img width="250" height="188" src="http://192.168.1.13/wordpress/wp-content/uploads/2020/01/cropped-logo-apuntes-cuadrado-256.png" class="custom-logo" alt="WebApps Blog de Barto" />
          </a>
          <span class="screen-reader-text">WebApps Blog de Barto</span>
        </div>
        <div class="site-description">
        Blog dedicado a las aplicaciones web
        </div>
        <!-- .site-description -->
      </div>
      <!-- .header-titles -->
      ...
      
    4. En la segunda columna de la parte inferior (centro) se muestran todas las reglas de la(s) hoja(s) de estilo que afectan al elemento seleccionado, ordenadas por reglas.
    5. En la tercera columna de la parte inferior (derecha), se muestran todas las propiedades de la(s) hoja(s) de estilo que afectan al elemento seleccionado, ordenadas por propiedad. De cada propiedad se indica los selectores de las reglas en las que se establece la propiedad. Las que no afectan al elemento seleccionado por ser menos específicas se muestran tachadas. En este caso la regla es .site-description.
    6. 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:

      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

      .site-description {
        color: red;
      }
      

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


      Modifique el color de los elementos principales. Por ejemplo:

      Nota: El borde circular del logotipo está creado con la propiedad CSS clip-path.

      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 los archivos .mo son archivos compilados y para crearlos se necesitan las utilidades GNU gettext o programas específicos como poedit. Puede instalar la última versión libre de poedit (Poedit 1.5.7, publicada el 5 de julio de 2013), o la versión gratuita, más reciente).


  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 twentytwenty-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 Twenty 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 necesaria para cambiar el color del título:
    .site-title a:link {
      color: red;
    }
    
  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 original.


  1. Cambie el estilo de algunos elementos del interfaz, como en la imagen siguiente:

    WordPress. Tema hijo

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

    Nota: El borde del widget de búsqueda está definido en un elemento distinto del resto.

    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, copie la página del tema original, péguela en la carpeta del tema hijo y modifíquela.


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

    Notas:

    • Para saber qué código html hay que incluir en la plantilla de la página 404 para incluir la imagen, incluya una imagen en una entrada cualquiera y vea el código fuente generado.
    • En el ejemplo se ha utilizado esta imagen: Señal de tráfico

    WordPress. Página 404 modificada

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:


  1. Personalice 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 (compruebe que funciona 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)

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

WordPress. Plugin Easy Google Fonts

  1. Instale el plugin Easy Google Fonts, que añade dos apartados en el panel de administración de WordPress:
    • un apartado Typography en la página de personalización del tema
    • un apartado Google Fonts en la sección de ajustes
  2. Modifique 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.