«Ocultar detalles» en WordPress

¿Has visto en alguna página esos «textos como botones» que al hacer clic sobre ellos te muestran más contenido?

Pues bien, en un artículo WordPress, entra en el editor HTML y escribe algo como lo que sigue

<details>
<summary>Clic para mostrar u ocultar</summary>
<p>El párrafo que no te esperabas.</p>
</details>

Luego vuelve al editor gráfico, juega un poco con los colores del texto y al «publicar» el artículo obtendrás algo así:

Clic para mostrar u ocultar

El párrafo que no te esperabas.

 

Posiblemente tengas que agregar algunos espacios extras por aquí y allá, que el editor de WordPress cada tanto hace cosas extrañas. Como verás al utilizar este código, en el editor gráfico el «botón» está siempre abierto, pero al hacer la vista preliminar o al publicar, todo funciona como lo puedes ver aquí.

En el «párrafo» puedes en realidad poner lo que quieras, como por ejemplo una imagen

¿Conoces el famoso triángulo del administrador?

 

Para seguir jugando en WordPress.


Por motivos que quedarán claros en su momento (o no, pero da igual), la próxima entrada en el blog de este pingüino será el viernes 5, no el jueves.

Anuncios

Mayúsculas iniciales en WordPress

Ciertamente si tenemos un sitio propio, con dominio propio y acceso como administrador a sus «entrañas» podremos crear nuestros propios estilos CSS y con ellos construir cualquier formato que queramos en nuestras páginas. Pero eso solo si «tenemos el poder» (y queremos utilizarlo). Ahora bien, esto no quiere decir que no podamos hacer «cosas extrañas» en una de estas cuentas gratuitas, solo tendremos que trabajar un poco más. De hecho en un artículo anterior vimos cómo utilizar Texto En Versalitas y «definiciones flotantes» mientras que en otro artículo comentamos cómo utilizar los logos de TEX, LATEX, XƎTEX y LYX: hoy le toca el turno a las «mayúsculas iniciales», que ya hemos visto en funciones hace un par de semanas.

Pues bien, este truco, como el anterior, está en ir a la pestaña HTML del editor de WordPress e insertar un poco de código. El truco lo vi en la siguiente página: How do I add a Drop cap text (html or image) to my website. Básicamente para crear la primera letra inicial he escrito

<span style="float: left; color: #d4d4c7; font-size: 87px; 
line-height: 39px; padding-top: 3px; padding-right: 3px; 
font-family: serif;">C</span><span style="font-variant: 
small-caps;">iertamente</span> si tenemos

NOTA IMPORTANTE: Por motivos de presentación he quebrado el código en varias líneas, pero es mejor ponerlo todo en una sola.

Solo nos queda jugar un poco con los colores HTML y los tamaños de la letra capital y su interlineado. El código no es ciertamente cómodo por lo que es un recurso que queda solo para «artículos especiales». Eso o adquirir un plan más completo que nos permita trabajar con el código CSS.

«Cajas flotantes» en un artículo WordPress

Supongamos que queremos lograr en nuestros artículos lo que se ve a continuación: una caja con un contenido arbitrario.

Esta caja puede aceptar cualquier tipo de contenido, ya sea texto aclaratorio, enlaces a otros artículos (cuando tenemos una «miniserie»), imágenes, lo que sea necesario.

Simplemente hay que utilizar el código comentado en este artículo.

Para lograr esto tenemos que utilizar código html, con el comando div y el parámetro del mismo style.

No será necesario ir a la pestaña HTML del editor de WordPress para lograr todo esto, pero si lo hacemos al volver al editor visual nos encontraremos con la caja perfectamente formateada mientras que si escribimos el código en el editor visual solo veremos el código: será necesario ir a la «vista previa» (o publicar) para ver cómo queda.

Los parámetros a utilizar son: float para indicar dónde debe colocarse el cuadro; width para indicar el ancho del cuadro; background-color para indicar el color de fondo; padding para establecer una distancia entre el borde del cuadro y el contenido; border si queremos un borde… internet está llena de guías para HTML por lo que dejo al lector el ejercicio de buscar lo que necesite, incluyendo cómo se llaman los colores en HTML.

Ahora los dejo con el código que utilicé para crear el cuadro que se ve en este artículo:

<diXv style="float: right; 
  width: 50%; background-color: lightgray; 
  padding: 1em; border: 1px solid gray;">

Esta caja puede aceptar cualquier tipo de contenido, 
ya sea texto aclaratorio, enlaces a otros artículos 
(cuando tenemos una «miniserie»), imágenes, lo que 
sea necesario.

Simplemente hay que utilizar el código comentado 
en este artículo.

</div>

NOTA 1: Para evitar que el ejemplo de código sea «compilado» por WordPress tuve que agregar la X roja y así «romper» la etiqueta «div» inicial, por lo que ya saben: nada de copiar y pegar irracionalmente 😉

NOTA 2: El cuadro será rodeado por el texto que le sigue. Es decir, dado que este cuadro está a la derecha el texto que se tenga luego del /div de cierre comenzará arriba a la izquierda del cuadro, tal y como se ve en este artículo.

NOTA 3: Para un ejemplo donde se utiliza esta «caja» como índice de una miniserie de artículos, pueden ver esta entrada de mi blog en inglés. Allí también utilicé el parámetro font-size:80%; para reducir el tamaño del texto.

A jugar con «span»: logos de LyX, LaTeX y XeTeX en wordpress

En este blog hablo mucho sobre LYX, LATEX y XƎTEX, mencionando cada tanto las «cajas TEX» y demás. El artículo de hoy es para mostrar cómo logro los «logos» correspondientes sin utilizar esos programas, solo con HTML puro y duro.

En HTML, a través del uso de entornos «span» podemos pasar parámetros al texto para cambiar cosas como el tamaño, la posición vertical y la distancia horizontal entre los caracteres (el kerning). Ahora bien, primero que nada debemos saber qué valores necesitamos.

Hace un tiempo descubrí una página en la wiki de LYX que indica cómo construir el «logo» del programa en LATEX. La instrucción es la siguiente

L\kern-.1667em\lower.25em\hbox{Y}\kern-.125emX\@

Allí vemos que la Y que viene luego de la L tendrá un kerning negativo y que tiene que ser «bajada», para finalmente hacer que la X también tenga un kerning negativo. Traduciendo esto a HTML (código que tenemos que copiar en el editor HTML de WordPress) obtenemos

L<span style="vertical-align: -0.25em; margin-left: -0.125em; 
   margin-right: -0.125em;">Y</span>X

lo cual nos da lo que queremos: LYX.

NOTA IMPORTANTE: Por motivos de presentación he quebrado el código en varias líneas, pero es mejor ponerlo todo en una sola. Lo mismo vale para los próximos ejemplos de código.

Viendo que esto funcionaba fue solo cuestión de un poco de prueba y error para obtener

TEX

T<span style="vertical-align: -0.5ex; margin-left: -0.1667em; 
   margin-right: -0.125em;">E</span>X

o LATEX

L<span style="font-size: 70%; margin-left: -0.36em; 
   vertical-align: 0.3em; line-height: 0; 
   margin-right: -0.15em;">A</span>
   T<span style="margin-left: -0.1667em; vertical-align: -0.5ex; 
   line-height: 0; margin-right: -0.125em;">E</span>X

Más complicado ha sido el logo de XƎTEX. Para la «E invertida» he utilizado el carácter Ǝ, U+018E, por lo que en principio el siguiente código debería funcionar

X<span style="margin-left: -0.1667em; vertical-align: -0.5ex; 
   line-height: 0; margin-right: -0.125em;">Ǝ</span>
   T<span style="margin-left: -0.1667em; vertical-align: -0.5ex; 
   line-height: 0; margin-right: -0.125em;">E</span>X

Digo en principio porque no todas las fuentes tipográficas ofrecen este carácter: si el carácter falta el navegador utilizará una fuente substitutiva para el mismo. No creo que sea necesario el comentar que en ese caso la meticulosa alineación indicada por el código se irá al demonio. En esta madriguera hispana utilizo la fuente tipográfica Vollkorn que es lo suficientemente completa, pero siempre hay que prestar atención a estos detalles.

Y esas cosas.

Versalitas y definiciones en WordPress

A menos que tengamos un sitio propio en el cual seamos libres de instalar complementos y tal, es poco lo que podemos hacer a la hora de obtener formatos «extraños» en nuestro sitio WordPress. Pero poco no es sinónimo de nada, sobre todo si estamos dispuestos a escribir un poco de código HTML.

Luego de la terrible corrección de error de la semana pasada, sigamos entonces el año con algo más relajado y veamos cómo utilizar Texto En Versalitas y «Definiciones Flotantes» en nuestros blog de WordPress.

Una captura de pantalla mostrando el segundo de los efectos, la «definición flotante», que lo de las Versalitas ya quedó claro

Pues bien, para ambas cosas tenemos que dirigirnos a la pestaña HTML del editor de WordPress. Para la primera escribimos algo así

<span style="font-variant: small-caps;">Texto En Versalitas</span>

tal y como se ve en la siguiente captura de pantalla

El editor de WordPress en «modo HTML»

Volviendo al editor visual podremos ver Nuestras Versalitas ya en acción.

Para agregar lo que he llamado una «Definición Flotante», el código a utilizar es

<abbr title="Un breve texto que aparece cuando colocamos el 
cursor en el objeto seleccionado">Definiciones Flotantes</abbr>

Y Esas Cosas, que todavía estamos en enero y el año hay que empezarlo relajadamente.


NOTA: Es posible utilizar etiquetas OpenType en HTML, el problema es que no sabiendo qué fuente será utilizada por el navegador para mostrar la página estas opciones avanzadas podrían fallar. Lo que se comenta en este artículo funciona siempre.

Más información sobre Versalitas En HTML

[wikipedia]Small caps in Cascading Style Sheets

CSS – Tricks | font-feature-settings

Lo de la abreviación no recuerdo de dónde lo saqué, lo tenía en un archivo de texto con una lista de cosas de las cuales hablar.

WordPress: ocultando etiquetas de la «nube de etiquetas»

Tal y como puede verse en la columna a la derecha de esta página (y en la siguiente captura de pantalla de este artículo), WordPress ofrece un «widget» que muestra las etiquetas que hemos utilizado para marcar nuestros artículos, cada una con un tamaño proporcional al número de artículos de esa etiqueta.

WP-nube

Se activa en Apariencia → Widgets y se arrastra el elemento «Nube de etiquetas» donde queramos (por ejemplo, «Área primaria de widgets»).

Ahora bien, supongamos que tenemos una etiqueta que identifica un tema sobre el cual ya no escribimos y que los artículos que tenemos sobre ese tema son todos del tipo «noticias» y que por lo tanto han quedado desactualizados, ¿es posible, sin borrar la etiqueta (o los artículos), lograr que esta no se muestre en la «nube de etiquetas»?

¡Ciertamente!

Abriendo el botón que representa el «widget», vemos que se tiene la opción de Excluir una o varias etiquetas indicando simplemente el número ID correspondiente:

WP-nube-conf

La pregunta, claro está, es de dónde sacamos el «número ID correspondiente», porque escribir el nombre de la etiqueta no funciona.

Dentro de nuestro panel de administración en WordPress, vamos a Entradas → Etiquetas y en la lista que tenemos a la derecha hacemos clic en la etiqueta que queremos ocultar (o bien en la opción Editar de la misma). Ahora, de la página que se abre miramos su dirección:

WP-nube-ID

Solo tenemos que copiar el número que sigue a «tag_ID=» para pegarlo en la casilla Excluir de la configuración de la nube que mostramos más arriba: clic sobre Guardar y ya estará todo listo.

Para excluir varias etiquetas, solo hay que separar los distintos ID con comas.


Fuente

Programando el pasado en WordPress

Hace unos meses cometí un error: al escribir sobre cómo fue instalar Linux en mi nueva portátil decidí crear una página en lugar de un artículo. Esa página era una subpágina de «entradas destacadas», por lo que cada vez que pasaba el cursor por el menú de páginas me daba un submenú que resultaba bastante incómodo y no del todo claro. Quizás el problema fuera del tema usado en este sitio, pero la verdad es que luego de un tiempo me di cuenta de que sería mejor convertir esa página en un artículo, por lo que inmediatamente surgieron dos preguntas:

Pregunta 1: ¿existe una herramienta en WordPress para convertir páginas en artículos o viceversa?

Respuesta 1: No.

Pregunta 2: Si no queda otra alternativa que copiar el contenido de la página y pegarlo en un artículo, ¿existe una forma de hacer que el artículo se publique con la fecha anterior a la actual, por ejemplo cuando fue creada la página?

Respuesta 2: Sí.

A la derecha de la zona de edición del artículo tenemos la posibilidad de editar cuándo se publicará la entrada. Generalmente esta opción se usa para programar entradas futuras para que se publiquen automáticamente (de hecho, la mayor parte de las entradas de este sitio son programadas con varios días de anticipación), pero si ponemos allí una fecha anterior a la actual el artículo será publicado inmediatamente con esa fecha.

Programando esta entrada

Programando esta entrada

Y así fue como la página que hablaba de la experiencia de instalar Linux en mi nueva portátil terminó convirtiéndose en un artículo con fecha de publicación de un par de meses antes de cuando realmente presioné el botón «Programar».