Existen varias maneras de incluir código Javascript y CSS en WordPress. Por ejemplo, podemos incluir un script o reglas CSS en el header o en el footer de nuestro tema. También podemos insertar scripts mediante el archivo functions.php creando action hooks, podemos agregarlos en plugins dedicados a esto mismo y de muchas, pero muchas maneras. El hecho de escoger el método equivocado a la hora de incluir un script de Javascript o reglas de CSS en nuestro WordPress puede darnos muchos dolores de cabeza, sobre todo en lo relativo al mantenimiento de nuestro sitio. Si no conoces los códigos añadidos, puedes llegar incluso a duplicarlos. Por eso, en este tutorial te mostraré la mejor manera de incluir Javascript y CSS en WordPress. ¡Vamos alla!

WordPress cuenta con un método para incluir Javascript y CSS en WordPress. Es decir, podemos utilizar las funciones wp_register_script(), wp_enqueue_script() y wp_register_style(), wp_enqueue_style() para hacer que nuestros códigos, tanto Javascript como CSS, se pongan en cola en el sistema de archivos JS y CSS de nuestro WordPress. Son funciones muy completas que aceptan parámetros como el nombre y la ubicación física del archivo, dependencias, versión y destino donde se debe cargar el script. Pero basta de cháchara y vamos a ver cómo funciona.

Incluir Javascript en WordPress de la manera correcta

A continuación, te mostraré cómo incluir un archivo de Javascript en nuestro WordPress de la manera correcta. En mi caso, yo he añadido el código que puedes ver más abajo al fichero functions.php de mi tema. Este código incluirá un fichero js que me ayudará a validar los campos de mi formulairio de contacto. El fichero utiliza código jQuery por lo que tendré que incluir la dependencia a la librería también.

function incluir_javascript() {
 
wp_register_script('validation_script', plugins_url('validate.js', __FILE__), array('jquery'),'3.3.1', true);
 
wp_enqueue_script('validation_script');
}
  
add_action( 'wp_enqueue_scripts', 'incluir_javascript' );

Como puedes ver en la segunda línea, la función cuenta con múltiples parámetros. Estos son:

AmpedSense.OptimizeAdSpot(‘2L’); AmpedSense.OptimizeAdSpot(‘2C’); AmpedSense.OptimizeAdSpot(‘2R’);

• $handle: Nombre del script
• $src: Ubicación del fichero (opcional)
• $deps: Array de dependencias a ejecutar (opcional)
• $ver: Número de versión del script (opcional)
• $in_footer: Si es true, el script se pondrá en cola en el footer. Si es false, se hará en el header (opcional)

Incluir CSS en WordPress de la manera correcta

Habiendo visto lo anterior, vamos a hacer lo mismo con un fichero de CSS. Es decir, vamos a emplear el método correcto para añadir nuevos estilos en el tema que estemos utilizando actualmente. Para ello, e igual que antes, abrimos el fichero functions.php de nuestro y agregamos el siguiente código:

function incluir_css() {
wp_register_style('styles', plugins_url('styles.css', __FILE__));
wp_enqueue_style('styles');
}
add_action( 'wp_enqueue_scripts', 'incluir_css' );

Por supuesto, modifica los parámetros de la función wp_register_style en base a tus necesidades. Ojo, los parámetros son los mismos que he explicado anteriormente.

Y hasta aquí nuestro artículo en el que te hemos mostrado la mejor manera de incluir Javascript y CSS en WordPress. Espero que te haya gustado y, si te ha resultado útil, no dudes en compartirlo en redes sociales. ¡Nos leemos!

Más sobre tecnología y Ayuda para tu WordPress.

WordPress te permite subir de forma sencilla archivos PDF que luego pueden ser descargados por los usuarios en la parte pública de tu web. En este artículo, te mostraremos cómo subir archivos PDF a tu sitio web desarrollado con WordPress.

Subir archivos PDF en los posts y páginas de WordPress

Este método es el más simple y no requiere instalar ningún plugin en tu WordPress. Lo primero que tienes que hacer es editar el post o página donde quieras subir el archivo PDF. En el editor de contenido de WordPress, pulsa el botón de “Añadir objeto”.

Esto te abrirá un popup en el que puedes subir distintos tipos de archivos.

Después, haz clic en el botón “Selecciona archivos” para seleccionar el archivo PDF que quieras subir al contenido. WordPress ahora subirá el archivo PDF a la librería multimedia de WordPress.

Una vez subido, verás una pequeña preview del archivo que acabas de subir. En la columna de la derecha, puedes ingresar el título, la leyenda y la descripción del propio archivo.

También puedes seleccionar a dónde quieres enlazar el archivo. Por defecto, viene enlazado al propio archivo. Pero puedes cambiarlo a la página de adjunto, que es una página dedicada a mostrar la miniatura del archivo PDF que acabas de subir.

Pulsa en el botón “Insertar en la entrada” para añadir el archivo PDF en el contenido de tu post.

Después de eso, el popup para subir archivos desaparecerá, y verás el enlace de descarga en el editor de posts de WordPress en el que estás confeccionando tu artículo. Ahora puedes seguir editando tu post o publicarlo.

Y eso es todo, habrás subido satisfactoriamente tu archivo PDF y lo habrás añadido a tu post de WordPress.

Ahora puedes visitar la parte pública de tu web para ver el enlace en acción.

Subir y embeber un archivo PDF en un post o una página de WordPress

Este método te permite mostrar un fichero PDF dentro de un post o una página de WordPress mediante un plugin.

Lo primero que tienes que hacer es instalar y activar el plugin Google Doc Embedder. Para ello, ve a la sección Plugins del backoffice de tu WordPress y selecciona la opción de Añadir Nuevo. En la página de Añadir Nuevo Plugin, busca el plugin que queremos instalar haciendo uso del campo de búsqueda que se sitúa en la parte superior derecha de la página.

Teclea el nombre del plugin (que como te hemos indicado es “Google Doc Embedder”) y presiona ENTER para iniciar la búsqueda. Si has seguido los pasos al pie de la letra, este plugin te debería aparecer como el primer resultado de la búsqueda. Instálalo y actívalo para poder utilizarlo.

Una vez activado, debes ir a Ajustes > GDE Configuración para configurar el plugin a nuestro gusto.

Aquí puedes especificar el idioma, la altura y el ancho del elemento donde van a mostrarse los archivos PDF, y demás configuraciones. Las opciones por defecto funcionan en la mayoría de sitios webs, pero puedes modificar estas opciones si así lo necesitas.

Después, debes ir al post o página en la que quieres insertar el archivo PDF y quieres que se muestre.

En la pantalla de edición de contenido, debes hacer clic en el botón “Añadir objeto” para subir tu documento PDF. Después de subir tu archivo, necesitas copiar la URL del mismo y cerrar el popup de subir archivos sin hacer clic en el botón de “Insertar en la publicación”.

Ahora haz clic en el nuevo icono de Google Docs Embedder que aparece en la barra de herramientas del editor de contenido de WordPress.

Esto te abrirá un nuevo popup donde debes pegar la URL del fichero de WordPress que acabas de subir, y la cual has copiado antes. Cuando termines, haz clic en el botón “Insertar”.

Verás que se ha añadido un shortcode de WordPress nuevo en el editor de posts de WordPress. Ahora puedes seguir editando tu post o publicarlo.

Ve a la parte pública de tu web para ver el archivo PDF embebido en tu post o página. El plugin también te permite embeber otros tipos de archivos en posts y páginas.

Y hasta aquí nuestro artículo sobre cómo subir archivos PDF a tu WordPress. Espero que te haya gustado y, si te ha resultado útil, no dudes en compartirlo en redes sociales. ¡Nos leemos!

Más sobre tecnología y Ayuda para tu WordPress.