WordPress - Ejercicios (4) - Soluciones

En esta lección se proponen soluciones detalladas de los ejercicios (4) de WordPress. Se recomienda intentar realizarlos primero sin recurrir a estas soluciones.

WordPress (4) 1 - Imagen destacada

WordPress (4) 2 - Personalizar el tema Twenty Nineteen

Para personalizar el tema predeterminado, elija el menú Apariencia > Personalizar.

  1. Icono del sitio

    Elija el menú Apariencia > Personalizar > Identidad del sitio.

    En el apartado "Icono del sitio", haga clic en "Seleccionar imagen" y seleccione el icono.

  2. Logotipo del sitio

    Elija el menú Apariencia > Personalizar > Identidad del sitio.

    En el apartado "Logotipo del sitio", haga clic en "Elegir logo" y seleccione la imagen.

  3. Colores

    Elija el menú Apariencia > Personalizar > Colores.

    Para cambiar el color del filtro, haga clic en la opción Personalizado y elija un color:

    WordPress. Colores

    Para desactivar el filtro de color, desmarque la casilla "Aplica un filtro ...":

    WordPress. Colores

  4. Página estática

    Para crear la página estática:

    1. Cree la página que se convertirá en la página de inicio del sitio:

      WordPress. Portada estática

    2. Elija el menú Apariencia > Personalizar > Ajustes de portada. Marque el botón "Una página estática". Seleccione la página creada en la lista "Página de inicio". Haga clic en "Añadir nueva página".

      WordPress. Portada estática

    3. Escriba un nombre para la página que contendrá las entradas del blog y haga clic en "Añadir":

      WordPress. Portada estática

    4. Haga clic en Publicar:

      WordPress. Portada estática

    5. Compruebe en Páginas > Todas las páginas que las dos páginas son ahora la página de inicio y de entradas:

      WordPress. Portada estática

    6. Añada al menú principal un enlace a la página de entradas.
  5. CSS adicional
    /* Cabecera */
    
    .site-header {
    	background-color: hsl(0, 75%, 70%);
    }
    
    /* Menu */
    .main-navigation {
    	background-color: hsl(0, 75%, 50%);
    }
    
    .main-navigation .main-menu li a {
    	color: white;
    }
    .main-menu button {
    	color: white;
    }
    
    /* Submenús */
    .menu-item {
    	background-color: hsl(0, 75%, 50%);
    }
    
    .menu-item .sub-menu li a {
    	background-color: hsl(0, 75%, 50%);
    }
    .menu-item .sub-menu li a:hover {
    	background-color: hsl(0, 75%, 90%);
    }
    
    /* Blog */
    .site-content {
    	background-color: hsl(0, 75%, 90%);
    }
    
    /* Pie */
    .site-footer {
    	background-color: hsl(0, 75%, 70%);
    }
    
    input[type=submit] {
    	background-color: hsl(0, 75%, 50%);
    }
    

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

WordPress (4) 4 - Crear un tema hijo

Referencias:

  1. Cree la carpeta twentynineteen-child y cree en ella los dos archivos siguientes:
  2. Cree el archivo style.css con el siguiente contenido. Aunque sean líneas comentadas, el contenido de estas líneas es importante. La línea más importante es la de Template, ya que en ella se dice cuál es el tema padre de este tema hijo, escribiendo el nombre de la carpeta que lo contiene. El resto debería contener información real.
    /*
    Theme Name: Twenty Nineteen Child
    Theme URI: https://example.com/themes/twenty-nineteen-child/
    Description: Tema hijo de Twenty Nineteen
    Author: TU NOMBRE
    Author URI: TU PÁGINA WEB
    Template: twentynineteen
    Version: 1.0.0
    License: GNU General Public License v2 or later
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
    Tags: light, responsive-layout, accessibility-ready
    Updated: 2019-01-22
    */
    
  3. Cree el archivo functions.php con el siguiente contenido
    <?php
    add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
    function my_theme_enqueue_styles() {
    
        $parent_style = 'twentynineteen-style'; // This is 'twentynineteen-style' for the Twenty Nineteen theme.
    
        wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
        wp_enqueue_style( 'child-style',
            get_stylesheet_directory_uri() . '/style.css',
            array( $parent_style ),
            wp_get_theme()->get('Version')
        );
    }
    ?>
    

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

  1. La hoja de estilo del tema hijo se puede editar con un editor cualquiera o con el editor integrado disponible en el menú Apariencia > Editor

    WordPress. Modificar css tma hijo

  2. Cuatro elementos de la interfaz

    Para obtener el resultado propuesto, la hoja de estilo podría ser la siguiente:

    .site-description {
      color: red;
    }
    
    .post {
      border-top: hsl(120, 100%, 25%) 3px solid;
      border-bottom: hsl(120, 100%, 25%) 3px solid;
      background-color: hsl(120, 100%, 90%);
    }
    
    .hfeed .entry .entry-header {
      border-bottom: hsl(120, 100%, 25%) 3px solid;
      margin: 0;
      background-color: hsl(120, 100%, 80%);
      text-align: center;
      text-shadow: white 3px 3px;
    }
    
    .entry .entry-title::before, .widget h2::before {
      display: none;
    }
    
    .entry .entry-footer  {
      margin-bottom: 0;
    }
    
  3. Widgets con borde y título con color de fondo en verde

    Para obtener el resultado propuesto, la hoja de estilo podría ser la siguiente:

    .widget {
      border: hsl(120, 100%, 25%) 3px solid;
      border-radius: 10px;
    }
    .widget h2 {
      margin: 0;
      padding: 5px;
      background-color: hsl(120, 100%, 25%);
      color: white;
    }
    
    .widget ul, .widget form {
      padding: 10px;
    }
    

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

En construcciónlas soluciones de los ejercicios siguientes están pendientes de actualizar a la versión WordPress 5.0.

WordPress (4) 7 - Google Fonts (css)

WordPress (4) 8 - Google Fonts (plugin)

En construcciónPor escribir

WordPress (4) 9 - Otros temas

En construcciónPor escribir