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 Twenty

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 > Plantilla de portada.

    Para cambiar el color del filtro, haga clic en la opción Color de fondo de la superposición > Elegir color 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 la página de inicio. 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%);}
    
    /* Logo */
    img.custom-logo {
        clip-path: circle(60px at center);
    }
    
    /* Descipción del sitio */
    div.site-description { color: black; }
    
    /* Menu */
    nav.primary-menu-wrapper {
        background-color: hsl(359, 74%, 50%);
    }
    
    div.header-navigation-wrapper li.menu-item a {
        color: white;
    }
    
    div.header-navigation-wrapper ul.sub-menu {
        background-color: hsl(359, 74%, 50%);
    }
    
    div.header-navigation-wrapper ul.sub-menu li a:hover {
        background-color: hsl(357, 87%, 91%);
    }
    
    /* Entradas */
    body {
        background-color: hsl(357, 87%, 91%);
    }
    
    p.has-background.has-background-background-color {
        background-color: hsl(357, 87%, 91%);
    }
    
    /* Widgets */
    div.header-footer-group {
        background-color: hsl(0, 75%, 70%);
    }
    
    /* Pie */
    footer#site-footer.header-footer-group {
        background-color: hsl(0, 75%, 70%);
    }
    

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

WordPress (4) 4 - Crear un tema hijo

Referencias:

  1. Cree la carpeta /wp-content/themes/twentytwenty-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 Twenty Child
    Theme URI: https://example.com/themes/twenty-twenty-child/
    Description: Tema hijo de Twenty Twenty
    Author: TU NOMBRE
    Author URI: TU PÁGINA WEB
    Template: twentytwenty
    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: 2020-01-30
    */
    
  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 = 'twentytwenty-style'; // This is 'twentytwenty-style' for the Twenty Twenty 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-header {
        border-top: green 4px solid;
        border-bottom: green 4px solid;
    }
    
    article {
        border-bottom: white 50px solid;
    }
    
    .home #site-content article.post {
        padding-bottom: 30px;
    }
    
    .entry-header {
        border-top: green 4px solid;
        border-bottom: green 4px solid;
        padding: 10px 0;
        background-color: lightgreen;
    }
    
    .featured-media-inner img {
        border: green 5px solid;
        padding: 5px;
    }
    
    hr.post-separator {
        display: none;
    }
    
  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.widget_search {
    	  border: none;
    }
    
    .widget.widget_search .widget-content {
        border: hsl(120, 100%, 25%) 3px solid;
        border-radius: 10px;
        padding: 10px;
    }
    
    .widget h2 {
        margin: 0;
        padding: 5px;
        background-color: hsl(120, 100%, 25%);
        color: white;
        border-top-right-radius: 8px;
        border-top-left-radius: 8px;
    }
    
    .widget li {
    	  margin-left: 10px;
    }
    

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

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