ProgramandooIntentándolo

Como incluir javaScript o CSS en post de WordPress

WordPress es muy majo porque te permite escribir tu blog sin tener que saber nada de HTML y eso esta muy bien para el publico general, pero si por la circunstancia que sea quieres meter algo de javaScript o de CSS en tu articulo, por ejemplo en mi caso, para poder ver el resultado de lo que explico en algunos artículos como por ejemplo en el que explico el uso de Drag & Drop de HTML5 te encuentras con que los ejemplos no tienen el estilo que les querías aplicar y el javaScript tampoco funciona.

Entonces, miras el código fuente de la página para ver que es lo que va mal y te encuentras con que WordPress te esta metiendo etiquetas <p></p> en todo el código del articulo sin tener en cuenta si es texto o es CSS o javaScript o cualquier cosa que se pueda meter y como es normal un CSS con etiquetas HTML metidas por todos sitios pues no funciona y lo mismo para el javaScript.

Y entonces lo normal es preguntarse ¿Para que esta la opción de escribir tu articulo en modo texto? pues la verdad es que no lo se porque se supone que si no usas el método visual es porque quieres que el articulo sea tal cual lo quieres tu, porque si no para eso tienes la otra opción para escribir como si lo estuvieses haciendo en el Word…

Pero como para todo en esta vida hay soluciones para hacer lo que quieres y además varias para que elijas la que más te guste, vamos a ver como incluir javaScript en WordPress.

1. Evitar que WordPress formatee tus articulos

Esta es la forma drástica de hacerlo, podemos hacer que WP no formatee nada de nuestra página eliminando (o mejor comentando) la siguiente línea del archivo /wp-includes/default-filters.php.

add_filter( 'the_content', 'wpautop'            );

He puesto la line tal cual esta con todos sus espacios, pero si aun así no la encuentras busca Display filters y hay lo tienes.

Quizás tampoco quieras llegar a tanto y te puedes conformar con que no te formatee los artículos, las páginas o lo que tu quieras. Para esto la solución es buscar dentro de tu tema /wp-content/themes/nombre_del_tema el archivo que generará ese tipo de contenido, por ejemplo para los post que es lo más habitual el archivo se llama single.php.

Tienes que buscar la siguiente línea:


<?php the_content(); ?>

y añadirle la línea siguiente delante:


<?php remove_filter ('the_content', 'wpautop'); ?>
<?php the_content(); ?>

Con esto ya puedes meter en tus artículos lo que quieras, pero tendrás que formatear tu tus artículos y quizás tardes 1 minuto más en escribir tus artículos pero te quedaran como tu quieras.

2. Usar archivos externos o escribir todo seguido

Esta opción te permite poder usar el CSS y el javaScript que necesites y poder seguir dejando a WP que te formatee lo que escribes.

En lugar de meter en código directamente en el articulo lo que hay que hacer es crear el un archivo .js, .css o el que necesites con el código que quieras y subirlo al servidor y luego lo importas en tu post y con esto WordPress no se queja y lo importa bien.

Supongo que sabréis como se importa un CSS o un javaScript, pero por si acaso alguno no se acuerda pues os lo pongo que son 2 líneas.


<link rel="stylesheet" type="text/css" href="http://programandoointentandolo.com/ejemplos/draganddrop/estilo.css"/>
<script type="text/javascript" src="ejemplos/draganddrop/drag.js" ></script>

Para el CSS ya no hay que hacer nada más y para el javaScript pues solo te queda llamar a las funciones que quieras como si estuvieses en una pagina “normal”.


<script type="text/javascript">eliminar(e);</script>

y si quieres que se ejecute alguna función en cualquier evento lo mismo.


<div id="cuadro1" ondragenter="return enter(event)" ondragover="return over(event)" ondragleave="return leave(event)" ondrop="return drop(event)">