Scroll to up sencillo con css y jquery

scrollup

A continuacion les presento un sencillo efecto «scroll to up» muy comun en los sitios web.

primero necesitamos crear el codigo html que luego animaremos con jquery y estilizaremos con css.

<div id="IrArriba">
<a title="" href="#Arriba">
<span>Arriba</span>
</a>
</div>

muy sencillo, esto lo ubicamos en el footer de nuestro sitio web, si es una plantilla html con copiar el codigo antes de </body> bastara, si en cambio en un template wordpress u otro cms deberan editar la plantilla footer.php o similar y agregar el codigo.

Ahora lo estilizaremos un poco con css.

#IrArriba{bottom:30px;display:none;position:fixed;right:30px;z-index:9999;}
#IrArriba a{text-decoration: none;text-align:center;}
#IrArriba span{cursor:pointer;display:block;position:relative;width:42px;border:solid 1px #FF0000;border-radius:30px;padding:10px;color:#FF0000;font-weight:bold;}
#IrArriba span:hover {background-position: left bottom;}
#IrArriba span:focus {background-position: left bottom;}

bastante simple, aunque debo decir que el estilo css presentado en muy básico (no es mi fuerte xD), si quisieramos podriamos utilizar una imagen en lugar de un texto para la etiqueta span, y modificar ligeramente el css.

#IrArriba {
    bottom: 30px;
    display: none;
    position: fixed;
    right: 30px;
    z-index: 9999;
}
#IrArriba span {
    background: url("../images/boton_arriba.png") no-repeat scroll left top rgba(0, 0, 0, 0);
    cursor: pointer;
    display: block;
    height: 42px;
    position: relative;
    width: 42px;
}
#IrArriba span:hover {
    background-position: left bottom;
}
#IrArriba span:focus {
    background-position: left bottom;
}

Pero hasta el momento aunque se ve bien no es mas que un texto o una imagen en pantalla, dotemoslo de vida con un sencillo codigo jquery.

jQuery(document).ready(function($) {
		$(window).scroll(function () {
			if ($(this).scrollTop() > 0) {
				$('#IrArriba').fadeIn();
			}else{
				$('#IrArriba').fadeOut();
				$('.preg_flotante a').removeClass('selected');
			}
		});
		$('#IrArriba a').click(function () {
			$('body,html').animate({
				scrollTop: 0
			}
			, 800 );
			$('.preg_flotante a').removeClass('selected');
			return false;
		});
});

Y como resultado tendriamos algo similar a estas capturas.

scroll to up texto

scroll to up imagen

Tips para wp-config.php en WordPress

Si eres un usuario avezado o novel de wordpress, ya estarás enterado de la importancia del archivo wp-config.php, es en este archivo donde debemos realizar la primera configuración para instalar nuestro sistema wordpress, pero existen opciones muy interesante que no están disponibles de forma transparente en dicho archivo, opciones que nos permiten ajustar la performace de nuestro wordpress y empezar a experimentar mejoras notables en el funcionamiento o incluso prescindir de plugins para realizar algunas tareas, simplemente editando este archivo. A continuación daremos un recorrido por estas opciones dando reseñas de las misma y puedan entenderlo fácilmente.

Una buena practica y como medida de seguridad es renombrar, mover (o incluso ambas opciones) la carpeta wp-content ([highlight color=yellow]Desde la versión 2.6, puede mover el directorio wp-content, que tiene sus temas, plugins, y subidas, incluso fuera del directorio de la aplicación WordPress.[/highlight]), esto debido a que muchos hacker(s) ya sabemos de la existencia de esta carpeta y los diferentes scripts que utilizamos para automatizar los intentos de ataque (o «auditoria», como lo llamo yo xD) buscan por defecto esta carpeta y se complica un poco mas la detección de errores o bugs.

A continuación alguna de estos parámetros de configuración, para mas detalles no duden en consultar la pagina del codex de wordpress relacionada con el archivo wp-config.php.

[box type=alert color=yellow size=full]Siempre incluir el http:// cuando requiera url y nunca terminar la url con un slash (/)[/box]
// Moviendo la carpeta wp-content
// desde la versión 2.6 es posible mover la carpeta donde se encuentran
// los plugins, temas y carpeta de subidas
//esto es una opcion muy recomendable como medida de seguridad.

define( 'WP_CONTENT_DIR', 'http://servidor-de-archivos/wordpress/wp-content' );

// Moviendo la carpeta de uploads
// Si solo queremos mover o renombrar la carpeta de subidas podemos usar:

define( 'UPLOADS', '/public/subidas' );

// Modificando el intervalo de autoguardado en las entradas
// cuando se edita una entrada WordPress usa AJAX para realizar un
// autoguardado por defecto 60 segundos, podemos modificarlo:

define('AUTOSAVE_INTERVAL', 160 );

// Revisiones de las entradas
// WordPress por defecto guarda copias cada vez que editamos
// una entrada, esto a largo plazo terminara por llenar la tabla de
// wp_posts con entradas marcadas como revisiones, podemos deshabilitar
// o cambiar el máximo de las revisiones:

define('WP_POST_REVISIONS', false ); //deshabilitarlas
define('WP_POST_REVISIONS', 3); //poner maximo a 3

// Definir el dominio del sitio en las cookies
// si usamos subdominios para almacenar en el mismo hosting mas
// instalaciones de WordPress, podemos definir en cada instalación el
// dominio a usar para evitar problemas con el login:

define('COOKIE_DOMAIN', 'www.midominio.com');

// Aumentar la memoria asignada a PHP
// en algunos servidores compartidos la memoria asignada a PHP es muy baja
// y esto hacé que WordPress presente el error:
// Allowed memory size of xxxxxx bytes exhausted, podemos aumentar
// este valor para evitar este error:

define('WP_MEMORY_LIMIT', '96M');

// Vaciar la papelera de entradas y paginas
// podemos configurar el tiempo en el que WordPress mantiene las entradas
// y paginas en la papelera

define('EMPTY_TRASH_DAYS', 3 ); //3 días

// Optimización a automática de la Base de datos
// desde la versión 2.9 existe un script capaz de automatizar y reparar
// la BD MySql podemos habilitarlo:

define('WP_ALLOW_REPAIR', true);

// Deshabilitar globalmente la edición de temas y plugins
// esta linea deshabilita la edición de código desde el panel de control:

define('DISALLOW_FILE_EDIT',true);

// Deshabilitar las actualizaciones e instalación de plugins y temas
// en algunos proyectos es recomendable realizar manualmente estas
// actualizaciones y por seguridad deshabilitar la instalación de temas
// y plugins:

define('DISALLOW_FILE_MODS',true);

// Permite forzar el uso de SSL para el login de usuarios y de
// administradores:
// las opciones son true para habilitar y false para desactivar

define('FORCE_SSL_LOGIN',true); //ssl para usuarios
define('FORCE_SSL_ADMIN',true); //ssl para administradores

Y esto es todo por el momento, en otro articulo, profundizaremos mas este tema.