• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Themes / Insertar un logo SVG animado en WordPress

Insertar un logo SVG animado en WordPress

SVG animado en WordPress

[ 25 julio 2016 ] [ Actualizado: 8 enero 2019 ]
[ Autor: Jhon Marreros Guzmán ][ Themes - Avanzado] [ ]

imagen

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

SVG se esta popularizando, tener imágenes vectoriales ofrece una serie de ventajas, entre ellas la animación. En este artículo usaremos una imagen en formato SVG, la animaremos y la usaremos como logo en nuestro sitio web WordPress.

 

1- Imagen vectorial SVG

Partimos del hecho que tenemos imagen vectorial en formato SVG, esta imagen se puede construir en un software como Adobe Illustrator o Inkscape. Si abrimos esta imagen en un editor veremos una serie de código xml. A continuación se muestra la imagen de ejemplo que trabajaremos en modo código y el resultado al verla en un navegador.

Ver el Pen en Logo SVG ejemplo – Inicial por Jhon (@jmarreros) en CodePen

 

2- Animando la imagen SVG

Existen diferentes maneras de animar un archivo SVG, sin embargo veremos la opción SMIL que permite insertar el código de animación como parte de las etiquetas de SVG. La animación, para nuestra imagen de ejemplo, será de los dos engranajes y aplicaremos un efecto de rotación. El código final de la animación se puede observar a continuación.

See the Pen Logo SVG ejemplo – Final by Jhon (@jmarreros) on CodePen.

Básicamente cada elemento de engranaje es desplazado al origen, usamos el siguiente código:


 transform="translate(0,0)"

Luego, hemos insertado el código de animación dentro del elemento, por ejemplo:


        <animateTransform attributeType="xml"
                    attributeName="transform"
                    type="rotate"
                    from="360 fx fy"
                    to="0 fx fy"
                    dur="10s"
                    fill="freeze"
                    repeatCount="indefinite"/>


En donde fx y fy es la posición final del elemento, será la misma, puesto que, queremos que rote sin desplazarse.
Ten en cuenta que IE aún no soporta este tipo de animación en SVG, esperamos que en futuras versiones incluyan esto, sin embargo en el resto de navegadores lo verás correctamente.

 

3- Subir imágenes SVG en WordPress

Por defecto en versiones actuales de WordPress no es posible insertar archivos SVG, tal como lo haríamos con una imagen JPG, por lo que, se tiene que agregar el siguiente código en el archivo functions.php del theme que estamos usando.


function cc_mime_types($mimes) {
$mimes['svg'] = 'image/svg+xml';
return $mimes;
}
add_filter('upload_mimes', 'cc_mime_types');

En le siguiente artículo puedes aprender cómo usar imágenes SVG en WordPress.

 

4- Insertar el archivo SVG como logo

Finalmente, una vez tenemos subida la imagen SVG, reemplazaremos el logo, sin embargo para algunos themes no será posible la asignación directa, en nuestro ejemplo, para el theme twentysixteen, tenemos que modificar el archivo header.php del theme, modificamos y agregamos el siguiente código.

<?php //twentysixteen_the_custom_logo(); ?>
<a href="/"><img src="#" alt="texto alterno"/></a>

En el código anterior, ubicamos el código PHP que carga el logo personalizado y lo comentamos, en su lugar, usaremos código HTML. Tenemos que reemplazar el enlace, para ir la home del sitio, y reemplazar # por la url de la imagen SVG que hemos subido a nuestro sitio.

 
¿Aún con dudas?, te sugiero revisar el siguiente video, en donde se detallan cada uno de los puntos tratados anteriormente.

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Cómo eliminar todos los productos de WooCommerceCómo eliminar todos los productos de WooCommerce
  • Agrupar los resultados de búsqueda en WordPressAgrupar los resultados de búsqueda en WordPress
  • tipos de complementos de WordPress5 tipos de complementos de WordPress
  • Sincronizar WooCommerce y Google SheetsSincronizar WooCommerce y Google Sheets
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (3 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. Christian

    26 noviembre, 2020

    Hola, disculpa lo inexperto, pero es posible generar este código de animación a través del Adobe Animate o After Effects?

    • Jhon Marreros Guzmán

      26 noviembre, 2020

      Hola, al parecer si es posible, revisa: https://www.youtube.com/watch?v=h8tInajwIHo

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

Personalizar el mantenimiento programado de WordPress

Cómo usar Transients en WordPress

¿Se puede evitar el efecto Lock-in en WordPress?

Agregar archivos de fuentes tipográficas en WordPress

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados