En este nuevo post vamos a ir añadiendo pequeños trucos para tu WordPress, trucos con los que posiblemente te podrás evitar tener que instalar plugins o plantillas específicas para una función en concreto. Esperemos que te ayuden.
Índice de contenidos
Redireccionar a una página después del login
En ocasiones nos puede interesar que después del logín de un usuario le queramos redireccionar a una url en concreto. Para ellos unicamente pegaremos el siguiente código PHP en el archivo functions.php de nuestro child theme y modificaremos la url definida en la función por la url a la que queramos redireccionar:
function redireccionar(){ return ('url_a_la_que_queramos_redireccionar'); } add_filter('login_redirect','redireccionar'); add_filter('show_admin_bar','__return_false');
Crear página de precarga para WordPress
Lo primero que haremos será acceder a la web lottiefiles.com y descargamos la animación que queramos que aparezca en la página de la precarga en formato gif. Recuerda que si la página de tu precarga va a ser de color, define el mismo color de fondo para el gif o dejalo transparente.
Acto seguido crearemos un child theme. Si clicas aquí te explicamos cómo hacerlo.
Lo siguiente será duplicar el archivo header.php de tu tema padre a tu tema hijo. Para ello acceder por FTP o desde el administrador de archivos de tu servidor y descargalo en local para luego subirlo al child theme.
Desde el administrador de tu wordpress vete a apariencia/editor de temas y accede al archivo header.php de tu child theme y pega el siguiente código.
Módifica la url de la imagen por la que has descargado de lottiefiles.com y modifica el color de fondo.
Ya tienes tu página de precarga creada. Revisa lo pasos en el siguiente vídeo.
<div class="loader" ></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$('.loader').fadeOut(3000);
}); });
</script>
<style>
.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('/wp-content/uploads/2021/05/34115-rocket-lunch.gif') 50% 50% no-repeat #fff; /* Change the #fff here to your background color of choice for the preloader fullscreen section */
}
</style>
Personalizar la barra de scroll en WordPress
Simplemente, desde el admin de WordPress nos vamos a apariencia/personalizar/ css adicional y pegamos el siguiente código CSS. Luego unicamente nos faltará personalizar a nuestro gusto modificando el ancho y los colores de la barra de scroll.
/*definimos el ancho del scroll */
::-webkit-scrollbar{
width: 20px;
}
/*definimos el color de fondo de de la barra de scroll */
::-webkit-scrollbar-track {
background:#2b85f0;
}
/*personalizamos el scroll*/
::-webkit-scrollbar-thumb{
border-radius: 5px;
background:linear-gradient(180deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
}
Crear campos personalizados en el perfil de usuario
Para crear campos personalizados en el perfil de los usuarios simplemente pegaremos el código PHP en el archivo functions.php de nuestro child theme. Si no sabéis como crear un child theme podéis clicar aquí y os explicamos como crearlo.
Dentro de la funcion del código duplicaremos la línea $methods tanta veces como campos adicionales queramos crear y dentro de cada una de las líneas duplicadas modificaremos los valores entre comillas por lo que queramos, siendo el primer campo en nombre de la meta key y la segunda el nombre del campo.
Para una mayor compresión revisar el vídeo que hay después del código.
add_filter( 'user_contactmethods', 'modify_user_contact_methods' );
function modify_user_contact_methods( $methods ) {
// Add user info
$methods['user_direccion'] = __( 'Tu dirección' );
$methods['user_localidad'] = __( 'Tu localidad' );
$methods['user_edad'] = __( 'Tu edad' );
$methods['user_sexo'] = __( 'Tu sexo' );
return $methods;
} 
Menú flotante sin plugins.
Para crear nuestro menú flotante deberemos tener un ligero conocimiento de CSS, pero esperamos que entre el vídeo que adjuntamos y el código que encontrarás a continuación podrás llevarlo a cabo.
Hacemos botón derecho sobre la cabecera de nuestra web y buscamos la clase asignada. Normalmente acostumbra a ser una clase header, pero puede variar dependiendo del tema. Una vez la averiguamos, desde nuestro administrador nos vamos a apariencia/personalizar/css personalizado y pegamos este código:
.nombre de la clase del header{
position:fixed;top:0px;margin:auto;z-index:1000;widht:100%;} Si estas siguiendo el ejemplo del vídeo verás que nos encontramos con el problema que el header pisa el contenido. Para dar solución al problema repetimos la operación y inspeccionamos el contenedor del contenido para averiguar la clase y le añadimos un margen tal cual el siguiente código:
.nombre de la clase del contenido{
margin-top:70px;} Guardamos los cambios y ya tendremos nuestro menú flotante sin plugins.
Para una mejor compresión te invitamos a seguir el siguiente vídeo:
Cómo ocultar la barra de administración en WordPress
add_action('after_setup_theme', 'ocultar_admin_bar');
function ocultar_admin_bar() {
if (!current_user_can('administrator') && !is_admin()) {
add_filter( 'show_admin_bar', '__return_false' );
}
}
Oculta la barra de administración en WordPress a suscriptores
Si por el contrario queremos que la barra de administración se muestre a todos los roles de usuario excepto a los usuarios que son suscriptores deberemos modificar el anterior código PHP por este, y de igual forma lo insertaremos en el archivo functions.php.
function disable_admin_bar_for_subscribers(){
if ( is_user_logged_in() ):
global $current_user;
if( !empty( $current_user->caps['subscriber'] ) ):
add_filter('show_admin_bar', '__return_false');
endif;
endif;
}
add_action('init', 'disable_admin_bar_for_subscribers', 9);
Protege los textos de tu WordPress, evita que sean copiados
Aunqué es bien sabido de que es una mala práctica apropiarse de texto ajenos, muchos usuarios siguen preferiendo el camino fácil y hacen suyos textos que son de terceras personas.
Si quieres evitar que te roben tus texto, aquí te ofrecemos una solución muy fácil de implementar y sin la necesidad de instalar un plugin.
Desde tu administrador de WordPress te vas a Apariencia/personalizar/css adicional y pegas el siguiente código css:
* {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
Una vez guardes los cambios podrás comprobar que no se permite la selección de textos.
Puedes revisar los pasos de este truco en el siguiente vídeo.
Botón de whatsapp sin plugins
Lo primero que realizaremos es crear un child theme. En el tutorial cómo crear un child theme en 3 minutos te explicamos como hacerlo. Recuerda haber subido tu imagen del botón de whatsapp a la biblioteca de medios.
En el archivo functions.php de tu child theme pega el siguiente código modificando la url de la imagen del botón y la url de tu enlace de whatsapp.
function whatsapp(){
?>
<div id="whatsapp">
<a target="_blank" href="http://Enlace de whatsapp">
<img width="50px" height="50px" src="url de la imagen del icono de whatsapp">
</a>
</div>
<?php
}
add_action ('wp_footer','whatsapp'); Para darle cierta personalización ve a apariencia/personalizar/css adicional y pega el siguiente código css:
#whatsapp{
float:right;
margin-right:15px;
margin-bottom:15px;
} Y ya tienes tu botón de whatsapp. Si tienes cualquier duda revisa el siguiente vídeo.
Cerrar sesiones de usuarios automaticamente.
Para conseguir cerrar sesiones de usuarios automaticamente pegaremos el siguiente código PHP en el archivo functions.php de nuestro child theme y en el que solo deberemos realizar una modificación.
El valor de $expiration lo modificaremos por el número de segundos que queramos que la sesión de usuario siga abierta.
function logout_after_time( $expiration, $user_id) {
if(!current_user_can($user_id, 'administrator') ){
$expiration = 5; // tiempo que durará la sesión abierta en segundo
}
return $expiration;
}
add_filter('auth_cookie_expiration','logout_after_time', 10, 2);
Modificar el enlace del logo de la pagina del login wordpress
Después de crear nuestro child them accedemos al archivo functions.php y pegamos el siguiente código.
function modifica_enlace_logo() {
return home_url();
}
add_filter( 'login_headerurl', 'modifica_enlace_logo' );
Insertar el logo de la web en la página del login
Accedemos al archivo functions.php y pegamos el siguiente código. Acto seguido insertamos en el atributo background-image la url de la imagen de nuestro logo.
Ya para finalizar modificamos los atributos width y height para definir el ancho y el alto de nuestra imagen.
/* Cambiar el logo de WordPress en la pagina del login */
function cambiar_logo_login() {
?>
<style type="text/css">
#login h1 a, .login h1 a {
background-image: url(https://magi.byteweb.es/url de la imagen del logo);
background-repeat: no-repeat;
background-size: cover;
height:52px;
width: 190px;
}
</style>
<?php
}
add_action( 'login_enqueue_scripts', 'cambiar_logo_login' );
Revisa los pasos en el siguiente vídeo.
Mostrar el número de visitas en la página del blog
Desde apariencia/menú crearemos las 2 estructura de menú, una para usuarios logueados y otra para los que no.
Acto seguido nos iremos a apariencia/ editor de temas y en el archivo functions.php insertaremos el siguiente código modificando unicamente menu_registrados y menu_no_registrados por los nombres de nuestros menús y ya mostraremos el menú alternativo para usuarios logueados.
function insertar_visitas(){
echo "el numero de visitas es:";
echo do_shortcode('[WPPV-TOTAL-VIEWS]');
}
add_action ('ocean_after_single_post_content','insertar_visitas');
Mostrar menú alternativo a usuarios logueados
Desde apariencia/menú crearemos las 2 estructura de menú, una para usuarios logueados y otra para los que no.
Acto seguido nos iremos a apariencia/ editor de temas y en el archivo functions.php insertaremos el siguiente código modificando unicamente menu_registrados y menu_no_registrados por los nombres de nuestros menús y ya mostraremos el menú alternativo para usuarios logueados.
function menu_subs( $args = '' ) {
if( is_user_logged_in() ) {
$args['menu'] = 'menu_registrados';
} else {
$args['menu'] = 'menu_no_registrados';
}
return $args;
}
add_filter( 'wp_nav_menu_args', 'menu_subs' );
Revisa los pasos en el siguiente vídeo.
Cómo añadir iconos a tu menú de WordPress con y sin plugins
Si estás intentado añadir iconos en tu menú principal de tu WordPress y no sabes cómo hacerlo, sigue leyendo este artículo porque te vamos explicar cómo añadir iconos a tu menú de WordPress con y sin plugins. Índice de contenidos Insertar iconos al menú con
Cómo hacer popups en WordPress con Elementor
Share on facebook Facebook Share on linkedin LinkedIn Share on whatsapp WhatsApp Share on twitter Twitter ¿Quieres crear una llamada a la acción en forma de popups y no sabes como hacerlo. Hoy te explicamos Cómo hacer popups en WordPress con Elementor. Índice de contenidos
Cómo conseguir tráfico para tu página web
En la actualidad crear una web o un blog se ha vuelto una una labor muy al alcance de todos, y aún más con WordPress. Un dato que da fe de esta afirmación es que más del 25% de las páginas webs se han creado
hola, excelentes video y muy bien explicados. solo una observacion, en el video donde se deberia explicar MOSTRAR MENÚ ALTERNATIVO A USUARIOS LOGUEADOS, el video se repite y vuelve a explicar MENÚ FLOTANTE SIN PLUGINS.
Hola Laureano, gracias por el dato. Ya lo he corregido. Muchas gracias