Desde el inicio de WordPress, lo que de verdad potenciaba su excelente motor eran los tag para plantillas. Estos tag de WordPress, en realidad son funciones de PHP que se pueden utilizar tanto para mostrar, como para obtener información.
10 tag para plantillas que desconoces
En este artículo te mostramos 10 tag de plantillas que seguro no conoces:
También te puede interesar: 7 códigos de WordPress para personalizar tu plantilla
P Mayúscula
WordPress, tal y como manda el estándar, debe ser escrito con la W y la P en mayúsculas. Es decir, bajo ninguna circunstancia debes escribir Wordpress, sino WordPress. La P en mayúscula es tan importante que, hasta Matt Mullenweg (fundador de WordPress), incluyó una función para rectificar esto en 2009. Se trara de la función capital_p_dangit() y se utiliza de este modo:
// Utilizándola correctamente
$footer_text = get_theme_mod( "footer_text", "" );$footer_text = captial_p_dangit( $footer_text ); // Cualquier "Wordpress" mal escrito, se transformará en "WordPress"
// O, utilizándola como un filtro de WordPress.add_filter( "the_excerpt", function( $text ) { return captial_p_dangit( $text );} );Logo personalizado
En la 4.5, WordPress introdujo la opción de subir un logo para los themes a través del Personalizador. Esta nueva característica requiere que esté soportada por el theme. Añadiendo add_theme_support(‘site-logo’), el logo aparecerá en el Personalizador.
Esta característica permite que el usuario, a través del personalizador y, tal como te he indicado antes, pueda modificar el logo cuando y cómo desee. Para mostrarlo, contamos con varias funciones como: gas_custom_logo(), get_custom_logo() y the_custom_logo().
// Muestra el logo personalizado con un enlace para volver a inicio.the_custom_logo();// Devuelve la ruta del logo como un string.$logo = get_custom_logo();// Condicionalif ( has_custom_logo() ) { $logo = get_custom_logo();}// Utilizando 'get_custom_logo' para meter el logo dentro de un div
add_filter( "get_custom_logo", function( $html ) { return '<div class="site-logo">'. $html .'</div>';} );URL de las miniaturas
WordPress cuenta con una función integrada que genera miniaturas por cada imagen que subas a tu proyecto y también para las imágenes destacadas. El tag para themes the_post_thumbnail() muestra el tag de la imagen junto a sus atributos.
Pero, ¿cómo debemos proceder si queremos mostrar una miniatura de una imagne como un fondo mediante CSS? Para ello utilizamos la función get_the_post_thumbnail_url().
<?php echo get_the_post_thumbnail_url(); // e.g. "http://miweb.com/ruta/a/la/imagen/thumbnail.jpg"?><div class="image-thumbnail" style="background-image; url(<?php echo get_the_post_thumbnail_url() ?>)"></div>
Generar número aleatorio
Este tag para plantillas te proporciona un número aleatorio basándose en un rango dado. WordPress utiliza esta función internamente para generar contraseñas aleatorias. En tu caso, puedes sacarle partido para generar número de cupones aleatorios para tu sitio web con WooCommerce.
// Genera un número del 1 al 200 $rand_number = wp_rand( 1, 200 );
Paginación de comentarios
Muchos themes actualmente utilizan el tag the_comments_navigation() el cual te brinda la oportunidad de mostrar en los comentarios, los típicos enlaces de «Anterior» y «Siguiente». Si quieres mostrar una navegación numerada (paginación), reemplaza el tag anterior por the_comments_pagination().
Ten en cuenta que este tag para plantillas únicamente funciona en WordPress 4.4 y posteriores. Asegúrate de comprobar esto antes de llevarlo a cabo.
<?php// Reemplaza 'the_comments_navigation()'if ( function_exists( 'the_comments_pagination' ) ) { the_comments_pagination();} else { the_comments_navigation();}<ol class="comment-list"> <?php wp_list_comments( array( 'style' => 'ol', 'short_ping' => true, 'avatar_size' => 42, ) ); ?></ol><!-- .comment-list -->Acortar URLs
Este tag para plantillas es capaz de acortar la longitud de una URL. Así, si tienes que mostrar la url en el contenido de tu WordPress, como un post o una página, no creará saltos de línea innecesarios. WordPress cuenta con dos opciones para ello: añade overflow-wrap: break-word; en tu CSS o también puedes acortar la longitud de la URL con el tag para plantillas url_shorten().
$link = get_the_permalink();$url_text = url_shorten( $link ); // ejemplo: www.wpdirecto.com/como...echo '<a href="'. $link .'">'. $url_text .'</a>';
Añadir scripts inline
Siempre solemos utilizar wp_enqueue_script para registrar y cargar un script y sus dependencias. Sin embargo, cargar un script interno es harina de otro costal. Para ello se introdujo el tag wp_add_inline_script.
function enqueue_script() { wp_enqueue_script( 'twentysixteen-script', get_template_directory_uri() . '/js/functions.js', array( 'jquery' ), '20160412', true ); wp_add_inline_script( 'twentysixteen-script', 'window.hkdc = {}', 'before' );}add_action( 'wp_enqueue_scripts', 'enqueue_script' );// Salida:// <script type='text/javascript'>window.hkdc = {}</script>// <script type='text/javascript' src='http://local.wordpress.dev/wp-content/themes/twentysixteen/js/functions.js?ver=20160412'></script>Desplegable de idiomas
El tag para plantillas wp_dropdown_languages muestra el listado de idiomas de tu web desarrollada con WordPress. Este tag puede ser la mar de útil si tu WordPress es multiidioma. Por ejemplo, puedes utilizarlo para mostrar todos los idiomas en la pantalla de modificaciones de usuarios en el backoffice de WordPress, o bien, en la parte pública para que los visitantes seleccionen el idioma en el que se sienten más cómodos.
wp_dropdown_languages( array( 'id' => 'lang_options', 'name' => 'lang_options', 'languages' => get_available_languages(), 'translations' => array( 'id_ID', 'ja' ), // Indonesia y Japón 'selected' => 'en_US', 'show_available_translations' => false, ));Obtener la URL de un avatar
Como el propio título indica, este tag para plantillas, get_avatar_url(), te devuelve la URL completa del avatar del usuario. Te permite mostrar y moldear dicho avatar tanto y donde quieras, en lugar de simplemente mostrarlo a través del tag img de HTML.
<div class="avatar-url" style="background-image: url(<?php echo $avatar; ?>)"></div>Obtener información sobre el theme
Esta función devuelve un objeto que contiene información sobre el theme que tienes activado actualmente en tu WordPress. Dicha información incluye el slug del theme, su nombre, la versión, el autor…
$theme = wp_get_theme();define( 'THEME_SLUG', $theme->template ); //Newspaperdefine( 'THEME_NAME', $theme->get( 'Name' ) ); // Newspaper 7
define( 'THEME_VERSION', $theme->get( 'Version' ) ); //7.2function load_scripts() { wp_enqueue_script( 'script-ie', $templateuri .'js/ie.js', array( "jquery" ), THEME_VERSION ); wp_script_add_data( 'script-ie', 'conditional', 'lt IE 9' );}add_action( 'wp_enqueue_scripts', 'load_scripts' );
También te puede interesar: 10 consejos a la hora de crear themes de WordPress de éxito
Y hasta aquí nuestro artículo sobre 10 tags para plantillas de WordPress que seguro no conoces. Espero que te haya gustado y, si te ha resultado útil, no dudes en compartirlo en redes sociales. El artículo ha sido extraído de Hongkiat, y el icono de la imagen destacada del artículo es obra de Gregor Cresnar. ¡Nos leemos!
