Este post hablará del uso de los elementos link y explicar un poco la función bloginfo que he estado usando en el post anterior.
Elementos link
En el head se víncula recursos externos como CSS y JavaScript. El tema necesita la hoja de estilos styles.css en la raíz de tu directorio. Para llamarla tendrías que inlcuir el siguiente código dentro del head
|
1 2 |
<link rel='stylesheet' href='<?php bloginfo("stylesheet_url"); ?>' type='text/css' media='screen' /> |
La función bloginfo con el parámetro stylesheet_url devolverá la URL exacta de la localización de styles.css.
En caso de usar un archivo con jQuery es preciso hacer la siguiente llamada en el inicio del functions.php
|
1 |
<?php wp_enqueue_script('jquery'); ?> |
WordPress viene con una copia de jQuery así este comando es suficiente para llamar a la librería.
Ahora para cargar tu script, deberías escribir dentro del <head> del header.php o antes de cerrar la etiqueta </body> del footer.php (Recomendable)
|
1 2 |
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/myscript.js"></script> |
La función bloginfo usa un parámetro que le permite obtener la ruta del tema. Normalmente los scripts que uses deberían estar en una carpeta dentro del tema, en este caso es la carpeta js.
Pero el header.php se usa en todas las páginas del sitio, ¿cómo hacer que sólo use ciertos CSS o scripts en determinadas páginas? Para ello podemos usar la lógica de WordPress que detecta qué página está siendo vista y cargar sólo los archivos en esa situación.
|
1 2 3 4 5 6 7 8 9 10 11 |
<?php if (is_page_template('page-archives.php')){ ?> <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/ archives.css" type="text/css" media="screen" /> <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/ js/archives.js"></script> <?php } ?> |
Este código lo que hace es si la página que está viéndose usa la plantillapage-archives.php se carga el archive.css y el archives.js
Si en vez de basarse en la plantilla que usa la página, quieres saber qué página está viéndose por su ID
|
1 2 3 4 5 6 7 8 9 10 11 |
<?php if (is_page("5")){ ?> <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/ archives.css" type="text/css" media="screen" /> <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/ js/archives.js"></script> <?php } ?> |
La función bloginfo
Está función permite obtener una gran variedad de información sobre la web. Esta información es muy útil cuando se crean temas. Se pueden obtener varios tipos de datos según el parámetro, pero me centraré en los más relevantes
| Parámetro | Descripción | Ejemplo dato obtenido |
|---|---|---|
| charset | Devuelve el conjunto de caracteres que usa la web | UTF-8 |
| description | Muestra la «Descripción corta» de la web rellenada en la Ajustes > Generales | Esta página es ideal para aprender WordPress! |
| url | Devuelve la «Dirección de WordPress» usado en la Ajustes > Generales | https://ejemplo.com/home |
| html_type | Muestra el tipo de contenido HTML de la página | text/html |
| language | Muestra el lenguaje de WordPress | Es-es |
| name | Devuelve el «Título del Sitio» usado en Ajustes > Generales | Guidacode |
| rss_url | Devuelve la url del RSS | https://ejemplo.com/home/feed/rss |
| stylesheet_directory | Muestra la URL del directorio del tema activo | https://ejemplo.com/home/wp/wp-content/themes/twentyfifteen |
| stylesheet_url | Muestra la URL del styles.css del tema activo | https://ejemplo.com/home/wp/wp-content/themes/twentyfifteen/style.css |
| template_directory/template_url | URL del tema activo pero si es una tema hijo, mostrará la URL del tema padre cosa que no sucede con los 2 anteriores. | https://digwp.com/home/wp/wp-content/themes/twentyfifteen |
| text_direction | Devuelve la dirección del texto | ltr |
Y hasta aquí el tutorial de hoy. Espero que os haya servido. A seguir picando 🙂