Archivo del Autor: Corcho

Listas desordenadas con FontAwesome

Cambiar los bullets de las listas desordenadas a iconos de FontAwesome es más fácil de lo que parece.

Hacemos una lista de ejemplo:

<ul>
    <li>Primer elemento de la lista</li>
    <li>Segundo elemento de la lista</li>
    <li>Tercer elemento de la lista</li>
</ul>

Y luego en el CSS la lista de cosas por hacer:

  1. Importar Font Awesome. En este ejemplo lo importamos desde un CDN pero lo puedes tener local si solo vas a necesitar unos iconos
  2. Quitar los estilos nativos de la lista con list-style:none;
  3. Poner el icono antes de la lista con li:before
/* importa fontawesome (o la que necesites) */
/* para esta prueba lo importé desde http://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css */

@font-face{
    font-family:FontAwesome;
    src:url(https://netdna.bootstrapcdn.com/font-awesome/2.0/font//fontawesome-webfont.eot?#iefix) format('eot'),
	url(https://netdna.bootstrapcdn.com/font-awesome/2.0/font//fontawesome-webfont.woff) format('woff'),
	url(https://netdna.bootstrapcdn.com/font-awesome/2.0/font//fontawesome-webfont.ttf) format('truetype'),
	url(https://netdna.bootstrapcdn.com/font-awesome/2.0/font//fontawesome-webfont.svg#FontAwesome) format('svg');
    font-weight:400;font-style:normal;}

/* estilos para la lista y quitar el predeterminado */
ul { padding-left:20px; list-style:none; }
li { margin-bottom:10px; }

/* aqui viene la magia */
li:before {
    font-family: 'FontAwesome';
    content:"\f0a4";
    margin:0 5px 0 -15px;
}

Aquí está la lista en acción: http://jsfiddle.net/corchoweb/AHunC/

¿Cual es el icono mas raro que has usado en una lista?

Buscar con expresiones regulares

Muchas veces me pasa que escribo un código y a medida que el proyecto madura hay que cambiar ciertas regiones. Lo más fastidioso es cuando quieres cambiar etiquetas de html que tienen contenido diferente y parece que tienes que hacerlo una por una.

Con las expresiones regulares puedes buscar de muchas formas. Hoy aprendí que puedes buscar etiquetas específicas y dejar el contenido intacto con las expresiones regulares.

Este ejemplo busca todos los elementos de una lista que tengan un parrafo sin importar el contenido.

<li><p>(.*?)</p></li>

Y quiero quitarle las etiquetas de <p> sin quitar el contenido. Para eso entonces reemplazo con este código.

<li>$1</li>

 
Eso es todo. ¿Sabes de alguna otra forma de buscar contenido? dejanos tu comentario.

Expande filas de tabla con jQuery – jExpand plugin

Janko At Warp Speed hizo un mini plugin para expandir filas dentro de una tabla (es decir los <tr> de una </table>) para poder expandir la información.

Lo puedes usar como plugin si crees que lo vas a usar en mas de una tabla o puedes escribir los comandos dentro de tu archivo personalizado de .js por que son muy breves.

Lee el artículo completo en: Expand table rows with jQuery – jExpand plugin – Janko At Warp Speed.

Y puedes ver el demo o descargartelo con ejemplos.

Como usar los shortcodes en un tema de WordPress

Los shortcode son una etiqueta especial que se puede pegar en los posts o páginas y que serán reemplazados con un contenido diferente cuando veas la versión en el website. Si alguna vez has agregado una galería en tu blog entonces ya sabes como se ve un shortcode.

Usualmente estos códigos se usan para agregar contenido en el administrador, pero a veces necesitamos poner el código en el tema directamente. Afortunadamente WordPress tiene una función muy sencilla que te deja agregar shortcodes en tu tema con solo agregar este código:

<?php echo do_shortcode("[example_shortcode]"); ?>

Esta herramienta es muy util pero es dependiente del plugin que estés usando. Así que recuerda que si cambias de plugin o borras el que tienes vas a tener que limpiar donde hayas puesto este código.

Incluir scripts y css con add_action

Para agregar los scripts a tu tema de la forma WordPress tienes que modificar el
functions.php
y agregar unas acciones.

function enqueue_js_scripts()
{

// Register the script like this for a theme:
wp_register_script( 'bootstrap-min', get_template_directory_uri() . '/js/bootstrap.min.js', array( 'jquery' ) );
// For either a plugin or a theme, you can then enqueue the script:
wp_enqueue_script( 'bootstrap-min' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_js_scripts' );

function enqueue_css_styles()
{
wp_register_style('css-bootstrap-min', get_template_directory_uri() . '/css/bootstrap.min.css',false,'13.02.05','all');
wp_register_style('css-bootstrap-responsive', get_template_directory_uri() . '/css/bootstrap-responsive.min.css','css-bootstrap-min','13.02.05','all');
wp_register_style('css-main', get_template_directory_uri() . '/css/main.css','css-main','13.02.05','all');
wp_register_style('font-awesome', get_template_directory_uri() . '/css/font-awesome.css','font-awesome','13.02.05','all');
// For either a plugin or a theme, you can then enqueue the style:
wp_enqueue_style( 'css-bootstrap-min' );
wp_enqueue_style( 'css-bootstrap-responsive' );
wp_enqueue_style( 'font-awesome' );
wp_enqueue_style( 'css-main' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_css_styles' ); 

referencias: http://codex.wordpress.org/Function_Reference/wp_enqueue_script

WordPress: Listar autores con posts y thumbnails

Estaba buscando un plugin para un proyecto que necesita listar autores y su post y no encontré un plugin que lo hiciera.
Scott Bressler escribió un script para mostrar a los autores y luego poner la info de los post de cada autor. Muy útil.

Aquí el codigo.

Via: http://www.scottbressler.com/blog/2011/03/wordpress-archive-page-with-all-authors-and-all-posts/

<?php
	// http://www.scottbressler.com/blog/2011/03/wordpress-archive-page-with-all-authors-and-all-posts/
	
	// Argumentos para pasar para el get_users
	$args = array( 'orderby' => 'display_name', 'order' => 'ASC', 'who' => 'autores' );
	// Query for the users
	$autores = get_users( $args );
?> 
 
<?php
	// Bucle por todos los usuarios, imprimiendo los nombres con vinculos a su sección de archivos
	for ( $i = 0; $i < count( $autores ); ++$i ) {
		$autor = $autores[$i];
			echo "<a href='#{$autor->user_nicename}'>$autor->display_name</a>";
		if ( $i < count( $autores ) - 1 ) {
			echo ' | ';
		}
	}
?>
	 
<?php
	// Bucle por todos usuarios, imprimiendo todos los posts mientras corre
	foreach ( $autores as $autor ) { ?>
		<a name="<?php echo $autor->user_nicename; ?>"></a>
		<div class="autor-posts-wrapper" id="autor-<?php echo $autor->ID; ?>-posts-wrapper">
			<div class="autor-avatar" id="autor-<?php echo $autor->ID; ?>-avatar">
				<?php echo get_avatar( $autor->ID, 96 ); ?>
			</div>
			<div class="autor-posts" id="autor-<?php echo $autor->ID; ?>-posts">
				<h2><a href="<?php echo get_author_posts_url( $autor->ID ); ?>"><?php echo $autor->display_name; ?></a></h2>
			
			<?php
			// Crea un loop, almacenando todos los post del usuario
			// 'posts_per_page' => -1 busca todos los articulos o puedes de
			$args = array( 'author' => $autor->ID, 'posts_per_page' => -1 );
			$posts = query_posts($args);
			
			// if we already have the output in another template, like:
			// get_template_part( 'loop', 'all-authors' ); // Pulls in loop-all-authors.php from theme
			
			// Ahora que tenemos los posts simula un loop o usa get_template_part
			// si ya tenemos la salida en otra plantilla, como:
			// get_template_part( 'loop', 'all-authors' ); // Saca loop-all-authors.php del tema
			
			
			if ( have_posts() ) : ?>
				<ul class="autor-post-list" id="autor-<?php echo $autor->ID; ?>-post-list">
					<?php while ( have_posts() ) : the_post(); // Imprime lo que queramos para cada post - por ahora solo titulo y fecha ?>
						<li>
							<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a> &mdash; <?php echo get_the_date(); ?>
						</li>
					<?php endwhile; ?>
				</ul><!-- #autor-post-list -->
			<?php else: ?>
				<p>Este autor no ha publicado nada aún.</p>
			<?php endif; ?>
			</div><!-- #autor-posts -->
		</div><!-- #autor-posts-wrapper -->
<?php } // Fin de bucle por todos los usuarios ?>
Screen Shot 2012-08-06 at 15.40.53

Cómo deshabilitar (o habilitar) Spotlight en Mac OS X Lion

Habilitar o inhabilitar totalmente Spotlight en Mac OS X Lion se puede hacer con la ayuda de la Terminal. El siguiente comando descarga el agente de MDS de Spotlight del launchd, previniendo de la ejecución del daemon o la indexación de las unidades totalmente.

Abre el Terminal (que se encuentra en Aplicaciones/Utilidades/ ) y escribe los siguientes comandos basados en la necesidad de desactivar o volver a activar cualquiera de indexación de Spotlight. Esto afectará la indexación en todas las unidades conectadas a la MAC.

Desactivar Spotlight

El primer método es utilizando launchctl. Esto requerirá la contraseña de administrador:

sudo launchctl unload-w / System / Library / o LaunchDaemons com.apple.metadata.mds.plist

Otro enfoque consiste en utilizar el método de indexación anterior de “sudo mdutil-a-i off” que sólo apaga la indexación, pero más de eso luego.

Vuelva a activar Spotlight

La forma garantizada para volver a activar Spotlight es volver a cargarlo en el uso de launchd launchctl:

launchctl sudo carga-w /System/Library/ o LaunchDaemons com.apple.metadata.mds.plist

Una vez más, la alternativa es la indexación relacionados “sudo mdutil-a-i” en el comando, pero ese método puede mostrar el error de “Spotlight Server está deshabilitada” y no le permiten volver a encenderlo. Si te encuentras con este problema, utilice el comando sudo load launchctl lugar para permitir que tanto la indexación y Spotlight.

Con la recarga de Spotlight launchd, el agente de MDS de inmediato comenzará a funcionar de nuevo para indexar el sistema de archivos. Dependiendo de la cantidad de cambios y archivos nuevos desde la última vez que corrió MDS, esto puede tomar un tiempo. Usted puede verificar que el MDS está ejecutando a través del Monitor de actividad o tirando hacia abajo el menú de Spotlight para ver una “unidad de Index Server Name” barra de progreso.

Bug del z-index en Chrome 19.x

La versión de Chrome 19.x hizo que uno de nuestros proyectos tuviera un error mostrando un menú desplegable.
Solo en Chrome se mostraba detras del contenido y gracias a http://mobile-web-development.tumblr.com/ que encontró el bug en el css del boilerplate es una línea para webkit.

html { … -webkit-overflow-scrolling: touch; … }

La quitas y el apilado (stacking) vuelve a su orden normal.