.htaccess y wordpress

Haciendo mantenimiento a la proxima version de una pagina, queria ponerle unos lindos permalinks y me encontre con varios problemas.

No puedo hacer permalinks

El primer problema era que el servidor tenia ciertas restricciones para archivos como el .htaccess.
Pidiendole al proveedor que cambiara esto me dijo que con un simple AllowOverride fue suficiente, y en efecto asi fue.
Asi que ahora puedo crear y manejar mis archivos .htaccess, pero ahora ni siquiera puedo entrar en wordpress.

Tengo mi .htaccess pero la página no se ve Error 403

Ahora tenia el archivo pero aparece Error 403 con acceso denegado. No podia ver ni el administrador de wordpress. Borro el archivo y si lo puedo ver pero con la estructura de numeros, adentro le digo que quiero crear permalinks y crea un nuevo archivo .htaccess y vuelvo a tener el mismo error en todo el blog.

De error 403 a 404

Probando veo que si comento el RewriteEngine la pagina se ve y tiene la estructura de los permalinks personalizada de /%category%/%postname%/ en la navegacion e incluso dentro del administrador pero al ir a cualquiera de las paginas me da error 404 de que no existe la pagina


# BEGIN WordPress

# RewriteEngine On
RewriteBase /blog/
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /blog/index.php [L]

# END WordPress

El fin de los errores y el comienzo de los lindos permalinks
Leyendo mucho veo la sugerencia de que puede ser que el servidor no esta permitiendo los symlinks y que eso puede ser la razon de los errores. Decido probar y VOILA! el sitio corre a la perfección.


# BEGIN WordPress

Options +FollowSymlinks
RewriteEngine on
RewriteBase /blog/
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /blog/index.php [L]

# END WordPress

El resumen es que probablemente por razones de seguridad el servidor tenia la opcion de hacer enlaces simbolicos (Symbolic Links) desactivada, por lo que ese comando tiene que estar presente para que funcione. Esto es exactamente lo que hace wordpress con todas sus paginas, ya que la generación de sus paginas siempre es dinamica y nos permite hacer un redireccionamiento de los archivos en base de datos a direcciones faciles de recordar y que nos ayudan en el SEO.

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