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 type="javascript/blocked" data-wpmeteor-type="text/javascript" >
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>
Desactivar la carga de Gutenberg sin plugins
Vamos a añadir el siguiente código a nuestro functions.php.
add_filter('use_block_editor_for_post', '__return_false');
add_action('enqueue_block_editor_assets', function() {
wp_dequeue_style('wp-block-editor');
});
add_filter('replace_editor', function($default_editor) {
return 'classic';
});
Cambiar la longitud de los excerpts en WordPress
Añadimos la siguiente funcion de php al archivo functions.php y modificamos el valor del return por el número de palabras que queremos que nos muestre.
function new_excerpt_length($length) {
return 100;
}
add_filter('excerpt_length', 'new_excerpt_length');
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:
Redireccionar a página del login personalizada.
Pega este código en tu functions.php y modifica la url de la redirección que esta en la línea 4.
function custom_login_error_redirect($username) {
$referrer = $_SERVER['HTTP_REFERER'];
if (!empty($referrer) && !strstr($referrer, 'wp-login') && !strstr($referrer, 'wp-admin')) {
wp_redirect(home_url('/tu-pagina-personalizada'));
exit;
}
}
add_action('wp_login_failed', 'custom_login_error_redirect');
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' );
}
}
Excluir categorías de los resultados de búsqueda
Para excluir categorías de los resultados de búsqueda pegaremos el siguiente código en el functions.php de nuestro child theme y modificaremos $query->set(‘cat’, ‘-24’); insertando la ID de categoría en negativo. Revisa el vídeo para averiguar las ID de las categorías que quieras excluir.
function exclude_category_from_search($query) {
if ($query->is_search) {
$query->set('cat', '-17,-16');
}
return $query;
}
add_filter('pre_get_posts','exclude_category_from_search');
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.
Evitar que te copien texto de tu WordPress sin plugins
<script type="javascript/blocked" data-wpmeteor-type="text/javascript" >
(function( $ ) {
$('body').bind('copy contextmenu',function(e) {
e.preventDefault(); return false;
});
$(document).ready(function(){
$("body").css("-webkit-user-select","none");
$("body").css("-moz-user-select","none");
$("body").css("-ms-user-select","none");
$("body").css("-o-user-select","none");
$("body").css("user-select","none");
});
})( jQuery );
</script>
Marquesina en la pestana del navegador
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.
<script type="javascript/blocked" data-wpmeteor-type="text/javascript" language="JavaScript">
var txt="Añadir el texto de la marquesina ";
var espera=100;
var refresco=null;
function rotulo_title() {
document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
refresco=setTimeout("rotulo_title()",espera);}
rotulo_title();
</script>
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' );
Contador de visitas en las entradas del blog
Cómo siempre que vayamos a trabajar con funciones de PHP lo primero que haremos será crear un child theme. En nuestro blog encontraras este post en el que explicamos cómo hacerlo.
Acto seguido, desde tu administrador de archivos o desde apariencia/editor de temas pegarás el siguiente código PHP en el archivo functions.php de tu child theme, siempre dentro de la etiqueta de apertura de PHP:
if ( ! function_exists( 'function_name_given' ) ) :
/** * get the value of view. */
function function_name_given($postID) {
$count_key = 'wpb_post_views_count';
$count = get_post_meta($postID, $count_key, true);
if($count ==''){
$count = 1;
delete_post_meta($postID, $count_key);
add_post_meta($postID, $count_key, '1');
} else {
$count++;
update_post_meta($postID, $count_key, $count);
}
}
endif;
Lo siguiente que haremos será duplicar el archivo single.php de tu tema padre en tu tema hijo. Es tan fácil como hacer un copiar/pegar desde el administrador de archivos. Y dentro de este archivo pegaremos el siguiente código dentro del loop.
<?php function_name_given(get_the_ID()); ?>
Ya por último pegaremos este código en el archivo single.php dentro de la estructura de la página justamente donde queramos que se muestre, personalizando el texto que va antes y después del valor numérico del contador.
<p> Esta entrada se la visitado;
<?php
if ( get_post_meta( get_the_ID() , 'wpb_post_views_count', true) == '') {echo '0' ;
} else {
echo get_post_meta( get_the_ID() , 'wpb_post_views_count', true); };?>
veces.</p>
Revisa el siguiente vídeo para mayor comprensión de los pasos.
Contador de visitas para las entradas del blog con Elementor pro
Para realizar el contador de visitas con Elementor repite los 2 primeros pasos que explicamos en esta entrada para realizarlo con WordPress y sin plugins.
Acto seguido cómo elementor no permite ejecutar PHP vamos a crear un shortcode al que asociaremos una función de PHP. Tendrás que acceder de nuevo al functions.php de tu child them y pegar este código:
function contador_blog( $atts ) { ?><p>esta entrada a sido leida: <?php
if ( get_post_meta( get_the_ID() , 'wpb_post_views_count', true) == '') {echo '0' ;
} else {
echo get_post_meta( get_the_ID() , 'wpb_post_views_count', true); };
?> veces</p><?php
};
add_shortcode( 'shortcode_contador', 'contador_blog');
Ya desde nuestro administrador de WordPress nos vamos a plantillas/constructor de tema y ahí crearemos la plantilla de las entradas de nuestro blog.
Creamos nuestro diseño y allí donde queramos que se muestre el contador de visitas insertamos el widget de shortcodes y insertarmos el siguiente shortcode:
[shortcode_contador]
Guardamos cambios y ya tenemos nuestro contador de visitas con Elementor pro.
Revisa el siguiente vídeo para mayor comprensión del proceso.
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');
Subir archivos SVG a WordPress
Por defecto, WordPress no nos permite subir archivos SVG a nuestra biblioteca de medios. Para permitir la subida de dichos archivos pegaremos el siguiente código PHP en el functios.php de nuestro child theme.
// permitir subir archivos SVG
add_filter( 'wp_check_filetype_and_ext', function($data, $file, $filename, $mimes) {
$filetype = wp_check_filetype( $filename, $mimes );
return [
'ext' => $filetype['ext'],
'type' => $filetype['type'],
'proper_filename' => $data['proper_filename']
];
}, 10, 4 );
function cc_mime_types( $mimes ){
$mimes['svg'] = 'image/svg+xml';
return $mimes;
}
add_filter( 'upload_mimes', 'cc_mime_types' );
function fix_svg() {
echo '<style type="text/css">
.attachment-266x266, .thumbnail img {
width: 100% !important;
height: auto !important;
}
</style>';
}
add_action( 'admin_head', 'fix_svg' );
Cambiar el tiempo de caducidad de la sesión en WordPress
Habiendo creado un child theme pega el siguiente código PHP en el archivo functions.php. Después simplemente modifica los valores de $expiration por el tiempo que quieras que duren las sesiones de tus usuarios.
Revisa el video para mayor comprensión del código.
add_filter('auth_cookie_expiration', 'my_expiration_filter', 99, 3);
function my_expiration_filter($seconds, $user_id, $remember){
//si recuerdame esta seleccionado;
if ( $remember ) {
//tiempo 10 minutos;
$expiration = 10*60;
} else {
//tiempo 2 dias;
$expiration = 2*24*60*60;
}
return $expiration;
}
Crear botón en el menú
Desde apariencia/menú desplegaremos el elemento que queramos que sea el botón y le definiremos la clase. En nuestro caso vamos a hacer que el botón sea el link a la pagina de contacto por lo que definiremos la clase btn-contacto.
El siguiente paso será insertar el CSS que encontrarás debajo de estas líneas y personalizar los colores.
La línea que hace referencia a la clase main-nav , sirve para definir el alto del botón.
Si queremos que el botón no aparezca en la versión de móbil eliminaremos la media screen.
@media (min-width: 768px) {
.btn-contacto {
background-color:#eb5e28;
border:1px;
border-radius:5px;
}
.btn-contacto a{
color:#fff !important;
}
.btn-contacto:hover {
background-color:red;
border:1px;
border-radius:5px;
}
.btn-contacto a:hover {
color:#000 !important;
}
.main-nav ul li a{
line-height: 40px!important;
}
}
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.
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
Interesante lo del contador de visitas para wordpress, el numero de visitantes que visitas en una url de la web, influye en el ranking SEO?
Gracias por tu comentario. No, el contador de visitas no influyen a nivel de SEO.