Para reazlizar esta tarea, solo vamos a necesitar un pequeño archivo HTC, que en definitiva es un archivo que guarda un conjunto de scripts exclusivamente para Internet Explorer. La forma correcta de lograr esquinas redondeadas en todos los navegadores sera:

Cross Browser border-radius

.mi_selector { 
  -moz-border-radius:10px;  /* Firefox */
  -webkit-border-radius:10px; /* Safari y Crhome */
  -khtml-border-radius:10px; /* Browser en Linux */
  border-radius:10px; /* CSS3  Standard */
  behavior:url(border-radius.htc standards /* Internet explorer */ );
}

Solo necesitas una copia del archivo border-radius.htc que se puede obtener aquí, y colocarlo en tu carpeta donde guardas la hoja de estilo. Con una simple linea extra en tu CSS ahora tendrás esquinas redondeadas en todos los navegadores.

Hoy leyendo en Milienzo encontré un hack que me pareció correcto de reproducir ya que podemos lograr una personalización del tag the_excerpt() casi perfecta.

Problemas con the_excerpt()

Solo se muestran las primeras 55 palabras, no dándonos la posibilidad de acomodar ese numero. En cuanto el al formato, el tag limpia todos los tags HTML, por lo que no se muestran imágenes ni formato en los párrafos. Y por ultimo, en cuanto hablamos de javascript tenemos un gran problema ya que the_excerpt() no lo filtra, lo que trae como aparejado posibles problemas en el formato y vulnerabilidades.

Lo que en milienzo nos plantean, es crear una nueva función para solucionar los problemas mencionados mas arriba.

Comencemos

En tu archivo functions.php introduciremos esta nueva función

function improved_trim_excerpt($text) {
	global $post;
	if ( '' == $text ) {
		$text = get_the_content('');
		$text = apply_filters('the_content', $text);
		$text = str_replace(']]>', ']]>', $text);
		$text = preg_replace('@<script[^>]*?>.*?</script>@si', '', $text);
		$text = strip_tags($text, '<p>');
		$excerpt_length = 80;
		$words = explode(' ', $text, $excerpt_length + 1);
		if (count($words)> $excerpt_length) {
			array_pop($words);
			ray_push($words, '[...]');
			$text = implode(' ', $words);
		}
	}
		return $text;
}

Al no estar “tocando” no los archivos del core de Wordpress podremos reproducir esta función en todos los Themes que necesitemos.

Controlar el tamaño en the_excerpt()

En lugar de mostrar solo las primeras 55 palabras, digamos que solo mostraremos las primeras 80.

$excerpt_length = 80;

Para aumentar o disminuir las palabras, solo resta reemplazar el 80 por el numero deseado.

Incluir tags HTML

Como lo mencione antes, al no poder contar con la posibilidad de mostrar dichos tags podemos encontrar problemas a la hora de dar formato

$text = strip_tags($text, '<p>');

En este caso estamos incluyendo siempre el tag <p> Si lo necesitáramos podríamos también incluir el tag <img> o los que deseemos. Solo tenemos que mencionar los tags uno al lado de otro.

Remover todo el código javascript que no necesitamos

$text = preg_replace('@<script[^>]*?>.*?</script>@si', '', $text);

Esta simple linea, nos ahorrara futuros dolores de cabeza.

Ahora solo resta indicar nuestro nuevo filtro, otra vez dentro de functions.php insertamos:

remove_filter('get_the_excerpt', 'wp_trim_excerpt');
add_filter('get_the_excerpt', 'improved_trim_excerpt');

Implementación

Solo nos queda integrar este nuevo the_excerpt() mejorado dentro de nuestro Theme reemplazando el the_excerpt() original por nuestro el nuevo y flamante tag:

function improved_trim_excerpt($text) {

Como lo notaras el hack es bastante flexible y podemos lograr buenos resultado con pocas lineas de código.

Hay muchos navegadores que no soportan el tag <video> por lo que ese código automáticamente al detectar dicho navegador sirve una alternativa para la visualización, sin necesidad de javascript; por ende los videos serán visibles en los lectores de feed, Iphone y demás.

Al cargar la pagina el código sirve automáticamente el video vía el tag <video> (OGV), por lo que no se necesitan plugins adicionales en el navegador. Si el navegador no soporta el tag; se sirve el video como Quicktime (MP4), que se visualiza correctamente en Iphone. Ahora si Quicktime no esta instalado se servira el video utilizando flash (FLV) pudiendo embeber cualquier archivo en Flash, incluso videos desde Youtube.

Y como si fuero poco, si el navegador no soportara ni el tag <video> ni tuviera instalado Quicktime ni Flash, se sirve una imagen estática para que el usuario pueda descargar el video y reproducirlo localmente.

Las ventajas son evidentes al usar este código, estamos logrando que nuestro video siempre se resproduzca y el usario tenga acceso a él. La única desventaja es que debemos proporcionar el video en cada formato posible: OGG, MP4, Flash etc.

En la pagina encontraras el código completo fuertemente comentado para que le saques el jugo a tus videos.

Como lo sabrás cada Theme tiene su propia hoja de estilos que es lo que le formato en definitiva. Si necesitáramos personalizar nuestras entradas, tendríamos que editar la hoja de estilos del Theme; cosa que puede ser algo molesto si solo necesitamos personalizar una entrada en concreto.

Con esta pequeña función, estaremos añadiendo un Box para que la hora de crear un Post o Pagina podamos insertar un estilo para cada entrada/pagina en concreto.

Por medio de filtros y acciones esta función insertar en el header de nuestro Theme, el estilo que le hayamos aplicados. Solo tenes que cerciorarte que Theme cuente con wp_head(); dentro del Header.

Uso

En tu archivo functions.php inserta lo siguiente:

 //Custom CSS 
add_action('admin_menu', 'custom_css_hooks');
add_action('save_post', 'save_custom_css');
add_action('wp_head','insert_custom_css');
function custom_css_hooks() {
	add_meta_box('custom_css', 'Custom CSS', 'custom_css_input', 'post', 'normal', 'high');
	add_meta_box('custom_css', 'Custom CSS', 'custom_css_input', 'page', 'normal', 'high');
}
function custom_css_input() {
	global $post;
	echo '<input type="hidden" name="custom_css_noncename" id="custom_css_noncename" value="'.wp_create_nonce('custom-css').'" />';
	echo '<textarea name="custom_css" id="custom_css" rows="5" cols="30" style="width:100%;">'.get_post_meta($post->ID,'_custom_css',true).'</textarea>';
}
function save_custom_css($post_id) {
	if (!wp_verify_nonce($_POST['custom_css_noncename'], 'custom-css')) return $post_id;
	if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id;
	$custom_css = $_POST['custom_css'];
	update_post_meta($post_id, '_custom_css', $custom_css);
}
function insert_custom_css() {
	if (is_page() || is_single()){
		if (have_posts()) : while (have_posts()) : the_post();
			echo '<style type="text/css">'.get_post_meta(get_the_ID(), '_custom_css', true).'</style>';
		endwhile; endif;
		rewind_posts();
	}
}
 
//End Custom CSS

Ahora cada vez que escribas una entrada/pagina encontraras este box para insertar tus estilos:

Como lo veras esta función es bastante flexible por lo sera posible adaptarla, para por ejemplo también poder incluir scripts en nuestro Header.

El editor de Wordpress es muy poderoso, y dispone de una serie de shortcuts (atajos) para darle formato al texto.

Estos son los 21 shortcuts necesarios para llevar tu productividad al máximo:

• Negrita: Alt+SHIFT+b

• Cursiva: Alt+SHIFT+i

• Link: Alt+SHIFT+a

• Blockquote: Alt+SHIFT+q

• Codigo: Alt+SHIFT+c

• Leer mas: Alt+SHIFT+t

• Lista desordenada (ul): Alt+SHIFT+u

• Lista ordenada (ol): Alt+SHIFT+o

• Item de lista (li): Alt+SHIFT+l

• Editor avanzado: Alt+SHIFT+v

• Publicar entrada: Alt+SHIFT+p

• ins: Alt+SHIFT+s

• del: Alt+SHIFT+d

• Deshacer cita/sangria: Alt+SHIFT+w

• Deshacer: Alt+SHIFT+u

• Rehacer: Alt+SHIFT+y

• Editar en HTML: Alt+SHIFT+e

• Alinear a la izquierda: Alt+SHIFT+f

• Alinear al centro: Alt+SHIFT+c

• Alinear a la derecha: Alt+SHIFT+r

• Ctrl+[numero] para cambiar entre distinto tamaño de header en el texto seleccionado

Visto en Wpbeginner

Tal ves te estés preguntando que diferencia puede haber en nombrar los tags de este forma y de la forma que comúnmente se utiliza. Bueno, supongamos que cuentas con Blog donde cuentas con estas categorías y tags relacionados:

• A) Informática Tags> Mac Os, Windows, Linux
• B) Música Tags> Rock, Pop, Clásica
• C) Películas Tags> Retro, Drama, Acción

Si quisiera crear en mi barra lateral un pequeño rincón donde lo titulo el mes de la música, una buena idea seria mostrar las ultimas entradas y los últimos tags. Mis ultimas entradas se muestran con un query_post, pero si invoco a mis tags, estarían incluyendo; no solo a Rock, Pop y Clásica; sino también a todos los demás, como por ejemplo, Drama, Linux, etc.

Con esta pequeña receta podremos incluir los últimos 10 tags asignados dentro de una categoría o categorías, con unas simples lineas.

Abre tu archivo functions.php

 function get_category_tags($args) {
	global $wpdb;
	$tags = $wpdb->get_results
	("
		SELECT DISTINCT terms2.term_id as tag_id, terms2.name as tag_name, null as tag_link
		FROM
			wp_posts as p1
			LEFT JOIN wp_term_relationships as r1 ON p1.ID = r1.object_ID
			LEFT JOIN wp_term_taxonomy as t1 ON r1.term_taxonomy_id = t1.term_taxonomy_id
			LEFT JOIN wp_terms as terms1 ON t1.term_id = terms1.term_id,
 
			wp_posts as p2
			LEFT JOIN wp_term_relationships as r2 ON p2.ID = r2.object_ID
			LEFT JOIN wp_term_taxonomy as t2 ON r2.term_taxonomy_id = t2.term_taxonomy_id
			LEFT JOIN wp_terms as terms2 ON t2.term_id = terms2.term_id
		WHERE
			t1.taxonomy = 'category' AND p1.post_status = 'publish' AND terms1.term_id IN (".$args['categories'].") AND
			t2.taxonomy = 'post_tag' AND p2.post_status = 'publish'
			AND p1.ID = p2.ID
		ORDER by tag_name
		LIMIT 10 
	");
	$count = 0;
	foreach ($tags as $tag) {
		$tags[$count]->tag_link = get_tag_link($tag->tag_id);
		$count++;
	}
	return $tags;
}

Como podrás ver LIMIT 10 es lo que nos permite tomar control de la cantidad de tags a mostrar, para este ejemplo solo serán 10.

Integrando en tu plantilla

Donde necesites mostrar los tags, solo introduce este lineas, y lograras mostrar los últimos 10 tags en un lista desordenada.

<?php
$args = array('categories' => '3,40'); // id de la(s) categoria(s) que queremos hacer referencia
$tags = get_category_tags($args);
$content .= "<ul>";
foreach($tags as $tag)
{
  $content .= "<li><a href=\"$tag->tag_link\">$tag->tag_name</a></li>";
}
 
$content .= "</ul>";
echo $content;
 
?>
</php>

Como lo veraz el array es simple de adaptar a tus necesidades, por lo que podrás darle el formato que mas te convenga.

Wordpress por defecto no utiliza este atributo, pero varios plugins lo hacen; o quizás fuiste tu mismo el que agrego el nofollow manualmente en tus artículos.

Si por algún motivo ya no deseas que ese atributo este presente en el contenido de tus entradas, con esta simple función no desharemos del atributo nofollow.

Eliminar atributo nofollow dentro de las entradas

Dentro del archivo functions.php inserta estas lineas:

function remove_nofollow($string) {
	$string = str_ireplace(' rel="nofollow"', '', $string);
	return $string;
}
add_filter('the_content', 'remove_nofollow');

Esta pequeña función revisara tus entradas y se deshará del atributo automáticamente.

Eliminar atributo nofollow dentro de las entradas y comentarios

Si también deseas deshacerte del nofollow en tu contenido y en tus comentarios, solo necesitas añadir estas lineas en tu functions.php

function remove_nofollow($string) {
	$string = str_ireplace(' rel="nofollow"', '', $string);
	return $string;
}
add_filter('the_content', 'remove_nofollow');
add_filter('comment_text', 'remove_nofollow');

Visto en Digging into Wordpesss

Ya he hablado varias veces de las ventajas y posibles usos que le podemos dar a los Shortcodes en Wordpress, en el día de hoy añadiremos una mas.

La idea de fondo es siempre utilizar el core de Wordpress y no intentar de caer en un plugin para realizar simples tareas, en este caso insertar un Mapa desde Google.

Como primer paso necesitaremos abrir nuestro archivo functions.php y añadir las siguientes lineas:

function fn_googleMaps($atts, $content = null) {
   extract(shortcode_atts(array(
      "width" => '640', //largo por defecto
      "height" => '480', //ancho por defecto
      "src" => '' // url del mapa
   ), $atts));
   return '<iframe width="'.$width.'" height="'.$height.'" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="'.$src.'&amp;output=embed"></iframe>';
}
add_shortcode("googlemap", "fn_googleMaps");

Cada vez que necesitemos mostrar un mapa seguiremos este formato:

[googlemap width="200" height="200" src="URL"]

Donde widh y height representan el largo y el ancho del mapa y URL es la direccion al mapa que queremos mostrar. Esta dirección se obtiene desde Google Map cuando pulsamos para obtener nuestro link a la direccion (mapa) a la que vamos a hacer referencia.

Por ultimo, hay que notar que si no usamos los valores widh y height en nuestro Shortcode se tomaron los valores por defecto en nuestra función, cosa que nos pude ahorrar un poco de tiempo a la hora de escribir.

Con esta receta mejorada ahora podremos ajustar el tamaño del gravatar, mostrar y controlar los caracteres del comentario y mostrar solo comentarios, excluyendo Pingbacks y Trackbacks.

Donde necesites que se muestren los últimos comentarios solo introduce esta porción de código.

<?php
$comments = get_comments('status=approve&number=5');//solo ultimos 5 comentarios aprobados , exlcluir Pingbacks & Trackbacks
$img_w = '80'; //tamaño de mi gravatar
$comment_lenth = '150'; //cantidad de caracteres a mostrar antes de cortar el comentario
 
if ($comments) {
    echo '<ul>';
    foreach ($comments as $comment) {
        $comment_content = strip_tags($comment->comment_content);
        $comment_excerpt = mb_substr($comment_content, 0, $comment_lenth) . " [...]";
        $permalink = get_permalink($comment->ID) . "#comment-" . $comment->comment_ID;
        $url = '<a href="' . $permalink . '" title="' . $comment->comment_author . ' | ' .
            get_the_title($comment->comment_post_ID) . '">';
        echo '<li>';
        echo '<div class="gravatar">';
        echo $url;
        echo get_avatar($comment->comment_author_email, $img_w);
        echo '</a></div>';
 
        echo '<p class="comment_author">Autor: ';
        echo $url;
        echo $comment->comment_author;
        echo '</a></p>';
        echo '<span class="comment_text">';
        echo " <a href=\"" . $permalink . "\" title=\"Ver todo el comentario\">";
        echo $comment_excerpt;
        echo "</a>";
        echo '</span>';
        echo '</li>';
 
    }
    echo '</ul>';
}
 
?>

Lo que nos devolverá un Output como el siguiente:

         <ul>
                <li>
                    <div class="gravatar">
                        <img alt='' src='http://www.gravatar.com/avatar/9b3068f17206b81cdde75e85d50885cb?s=80&amp;d=http%3A%2F%2Feliseos.net%2Fwp-content%2Fthemes%2FEliseosV2%2Fimages%2Favatar.png%3Fs%3D80&amp;r=G' class='avatar avatar-80 photo' height='80' width='80' />
                    </div>
 
                    <p class="comment_author">Autor: Alexis</p> <span class="comment_text">Estas usando los campos personalizados o custom fields ? [...]</span>
                </li>
         </ul>

Ahora solo te resta darle estilo a través de CSS.

Por cada comenario que un lector deja en el blog se almacenan datos en las cookies, se guardan en sus computadoras y luego a través de Wordpress podemos acceder a ellos. Los valores mas importantes y a los que luego haremos referencia son:

1. $comment_author

2. $comment_author_email

3. $comment_author_url

Nuestro objetivo sera modificar nuestro archivo comments.php para que luego de cada comentario dejado, Wordpress recuerde automáticamente estos datos y se lo muestre al usuario, así este no tiene la necesidad de volver a introducirlos.

Como lo mencione mas arriba Wordpress almacena esta información por nosotros, solo resta hacer el llamado y mostrar nuestro output:

<?php echo esc_attr($comment_author); ?>
<?php echo esc_attr($comment_author_email); ?>
<?php echo esc_attr($comment_author_url); ?>

Editando nuestro archivo comments.php

Solo necesitamos modificar los 3 campos donde se introduce el Nombre, el Sitio Web y el E-mail. Para eso solo modificamos los 3 valores antes mencionados en nuestros input:

<div>
  <label for="author">Nombre*</label>
  <input type="text" name="author" id="author" value="<?php echo esc_attr($comment_author); ?>" tabindex="1" />			
</div>	
 
<div>
  <label for="email">E-mail*</label>
  <input type="text" name="email" id="email" value="<?php echo esc_attr($comment_author_email); ?>" tabindex="2" />
</div>
 
<div>
  <label for="url">Sitio Web</label>
  <input type="text" name="url" id="url" value="<?php echo esc_attr($comment_author_url); ?>" tabindex="3" />
</div>

Cada ves que un usuario vuelva a comentar, Wordpress le recordara sus datos. Fantástico!

Mostrar el Gravatar

Como un extra si se quiere, también somos capaces de devolver el Gravatar del usuario para mostrarlo donde necesitemos. La URL de Gavatar esta compuesta por el siguiente formato:

http://www.gravatar.com/avatar/MD5-HASH-OF-EMAIL

Así que solo necesitamos devolverla dentro de img y estaremos listos

<?php if ($comment_author_email != "") { 
 
    $gravatar_link = 'http://www.gravatar.com/avatar/' . md5($comment_author_email) . '?s=32';
    echo '<img src="' . $gravatar_link . '" alt="" />';
 
} ?>

Estos pequeños trucos nos ayudan a interactuar cada ves mas con el usuario y hacerlo sentir mas a gusto.

Articulo visto en Digging into Wordpress