Cambiar puntero con c贸digo en WordPress

Cuando cambi茅 el puntero de esta web no deb铆 chequear bien el funcionamiento馃槄, y sin saber muy bien como parece que el checkbox de la newsletter no funcionaba correctamente, o eso me pareci贸 a m铆. Para ello tuve que mirar el c贸digo que utilic茅 en su momento, es el que ver谩s a continuaci贸n. Lo volv铆 a revisar y me puse a probar algunas propiedades de CSS meramente por testearlo y al volver al estado incial funcionaba correctamente.馃し馃徎

As铆 que si quieres modificar el puntero de tu p谩gina web y no quieres utilizar plugins, este c贸digo es la clave. Para a帽adirlo a tu web puedes utilizar un plugins para introducir c贸digo, o directamente en el archivo functions.php, este c贸digo te permite modificar como se visualiza el puntero de tu p谩gina web.

add_action( 'wp_head', 'mi_funcion_personalizada' );

function mi_funcion_personalizada() {
    ?>
    <style>
        * {
            cursor: url('URL'), auto;
        }
    </style>
    <?php
}

Para que te funcione hay que sustituir 芦URL禄 por la url de origen donde tengas el asset o archivo subido y accesible.

Guardas y si verificas el funcionamiento y va todo correcto. Listo! 馃檶馃徏

Personalizar puntero

Para personalizar el puntero deber谩s utilizar una imagen, te recomiendo utilizar m铆nimo un .png para que el fondo que no sea puntero sea transparente, y si lo quieres hacer bien deber铆as utilizar un .svg, ya que un vector funcionar谩 m谩s 贸ptimamente en la interfaz y siempre se ver谩 mejor.

Puede que cuando vayas a subir un vector a WordPress este no te lo permita por seguridad, tendr谩s que activar la subida de ese tipo de fichero mediante un plugin u otro c贸digo.

No es para tirar cohetes, pero mola m谩s 驴no crees? 馃檭

Propiedades CSS del cursor web

Si detectas que no funciona correctamente y quieres asegurarte de que el puntero haga 芦click禄 e interact煤e correctamente debes utilizar una propiedad CSS como 芦default禄, que pone el puntero sin parafernalias.

add_action( 'wp_head', 'mi_funcion_personalizada' );

function mi_funcion_personalizada() {
    ?>
    <style>
        * {
            cursor: url("URL'), default;
        }
    </style>
    <?php
}

Aqu铆 puedes encontrar todos los valores por los que se puede modificar:

Categor铆aNombre de CSSDescripci贸n
GeneralautoEl navegador (user agent) determina el cursor que se mostrar谩 basado en el contenido presente.
Por ejemplo, equivalente a 鈥榯ext鈥 al pasar el cursor sobre texto.
defaultCursor predeterminado (generalmente una flecha).
noneNo se muestra ning煤n cursor.
Links & statuscontext-menuCursor que indica que hay un men煤 contextual disponible bajo el cursor.
helpCursor que indica que hay ayuda disponible.
pointerCursor utilizado al pasar el cursor sobre enlaces (generalmente una mano).
progressCursor que indica que el programa est谩 ocupado en segundo plano pero el usuario a煤n puede interactuar con la interfaz (a diferencia de 鈥榳ait鈥).
waitCursor que indica que el programa est谩 ocupado (a veces un reloj de arena o un reloj).
SelectioncellCursor que indica que se pueden seleccionar celdas.
crosshairCursor de cruz, a menudo utilizado para indicar la selecci贸n en una imagen de mapa de bits.
textCursor que indica que se puede seleccionar texto (generalmente un cursor de texto vertical).
vertical-textCursor que indica que se puede seleccionar texto vertical (generalmente un cursor de texto lateral).
Drag and dropaliasCursor que indica que se va a crear un alias o acceso directo.
copyCursor que indica que se puede copiar algo.
moveEl objeto sobre el que se pasa el cursor se puede mover.
no-dropCursor que indica que no se permite soltar en la ubicaci贸n actual.
not-allowedCursor que indica que no se puede hacer algo.
Resize & scrollingall-scrollCursor que indica que se puede desplazar algo en cualquier direcci贸n (pan).
col-resizeCursor para cambiar el tama帽o de columnas horizontalmente.
e-resizeCursor para cambiar el tama帽o del borde derecho de un elemento.
ew-resizeCursor para cambiar el tama帽o hacia la izquierda o derecha.
n-resizeCursor para cambiar el tama帽o del borde superior de un elemento.
ne-resizeCursor para cambiar el tama帽o de la esquina superior derecha de un elemento.
nesw-resizeCursor para cambiar el tama帽o en las direcciones superior derecha o inferior izquierda.
ns-resizeCursor para cambiar el tama帽o hacia arriba o hacia abajo.
nw-resizeCursor para cambiar el tama帽o de la esquina superior izquierda de un elemento.
nwse-resizeCursor para cambiar el tama帽o en las direcciones superior izquierda o inferior derecha.
row-resizeCursor para cambiar el tama帽o de filas verticalmente.
s-resizeCursor para cambiar el tama帽o del borde inferior de un elemento.
se-resizeCursor para cambiar el tama帽o de la esquina inferior derecha de un elemento.
sw-resizeCursor para cambiar el tama帽o de la esquina inferior izquierda de un elemento.
w-resizeCursor para cambiar el tama帽o del borde izquierdo de un elemento.
Fuente: Mozilla


脫scar L贸pez Poveda

Dise帽ador UX/UI y de producto digital.

Soy 脫scar L贸pez y vivo dise帽ando y creando ideas, me encanta descubrir, aprender y compartir todo lo que aprendo sobre entornos, productos digitales y UX. Me apasiona el dise帽o y siempre estoy abierto a apuntarme a un 芦bombardeo禄 de poryectos y descubrir personas que les apasione el mundo digital.

Recibe todas las semanas contenido de calidad sobre Dise帽o UX y UI en tu mail馃憞馃徏馃憞馃徏

Sigue leyendo...

  • Atajos de teclado en Figma

    Si eres dise帽ador digital y trabajas en el mundo de producto digital鈥. fijo que conoces y utilizas Figma. Como en…
  • Regla 60 30 10

    En el momento de dise帽ar, ya sea para interfaces de usuario o publicaciones en redes sociales, existe un momento crucial:…
  • Qu茅 es el No Code

    El No Code, tambi茅n conocido como desarrollo Sin C贸digo, se refiere a un movimiento y un conjunto de herramientas y…