Ya seamos diseñadores, creadores de páginas web, empresas, autónomos o cualquier, nos gusta tener todo en su sitio y, por lo tanto, tener nuestra firma o texto propio en el pie nuestra web web y no la de otro. Tanto en la plantilla Extra, como en cualquiera de Elgant Themes, la mejor forma de hacerlo es crear un tema hijo para modificar los créditos del pie de página de la plantilla Extra.
En este vídeo podéis ver uno de los procesos de crear un tema hijo para cambiar los créditos del pie de página de la plantilla Extra, pero no es el único, en las siguientes líneas podréis consultar información ampliada.
Cambiar pie de página de la plantilla Extra
Siempre que queremos cambiar algo, a nivel de página web, en nuestro ámbito cotidiano o personal, se requiere un esfuerzo y agudizar el ingenio en algunos casos. Para que nuestro sitio luzca un texto alternativo al que trae por defecto con la firma de Elegant Themes, pasa lo mismo.
No hay ninguna opción que nos permita cambiarlo, como en otras plantillas, al menos en el momento de escribir este artículo. Seguramente existirá algún plugin que nos permita hacerlo, pero es un plugin innecesario que implica más código adicional al que sumar a nuestra web y, por tanto, mayor posibilidad de vulnerabilidad y lentitud.
Por qué crear un tema hijo o child theme del tema Extra
Cualquier plantilla a la que realicemos algún cambio sustancial, a nivel de hojas de estilo CSS o programación, debería tener un tema hijo o child theme sobre el que realizar los cambios. La razón es muy sencilla, si son plantillas Premium como esta, van a estar sometidas continuamente a una serie de actualizaciones que borrarían todos los cambios que hubiésemos realizado, teniendo que empezar desde el principio en cada actualización.
Pero si tenemos un tema hijo, dependiente del principal, cualquier cambio que realicemos no se verá afectado con este tipo de acción. Hay que tener muy presente que un child theme o plantilla hija, no puede funcionar sin la plantilla principal, ya que esta contendrá los archivos importantes de la web.
La plantilla Extra no necesita tener un tema hijo para modificar el código CSS, ya que dispone de un apartado, en las opciones del tema, para realizar los cambios que creamos oportunos, y los protege de las actualizaciones para que no se borren. Pero sí necesitaremos crear un tema hijo para cambiar los créditos del pie de página y poner nuestra firma o el nombre de la empresa.
Cambiar pie de página de Extra con CSS
No es la mejor forma de hacerlo, porque, aunque el resultado pueda ser satisfactorio, seguimos teniendo un código en nuestro sitio que los buscadores siguen interpretando. También es cierto que no necesitaremos crear un tema hijo para este sistema.
El método consiste en localizar la etiqueta CSS donde se encuentra el texto del pie de página y ocultarlo con la función "display: none;". De esta manera, desaparecerá del front-end (lo que mostramos a los usuarios), pero seguirá estando en el código.
1 2 3 4 | /*función ocultar pie de página*/ #footer-bottom { display: none; } |
El código CSS anterior hay que copiarlo en la casilla que aparece al final del todo de las opciones del tema.
Otra desventaja es que perderíamos la posibilidad de utilizar los enlaces de las redes sociales que nos ofrece Extra en esta sección. Pero para un apuro, podríamos utilizar este método.
Si quisiéramos tener nuestros propios créditos utilizando este sistema, tendríamos que utilizar un widget de texto en uno de los espacios que nos ofrece el footer para colocar la información.
Esta opción adoptará la configuración de los estilos CSS del footer, y no quedará elegante, por lo que tendremos que modificar esos estilos CSS para adecuarlos a un pie de página correcto. En las opciones de la pestaña Extra, como hicimos anteriormente, en la casilla de los estilos CSS añadimos el siguiente código a continuación del que teníamos, para estrechar la fila y poner el texto en color blanco.
1 2 3 4 5 6 7 | /*modificar estilos del footer*/ padding: 0px !important; margin: 0px; width: 100%; text-align: center; color: #fff; } |
Ventajas: No es necesario acceder a los archivos del servidor para realizar los cambios, todo se realiza desde la administración de WordPress. No sería necesario crear un child theme ya que no modificamos la programación de ningún archivo importante.
Desventajas: Aunque en la web ya no aparezcan los créditos de Elegant Themes, siguen estando ahí y Google los lee. Sacrificamos los widgets del footer para colocar los nuevos créditos personales, impidiendo que podamos colocar cualquier otra información que debiera ir en ese lugar.
Cómo crear un child theme o tema hijo de Extra manualmente
Si queremos modificar correctamente el texto, tenemos que crear un tema hijo para cambiar los créditos del pie de página. Básicamente consiste en crear los archivos, que van a sufrir posibles modificaciones, en una carpeta que esté vinculada con el tema padre o plantilla principal.
Los archivos que necesitamos para el tema hijo de Extra y para poder cambiar el pie del sitio son:
- screenshot.png - miniatura que muestra el tema activo
- style.css - hoja de estilos
- functions.php - funciones principales de WordPress
- footer.php - archivo con información del pie de página
Vamos a crear una carpeta en el escritorio del ordenador que llamaremos "ExtraChildTheme", o el nombre que vosotros queráis, sin espacios. Dentro crearemos tres documentos vacíos de texto que guardaremos con el nombre y las extensiones de style.css, functions.php y footer.php. Podemos hacerlo con el editor de texto de Windows o Mac, o con un editor de código, es indiferente. Vamos a ver cada archivo por separado.
screenshot.png
Esta imagen es la que se mostrará en el apartado de "Apariencia > Temas" cuando el child theme esté cargado en nuestro servidor, si no dispusiéramos de esta imagen, aparecería un cuadrado vacío.
La forma más sencilla de crear o conseguir esta imagen es ir a WordPress y descargarnos la imagen de la plantilla Extra. Pinchamos con el botón derecho del ratón y la guardamos en la carpeta del escritorio.
Si preferimos tener una imagen propia, las únicas propiedades que debéis respetar es el tamaño recomendado de 880x660 px. de resolución, y guardar el archivo con el nombre screenshot y formato png, jpg o gif.
style.css
Es el archivo que carga la hoja de estilos de nuestro tema, todas las modificaciones que hagamos aquí, serán las que carguen primero, y lo que falte, se completará con la hoja de estilos del tema padre.
La estructura de la cabecera que tenemos que escribir en el archivo es la siguiente:
1 2 3 4 5 6 7 8 9 10 | /* Theme Name: Extra Child Theme Theme URI: https://www.ingresosviaweb.com/ Template: Extra Description: Tema hijo para realizar modificaciones Author: Juan Author URI: https://www.ingresosviaweb.com/ Version: 1.0 */ /*----------------- Empieza a añadir cambios aquí abajo -------------------------------*/ |
El apartado más importante es "Templete", los demás se pueden rellenar con lo que se quiera.
- Theme Name: Escribimos el nombre de la carpeta que hemos creado en el escritorio de nuestro ordenador, o el nombre que quieras, no es importante.
- Theme URI: Es la dirección donde se encuentra la plantilla o desde donde se ha descargado.
- Templete: El nombre de la carpeta en la que se encuentra la plantilla padre dentro de wp-content/themes, en esta ocasión es Extra. Este dato sí es importante, de lo contrario no cargará la web.
- Descripción: Podemos indicar con un texto corto algo que haga referencia al tema hijo.
- Author y Author URI: Podemos introducir nuestros propios datos.
- Versión: Mostrará en el apartado de los temas de WordPress la versión que nosotros pongamos.
functions.php
El archivo functions.php se encarga de manejar las funciones internas de WordPress, como su nombre indica.
En este archivo crearemos una función que servirá para enlazar con la hoja de estilos del tema padre, y así mantener la apariencia de la plantilla.
Todo lo que escribamos en este archivo modificará el del tema padre, por lo que hay que hacerlo con prudencia, por supuesto que tendremos que empezar con una etiqueta PHP, pero no la cerraremos al final.
Este código, y su recomendación, podéis encontrarlo en el soporte de wordpress.org.
1 2 3 4 5 6 7 8 9 10 11 12 | <!--?php function my_theme_enqueue_styles() { $parent_style = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen 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()-&gt;get('Version') ); } add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' ); ?--> |
footer.php
Aunque para crear el tema hijo no es necesario, cada vez que queramos modificar un archivo, y que los cambios se mantengan tras las actualizaciones de la plantilla, la mejor forma es crear un duplicado del archivo y modificarlo desde el child theme.
Es el caso del footer.php, para hacer una copia del archivo, podemos acceder al servidor y descargarlo a la carpeta que tenemos en el escritorio, ya sea a través del administrador de archivos del servidor o a través de un cliente FTP.
Pero si tenemos miedo de entrar en la administración del servidor, podemos hacer una copia desde nuestra zona de administración de WordPress.
Nos dirigimos a "Apariencia > Editor", nos fijamos que esté seleccionada la plantilla Extra y buscamos en la columna de la derecha el archivo "Pie de página del tema (footer.php)".
Seleccionamos y copiamos todo el contenido del archivo para pegarlo en el archivo que hemos creado en el escritorio con el mismo nombre, guardamos y ya tenemos el duplicado del pie de página.
Cómo subir el child theme de Extra a nuestra web
El proceso es muy sencillo y todos sabéis como hacerlo. Comprimimos la carpeta del escritorio en un archivo ZIP y la cargamos en nuestra web como si fuese una plantilla normal.
También podemos subir la carpeta sin comprimir a "wp-content/themes" por medio de un cliente FTP o del administrador de archivos del servidor.
Una vez termine la carga, ya podemos activar el tema hijo, posiblemente tendremos que volver a configurar algunas opciones, como la página estática o los widgets. Es recomendable crear un tema hijo o child theme antes de empezar a poner bonita la web.
Cómo crear un child theme o tema hijo de Extra automáticamente
Todo el proceso anterior podemos automatizarlo por medio de plugins, existen muchos que nos permiten realizar este trabajo, pero tras probar varios, el que menos errores me ha dado, personalmente, ha sido child theme configurator.
Tras su instalación desde el repositorio de plugins de WordPress, se creará un acceso a la configuración de "Child Theme Configurator" en la pestaña Herramientas.
El proceso consta de nueve pasos muy sencillos de seguir para crear el child theme, pero hay que sumar una operación más para crear un duplicado del archivo footer.php, que nos servirá para cambiar los créditos del pie de página de la plantilla Extra.
- Punto 1: Nos fijamos que esté marcada la opción "CREATE a new Child Theme".
- Punto 2: Si tenemos varias plantillas instaladas, elegimos sobre la que queremos realizar el tema hijo.
- Punto 3: Pinchamos en "Analyze" para comprobar que nuestro tema permite la creación de un tema hijo.
- Punto 4: Escribimos un nombre para el nuevo child theme o dejamos el que viene por defecto.
- Puntos 5, 6 y 7: Los dejamos como vienen por defecto.
- Punto 8: Marcamos la casilla para replicar cualquier cambio que hayamos realizado antes de crear el tema hijo.
- Punto 9: Aceptamos crear el nuevo child theme pinchando sobre el botón.
Cuando aceptemos, se creará el tema hijo y podremos activarlo desde "Apariencia > temas" como cualquier otra plantilla. Quiero recordar que no podemos eliminar la plantilla padre o principal ya que dependemos de ella para que la web cargue correctamente.
Duplicar el archivo footer.php
Vamos ahora a duplicar el archivo footer.php para poder modificarlo con posterioridad. Al igual que el footer.php, si tuviésemos la necesidad de modificar algún archivo diferente, podríamos realizar la copia de la misma manera que os muestro.
Abrimos la configuración del plugin que hemos instalado y pinchamos sobre la pestaña "Files", buscamos en la lista footer.php y lo marcamos. Cuando aceptemos, se creará una copa del archivo en la carpeta del tema hijo.
Este plugin tiene muchas más posibilidades, pero con las que hemos utilizado, nos basta y nos sobra para nuestro propósito.
Modificar footer.php para cambiar el pie de página de la plantilla Extra
Puede que sea el tema más delicado para muchos y le tengan un poco de miedo a la programación, pero es muy sencillo de realizar el cambio una vez tenemos creado el child theme y duplicado el footer.php
Desde el administrador de WordPress, nos dirigimos a "Apariencia > Editor" para poder acceder al código del archivo footer.php, si no tenemos habilitada la función de edición por seguridad, tendremos que habilitarla o descargar el archivo a través de un cliente FTP o del Administrador del servidor.
El archivo se encuentra en "wp-content/themes/(tema hijo)"
1 2 | <!-- Footer Info --> <p id="footer-info"><?php printf( et_get_safe_localization( __( 'Designed by %1$s | Powered by %2$s', 'extra' ) ), '<a href="http://www.elegantthemes.com" title="Premium WordPress Themes">Elegant Themes</a>', '<a href="http://www.wordpress.org">WordPress</a>' ); ?></p> |
Localizamos el texto de la imagen, que es el que hace referencia a lo que aparece escrito como créditos de la web, y dependiendo de lo que queramos hacer, tenemos varias posibilidades:
1 Cambiar el texto del footer.php por un texto plano sin enlaces ni links
Para esta opción, eliminamos las etiquetas <a> y los links que incorporan. Cambiamos el texto en inglés y las funciones que lo acompañan por el texto que queramos que aparezca, respetando las comillas que existen.
1 2 | <!-- Footer Info --> <!--?php printf( et_get_safe_localization( __( 'Bienvenido a mi web' ) )); ?--> |
2 Cambiar el texto del footer.php por un texto con enlaces
No tiene ningún misterio, detrás del texto en inglés aparecen unas funciones, "%1$s" y "%$2s", podríamos poner todas las que quisiéramos respetando su posición. Estas funciones hacen referencia a los enlaces de las etiquetas <a> en el orden en el que aparecen.
Si cambiamos el texto en inglés por uno personalizado y dejamos la función como está, podemos poner un enlace personalizado cambiando las propiedades de la etiqueta <a>, sustituyendo la url y el nombre del enlace.
1 2 3 | <!-- Footer Info --> <!--?php printf( et_get_safe_localization( __( 'Visita mi página web %1$s' ) ), <a href="https://www.ingresosviaweb.com/" title="Ingresos Vía web"-->www.ingresosviaweb.com); ?--> |
Puedes pinchar a aquí para ver todas las entradas relacionadas con esta plantilla.
Suscríbete para no perderte ningún artículo nuevo, te aviso por email
¿Te ha resultado útil la información? Deja un comentario con tu opinión.
Hola!! Muchas gracias por todo la info, no sé si podrías ayudarme pero te comento, he instalado en Extra de Divi el tema hijo y para quitar del pie de pagina he modificado el código php del tema hijo como en el video pero me aparece descolocado y se me ha ido la pagina de inicio que la tenía hecha en DIVI .
Muchas gracias!
Puedes volver a activar el tema padre para recuperar la configuración inicial. El tema Divi tiene su propio apartado de configuración del pie de página y no necesita un tama hijo para eso. Además los archivos del tema extra son diferentes al del tema Divi, por lo que no puedes compaginarlos.
Felicitaciones. Extra Theme es un buen tema pero todavia no tiene tanta info de calidad dando vueltas por la web como DIVI.
Gracias por la dedicacion. Saludos