WordPress. Soluciones (4)

En construcciónHe empezado a actualizar estas soluciones, pero no he terminado de hacerlo.

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 Seventeen

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

WordPress (4) 4 - Crear un tema hijo

Referencias:

  1. Cree la carpeta twentyseventeen-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 Seventeen Child
    Theme URI: https://wordpress.org/themes/twentyseventeen/
    Template: twentyseventeen
    Author: TU NOMBRE
    Author URI: TU PÁGINA WEB
    Description: Tema hijo de Twenty Seventeen
    Version: 1.0
    Updated: 2017-02-06
    License: GNU General Public License v2 or later
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
    */
  3. Cree el archivo functions.php con el siguiente contenido
    <?php
    // Exit if accessed directly
    if ( !defined( 'ABSPATH' ) ) exit;
    
    // BEGIN ENQUEUE PARENT ACTION
    // AUTO GENERATED - Do not modify or remove comment markers above or below:
    
    if ( !function_exists( 'chld_thm_cfg_parent_css' ) ):
        function chld_thm_cfg_parent_css() {
            wp_enqueue_style( 'chld_thm_cfg_parent', trailingslashit( get_template_directory_uri() ) . 'style.css', array(  ) );
        }
    endif;
    add_action( 'wp_enqueue_scripts', 'chld_thm_cfg_parent_css', 10 );
    
    // END ENQUEUE PARENT ACTION
    

    Nota: El ejemplo anterior de functions.php es el que genera el plugin Child Theme Configurator.

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

  1. Cuatro elementos de la interfaz

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

    body.has-header-image .site-description {
      color: yellow;
    }
    
    .page-title {
      border-bottom: green 3px solid;
    }
    
    article.post {
      border: green 3px solid;
      margin-bottom: 10px;
      padding: 5px;
    }
    
    h2.entry-title {
      font-weight: bold;
      text-shadow: 5px 5px lightgrey;
    }
  2. 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:

    section.widget {
      border: green 3px solid;
      border-radius: 10px;
      margin-bottom: 10px;
      padding-bottom: 10px;
    }
    
    section.widget ul {
      padding: 0 5px;
    }
    
    h2.widget-title {
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      margin-bottom: 10px;
      padding: 5px;
      background-color: green;
      color: white;
      font-size: 1rem;
    }

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