Trucos WordPress.com

Desde que comencé a emplear el servicio gratuito de WordPress.com me he encontrado con dificultades para conseguir cosas que en otros servidores de blogs se consiguen directamente desde el propio editor de textos enriquecido, sin necesidad de tener que editar el código HTML. Esta es una recopilación de esos trucos que yo he visto necesarios. Primero haré un repaso por los que se emplean durante la edición de texto, para luego enseñar algún otro.

JUSTIFICAR EL TEXTO

Desde el editor nos dan la opción de alinear el texto a la izquierda, a la derecha o centrarlo, pero de este modo, en mi opinión, los textos quedan muy poco estéticos. Para justificar nuestros textos basta con seleccionar los párrafos a los que queramos aplicar el cambio y pulsar la combinación de teclas [alt + shift + j].

INSERTAR CÓDIGO DE PROGRAMACIÓN

Es muy común en el mundo de la informática, tener que introducir trozos de código de programación, como pueden verse en mi entrada sobre La memoria en Java. Se hace directamente desde la edición de texto visual insertando el siguiente código:

[sourcecode language="java"]

Aquí metemos el código

[/sourcecode]

Todo lo que se introduzca entre esas etiquetas será representado literalmente y se resaltará dependiendo del lenguaje de programación que se especifique.

Se ha hablado sobre este truco más a fondo en esta otra entrada en la que se analizan todas las opciones que acepta.

TEXTO FLOTANTE AL PASAR EL RATÓN

No es algo muy común, pero a veces resulta más estético mostrar el significado de un acrónimo al pasar el ratón que hacerlo entre paréntesis, por ejemplo: JVM.

Para ello, se ha de acceder a la pestaña de edición HTML e introducir el siguiente código.

<abbm title="Java Virtual Machine">JMV</abbm>

Antes de comenzar  con trucos que no tienen nada que ver con la presentación de los textos, aclarar que cualquiera que sepa HTML puede realizar muchas más modificaciones desde la pestaña HTML del editor teniendo como única frontera su imaginación.

ESTADÍSTICAS DE VISITAS EXTERNO

En mi opinión, las estadísticas de visita que se muestran por defecto en WordPress.com deja mucho que desear, te indica desde que dominio accede alguien a tu web, pero no te especifica desde donde exactamente, por ejemplo, si tienes un visitante desde un Tweet de Twitter te indica que viene desde Twitter. Tampoco puedes saber desde que lugar del mundo acceden, lo que en muchas ocasiones puede ayudar mucho al escritor a decidir que expresiones emplear.

En mi anterior blog, empleaba el servicio de StatCounter, no es el más completo de todos los que se encuentran por la red, pero a mi me gusta y ya llevo unos años con él.

Todos estos servidores nos facilitan un código HTML que hay que añadir en la web a fin de que ellos puedan hacer el recuento de las visitas. Para realizar esto tendremos que acceder al panel de control de WordPress.com y seguir los siguientes pasos.

[Apariencia] > [Widgets]

Buscamos y añadimos el Widget de Texto al panel lateral derecho que nos aparece, y en el cuerpo del mensaje añadimos el código HTML. Yo en mi caso, he aprovechado el que introduje para poner la licencia a fin de no tener que añadir otro campo de texto más y he empleado un código invisible que no se ve, pero que cumple bien su función.

Anuncios

Insertar Código Fuente en WordPress.com

Si sóis usuarios de una cuenta gratuita en WordPress.com, habréis notado que no se permite editar los CSS, ni otras cosas que puedan ayudarnos a poder hacer más visual parte de nuestras entradas. Como programador, y devido a la temática de este blog, en muchas ocasiones me he visto obligado a introducir código fuente en diferentes lenguajes de programación, por lo que el haber encontrado un modo simple y rápido de introducir este código y que todos puedan verlo correctamente formateado, me alegró mucho.

Esto es a lo que me refiero:

class HolaMundo{

    public static void main(String[] args){

       System.out.println("Hola Mundo");

    }

}

Sus ventajas no son solo el aspecto visual, también que puede copiarse el contenido del mismo y que el escritor no tiene que andar aplicando estilos a cada parte del código para que este se vea con colorines.

El único problema que le veo es que no tabula automáticamente, pero si se copia desde un editor de texto normal, no hay problema con ello.

¿CÓMO SE CONSIGUE?

Es muy simple poner un cuadro como el de arriba, basta con itroducir en la pestaña ‘Visual’ del editor, he dicho la ‘Visual’ no la ‘HTML’, el siguiente código.

[sourcecode language="java"]
class HolaMundo{

public static void main(String[] args){

System.out.println(“Hola Mundo”);

}

}
[/sourcecode]

El parámetro ‘language’ admite multitud de lenguajes, a continuación se encuentra una lista completa.

  • actionscript3
  • bash
  • coldfusion
  • cpp
  • csharp
  • css
  • delphi
  • erlang
  • fsharp
  • diff
  • groovy
  • html
  • javascript
  • java
  • javafx
  • matlab (solo palabras claves)
  • objc
  • perl
  • php
  • text
  • powershell
  • python
  • r
  • ruby
  • scala
  • sql
  • vb
  • xml

Si no introducimos el parámetro ‘language’ se establece por defecto a ‘text’ esto es, texto sin modificaciones.

PARÁMETROS DE CONFIGURACIÓN

Hay multitud de parámetros de configuración aparate del de ‘language’ que ya hemos visto.

  • autolinks (true/false) — Establecer si se resaltan los links automaticamente. Por defecto True.
  • collapse (true/false) — Si está a True, el código aparecerá reducido y requerirá de la interacción de un usuario para expandirse, resulta ideal para código grande. Por defecto está a False.
  • firstline (número) — Si se quiere que la primera línea no sea la 1 puede modificarse, resulta útil cuando se corta código en diferentes diálogos.
  • gutter (true/false) —  Si se encuentra a False, no se mostrarán los números de línea. Por defecto está establecido a True.
  • highlight (número de lineas separados por comas ‘,’) —  Puedes marcar las líneas que quieras que sean marcadas de un modo especial para resaltar, por ejemplo “4,7,19″.
  • htmlscript (true/false) —  Si se encuentra en True, cualquier código HTML/XML que se introduzca será resaltado, es útil para cuando se mezcla código PHP con HTML por ejemplo. Por defecto se encuentra a False.
  • light (true/false) — Si se establece a True, tantos los números de las líneas como la barra de herramientas que aparece al poner el ratón sobre el cuadrado, no se muestran. Por defecto se encuentra a False.
  • padlinenumbers (true/false/integer) — Se emplea para establecer de cuantos dígitos constan los números que representan la linea. Si está a True, se establece en automático, en false no se realiza y si se introduce un valor numérico se establece éste. Por ejemplo al poner paddlinenumbers="3" la línea 1 se representaría como 001.
  • toolbar (true/false) — Si está a False, la barra de herramientas que se muestra al pasar el ratón por el código no se mostrará. Por defecto se encuentra a True.
  • wraplines (true/false) — Si se encuentra a False, las líneas de texto largas no van a ser cortadas provocando la aparición de una barra deslizante horizontal en el recuadro. Por defecto se encuentra a true.

EJEMPLOS

[sourcecode language="java" autolinks="true" wraplines="false" padlinenumbers="2" highlight="1,5"]

class HolaMundo{

    public static void main(String[] args){

       System.out.println("Hola Mundo, nos encontramos en https://ayddup.wordpress.com , visítanos siempre que te apetezca");

    }

}

[sourcecode language="java" autolinks="false" wraplines="true" gutter="false" ]

class HolaMundo{

    public static void main(String[] args){

       System.out.println("Hola Mundo, nos encontramos en https://ayddup.wordpress.com , visítanos siempre que te apetezca");

    }

}

Toda la información ha sido obtenida de la página de soporte de WordPress.com [ENG]