WordPress - Ejercicios (4) - Enunciados

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):

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:

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 recomienda que la imagen del icono del sitio sea una imagen cuadrada de 512px de lado. En el ejemplo se ha utilizado esta imagen:

2. Logotipo del sitio

   Añada un logotipo al sitio web.

   

   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:

3. Colores

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

   • Modifique el color aplicado:

     

   • Desactive el filtro de color:

     

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:

     

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

     

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.

   

   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 (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:

• .pot: Los autores de los programas crean archivos .pot, que son las plantillas de la traducción que contienen los textos en el idioma original.
• .po: Los traductores crean archivos archivos .po, uno por cada idioma, que contienen los textos en el idioma original y los textos traducidos.
• .mo: Es una versión compilada de los archivos .mo. Se generan a partir de los archivos .po.

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:

     

   • 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 (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:

   

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:

   

3. Active el 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 (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:

   

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 (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:

   

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:

• Obtenga en Google Fonts la regla arroba a insertar en la hoja de estilo, como se explica en la lección de Fuentes web de los apuntes de HTML/CSS.
• Añada en la hoja de estilo del tema la regla-arroba y utilice el nombre de la fuente en la etiqueta deseada:

  @import url(http://fonts.googleapis.com/css?family=Orbitron);
  
  .header-navigation-wrapper {
    font-family: Orbitron;
    font-size: 125%;
  }
  

• Con el ejemplo anterior, el resultado sería el siguiente:

  

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 (4) 8 - Google Fonts (plugin) (optativo)

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

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 (4) 9 - Otros temas

Por escribir.

• Pruebe temas para blogs de fotografías: Access Press Parallax