Como introducción se pueden leer el tutorial de hacer scroll con jQuery sin plugins que es más o menos lo mismo y sirve por ejemplo para que desde un menu en la parte superior podamos movernos a diferentes secciones de la página, y luego con este pequeño código volver hacia arriba.

Para ello primero definimos la flecha encargada de aparecer cuando hacemos scroll. Para ello insertamos un simple link:

<a href="#" class="scrollUp"></a>

Le aplicamos un poco de CSS. Puede buscar una imagen en google y adaptar el css a ella.

.scrollUp{
    width:40px;
    height:40px;
    opacity:0.6;
    position:fixed;
    bottom:90px; /* conviene que quede arriba del footer */
    left:30px; /* Izquierda o derecha según el diseño*/
    display:none;
    background: url('arrow_up.png') no-repeat; /* nuestra imagen*/
}

Como ven lo que hacemos es que se vea en la esquina inferior izquierda la flechita con un poco de transparencia. Por defecto no mostramos la imagen, eso lo haremos con jQuery

Y por último el código javascript que necesitamos:

$(window).scroll(function(){
        if ($(this).scrollTop() > 100) {
            $('.scrollUp').fadeIn();
        } else {
            $('.scrollUp').fadeOut();
        }
});
$(document).ready(function(){
     $('.scrollUp').click(function(){
         $("html, body").animate({ scrollTop: 0 }, 600);
         return false;
     });
})

Tenemos dos partes, la primera es la encargada de ver cuando pixeles tenemos de scroll antes de mostrar o ocultar la flechita. En mi código he puesto 100 pero lo pueden cambiar por el valor que quieran. Este evento se dispara cada vez que la ventana hace scroll.
La segunda parte controla el evento click que have subir el scroll hacia arriba cuando hacemos click. Al subir hasta arriba tendremos menos de 100 pixeles de scroll por lo que la flecha desaparece.

Espero que les haya servido. Saludos!!

Déjame un mensaje.

Más Posts de Damián Logghe - Web

Sigueme:

]]> http://www.masquewordpress.com/scroll-hacia-arriba-con-jquery/feed/ 0 http://www.masquewordpress.com/scroll-hacia-arriba-con-jquery/?utm_source=rss&utm_medium=rss&utm_campaign=scroll-hacia-arriba-con-jquery http://feedproxy.google.com/~r/Timersys/~3/LqCgjy4Mpnw/ http://www.masquewordpress.com/como-corregir-y-anadir-class-a-los-menus-dinamicamente/#comments Tue, 16 Apr 2013 13:18:02 +0000 Damián Logghe http://www.masquewordpress.com/?p=1816 Hoy les voy a mostrar el filtro que les permite modificar las clases de un menú WordPress facilmente. Por ejemplo si crean un custom post type llamado “Testimonios” y quieren agregarlo al menu lo harían de forma manual. Pero para que wordpress se entere de que está dentro de ese menu item y lo marque como current-menu-item hay que hacer lo siguiente:

Dentro de functions.php

add_filter( 'nav_menu_css_class', 'additional_active_classes', 10, 2 );
function additional_active_item_classes($classes = array(), $menu_item = false){
    global $wp_query,$search_placeholder;

    if ( $menu_item->title == 'Testimonios' && ( is_page('testimonials') || get_post_type() == 'testimonials' ) ) {
        $classes[] = 'current-menu-item';
    }
 
    return $classes;
}

Este filtro se ejecuta a la hora de imprimir los items del menú. Si el menu se llama “Testimonios” y en ese momento estamos en la página testimonials o usando el post type de testimonials , se agrega la clase current-menu-item.

Con este filtro se pueden hacer muchas cosas curiosas, esta es una de ellas. Saludos!

Déjame un mensaje.

Más Posts de Damián Logghe - Web

Sigueme:

]]> http://www.masquewordpress.com/como-corregir-y-anadir-class-a-los-menus-dinamicamente/feed/ 0 http://www.masquewordpress.com/como-corregir-y-anadir-class-a-los-menus-dinamicamente/?utm_source=rss&utm_medium=rss&utm_campaign=como-corregir-y-anadir-class-a-los-menus-dinamicamente http://feedproxy.google.com/~r/Timersys/~3/A-Cg0t5-kHA/ http://www.masquewordpress.com/como-anadir-un-enlace-a-los-titulos-de-los-widgets-en-wordpress/#comments Thu, 04 Apr 2013 15:45:45 +0000 Pedro Mendez http://www.masquewordpress.com/?p=1810 La mayoría de los widgets que trae WordPress vienen con una opción para incluir un título en cada widget. El título del widget se utiliza para dar un nombre al contenido de este, situado normalmente en la barra lateral o en otras áreas de nuestro theme como puede ser el footer. Por ejemplo, podemos tener un área de widget sólo para mostrar la caja de Google+ para que las personas que le interese te añadan a esta red social, y aprovechando esto quieres tener el título de “Añadir a circulos en Google+” con el respectivo enlace hacia tu perfil.

En este artículo vamos a mostrar cómo añadir un enlace en los títulos de los widgets en WordPress. En otros artículos hemos visto como incluir HTML en el título del widget de WordPress. Pero son muchos los usuarios que se preguntan cual es la forma de añadir un enlace a este, para que sea seleccionable y sin necesidad de tocar código.

Lo primero que tienes que hacer es instalar y activar el plugin Widget Title Links. Después de la activación, este plugin añade un campo de enlace en el título de todos los widgets de WordPress.

Sólo tienes que añadir el título del Widget y luego añadir la URL en el campo Title Link. Posteriormente le das a guardar y previsualiza tu sitio. Entonces veremos de que el título del Widget está vinculado a la dirección que hemos incluido. Este método te permite crear títulos de widgets con un enlace. Esta es la vista previa:

Esperamos que haya encontrado útil esta guía sobre la forma de añadir enlaces a los títulos de los widgets en WordPress.

]]> http://www.masquewordpress.com/como-anadir-un-enlace-a-los-titulos-de-los-widgets-en-wordpress/feed/ 0 http://www.masquewordpress.com/como-anadir-un-enlace-a-los-titulos-de-los-widgets-en-wordpress/?utm_source=rss&utm_medium=rss&utm_campaign=como-anadir-un-enlace-a-los-titulos-de-los-widgets-en-wordpress http://feedproxy.google.com/~r/Timersys/~3/rFARXCJ7E3M/ http://www.masquewordpress.com/comprobar-si-es-una-pagina-hija-en-wordpress/#comments Thu, 28 Feb 2013 14:17:14 +0000 Damián Logghe http://www.masquewordpress.com/?p=1807 Hoy tuve que crear una especie de menu donde quería ver si la página actual era la correcta, o si se trataba de una página hija (children page) para así poder asignar la clase selected. En wordpress no existe una función is_parent() así que me cree una.

Mi menu es el siguiente:

<?php
global $post;
?>
<h1 class="sub-menu">
	<a href="<?php echo site_url('assess/');?>" title="Assess" <?php echo is_parent($post,'assess') ? 'class="selected"' : '';?>>Assess</a>
	<a href="<?php echo site_url('build/');?>" title="Build" <?php echo is_parent($post,'build') ? 'class="selected"' : '';?>>Build</a>
	<a href="<?php echo site_url('manage/');?>" title="Manage" <?php echo is_parent($post,'manage') ? 'class="selected"' : '';?>>Manage</a>
</h1>

Como ven lo que hago es ver si estoy en la página raiz o una hija del raiz y le aplico la clase “selected”.Por que si mi página es /build/ o /build/sub-page/ en ambos casos me va a marca como selected.

Siempre es recomendable crear un menu custom y usar las funciones de wordpress, pero si no pueden por algún motivo es bueno saber que existen soluciones.

La función is_parent():

/**
* Get page id
*/

function get_page_id($slug){
	$page = get_page_by_path($slug);
	return @$page->ID;
}
/**
* Check if we are in actual page or child page
*/
function is_parent($post,$slug) {
	  $post_id = get_page_id($slug);
	  if ($post->ID == $post_id) return true;
	  else if ($post->post_parent == 0) return false;
	  else return is_parent(get_page($post->post_parent),$slug);
}

En este caso tengo la función get_page_id() que como su nombre indica me devuelve el ID de una página pasándole el slug.
Luego utilizo una función recursiva que devuelve true si es la página actual, false si no hay página parent o se vuelve a llamar si hay una página parent.

Espero que a alguien le sirva. Saludos

Déjame un mensaje.

Más Posts de Damián Logghe - Web

Sigueme:

]]> http://www.masquewordpress.com/comprobar-si-es-una-pagina-hija-en-wordpress/feed/ 0 http://www.masquewordpress.com/comprobar-si-es-una-pagina-hija-en-wordpress/?utm_source=rss&utm_medium=rss&utm_campaign=comprobar-si-es-una-pagina-hija-en-wordpress http://feedproxy.google.com/~r/Timersys/~3/LpNsX39ff4c/ http://www.masquewordpress.com/como-traducir-buddypress-correctamente/#comments Tue, 12 Feb 2013 15:51:47 +0000 Damián Logghe http://www.masquewordpress.com/?p=1805 Para traducir Buddypress al español correctamente lo primero que necesitas es tener la última traducción de Buddypress en Español. Y es aquí donde la mayoría de gente se encuentra en problemas.

Luego hay que saber como renombrar los archivos .po y .mo y por último saber donde subirlos. Todo esto es lo que les voy a explicar hoy.

Lamentablemente Google tiene indexada la página de www.bp-es.com como primer resultado , y en http://es.buddypress.org/ también hacen referencia a esa web. Lamentablemente no es oficial y esta muy desactualizada. La última traducción a día de hoy es de la version 1.5.1, la cual tiene 1500 traducciones diferentes de la última versión a día de hoy que es la 1.6.4.

Por lo que para estar siempre al día con las traducciones, lo mejor que podemos hacer es guardar en favoritos la página oficial de traducciones de WordPress http://translate.wordpress.org/ y más concretamente la de Buddypress que es http://translate.wordpress.org/projects/buddypress/.

Una vez allí nos va a presentar las diferente versiones, que son: Desarrollo (la más nueva pero no lanzada oficialmente), version 1.6.X (la que necesitamos), version 1.2.x (antigua versión de BP).

Luego de hacer click en nuestra versión vamos a ver un listado con los diferentes idiomas. En nuestro caso hacemos click en Spanish y nos llevará a otra página donde aparecen todas las cadenas de texto traducidas.

Una vez aquí debemos hacer click sobre “Export” cuyo link aparece en la parte inferior izquierda.

Se nos va a descargar un archivo con un nombre similar a este: “buddypress-1.6.x-es.po” (dependiendo de la versión).

Este archivo lo debemos renombrar por buddypress-es_ES.po.

Para terminar abrimos dicho archivo con el poedit y lo guardamos (sin realizar cambios). Esto nos va a generar un archivo llamado buddypress-es_ES.mo

Por últimos subimos estos dos archivos a wp-content/languages/ y con eso ya tendremos Buddypress en español correctamente y al 100%. Saludos!

Déjame un mensaje.

Más Posts de Damián Logghe - Web

Sigueme:

]]> http://www.masquewordpress.com/como-traducir-buddypress-correctamente/feed/ 0 http://www.masquewordpress.com/como-traducir-buddypress-correctamente/?utm_source=rss&utm_medium=rss&utm_campaign=como-traducir-buddypress-correctamente http://feedproxy.google.com/~r/Timersys/~3/MpZ95Cetg2k/ http://www.masquewordpress.com/obtener-alt-caption-y-descripcion-de-una-imagen-en-wordpress/#comments Thu, 31 Jan 2013 21:15:33 +0000 Damián Logghe http://www.masquewordpress.com/?p=1801 Para obtener el texto alternativo alt, el caption o leyenda y la descripción de una imagen en WordPress podemos hacer lo siguiente:

También podemos ver como obtener el título, url de la imagen a tamaño completo y más cosas.

Supongamos que obtenemos todas las imagenes de un post con la siguiente función:

$args = array(
		'orderby' 			=> 'menu_order',
		'order' 			=> 'ASC',
		'post_type' 		=> 'attachment',
		'post_parent' 		=> $post->ID,
		'post_mime_type' 	=> 'image',
		'post_status' 		=> null,
		'posts_per_page' 	=> -1	
	);
	$attachments 	= get_posts( $args );

Para ello usamos un get posts y en los argumentos indicamos que solo queremos archivos adjuntos y del tipo imagen que pertenezcan a un post en concreto.

Luego obtenemos los datos de la siguiente manera

			
if ( $attachments ) {
foreach ( $attachments as $attachment ) {
        //url de la imagen a tamaña completo
	$full_size 	= wp_get_attachment_image_src( $attachment->ID, 'full' );
        //url de una miniatura
	$thumb 	= wp_get_attachment_image_src( $attachment->ID, 'thumbnail' );
	//texto alt o alternativo
        $alt = get_post_meta($attachment->ID, '_wp_attachment_image_alt', true);
	//caption o leyenda
        $caption =  $attachment->post_excerpt;
        //descripción
        $description = $attachment->post_content;
        //título
        $attachment->post_title;
}
		
}

Déjame un mensaje.

Más Posts de Damián Logghe - Web

Sigueme:

]]> http://www.masquewordpress.com/obtener-alt-caption-y-descripcion-de-una-imagen-en-wordpress/feed/ 0 http://www.masquewordpress.com/obtener-alt-caption-y-descripcion-de-una-imagen-en-wordpress/?utm_source=rss&utm_medium=rss&utm_campaign=obtener-alt-caption-y-descripcion-de-una-imagen-en-wordpress http://feedproxy.google.com/~r/Timersys/~3/BacXmr1tKQg/ http://www.masquewordpress.com/recuperar-password-root-de-mysql/#comments Wed, 30 Jan 2013 14:22:05 +0000 Damián Logghe http://www.masquewordpress.com/?p=1796 Si manejas cientos de passwords como es mi caso no te queda otra opción que anotarlos. yo como usuario de Mac utilizo el software de 1Password que la verdad es excelente y tiene integración en los navegadores más modernos. Con software y todo muchas veces me olvido de anotar los passwords por lo que estoy en el mismo problema.
El último olvido que tuve fue en el password root de mysql en mi server Ubuntu. Por lo que a continuación pongo los pasos para recuperarlo en caso de que a alguien le pase.

Para recuperar la contraseña root de mysql hay que realizar los siguientes pasos:

Paso # 1 : Detener el servicio Mysql

# sudo /etc/init.d/mysql stop

Output:

Stopping MySQL database server: mysqld.

Paso # 2: Iniciar el servicio mysql sin password:

# sudo mysqld_safe --skip-grant-tables &

Output:

[1] 5988
Starting mysqld daemon with databases from /var/lib/mysql
mysqld_safe[6025]: started

Paso # 3: Conectarse a mysql con el cliente:

# mysql -u root

Output:

Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 1 to server version: 4.1.15-Debian_1-log
Type 'help;' or '\h' for help. Type '\c' to clear the buffer.
mysql>

Paso # 4: Configurar nuevo password

mysql> use mysql;
mysql> update user set password=PASSWORD("NUEVO-PASSWORD") where User='root';
mysql> flush privileges;
mysql> quit

Paso # 5: Detener nuevamente el servicio:

# sudo /etc/init.d/mysql stop

Output:

Stopping MySQL database server: mysqld
STOPPING server from pid file /var/run/mysqld/mysqld.pid
mysqld_safe[6186]: ended
[1]+  Done                    mysqld_safe --skip-grant-tables

Paso # 6: Iniciar el servicio nuevamente y probar el pass

# /etc/init.d/mysql start
# mysql -u root -p

Tengan en cuenta que la parte de Output puede variar. Saludos!!

Via: http://www.cyberciti.biz/tips/recover-mysql-root-password.html

Déjame un mensaje.

Más Posts de Damián Logghe - Web

Sigueme:

]]> http://www.masquewordpress.com/recuperar-password-root-de-mysql/feed/ 0 http://www.masquewordpress.com/recuperar-password-root-de-mysql/?utm_source=rss&utm_medium=rss&utm_campaign=recuperar-password-root-de-mysql http://feedproxy.google.com/~r/Timersys/~3/O3PUryAelf0/ http://www.masquewordpress.com/redireccionar-a-la-pagina-hija-en-wordpress/#comments Wed, 26 Dec 2012 15:35:39 +0000 Damián Logghe http://www.masquewordpress.com/?p=1792 Si haces como yo, cuando armas en wordpress la estructura del sitio usas las páginas de forma jerárquica. Como por ejemplo si se trata de una inmobiliaria sería algo así como:
***Casas
******En alquiler
******En venta

Por lo general en la página de Casas se pone algún texto de introducción y los links correspondientes a sus sub páginas. Si no es el caso la página queda vacía por lo que normalmente mostramos la primer subpágina.

De esa forma en nuestro menu si alguien hace click en Casas, le mostraríamos realmente casas/en-alquiler/

Para lograr eso de forma rápida y sencilla podemos crear un template que se encargará de redireccionarnos a la primera sub página o página hija.

Entonces al crear nuestra página padre vacía tan solo seleccionamos el template y listo.

Para ello creen un nuevo archivo por llamado por ejemplo: template-redireccion.php

<?php
/*
Template Name: Redireccion a child page
*/
if (have_posts()) {
  while (have_posts()) {
    the_post();
    $pagekids = get_pages("child_of=".$post->ID."&sort_column=menu_order");
    $firstchild = $pagekids[0];
    wp_redirect(get_permalink($firstchild->ID));
  }
}
?>

Saludos!

Déjame un mensaje.

Más Posts de Damián Logghe - Web

Sigueme:

]]> http://www.masquewordpress.com/redireccionar-a-la-pagina-hija-en-wordpress/feed/ 0 http://www.masquewordpress.com/redireccionar-a-la-pagina-hija-en-wordpress/?utm_source=rss&utm_medium=rss&utm_campaign=redireccionar-a-la-pagina-hija-en-wordpress http://feedproxy.google.com/~r/Timersys/~3/mf4lsYQtAIc/ http://www.masquewordpress.com/generador-automatico-de-css-sprites/#comments Wed, 31 Oct 2012 14:09:26 +0000 Damián Logghe http://www.masquewordpress.com/?p=1786 Los CSS Sprites son básicamente muchas imágenes combinadas en una sola. Cada vez que una web carga y carga cada imagen se genera un http request. Si tenemos 20 imagenes se haran 20 request bajando así enormemente el rendimiento de nuestro sitio.

Si juntamos esas 20 imágenes en 1 el incremente de velocidad será notable. Pero no solo se trata de velocidad, sino también de los recursos de nuestro servidor.

Si nuestra web crece y tenemos por ejemplo 100 conexiones simultáneas, nuestro servidor estará manejando 2000 requests tan solo en imágenes!! Una locura!! Con nuestro css sprite tan solo serian 100 requests. Como ven a medida que crece más beneficios tendremos.

Crear los CSS sprites manualmente es un poco tedioso ya que luego necesitamos saber el background-position de cada una de las imágenes.

Por eso hoy les quería compartir una web que uso para generar mis css sprites. Como vera es tan sencillo como subir todas las imágenes y hacer click en generar

Css Sprite Generator

Saludos!

Déjame un mensaje.

Más Posts de Damián Logghe - Web

Sigueme:

]]> http://www.masquewordpress.com/generador-automatico-de-css-sprites/feed/ 2 http://www.masquewordpress.com/generador-automatico-de-css-sprites/?utm_source=rss&utm_medium=rss&utm_campaign=generador-automatico-de-css-sprites