Cómo editar la plantilla Storefront de WordPress correctamente

Creando un tema hijo

Si estás creando tu página con WordPress y estás usando la plantilla de Storefront (o cualquier otra) y te gustaría editarla correctamente, entonces esto es para ti.

En este tutorial vas a aprender a crear un tema hijo y a subirlo al servidor utilizando el acceso por FTP.

Para editar una plantilla de WordPress correctamente tenemos que crear un “tema hijo” que herederá absolutamente todo del “tema padre” .

ANTES DE PONERNOS MANOS A LA OBRA…

Tema Padre: Tema original que queremos editar. En este caso el tema padre sería Storefront.

Tema Hijo: Nuevo tema que crearemos, que en este caso se llamara Storefront Child. Éste hereda todo del tema padre y es aquí donde guardarás los cambios que realices de css, php, etc.

De esta forma no hay que tocar absolutamente nada del tema padre porque todos los cambios que queramos hacer irán en el tema hijo. Así que podrás realizar las actualizaciones que haya de Storefront sin que pierdas tus cambios.

Y hasta aquí la teoría, ahora pasemos a la práctica. 😀

 

Índice 

 

1. Descargar Filezilla y Sublime

Para este tutorial necesitas tener los siguientes programas instalados:

 

2. Acceder a los archivos por FTP

2.1. Datos de acceso

¿Tienes los datos para poder acceder por FTP a los archivos de tu web almacenados en el  Hosting?.

Es decir, el nombre del servidor, usuario y contraseña.

Estos datos te los facilita la empresa con la que contrataste el plan de Hosting para tu web. Te debieron de enviar un email con esta información cuando lo contrataste.

De no ser así, tendrás que contactar con ellos para que te la proporcionen. Envíales un email contándoles que necesitas que te manden los datos para poder acceder por FTP.

 

2.2. Configuración y conexión con el servidor

Una vez sepas los datos, abre Filezilla para configurar la conexión. Para ello hay que crear un “nuevo sitio”.

Archivo -> Gestor de Sitios

Haz click en “Nuevo Sitio”

Te aparecerá el nuevo sitio creado en color azul para que le pongas el nombre que quieras. Lo normal es llamarlo como tu web para no liarte en un futuro.

Lo podrás cambiar tantas veces como quieras haciendo click en “Renombrar”.

Rellena los campos con los datos que te facilitó tu empresa de Hosting: (Servidor, Usuario y Contraseña).

Protocolo: FTP. Protocolo de Transferencia de Archivos

Servidor: a rellenar con tus datos

Puerto: a rellenar con tus datos (normalmente no hace falta introducir ninguno)

Cifrado: Usar FTP explícito sobre TLS sí está disponible.

(algunas empresas utilizan el cifrado “Usar solo FTP plano”, esto te lo indicarán ellos.)

Modo de acceso: Normal.

Usuario: a rellenar con tus datos

Contraseña: a rellenar con tus datos

Y listo!. En un principio esto es todo.

Selecciona “Conectar”.

 

 

2.3.  Acceder a la carpeta Themes de WordPress

Si todo va bien aparecerán tus archivos en esta sección: (a cada persona le aparecerá más o menos archivos según la empresa con la que haya contratado el Hosting).

Ahora busca la carpetapublic_html” o también puede llamarse “html”, “www”, ”httpdocs”.

Haz click en esa carpeta y luego en wp-content -> themes.

Ahí te aparecerán los temas que tienes instalados en WordPress. En mi caso yo tengo varios instalados, como se puede ver en la captura de pantalla.

Aquí es donde subirás el tema hijo.

Es importante que antes hayas instalado la plantilla original de Storefront para poder hacer un tema hijo de ella.

Deja abierto Filezilla justo en este punto y minimiza la pantalla para seguir con el siguiente paso.

 

 

3. Crear tema hijo

3.1. Crear carpeta “storefront-child”

Crea una carpeta, en el escritorio de tu ordenador, con el nombre del tema padre seguido de “-child”.

En este caso, como va a ser un tema hijo de la plantilla de wordpress “storefront”, el nombre de la carpeta será “storefront-child

 

 

 

3.2. Crear archivo “style.css”

Abre el programa Sublime y crea un nuevo archivo.

File -> New File

Pega el siguiente código:

/*
Theme Name: Storefront Child
Theme URI: www.aguilaweb.com
Version: 1.0.0
Description: Tema hijo de Storefront para hacer cambios sin riesgo
Author: Aguila Web
Author URI: www.aguilaweb.com
Template: storefront
License: GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
*/

Edítalo con tus datos:

Theme Name: Es el nombre del tema que se mostrará en wordpress.

Theme URI: La dirección de tu tema. Aquí lo que suele hacer todo el mundo es poner su página web.

Versión: Cómo su nombre lo indica, es la versión de tu tema. Como lo estamos creando ahora, la versión será la 1.0.0

Description: La descripción del tema que aparecerá en WordPress.

Author: Quién realiza el tema. Lo normal es poner tu nombre.

Author URI: La URL del autor. Aquí lo mismo, pon tu dirección.

Template: IMPORTANTE El nombre de la carpeta del tema padre que aparece en Filezilla, es decir, el nombre de la carpeta que contiene la plantilla original.

License: El tipo de licencia que vas a utilizar. Aquí no te compliques. Lo normal es utilizar la misma que el tema padre, que suele ser esta: GNU General Public License v2 or later.

License URI: La URL de la licencia, que en este caso es esta: http://www.gnu.org/licenses/gpl-2.0.html

 

Guarda el archivo dentro de la carpeta que creamos antes “storefront-child” y le ponemos el nombre “style”  eligiendo previamente el Tipo CSS

Files -> Save As

 

 

 

3.3. Crear el archivo functions.php

Desde Sublime crea un nuevo archivo (File->New File) y pega el siguiente código:

<?php 

function enqueue_styles_child_theme() {

	$parent_style = 'storefront-style';
	$child_style  = 'storefront-child-style';

	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')
				);
}
add_action( 'wp_enqueue_scripts', 'enqueue_styles_child_theme' );

?>

Esta función sirve para que el tema herede todo los estilo del tema padre y a su vez, priorice los cambios que posteriormente añadas en el archivo style.css de el tema hijo.

IMPORTANTE

Si tu tema padre NO ES Storefront, entonces tienes que cambiar la variables $parent_style y $child_style indicando el nombre de tu tema:

$parent_style = ‘storefront-style';
$child_style  = ‘storefront-child-style';

Si por ejemplo la plantilla que quieres editar es GeneratePress, entonces quedaría así:

$parent_style = ‘generatepress-style';
$child_style  = ‘generatepress-child-style';

Y listo.

Guarda el archivo con el nombre “functions” y no te olvides de eligir el Tipo PHP.

 

 

 

3.4. Añadir imagen para la vista previa del tema

Si quieres añadir una imagen como vista previa del tema, lo único que necesitas es añadir una imagen a la carpeta de tu tema hijo con el nombre de “screenshot”. Y listo!.

El resultado sería este:

 

4. Subir tema hijo al Servidor

Ahora ha llegado el momento de subir la carpeta al servidor.

Como dejaste abierto Filezilla, esto es tan facil como arrastrar la carpeta “storefront-child” y soltarla en el directorio de themes.

 

 

5. Comprobar y activar el tema hijo

Por último, accede al panel de control de WordPress, verifica que aparece el nuevo tema correctamente y ACTÍVALO.

 

Espero que te haya servido este tutorial. Lo he creado con la mayor sencillez y detalle posible para que todo el mundo pueda seguirlo.  😀

Si tienes alguna duda o problema, puedes dejar un comentario (ya que otra persona puede tener la misma duda que tú).

Será un placer contestarte con la mayor brevedad posible. 😀

 

Deja un comentario público