Plugins en WordPres.com

Desde hace unas semanas es posible instalar algunos plugins en WordPress.com si es suscribe el plan Business. Quizás uno de los plugins más interesantes de los que hay disponibles es WooCommerce ya que nos permite tener una tienda online usando la plataforma de WordPress.com

Explorador de plugins ‹ El taller de WordPress — WordPress.com.jpg

 

 

Anuncios

Acceso al gestor y primeros pasos en WordPress.com

Existen tres maneras distintas de editar/modificar tu página en WordPress.com. Desde cada uno de ellos se pueden hacer cosas distintas y cada una tiene sus ventajas e inconvenientes:

  1. El editor por defecto (llamado Calypso)
  2. El editor “clásico” (llamado wp-admin)
  3. El personalizador (en inglés “customizer”)

El editor por defecto: Calypso

Es el que os va a mostrar WordPress.como cuando creéis vuestra web. Es el más sencillo de utilizar y el más rápido a la hora de escribir y publicar contenidos.

También es el que os mostrará si pincháis “editar” cuando estéis visitando una entrada en vuestra web (con sesión iniciada, se entiende).

Para mis gusto personal este editor es un tanto incompleto y por eso prefiero usar el clásico.

El editor clásico “wp-admin”

Este editor es el “clásico” y es el que os encontraréis si más adelante trabajáis con una instalación propia (self-hosted o WordPress.org). Por este motivo yo recomiendo usarlo siempre, en lugar de Calypso. Para acceder a él antes había un botón directo, pero recientemente lo quitaron :

A día de hoy la única manera es escribir, detrás de la dirección de vuestra web “wp-admin”, de esta manera:

vuestraweb.wordpress.com/wp-admin

Una vez accedáis tendría que mostrarlos algo así:

El Personalizador

Se utiliza principalmente para cambiar el diseño de la página (colores, tipografías, logos e imágenes de cabecera), aunque también es posible gestionar desde él los menús y los widgets. Se puede acceder a él desde Apariencia > Personalizador (en el WP-Admin) o desde el botón de “Personalizar” que se muestra abajo a la derecha cuando visitamos nuestra página.

Cómo crear un menú en WordPress.com

Los menús nos permiten organizar la información de nuestra web y facilitan la navegación. Un menú puede tener enlaces a páginas, a entradas, a categorías o a una URL arbitraria (externa o interna) que nosotros asignemos.

Podemos crearlo yendo a Apariencia > Menús.

Los pasos serían

  1. Creamos un nuevo menú
  2. Añadimos los elementos
  3. Asignamos la localización donde queremos que se muestre ese menú.

El tercer paso es muy importante porque si no asignamos el menú a ninguna zona no se nos mostrará. Si nuestra web no tiene asignado un menú a la zona de menú principal en ella se mostrarán todas las páginas que tengamos creadas. Esto es una herencia de cómo funcionaba WordPress antes de la inclusión (en la versión 3.0) del sistema actual de gestión de menús. Si tenemos dudas sobre las zonas disponibles en nuestro tema y qué menú está asignado a cada una lo podemos revisar desde la pestaña de “Gestionar Lugares”.

También es posible crear y gestionar los menús desde el personalizador:

Para poder añadir un elemento al menú necesitaremos haberlo creado previamente, aunque en las últimas versiones de WordPress (desde la 4.7) es posible crearlo directamente desde el personalizador.

En algunos temas existe una zona de menú llamada “Menú Social” que nos permite añadir los links a nuestros perfiles en redes sociales convirtiendo el enlace en el icono de esa red social. Simplemente tenemos que añadir el link y automáticamente lo detecta:

Pinchando y arrastrando podemos reorganizar los menús. También es posible cambiar la etiqueta de navegación de los menús, de tal manera que no coincida exactamente con el nombre de la página, post o categoría a la que enlaza. En caso de hacer esto hay que recordar que ese nombre ya no cambiará de manera automáticamente al editar el original.

El número de menús disponibles y su localización depende del tema que estemos usando. Es importante recordar que siempre que cambiemos de tema tendremos que re-asignar cada menú a las zonas que nos ofrezca ese tema.

Cómo mostrar código en WordPress.com

WordPress.com no nos permite añadir nuestro popio código php o javascript pero si mostrarlo, si por ejemplo escribimos una entrada que hable un tema relacionado con programación. Para ello podemos usar el shortcode [ code ] tal y como se explica aquí.

[ code language=”css” ]
a {color:red;}
[ /code ]

El resultado sería algo así:

a {color:red;}

El parámetro “language” es importante si queremos que nos muestre el “sintax highlight” correcto. Tenemos además otra serie de parámetros que podemos añadir al shortcode:

  • autolinks (true/false) — Makes all URLs in your posted code clickable. Defaults to true.
  • collapse (true/false) — If true, the code box will be collapsed when the page loads, requiring the visitor to click to expand it. Good for large code posts. Defaults to false.
  • firstline (number) — Use this to change what number the line numbering starts at. It defaults to 1.
  • gutter (true/false) — If false, the line numbering on the left side will be hidden. Defaults to true.
  • highlight (comma-seperated list of numbers) — You can list the line numbers you want to be highlighted. For example “4,7,19”.
  • htmlscript (true/false) — If true, any HTML/XML in your code will be highlighted. This is useful when you are mixing code into HTML, such as PHP inside of HTML. Defaults to false and will only work with certain code languages.
  • light (true/false) — If true, the gutter (line numbering) and margin (see below) will be hidden. This is helpful when posting only one or two lines of code. Defaults to false.
  • padlinenumbers (true/false/integer) — Allows you to control the line number padding. true will result in automatic padding, false will result in no padding, and entering a number will force a specific amount of padding.
  • title (string) — Set a label for your code block. Can be useful when combined with the collapse parameter.

Este shortcode está disponible como plugin si queréis usarlo en vuestra propia instalación.

Temas de WP.com para Portfolios

Desde hace algún tiempo WordPress.com dispone de 2 nuevos tipos de publicaciones, Porfolios y Testimonios. Estas publicaciones permiten organizar los contenidos de tu web de manera más limpia, separándolos de los posts y páginas tradicionales e incluso dando un diseño separado.

Podemos activar estos tipos nuevos de contenido yendo a Ajustes > Escritura:

Configuración de escritura ‹ El taller de WordPress — WordPress

Estos nuevos tipos de post funcionan con cualquier tema, sin embargo si queremos sacar el máximo partido al tipo de post “Portfolio” es conveniente usar un tema que esté pensado para él, podéis ver un listado de ellos aquí:

https://theme.wordpress.com/themes/features/portfolio/?sort=free

Cómo Incrustar contenidos externos (“Embeds”)

Para añadir un contenido externo todo lo que tenemos que hacer es copiar la dirección de ese contenido y pegarlo en la entrada. Aquí podéis ver una lista de todos los elementos que se pueden incrustar de esta manera, entre ellos:

  • Youtube
  • Twitter
  • Facebook
  • Google Calendar
  • Google Forms
  • Issuu
  • Soundcloud
  • Flickr
  • Instagram
  • Pinterest

El caso de los mapas es ligeramente más complicado, aquí os pongo un video de cómo conseguir el enlace correcto:

Resultado:

Visibilidad de los Widgets

Cada tema especifica una serie de zonas donde podemos colocar nuestros widgets. Si añadimos varios widgets en una misma zona se pondrán normalmente uno encima del otro. Lo que resulta interesante, y nos da mucha más libertad, es la opción de mostrar u ocultar ciertos widgets según una serie de criterios (Si es la página de inicio, la página de listado de entradas, si estamos en un listado por autor, por fecha o por categoría, si es una entrada individual, etc).

Captura-de-pantalla-2017-04-10-a-las-14.11.12Captura-de-pantalla-2017-04-10-a-las-14.11.20Captura-de-pantalla-2017-04-10-a-las-14.11.29

Mostrar listados de posts, paginas y porfolios con shortcodes

Si queremos mostrar las entradas en una página, en un post o en un widget lo podemos hacer usando un shortcode. El uso básico es [ display-posts ] pero podemos darle muchos parámetros:

  • author
  • category
  • date_format (date_format=”F j, Y”)
  • id (id=”9, 10″)
  • image_size (image_size=”thumbnail”)
  • include_content (include_content=”true”)
  • include_date (include_date=”true”)
  • include_excerpt (include_excerpt=”true”)
  • offset (offset=”3″)
  • order (order=”ASC”)
  • orderby (orderby=”title”) (más aquí https://codex.wordpress.org/Class_Reference/WP_Query#Order_.26_Orderby_Parameters)
  • portfolio_type (para mostrar porfolios)
  • post_parent order
  • post_status (post_status=”publish, future”)
  • posts_per_page
  • tag
  • wrapper (ol, ul, div)

Ejemplo  [ display-posts orderby=”title” order=”ASC” posts_per_page =”6″image_size=”small” ]

Más información aquí.

Mostrar Posts del Tipo Porfolio y Testimonio

Para ello primero hemos de activarlos:

WordPress.com Shortocodes list posts loop

Es muy similar a [ display-posts ] (y de hecho podemos usar el otro directamente añadiendo “portfolio_type” o “testimonial_type”) pero nos ofrece la opción de especificar el número de columnas: [ portfolio columns=”1″ ].

Más información aquí y aquí.

Mostrar páginas

Existe además un shortcode para mostrar nuestras páginas por ejemplo

  • [ list-pages ] Muestra todas las páginas
  • [ sibling-pages ] Muestra las páginas que están al mismo nivel que la actual
  • [ child-pages ] Muestra las páginas que están por debajo de la página actual

Este shortcode acepta los siguientes parámetros:

  • sort_column
  • sort_order
  • exclude_tree
  • include
  • depth
  • child_of
  • show_date
  • date_format:
  • title_li
  • link_before
  • link_after
  • authors
  • offset
  • post_status

Más información aquí.

Shortcode de Archivos

Existe también un shortcode específico para mostrar archivos (listados) de posts:

  • Last 12 months:
    [archives type=monthly limit=12]
  • Last 12 months with post count:
    [archives type=monthly limit=12 showcount=true]
  • Last 18 days:
    [archives type=daily limit=18]
  • Last 32 posts:
    [archives limit=32]
  • Last 3 weeks:
    [archives type=weekly limit=3]
  • All posts in a drop-down:
    [archives format=option]
  • Last 12 months with post count in a drop-down:
    [archives format=option type=monthly limit=12 showcount=true]
  • Last 17 weeks with some before and after text:
    [archives type=weekly limit=17 before='some before text' after='some after text']
Option Description Choices Default Setting
type The type of archives list to display yearly, monthly, weekly, daily, postbypost postbypost
format How to display the archives list option (drop-down menu), html (unordered list), custom (for use with the “before” and “after” parameters) html
limit The number of archive entries to display Any valid number No limit
showcount Display post count of each archive entry true, false false
before Text to go before each archive entry Any string of text or HTML tag from here none
after Text to go after each archive entry Any string of text or HTML tag from here none
order Sort order asc, desc desc

Más información aquí.

Nota importante

Por cuestiones de rendimiento el resultado de estos shortcodes no se genera cada vez que se carga la página, sino que se cachea y se renueva cada cierto tiempo. De manera que si habéis hecho un cambio y no se muestra no os preocupéis, es cuestión de esperar un poco.