WordPress EducaMadrid

Todos los centros educativos cuentan con la posibilidad de elaborar su página web de centro utilizando esta herramienta.

Crear y activar la web de centro en WordPress

WordPress es un sistema de gestión de contenidos o CMS (por sus siglas en inglés, Content Management System) enfocado a la creación de páginas web.

La plataforma EducaMadrid pone a disposición de todos los centros educativos la posibilidad de elaborar su página web utilizando esta herramienta en su multisite.

A diferencia del resto de servicios, nuestras páginas de WordPress no son accesibles desde fuera de España por razones de seguridad. Recordamos que también pueden crearse webs de centros mediante Liferay, que no tiene estas restricciones.

Solicitar espacio WordPress

Los centros pueden solicitar la creación del espacio para desarrollar la página web del centro cumplimentado y enviando este formulario.Vista del formulario de solucitud del espacio WordPress de EducaMadrid.El acceso al formulario se puede realizar solamente con las credenciales de la cuenta institucional del centro. Una vez EducaMadrid haya gestionado la creación del espacio, enviará un correo a la cuenta institucional del centro indicando la URL de la página y la URL de acceso al panel de control de WordPress.

Importar desde otra web de WordPress

Para importar una web de WordPress a EducaMadrid debemos tener en cuenta que, como la web exportada viene de un dominio externo a EducaMadrid, probablemente los plugins y los temas que incorpora no sean compatibles con los que utilizamos en nuestro multisite, tal vez porque no estén instalados o porque estén modificados.  Por tanto, aconsejamos desactivarlos y no marcar en el diálogo de exportación ninguno de esos dos apartados.

En todo caso, habrá que revisar todas las páginas tras la exportación para confirmar su correcto funcionamiento y realizar los ajustes necesarios.

Plugins instalados

Es importante tener en cuenta que estos plugins han sido adaptados al multisite de EducaMadrid y, por diversas razones técnicas, pueden no tener operativas todas sus características.

La instalación de plugins y temas afecta a todos los Centros con sitios WordPress de EducaMadrid. Su instalación está limitada por cuestiones técnicas, de utilidad y de interés general.

Importar

Una vez tengamos el fichero de la exportación accesible desde nuestro equipo, accedemos al panel de control de nuestro sitio web utilizando una cuenta con perfil Administrador de centro.

Ubicados en el escritorio de WordPress, pulsaremos en Herramientas (1) -> Importar (2) -> Ejecutar el importador (3)En el escritorio, pulsar en "Herramientas", "Importar", "Ejecutar la importación".En la siguiente ventana, seleccionaremos nuestro documento de importación (.xml) y pulsaremos en el botón Subir archivo e importar. Comenzará el proceso de subida del archivo que puede tardar varios minutos.Clicar en "Seleccionar el archivo" y "Subir archivo a importar".Cuando esté listo el archivo, se mostrará la ventana del Importador de WordPress, donde podemos reasignar el autor del contenido importado a un usuario existente de este sitio.Importador WordPress: reasignar los autores.Tras realizar el proceso de asignar los contenidos a un autor, pulsaremos sobre el botón Enviar y comenzará la carga de los archivos a nuestra página de WordPress de EducaMadrid.Vista de escritorio con los datos del sitio.Cuando el proceso haya terminado, tendremos disponibles los contenidos importados. En este punto deberemos aplicar un tema a la página web, para que los contenidos se hagan visibles, si es que no lo habíamos aplicado anteriormente.

Elegir tema

EducaMadrid nos ofrece 15 temas ya instalados. El tema es el diseño que tendrá la página web de nuestro centro. Los contenidos que vayamos creando se adaptarán a ese diseño.

Los temas cuyo nombre comienza por "Twenty..." (Twenty Nineteen, Twenty Sixsteen, Twenty Twenty, etc.) son los más estables por estar desarrollados directamente por WordPress.

Con la selección de una nueva plantilla los contenidos se adaptarán al nuevo diseño. Para acceder a todos los temas disponibles, pulsaremos sobre la opción "Apariencia" > "Temas" del menú lateral izquierdo del escritorio.

EducaMadrid pone a disposición de todos los usuarios un tema propio,  adaptado a las características de la plataforma: EducaMadrid XVII. Se trata de una adaptación de Twenty Seventeen de WordPress. Por tratarse de un tema oficial de la plataforma, se garantiza su mantenimiento a largo plazo y se ofrece soporte para la corrección de problemas de apariencia que pueden surgir a raíz de las actualizaciones.

Vista del escritorio de WordPress con el Tema "EducaMadrid XVII" destacado.

Elegir el tema es la primera acción que debemos realizar ya que según el tema que elijamos la página tendrá una estructura u otra. Es lo que va a organizar los menús y los contenidos de la página. Podremos cambiar de tema posteriormente, conservando todas las páginas y entradas. Solamente perderemos la personalización específica del propio tema.

Activar un tema o ver la apariencia con "Vista previa".

Podemos ver los detalles de cada tema y personalizarlo a nuestro gusto una vez activado.

Detalles del tema y botón de "Personalizar".

Consejos

Recomendamos utilizar el tema propio de EducaMadrid, adaptado a las características de la plataforma: EducaMadrid XVII. Se trata de una adaptación de Twenty Seventeen de WordPress, uno de los más estables, junto con los demás temas Twenty ..., por estar desarrollados directamente por WordPress.

Debido a que EducaMadrid XVII es un tema oficial de la plataforma, se garantiza su mantenimiento a largo plazo y se ofrece soporte para la corrección de problemas de apariencia que pueden surgir a raíz de las actualizaciones.

Imagen institucional

La imagen del centro debe estar clara desde el mismo momento en que se accede a la página. Debe quedar claro el tipo de centro, nombre y población. También conviene que el aspecto de la página web evoque la identidad del centro y sus valores.

Tipos de letra y colores

La paleta de colores y tipografía de una página web son elementos que deben ser escogidos y estructurados detenidamente. Se trata de elementos que facilitan su uso y lectura.

Color:

Para lograr una buena combinación de colores para nuestro sitio web podemos hacer uso de la gama cromática. Esta es la escala que ordena los colores según su valor, saturación o posición. Se aconseja usar colores de la misma gama, con contrastes armónicos y suficientes para facilitar la lectura.

Escala cromática que ordena los colores según su valor, saturación o posición.

El color debe usarse con moderación y seguir una lógica. Una página web llena de colores sin jerarquía, no tendrá el mismo efecto que una página web con 2-3 colores bien estructurados.

Tipografía:

Es aconsejable dotar a cada fuente de un nivel de importancia. Todas ellas deben tener un tamaño apropiado y un diseño sencillo para facilitar la lectura.

Imágenes

Para no ralentizar la carga de las páginas, es recomendable utilizar las imágenes ligeras y con las dimensiones con las que han de mostrarse.

¿Qué ventajas tiene hacer un buen uso de las imágenes?

Utilizaremos tres tipos de archivo: GIF, PNG y JPG.  Todos ellos guardan las imágenes comprimidas, pero utilizan diferentes sistemas de compresión. En líneas generales, es recomendable utilizar los formatos según la finalidad:

¿Qué peso debería tener una imagen? Depende tanto de sus colores como de la calidad que necesitamos. Lo mejor es conseguir que las imágenes pesen lo menos posible y que se vean lo suficientemente bien. Como orientación: una imagen con unas dimensiones de 550 píxeles de ancho, no debería pesar más de 50 KB.

En cuanto al tamaño, un máximo de 550 o 600 píxeles de ancho o de alto suele ser suficiente para una correcta visualización de las ampliaciones. Las imágenes cuadradas podrían ser algo más pequeñas: 450x450 o 375x375 píxeles, por ejemplo.

Utilizar siempre los mismos tamaños puede hacer que nuestras páginas sean más agradables. Podemos definir un tamaño para las imágenes verticales, otro para las horizontales y otro para las cuadradas, y usarlos siempre. Esto, por supuesto, es a criterio de diseñador.

GIMP es un software libre muy potente para el tratamiento de imágenes.

Activar la web de WordPress

La URL de la web de un centro (URL institucional) siempre tendrá la siguiente composición: www.educa.madrid.org/loginCentro.  No importa la modalidad con la que elaboremos la página web porque SIEMPRE al escribir la URL institucional en el navegador, la propia herramienta se encargará de redirigirnos a la modalidad que tengamos activa, Wordpress o Liferay.

Para redireccionar la URL institucional a la web que tengamos activa, en nuestro caso WordPress, debemos acceder al portal de EducaMadrid con con la cuenta TIC o cuenta institucional del centro. Al pulsar en Administración > Panel de control > Gestor del centro, en el campo de Web activa seleccionaremos el modelo de web.Redireccionar la URL institucional del centro a la web que tenemos activa.

Legislación vigente

Enlace a la normativa vigente sobre páginas web de centros educativos

INSTRUCCIONES DE LA VICECONSEJERÍA DE EDUCACIÓN, SOBRE LA INCLUSIÓN EN EL PORTAL EDUCAMADRID DE LAS PÁGINAS O SITIOS WEB DE LOS CENTROS Y SERVICIOS EDUCATIVOS.

La Consejería de Educación viene impulsando, desde el curso 2001/2002, el Plan Global para el desarrollo de las Tecnologías de la Información y la Comunicación, denominado EducaMadrid. Entre sus líneas básicas de actuación, se encuentra la puesta en marcha del Portal EducaMadrid, en el que se reserva un espacio propio para los centros y servicios educativos en el que alojar su sitio web institucional.

Pueden utilizar este espacio los centros públicos y concertados que imparten los niveles educativos a los que la LOCE se refiere como enseñanzas escolares, los de la red de formación del profesorado, y otros centros y servicios educativos dependientes de la Consejería de Educación.

Se considera de especial interés fomentar la elaboración de estas páginas web de los centros, ya que se trata de un instrumento poderoso para fomentar la integración de las tecnologías de la información y la comunicación como recurso educativo y como herramienta de comunicación, haciendo especial énfasis en abrir nuevas vías de interacción entre profesorado, alumnado, familias, servicios de apoyo, administración...

Para garantizar su mejor utilización, funcionalidad, accesibilidad y navegabilidad, esta Viceconsejería dicta las siguientes instrucciones.

1. Objeto y ámbito de aplicación

La presente Resolución tiene por objeto fijar criterios homogéneos para la inclusión en el Portal EducaMadrid de los sitios web de los centros públicos y concertados que imparten “enseñanzas escolares”, los de la red de formación del profesorado y otros centros y servicios educativos dependientes de la Consejería de Educación.

Estos sitios web deben recoger, de forma unificada, la información que cada centro o servicio educativo da a conocer a través de la red Internet. A partir de la puesta en marcha del Portal EducaMadrid, las páginas web institucionales de los centros y servicios educativos públicos dependientes de la Consejería de Educación de la Comunidad de Madrid se alojarán en la dirección URL que dicha Consejería facilita a tal efecto.

Los centros concertados que deseen incluir sus sitios web en el citado Portal EducaMadrid, se atendrán a los criterios establecidos en estas Instrucciones.

2. Responsabilidad sobre el contenido de las páginas web alojadas en el Portal EducaMadrid

El sitio web representativo de un centro educativo es la presentación pública del centro a través de la red Internet. Por tanto, el Director del centro será responsable de los contenidos que se publiquen.

Existe un perfil de usuario institucional para cada centro, cuya utilización podrá ser delegada en la persona o personas que la Dirección del centro determine, para que puedan incluir cambios en las páginas. Tanto La Dirección del centro, como quienes asuman esta responsabilidad de forma delegada, deberán conocer y cumplir los diversos requisitos normativos a los que se hace referencia en el Apartado 8 de estas Instrucciones.

3. Aspectos corporativos

En todas las páginas incluidas en el sitio web representativo de cada centro o servicio educativo a los que se refieren estas Instrucciones, debe figurar el logotipo del Portal EducaMadrid y su enlace, así como el logotipo de la Consejería de Educación de la Comunidad de Madrid y el enlace a sus páginas institucionales. Ambos logotipos y ambas direcciones URL se podrán encontrar - y descargar en su caso - en el Portal Educativo EducaMadrid, en la zona denominada “Revista Digital”, Sección “Educawebs”, apartado “Consejos Útiles”.

En la página principal o index del sitio web representativo de cada centro o servicio educativo, aparecerán también, en lugar visible, los enlaces al Centro de Profesores y a la Dirección de Área Territorial correspondientes.

Criterios para facilitar el uso y la navegabilidad

Con objeto de facilitar la navegabilidad, será imprescindible que todas las páginas incluyan información que oriente a los usuarios sobre el lugar en el que se encuentra en relación con el esquema general del sitio web. Debe hacerse explícito en qué sección se ubica cada página, a qué otras secciones se puede acceder, cómo volver a la página principal, etc. Así mismo, todas las páginas incluirán, en lugar visible, el nombre del centro y la fecha de la última actualización (cada información debe incluir su propia fecha de actualización, ya que pueden coexistir en un mismo sitio web páginas actualizadas en momentos muy diversos).

Los contenidos se estructurarán en unidades de tamaño y organización adecuados a las características del hipertexto, eludiendo párrafos y páginas muy extensos y sin estructurar, que podrían requerir un uso intensivo de la barra de desplazamiento vertical. Por otra parte se evitará la aparición de la barra de desplazamiento horizontal, teniendo en cuenta las configuraciones habituales de pantalla.

Los textos deberán estar bien estructurados en apartados, utilizando hipervínculos para ampliar la información cuando interese, con suficiente espacio entre líneas y párrafos, con zonas claramente diferenciadas para descargar la visión y facilitar la lectura. Se elegirán formatos de letra claros, de tamaño suficiente, y cuya compatibilidad con los diferentes navegadores esté asegurada (según las recomendaciones del W3C). Se recomienda utilizar fondo blancos y colores de fuente oscuras. Se evitará la proliferación de elementos accesorios o poco significativos que puedan distraer la atención o dificultar la navegabilidad... Los atributos y estilos serán uniformes entre todas las páginas de un mismo sitio web, de manera que no roben protagonismo a los contenidos más significativos. Un diseño sobrio en la forma, permitirá resaltar la información más importante.

En general, debe procurarse facilitar la navegación y la comprensión de la estructura de la página y de los iconos que se utilicen, como forma de mantener la atención del usuario y agilizar el acceso a los contenidos.

Estructura de contenidos

Los epígrafes “Inicio”, “Enseñanzas”, “Servicios y Actividades”, “Secretaría” y “Tablón de anuncios” son obligatorios. Los demás se incluirán únicamente cuando el centro haya desarrollado los contenidos correspondientes.

No se recomienda incluir otros epígrafes diferentes, pero se admitirían tres más si el centro ha elaborado contenidos de difícil ubicación en los epígrafes preestablecidos.

Ajustarse a este mapa tiene la ventaja de que los usuarios sabrán donde encontrar los contenidos que buscan ya que todos los centros los tendrán organizados de la misma manera.

Características técnicas

Los archivos podrán organizarse en la estructura de directorios que el centro decida, pero la página de entrada deberá denominarse necesariamente index.html y se encontrará en el primer nivel del espacio de alojamiento asignado.

Estos archivos podrán referirse a contenidos de texto, imagen y sonido.

Pocas imágenes, que no sumen más de 300 KB en total, y no incluir más de un vídeo u otros elementos multimedia, supondrá una carga más rápida de la página a usuarios con conexiones lentas.

Accesibilidad

Las páginas web de los centros y servicios educativos alojados en el Portal EducaMadrid deben facilitar la accesibilidad, tanto de personas con discapacidad, como de posibles usuarios que accedan utilizando equipamiento o infraestructuras de recursos limitados. Para ello es recomendable tener en cuenta las pautas del denominado “Diseño Universal” o “Diseño para todos”.

En concreto, estas páginas web se atendrán, como mínimo, al nivel 'doble AA' de las Directrices de Accesibilidad para el contenido de la Web 1.0 del W3C-AI.

Describir imágenes y enlaces aumenta la accesibilidad al mejorar la eficacia de los servicios de transcripción que emplean los usuarios.

Protección de datos personales, derecho al honor, a la intimidad y a la
propia imagen, y derechos de autor

Será necesario tener en cuenta los requisitos normativos que se establecen en la Ley Orgánica 15/1999, de 13 de Diciembre, de Protección de Datos de Carácter Personal, así como en la Ley 8/2001, de 13 de julio, de Protección de Datos de Carácter Personal de la Comunidad de Madrid

También es preciso tomar en consideración lo establecido en la Ley Orgánica 1/1982, de 5 de mayo, de Protección Civil del Derecho al Honor, a la Intimidad Personal y Familiar y a la Propia Imagen.

En cualquier caso, el Director del centro debe contar con el consentimiento por escrito de todas las personas cuya imagen u otros datos personales (nombre, correo electrónico...) aparezcan en las páginas web, siempre que a través de ellos se les pueda identificar. Cuando se trate de menores, el consentimiento deben firmarlo los padres o representantes legales.

Por otra parte, se atenderá a lo recogido en el Real Decreto Legislativo 1/1996, de 12 de abril, por el que se aprueba el texto refundido de la Ley de Propiedad Intelectual.

Así mismo se contemplará lo establecido en cualquier otra normativa que pueda ser de aplicación.

Autoría y referencias comerciales

El nombre del autor o autores de las páginas o de las personas que participan en su mantenimiento podrán aparecer si los interesados lo desean. Cuando se trate de empresas, reciban o no remuneración económica por su colaboración en las páginas, podrá figurar su nombre y razón social de forma escueta y en un lugar discreto de la página principal o index.

Así mismo se admitirá una enumeración de las empresas que colaboran con el centro, por ejemplo, en la denominada “Formación en Centros de Trabajo”. En ningún caso podrá hacerse publicidad ni enlaces a las páginas corporativas de las empresas desde las páginas web de los centros y servicios educativos.

El contenido de los sitios web tampoco podrá incluir publicidad de productos o servicios comerciales ni referencias a que las páginas se ven mejor con un navegador u otro. En caso necesario se indicará solamente la versión de HTML o las características que debe cumplir el navegador, pero nunca su nombre comercial (estas aclaraciones no son necesarias si se respetan las normas de accesibilidad y se garantiza, por diseño, que las páginas puedan ser vistas desde cualquier navegador).

 

Usuarios y roles

El acceso al panel de administración y la asignación de roles dentro del espacio multisite WordPress de EducaMadrid está limitada a usuarios de la plataforma por motivos de seguridad.

Gestión de roles en WordPress

Al crear el espacio WordPress de EducaMadrid, se asignará el rol de Administrador de centro a la cuenta institucional y a la cuenta TIC. Los demás usuarios tienen que haberse autenticado una primera vez en la página para poder gestionarlos. 

Para otorgar Roles tenemos que acceder con una cuenta de Administrador de centro y seleccionar (1) Usuarios, (2) Todos los usuarios.El escritorio: acceso a (1) "Usuarios" - (2) "Todos los usuarios".Después, (1) seleccionaremos al usuario, (2) pulsaremos en el desplegable el permiso que queremos otorgarle, (3) por último presionaremos el botón cambiar.Cambiar el rol de un usuario: (1) seleccionar el usuario, (2) pulsar el rol en el desplegable y (3) guardar los cambios.

Para que los usuarios aparezcan en el listado, es necesario que hayan accedido previamente con su usuario y contraseña.

Permisos de gestión

En función del rol que tiene asignado un usuario, tiene habilitados distintos permisos:
Tabla descriptiva: permisos de usuarios en WordPress.

Administrador centro

Las cuentas que por defecto tienen el perfil de Administrador de centro son la cuenta Institucional del centro y/o cuenta coordinador TIC. Con estas cuentas vamos a poder realizar todas las acciones necesarias para la gestión del sitio web del centro:

  • Asignar roles.
  • Borrar usuarios.
  • Publicar, editar y borrar cualquier entrada o página (propias o de otros usuarios).
  • Leer entradas y páginas públicas.
  • Subir archivos.
  • Moderar comentarios.
  • Administrar categorías.
  • Administrar etiquetas.
  • Cambiar el tema y personalizar opciones del tema.
Editor

Este rol de usuario puede administrar y publicar cualquier publicación, incluso aquellas creadas por otros usuarios.

Autor

Esta función de usuario solo puede administrar y publicar sus propias publicaciones.

Colaborador

Esta función de usuario solo puede administrar sus propias publicaciones (sin publicación).

Suscriptor

El Suscriptor es el perfil con el nivel más bajo. Solo tienen permiso para autenticarse en la web.

Listado "Todos los usuarios" en el escritorio de WordPress.

El Suscriptor es el perfil que aparece por defecto, cuando un usuario de EducaMadrid ha iniciado sesión en el panel de control de WordPress.

 

Elementos de las publicaciones

Podemos añadir una amplia variedad de elementos tanto en páginas como en entradas. Se insertan de la misma manera. Estos son algunos de los más comunes:

Columnas

Podemos insertar columnas añadiendo el bloque correspondiente mediante el icono (+). En la pestaña Elementos de diseño, seleccionamos Columnas.Añadir columnas

Párrafo

Podemos insertar párrafos añadiendo el bloque correspondiente mediante el icono (+). En la pestaña Bloques comunes, seleccionamos Párrafo.Añadir párrafo

Imagen

Podemos insertar imágenes añadiendo el bloque correspondiente mediante el icono (+). En la pestaña Bloques comunes, seleccionamos Imagen.añadir imagenEsta acción abrirá una nueva ventana, donde podremos elegir cargar nuestra imagen desde nuestro equipo seleccionando la opción subir, abrir la Biblioteca de medios, para utilizar imágenes ya cargadas en nuestro WordPress o insertar la imagen desde una URL.cargar imagen

Galería

Podemos insertar galerías añadiendo el bloque correspondiente mediante el icono (+). En la pestaña Bloques comunes, seleccionamos Galería.añadir galeríaEsta acción abrirá una nueva ventana, donde podremos elegir cargar nuestras imágenes desde nuestro equipo seleccionando la opción subir o abrir la Biblioteca de medios, para utilizar imágenes ya cargadas en nuestro WordPress.Cargar imágenes galería

Mediateca

Podemos insertar archivos de la Mediateca añadiendo el bloque correspondiente mediante el icono (+). En la pestaña Bloques comunes, seleccionamos Mediateca.

Añadir archivos MediatecaSe nos mostrarán todos los elementos que tengamos subidos a la Mediateca con la cuenta con que estemos trabajando. Así podremos seleccionar el contenido deseado.

Insertar código HTML

Podemos insertar código HTML añadiendo el bloque correspondiente mediante el icono (+). En la pestaña Formatos, seleccionamos HTML personalizado.

HTML personalizadoEsta acción abrirá una nueva ventana, donde podremos introducir código HTML.HTMLPulsando sobre la opción Vista previa, podremos visualizar como va quedando la edición del recurso.Vista previa HTML

Smart Slider

Un slider en WordPress, o en cualquier otra plataforma, es un carrusel con fotos o imágenes que se van alternando cada cierto tiempo.

Para crear un slider, pulsaremos en el menú superior o en el menú izquierdo sobre la opción Smart Slider del escritorio de nuestro WordPress.Smart SliderAsí podemos acceder a las siguientes opciones:

  1. Dashboard
  2. Create slider
  3. Edit slider
Dashboard - Tablero

Aspecto de Dashboard - Tablero

En esta página podemos visualizar:

  1. Nuevo Slider - Abre el panel de creación de slider.
  2. Biblioteca de plantillas - Abre una biblioteca de plantillas, las cuales no pueden ser importadas.
  3. Sample Slider - Desde aquí podemos acceder a los slider de ejemplo y sus configuraciones. También podemos añadir nuevos slider, siempre y cuando tengan la etiqueta FREE.
Create Slider

Pulsando sobre esta opción se desplegará una ventana donde podremos configurar el nombre, el tamaño y el diseño de nuestro Smart Slider.Crear SliderDesde esta ventana también podemos acceder a imágenes Slider de ejemplo. Pulsando sobre el botón crear, accederemos al menú para agregar las imágenes de nuestro Smart Slider.Agregar elemento al carrusel (slider)Si escogemos la opción Imagen podremos cargar imágenes de la biblioteca de medios de WordPress o desde nuestro equipo.

Si escogemos la opción Biblioteca, accederemos a una biblioteca con imágenes de ejemplo que podremos modificar y utilizar.

En nuestro caso hemos seleccionado cuatro imágenes propias desde la opción imagen de la biblioteca de medios de WordPress, que podemos visualizar en la parte inferior de la captura.

Edit slider

Pulsando sobre la opción Edit slider tendremos acceso a los slider creados, podremos visualizarlos, editarlos y/o eliminarlos.Editar sliderPublicar Smart Slider:

Para publicar un slider (carrusel) en alguna de nuestras páginas, debemos acceder a la edición de la página donde queramos alojar nuestro slider y pulsar sobre la opción (+) para añadir el bloque Smart slider.Edición de página

En la siguiente imagen podemos visualizar como queda nuestro Smart Slider una vez publicado.Carrusel publicado

Calendario WordPress

Este recurso nos va a permitir crear un calendario personalizado en el que podremos visualizar los eventos creados.

M.E. Calendario

Para activar y configurar este recurso accedemos al escritorio de administración de WordPress y seleccionamos M.E. Calendario, Shortcode.

Insertar calendario

Seleccionamos el tipo de calendario que queremos utilizar, por ejemplo "Monthly View" y pulsamos en "Editar" para configurar los distintos parámetros.

Calendario Monthly View

Seleccionamos las distintas opciones para configurar el calendario a nuestra medida. En este ejemplo vamos a seleccionar:

Estilo: Ver Calendario/Mes

Calendario mes

Comparación de distintos estilos: Clásico, Limpio, Moderno, Novel, Simple:

Estilos que podemos aplicar

Actualizamos los cambios que hemos hecho y nos vamos a insertar el calendario en nuestra página.

Añadimos el bloque directamente o desde "Ver todos", seleccionamos "Monthly View", que es el que hemos configurado.

Añadir bloque calendario

Bloque calendario desde "Ver todos"

Comprobamos cómo se reflejan todos los parámetros que hemos aplicado en este tipo de calendario ("Monthly View").

Visualización calendario

Otros ejemplos

Vamos a configurar nuestro calendario con otros parámetros. En este caso seleccionamos en Shortcodes  tipo de calendario "Monthly View": Ver Calendario/Mes, Simple.

Calendario estilo Simple

En este ejemplo seleccionamos en Shortcodes nuevamente tipo de calendario "Monthly View": Ver Calendario/Mes, Novel.

Calendario estilo Novel

De nuevo vamos a configurar nuestro calendario con otros parámetros. En este caso seleccionamos en Shortcodes, tipo de calendario "Monthly View": Vista de cuenta regresiva, Estilo 1.

Calendario estilo Cuenta Regresiva

En otro ejemplo seleccionamos en Shortcodes "Carousel View" (Vista Carrusel, Tipo 3):

Shortcode "Carousel View"

Al añadir el bloque calendario seleccionamos "Carousel View".

Bloque Carousel View

El resultado en nuestro calendario: 

Vista calendario Carousel View

Irá mostrando los distintos eventos de forma automática o podremos ir pasando por ellos con las fechas.

Añadir un evento

Para añadir un evento accederemos a M.E. Calendario > Nuevo evento.

Nuevo evento

Nos muestra los campos de configuración de nuestro evento:

Parámetros nuevo evento

  1. Añadimos un título de nuestro evento.
  2. Escribimos una descripción del evento.
  3. Indicamos fecha del evento. Podemos añadir varios días, unas horas, el evento puede ocupar todo el día, repetir el evento...
  4. Podemos añadir una etiqueta o una categoría para poder hacer filtros.
  5. Añadimos un color a nuestro evento, lo que nos permitirá también hacer filtros.
  6. Adjuntamos una imagen.
  7. Publicamos nuestro evento.
Filtros

Puedes filtrar los eventos de tu calendario por categorías o etiquetas. Debemos tener en cuenta los parámetros seleccionados al crear los eventos.

Seleccionamos en Shortcodes el tipo de calendario. En este ejemplo entraremos en "Monthly View" y vamos a seleccionar la categoría "Inicio".

Filtro por categorías

Comprobamos que muestra sólo los eventos que estén dentro de esta categoría:

Visualización calendario con filtro categoría

Hemos añadido distintas etiquetas al crear los eventos y en el tipo de calendario hemos activado "Mostrar etiqueta".

Mostrar etiqueta

En nuestro calendario aparece la opción "Etiqueta", que nos permite filtrar de forma que sólo aparecen los eventos que contienen dicha etiqueta.

Calendario filtro por etiqueta

Ahora vamos a seleccionar los eventos que tienen categoría "Inicio" y la etiqueta "Solidaria".

Calendario filtro por etiqueta y categoría

 

Biblioteca de medios

La biblioteca de medios de WordPress es una herramienta para la gestión de medios como pueden ser, imágenes, vídeos y audios. También podemos tener otros medios no visibles de forma directa en la web, pero que se podrán descargar o abrirán desde un enlace, como un archivo pdf, un zip o un documento de texto.

Todos estos elementos se pueden gestionar desde la Biblioteca de medios de WordPress. Para acceder a ella pulsaremos en el escritorio de WordPress en (1) Medios, (2) Biblioteca.

Biblioteca de medios de WordPress

Nos encontraremos una página donde se mostrarán todos los elementos multimedia que hayamos agregado a nuestra página hasta ese momento: imágenes, vídeos, archivos de audio y otros archivos.

Para las imágenes veremos una vista en miniatura, mientras que para el resto de elementos simplemente se mostrará un icono relacionado con el tipo de archivo.

En la parte superior de la Biblioteca de medios veremos una barra con la que podremos aplicar varios filtros a los elementos que aquí se muestran.

En primer lugar, veremos dos iconos que nos permiten cambiar la vista en la que se muestra el contenido.Vista biblioteca listado

Por defecto, veremos la "vista de cuadrícula", pero pulsando sobre el primero de los iconos cambiaremos a la "vista de lista".

En esta vista veremos información adicional para cada medio añadido, como el usuario que lo ha subido, el elemento de la web (página, entrada, widget, etc.) con el que está asociado, si es que tiene alguno, los comentarios asociados y la fecha en la que se subió.

En la columna Subido a, indica el elemento de la web donde se ha añadido el elemento multimedia, veremos también enlaces para adjuntar el elemento o separarlo, aunque normalmente esto no es necesario hacerlo, ya que se realiza de forma automática. Por ejemplo, cuando asociamos una imagen a una entrada.

Podremos clasificar todos estos medios (imágenes, pdf, documentos de texto) en carpetas empleando el plugin Folders.

Subir un archivo

Para subir un nuevo archivo podemos hacerlo de dos maneras: desde el menú lateral Medios  o bien desde la Biblioteca de medios

Menú Medios

Menú lateral "Medios" (1) y a continuación "Añadir nuevo" (2)

añadir-medio3.png

En la siguiente pantalla seleccionamos la carpeta (1) donde queramos subir el fichero, pulsamos sobre "Examinar" (2) para localizar el fichero en nuestro equipo y por último "Subir" (3)
Añadir fichero
Si queremos subir varios ficheros a la vez tendremos que pulsar sobre "Cambiar al cargador múltiple".
Subir múltiples ficheros
Vemos que el formulario cambia. Seleccionamos la carpeta (opcional) (1) y pulsamos en "Seleccionar archivos" o bien los arrastramos (2).

Subida múltiple

Una barra de progreso nos indicará el estado de subida de los ficheros.Progreso

Biblioteca de medios

En función de la vista que tengamos seleccionada el formulario de carga de imágenes cambiará.

Vista lista: Pulsamos en "Añadir nuevo" y el proceso de subida será el mismo que vimos en el apartado Menú Medios


añadir-medio11.png

Vista cuadrícula: Pulsamos en "Añadir nuevo"
Añadir medio desde vista cuadricula
Seleccionamos la carpeta (1) donde queramos subir el fichero  y posteriormente arrastramos o "Seleccionamos los ficheros" (2) que queramos subir.

Seleccionamos una carpeta solo en el caso en el que queramos clasificar los ficheros.

Seleccionar imagen y carpetaSeleccionado el fichero o ficheros, comienza el proceso de subida de los mismos. Una barra de progreso nos indica el estado.Progreso de subidaUna vez subidos los ficheros, los podemos ver en la Biblioteca:Ficheros subidos con éxito

Mover y eliminar ficheros

Desde la Biblioteca de medios podemos realizar ambas acciones.

Vista lista

Mover ficheros

Podemos mover los ficheros a una carpeta de uno en uno o bien de manera masiva:

Mover un fichero

Nos posicionamos sobre el fichero y una vez vemos la "doble flecha" (1), lo arrastramos y soltamos en la carpeta deseada (2):Mover un fichero arrastrándolo a la carpeta - destino.Un mensaje en la parte inferior derecha nos indica que el fichero se ha movido:Mensaje de éxito.Mover varios ficheros

En modo "Lista", seleccionamos varios ficheros (1), desplegamos el menú "Acciones en lote" (2), seleccionamos "Move to Folder" (3) y "Aplicar" (4)Seleccionar varios ficheros para moverlos en vista "lista".A continuación "Seleccionamos la carpeta" (5) y pulsamos sobre "Mover a la carpeta" (6)Seleccionar la carpeta - destino para mover un fichero.

Eliminar ficheros

Podemos eliminar los ficheros de uno en uno o bien de manera masiva:

Eliminar un fichero

Nos posicionamos sobre el fichero (1) y vemos que aparecen varias opciones, pulsamos sobre "Borrar permanentemente" (2).Borrar un fichero.Un mensaje nos advierte de que una vez eliminado, el fichero no se podrá recuperar. Pulsamos en "Aceptar" para confirmar el borrado.Mensaje advertencia borrado.Ahora vemos un mensaje que nos indica que el fichero ha sido eliminado de manera permanente.Mensaje borrado permanente.

Eliminar varios ficheros

En modo "Lista", seleccionamos los ficheros (1), desplegamos el menú "Acciones en lote" (2), seleccionamos "Borrar permanentemente" (3) y "Aplicar" (4)Borrado masivo de ficheros.Un mensaje no advierte de que una vez eliminados, los ficheros no se podrán recuperar. Pulsamos en "Aceptar" para confirmar el borrado.Mensaje advertencia borrado.Ahora vemos un mensaje que nos indica que los ficheros se han eliminado de manera permanente.Mensaje borrado con éxito.

Vista cuadrícula

Mover ficheros

Podemos mover los ficheros a una carpeta de uno en uno o bien de manera masiva:

Mover un fichero

Nos posicionamos sobre el fichero (1) y lo arrastramos hasta la carpeta deseada:Mover fichero en vista cuadrícula.Un mensaje en la parte inferior derecha nos indica que el fichero se ha movido:Mensaje de éxito.Mover varios ficheros

Pulsamos sobre el botón "Bulk Organize":Pulsar sobre  "Bulk Organize".Tenemos dos opciones para mover los ficheros:

  1. Seleccionamos los ficheros que queramos mover (1) y pulsamos el botón izquierdo del ratón y, manteniéndolo pulsado, arrastramos y soltamos sobre la carpeta deseada (2):Seleccionamos, arrastramos y soltamos sobre la carpeta-destino.Un mensaje en la parte inferior derecha nos indica que el fichero se ha movido:Mensaje de éxito
  2. Seleccionamos los ficheros y en el desplegable "Move Selected files to:" seleccionamos la carpeta donde queramos moverlos:
    Seleccionamos y elegimos carpeta-destino del desplegable.
Eliminar ficheros

Podemos eliminar los ficheros de uno en uno o bien de manera masiva. En ambos casos tenemos que pulsar el botón "Bulk Organize":Pulsar sobre  "Bulk Organize".A continuación seleccionamos el fichero o ficheros que queremos eliminar (1) y pulsamos sobre "Borrar permanentemente" (2)Seleccionamos y pulsamos sobre "Borrar permanentemente".Un mensaje nos advierte de que una vez eliminados, los ficheros no se podrán recuperar. Pulsamos en "Aceptar" para confirmar el borrado.Mensaje advertencia borrado.

 

 

Folders

Se trata de un recurso que permite organizar los contenidos (entradas, páginas y archivos de Biblioteca de medios) en carpetas.

El uso del complemento "Folders" no altera los enlaces permanentes ni la jerarquía del contenido, lo que permite ordenar tanto los archivos que ya han sido usados como las páginas o las entradas previamente publicadas sin alterar su visibilidad en el sitio web.

Si borramos una carpeta, los archivos que contiene no se eliminan, sino que van a parar a "Unassigned files".

Ajustes de "Folders"

Podemos acceder a ajustes del plugin "Folders" a través del menú lateral del escritorio de nuestra página web (1).

Panel de ajustes del plugin "Folders"

Desde la pestaña Ajustes de "Folders" (1), podremos activar o desactivar el plugin en el escritorio de "Entradas", "Páginas" y "Medios" (2, 3, 4). Se recomienda mantener activada la opción "Undo" (5) que permite deshacer cualquier acción relacionada con la manipulación de las carpetas y/o contenidos . El tiempo de disponibilidad para utilizar la opción "Undo" está configurado por defecto y se puede modificar según las necesidades del usuario (6).

Si seleccionamos la opción "Place the Folders settings page nested under "Settings" (7), desaparece el acceso a "Ajustes de "Folders" situado entre "Herramientas" y "Maintenance" del menú lateral izquierdo del escritorio:

 

Desaparece el acceso de "Ajustes de "Folders"

 

La opción "Show the folders also in WordPress Menu" (8) habilita las carpetas "Post Folders", "Media Folders" y "Page Folders" en el panel lateral izquierdo del escritorio de WordPress:

 

Habilitadas las carpetas "Post Folders", "Media Folders" y "Page Folders" en el panel lateral izquierdo del escritorio

 

Tenemos que "Guardar cambios" (9) para que se apliquen las modificaciones introducidas.

La pestaña "Customize Folders" nos permite personalizar la presentación de diferentes elementos del plugin organizador: color de los botones, tipo, tamaño y color de la letra. Ates de guardar la selección, los cambios se pueden previsualizar a la derecha del panel.Pestaña "Folders Customize" permite personalizar los colores de las carpetas, tamaño, color y tipo de la fuente del plugin

Elementos de "Folders"

El plugin "Folders" cuenta con distintos elementos que nos van a permitir organizar nuestra Biblioteca de medios, sección de Páginas o Entradas (en función de cómo hemos configurado los ajustes). Como el comportamiento y el aspecto del plugin se repiten en las tres secciones, vamos a conocer su funcionamiento en el ejemplo de Biblioteca de medios.

Elementos del plugin Folders en el ejemplo de Biblioteca de medios

  1. Botón "+Nueva carpeta": opción para crear una nueva carpeta.
  2. Botón que permite clasificar las carpetas en orden alfabético o viceversa.
  3. Buscador de archivos.
  4. El botón "All files" permite visualizar todos los archivos que contiene la Biblioteca de medios. El botón "Unassigned Files" muestra los archivos que no están clasificados en ninguna carpeta.
  5. Selector y botón de papelera.
  6. Conjunto de carpetas.
  7. Selector de carpetas para clasificar directamente un archivo nuevo.
  8. Diferentes formas de filtrar los archivos por tipo de medio ("Todos los medios"), fehca ("Todas las fechas") o carpeta ("All Folders").
  9. Selector de lotes de archivos para la clasificación. Una vez seleccionado el lote de archivos, podemos trasladarlos a la carpeta del lateral izquierdo arrastrándolos con el botón izquierdo del ratón (Drag and Drop).

Si borramos una carpeta, los archivos que contiene no se eliminan, sino que van a parar a "Unassigned files". Si queremos eliminar los elementos que contiene una carpeta, los tenemos que seleccionar y eliminar antes de proceder a borrar la carpeta.

Opción "Undo"

Cuando realizamos cualquier cambio, tenemos la posibilidad de deshacerlo durante los siguientes 5 segundos (opción modificable desde el panel "Ajustes de "Folders"). Para ello, debemos clicar en e botón "Undo" que aparece en el mensaje emergente de confirmación de la correcta realización del comando elegido:

 

Acción "Undo" sirve para deshacer los cambios realizados en el organizador "Folders

Publicar con Page Builder

Crear

Al crear la página o la entrada desde el Escritorio, clicamos sobre la flechita que hay junto a "Añadir nueva", y seleccionamos "SiteOrigin Page Builder".AñadirPaginaPageBuilder.png

Widget

Lo añadimos clicando en Widget.

Añadir Widget

Se nos mostrarán todos los widgets disponibles para que seleccionemos el deseado.

Widgets

En este caso, hemos añadido el widget Acordeón SiteOrigin. Una vez configurado, se nos mostrará así:

Acordeón

Fila

Page Builder inserta los elementos dentro de filas. Eso nos ayuda a distribuir mejor los elementos en la página. Podemos crear las filas antes de insertar los elementos. En todo caso, siempre podremos mover elementos de una fila a otra.

Añadimos una fila clicando en el botón correspondiente.

Añadrid fila

Una vez creada, podemos dividirla en columnas. Podemos seleccionar varias opciones, como el número de columnas, proporción de la distribución y lateralidad. Cuando terminemos, clicamos en el botón Insertar.

Distribución de columnas

Una vez insertada, se nos mostrará en su sitio de la página. Si seleccionamos una columna, se nos mostrará de otro color. Si entonces añadimos un widget, nos lo colocará en ese lugar.

Añadir Widget a columna

En este caso, hemos añadido el widget Nube de etiquetas, con este resultado:

Nube de etiquetas

Podemos mover elementos libremente de una fila a otra y de una columna a otra, arrastrándolos con el ratón (clicamos sobre el elemento con el botón izquierdo del ratón y, manteniéndolo pulsado, movemos el ratón hacia su nueva ubicación).

Arrastrar elementos

Al soltar el botón izquierdo del ratón, el elemento se colocará en el lugar sobre el que esté posicionado en ese momento.

Elemento reubicado

Diseños preinstalados

Podemos añadir diseños preinstalados y modificarlos posteriormente a nuestro gusto.

Diseño preinstalado

Escogemos el estilo que más nos guste clicando sobre él y, por último, clicamos en Insertar.

Insertar diseño preinstalado

Editar lo creado con otro editor

Como tenemos distintas posibilidades para crear páginas, puede ser que tengamos alguna creada previamente sin Page Builder a la que queramos añadir elementos de Page Builder. En este ejemplo vemos que la página Documentos de centro está creada con Page Builder. Pero la página Horarios, no.

Páginas creadas de distintas formas

SiteOrigin Widget

Podemos añadirle elementos de Page Builder directamente añadiendo un elemento en el icono + y  clicando la opción SiteOrigin Widget.

SiteOrigin Widget

SiteOrigin Layout

Si queremos añadir toda una composición y disponerla fácilmente en filas y columnas, podemos hacerlo mediante SiteOrigin Layout.

Al editar la publicación, añadimos el elemento SiteOrigin Layout.

Añadir SiteOrigin Layout

Esto nos insertará un bloque que podremos utilizar con Page Builder. El bloque ya está listo para añadir Widgets, Filas, o Diseños preinstalados.

Bloque Page Builder insertado

Borrar bloque Page Builder

Para borrar un bloque completo, lo seleccionamos desde el recuadro de los tres puntos, y lo eliminamos clicando en la opción Eliminar bloque.

Eliminar bloque PageBuilder

Borrar fila

Page Builder va incorporando elementos mediante filas. Podemos borrar solamente una de ellas. Primero clicamos sobre el icono de la llave inglesa y después, en Eliminar fila.

Eliminar fila

Duplicar

Podemos duplicar páginas y entradas.

Con el Editor de bloques

Vamos a la edición de la página que queremos duplicar. Pinchamos en los tres puntitos de la esquina superior derecha y seleccionamos "Copiar todo el contenido".

Tres puntitos->Copiar todo el contenido

Regresamos al Escritorio. Seleccionamos Páginas->Añadir nueva->Editor de bloques.Añadir página con Editor de bloques

Pegamos el contenido en la nueva página con Ctrl + V o con el botón derecho del ratón + "Pegar".. 

Pegamos el contenido guardado anteriormente

La nueva página copiada está lista para darle un título y modificarla como deseemos.

Ir a "Añadir el título" y darle un nuevo título

Con Page Builder

Vamos a la página que queremos copiar y la editamos.

Editar páginaSeleccionamos "Volver al editor" y aceptamos el mensaje "¿Quieres borrar el contenido de Page Builder y volver a utilizar el editor visual estándar?"

Seleccionamos "Volver al editor" y aceptamos el mensaje "¿Quieres borrar el contenido de Page Builder y volver a utilizar el editor visual estándar?"

Vamos a la pestaña HTML, seleccionamos todo el contenido y lo copiamos (Ctrl+C o botón derecho del ratón+"Copiar")

Desde HTML, copiamos todo el contenidoSalimos sin guardar los cambios y creamos una nueva página con SiteOrigin Page Builder.

Páginas->Añadir nueva->SiteOrigin Page Builder

Seleccionamos "Volver al editor".

Volver al editor

Aceptamos el mensaje "¿Quieres borrar el contenido de Page Builder y volver a utilizar el editor visual estándar?"

"¿Quieres borrar el contenido de Page Builder y volver a utilizar el editor visual estándar?"

Pegamos el contenido en la pestaña HTML con Ctrl + V o con el botón derecho del ratón + "Pegar".

En pestaña HTML, pegamos el contenido

Volvemos a la pestaña "Page Builder" y aceptamos el mensaje "¿Te gustaría copiar el contenido existente de este editor a Page Builder?"

"¿Te gustaría copiar el contenido existente de este editor a Page Builder?" -> Aceptar

Ya podemos darle un título a la nueva página y editar el contenido copiado con Page Builder.

Añadir el título

Páginas

Páginas

Las páginas se utilizan para mostrar contenidos fijos, como podría ser una página de «Inicio», «Secretaria», «Servicios y actividades», «Tablón de anuncios», etc.

Crear páginas

Si queremos añadir una nueva página en WordPress, tendremos que ir a Todas las páginas y pulsar en el botón Añadir nueva. También se puede hacer entrando en Visitar el sitio > + Añadir > Páginas > Añadir nueva. Elementos de una nueva página en el "Editor de bloques".(1) En la parte central veremos un campo grande de texto donde se añadirá el título que tendrá nuestra página.

(2) Justo debajo, podremos añadir el propio contenido de la página, utilizando para ello el editor.

(3) Pulsando sobre el botón (+) se desplegará el menú para añadir bloques.

Modificar páginas

Para modificar páginas ya publicadas, debemos acceder al escritorio de WordPress y seleccionar la opción Páginas > Todas las páginas. Si ponemos el cursor sobre cualquier página se desplegarán las opciones Editar y Edición rápida entre otras opciones.

Edición rápida:

Desde esta opción podemos visualizar o modificar algunos parámetros como: Nombre, Slug (URL), Fecha, Autor, Contraseña, estado o privatizar la página.Edición rápida

En resumen, desde esta vista podemos modificar:

Edición:

Pulsando en Edición accedemos al contenido de la propia página, desde donde podremos modificarla.Edición de página

Eliminar páginas

Para eliminar una página de WordPress tendremos que acceder al apartado Todas las páginas, posicionar el ratón sobre la página que queremos eliminar y pulsar en la opción Enviar a la papelera. Eliminar páginaLa página se almacenará en la Papelera. Si queremos eliminarla definitivamente accederemos a la Papelera y pulsaremos sobre la opción Vaciar papelera.

Navegación

La navegación del sitio es clave para ayudar a sus usuarios a llegar a donde quieren llegar. Un menú bien diseñado puede ayudar mucho a mejorar la experiencia del usuario

Uno de los elementos más importantes de nuestra web es la barra de navegación.

Crear menú

Para añadir un nuevo menú desde el Escritorio de WordPress, nos dirigiremos a Apariencia > Menús, desde donde podemos agregar un menú personalizado con múltiples elementos para la navegación.Crear menúEl primer paso será crear nuestro primer menú. Para ello simplemente deberemos introducir el Nombre del menú y pulsar en el botón Crear menú.

Recomendamos poner un nombre que nos ayude a identificar el menú, como «Menú principal», «Menú cabecera» o «Menú entradas».

Una vez que tengamos creado y seleccionado un menú, ya podemos añadirle contenido. Esto podemos hacerlo desde el apartado que veremos en la parte izquierda de la página de gestión de menús de WordPress.Añadir contenido a menú

Camino de migas

El camino de migas o Breadcrumb es una navegación secundaria dentro de una web (también llamada navegación de miga de pan). El camino de migas ofrece a los usuarios de la web la opción, en forma de enlaces internos, de volver rápidamente a la página principal o a otro nivel de la web. En WordPress mejora la experiencia del usuario y es una forma eficiente de mostrar opciones de navegación útiles en el sitio web, que además son beneficiosas para el posicionamiento en buscadores.

Algunos de los temas seleccionados por EducaMadrid ya incorporan por defecto los caminos de migas. Son los temas Education Buz, SpicePress, Total:

Camino de migas en Education Buz

Camino de migas en Total

Camino de migas con Flexy Breadcrumb

Para incluirlos en los temas que no lo incorporan por defecto debemos acceder al escritorio de WordPress y seleccionar el plugin Flexy Breadcrumb. Nos permite personalización. A continuación mostramos las opciones que hemos seleccionado para que tenga este aspecto:

Aspecto de camino de migas Flexy breadcrumb

Ajustes de la pestaña "General":

Personalización de Flexybreadcrumb

Ajustes de la pantalla "Typography":

Más ajustes posibles de Flexybreadcrumb

Una vez configurado, tenemos que ir a editar la página donde queremos incorporarlo, pulsar en el botón (+) para añadir un bloque > Widgtes > [/] Shortcode:

Añadir sortcode

El shortcode es [flexy_breadcrumb] (se puede copiar este mismo y pegarlo directamente).

pegar sortcodeEn la siguiente imagen podemos ver como quedaría el camino de migas en la página.Camino de migas

Algunos temas, como Twentytwentyone, permiten añadirlo de una vez, como pie para todas las páginas, incluidas las que vayamos añadiendo en el futuro.

En este caso, no nos aparecerá el widget Shortcode, pero podemos incluirlo mediante el widget Texto:

Añadir camino de migas como texto

Con un resultado como este:

Camino de migas en pie de página de Twentytwentyone, modo oscuro

Plugin Page Builder

Si preferimos usar este plugin para crear y editar páginas, tenemos que clicar sobre la flechita que hay junto a "Añadir nueva", y seleccionar "SiteOrigin Page Builder".

El tema Twentytwentyone no es completamente compatible con este plugin.

 

Añadir página con Page Builder

Esto nos abrirá un editor dinámico con nuevas funcionalidades, incluidas plantillas (Diseño preinstalado) que podemos reutilizar para crear nuestras páginas.

Nueva página con PageBuilder

Entradas

Las Entradas en WordPress son los artículos que forma el apartado de blog o Tablón de anuncios, mientras que las Páginas son los artículos que se muestran de forma aislada.

Crear entradas

Esto lo podremos hacer desde el menú de administración Entradas > Añadir nueva. También podremos hacerlo desde Entradas > Todas las entradas pulsando en el botón Añadir nueva de la parte superior.

En la parte central veremos un apartado donde añadir el nombre de la entrada y, justo debajo, podremos añadir el contenido de la misma.Añadir entrada(1) En la parte derecha veremos un enlace Guardar borrador, que permitirá ir guardando los cambios sin publicar la entrada, quedando en estado borrador. Aunque el propio WordPress realiza guardados automáticos de vez en cuando, es conveniente guardar nuestro progreso, sobre todo en artículos largos.

(2) El botón Publicar nos permitirá guardar y publicar la entrada en los distintos estados que tiene disponibles.

Modificar entradas

Para modificar entradas ya publicadas, debemos acceder al escritorio de WordPress y seleccionar la opción Entradas > Todas las entradas. Si ponemos el cursor sobre cualquier entrada se desplegarán las opciones Editar y Edición rápida entre otras opciones.

Edición rápida

Desde esta opción podemos visualizar o modificar algunos parámetros como: Nombre, Slug (URL), Fecha, Autor, Contraseña, Categorías, Etiquetas o privatizar la entrada.Edición rápida de entrada

Edición

Pulsando en Edición accedemos al contenido de la propia entrada, desde donde podremos modificarla.Edición entrada

Programar publicación

Para programar la publicación de una entrada, buscaremos la entrada y pulsaremos sobre su edición rápida. En el campo Fecha indicaremos la fecha en la que deseamos que dicha entrada sea publicada, indicando día, mes, año y hora.Programar fecha de entradaEn la casilla de Estado, veremos que la entrada a quedado Programada.

Modificar fecha de publicación

Para modificar la fecha/hora de una entrada ya publicada, tenemos que editarla. Estando en modo de edición, en el panel derecho, podemos acceder a la fecha desde la pestaña Documento. Al clicar sobre la fecha que aparece en este momento, se desplegará un calendario en el que podemos seleccionar la nueva fecha. Una vez modificada, seleccionamos Actualizar para guardar los cambios.

Modificar fecha de una entrada ya publicada

Categorías

Esta clasificación no solamente es para que el usuario pueda encontrar la información de manera organizada. Los motores de búsqueda de los navegadores tienen en cuenta que el contenido de una página esté bien jerarquizado a la hora de posicionarla en los resultados de búsqueda.

Crear Categorías en WordPress

Dentro del panel de administración de WordPress nos dirigimos a la sección Entradas > Categorías del menú lateral. La página que se abre muestra una serie de campos a rellenar. Según vayamos creando nuevas categorías en la parte izquierda irán apareciendo en forma de listado desde donde podemos editarlas.Añadir Categorías(1) Nombre: Aquí definimos el nombre de la categoría.

(2) Slug: Es la URL de nuestra categoría. Recomendamos usar la misma palabra que tengamos en categoría y si son dos palabras, que vayan separadas por un guion.

(3) Categoría superior: Esta es la forma de crear subcategorías en WordPress. Primero tenemos que crear la categoría principal y luego crear la subcategoría y desde este desplegable asignarle la categoría padre.

(4) Descripción: Aquí añadimos una descripción de la categoría intentando que incluya alguna palabra clave. Algunos temas dan la posibilidad de mostrar esta descripción en la página de la categoría por lo que de cara al posicionamiento en buscadores conviene hacer una redacción lo más natural posible, sin forzar la inclusión de las palabras clave.

Etiquetas

Una etiqueta de WordPress es una de las herramientas predeterminadas que puede usar para categorizar las publicaciones de WordPress. Cada publicación puede contener varias etiquetas y los visitantes pueden hacer clic en una etiqueta para buscar publicaciones similares que tengan esa misma etiqueta.

Crear etiquetas en WordPress

Para crear una etiqueta debemos acceder al escritorio y seleccionar Entradas > Etiquetas. En este apartado encontraremos, a la izquierda, un formulario que debemos rellenar si queremos añadir una etiqueta nueva y, a la derecha, el listado de etiquetas que ya hemos creado.Crear etiquetasPara añadir una Etiqueta a una Entrada debemos acceder a la Edición rápida de la entrada y escribir el nombre de la etiqueta que hemos creado. Por último pulsar en Actualizar.Añadiendo etiqueta a una entrada

Plugin Page Builder

Si preferimos usar este plugin para crear y editar entradas, tenemos que clicar sobre la flechita que hay junto a "Añadir nueva", y seleccionar "SiteOrigin Page Builder".

El tema Twentytwentyone no es completamente compatible con este plugin.

 

Añadir entrada con PageBuilder

Esto nos abrirá un editor dinámico con nuevas funcionalidades, incluidas plantillas (Diseño preinstalado) que podemos reutilizar para crear nuestras entradas.

Nueva entrada PageBuilder

 

The Post Grid

The Post Grid es un plugin que sirve para mostrar entradas, páginas, elementos de menú, etc. Con este complemento, el administrador de la página web puede mostrar sus publicaciones utilizando diferentes tipos de diseño (cuadrícula, lista, isotipo).

Crear una nueva cuadrícula

Para empezar a utilizar la herramienta The Post Grid, la seleccionaremos en el menú izquierdo del escritorio de WordPress.

Escritorio de WordPress con The Post Grid abierto.

Después , clicaremos en el botón "Añadir una nueva cuadrícula" y comenzaremos a configurarla.

Query Build

La pestaña "Query Build" del menú de configuración nos permite definir los siguientes elementos:

  1. Post Type: nos permite escoger el el tipo de publicaciones que queremos mostrar. Las más funcionales son entradas (post) y páginas (page).Campos de configuración de The Post Grid.
  2. Include only: lista de ID de publicación para mostrar (valores separados por comas, por ejemplo: 1,2,3). Se puede dejar en blanco.
  3. Exclude: lista de ID de publicación para ocultar (valores separados por comas, por ejemplo: 1,2,3). Se puede dejar en blanco.
  4. Limit: el número de publicaciones a mostrar. Si se deja vacío, la cuadrícula mostrará todas las publicaciones encontradas.
  5. Offset: el número de publicaciones para omitir desde el inicio. Se puede dejar vacío.

En la configuración del apartado Advanced Filters, podemos definir qué tipos de entradas se van a ver en nuestra cuadrícula:

Elementos del apartado Advanced Filters: clasificación, orden, otros campos.

  1. Taxonomy: nos permite publicar las entradas pertenecientes a una determinada categoría, etiqueta o carpeta.
  2. Order: podemos ordenar las entradas en función de su ID, título, fecha de creación o de modificación.
  3. Otros campos, como "Author", "Status" o "Search" permiten publicar las entradas en función del autor, de su estado o palabra clave.
Configuración de ubicación

La pestaña "Configuración de ubicación" nos permite definir todos los elementos de diseño de nuestra cuadrícula.

Vista de pestaña "Configuración de ubicación" para configurar el diseño.

  1. Layout Type: en este apartado elegiremos el tipo de diseño (cuadrícula, lista o isotipo).
  2. Column: cuántas columnas tendrá la cuadrícula en distintos dispositivos (ordenador, tableta o teléfono móvil).
  3. Pagination: permiso para establecer la paginación y cuántas entradas por página queremos que se vean.
  4. Link To Detail Page: enlace a más detalles.
  5. Link Target: si queremos que la entrada se abra en la misma ventana o en una ventana nueva.
Configurar

La pestaña "Configurar" contiene opciones para configurar el diseño del contenido de cada entrada:

Elementos de la pestaña "Configurar" del The Post Grid.

  1. ShortCode Heading: diseño del título de la entrada (tamaño de letra, justificación, estilo).
  2. Extracto: límite del extracto por palabras o por caracteres.
  3. Read More Button: diseño del botón "Leer más": bordes, justificación y texto.
Selección del campo

En este apartado podremos elegir qué información queremos que aparezca en cada celda de la cuadrícula: título, fecha de la entrada, autor, recuento de comentarios, etc.

Selección de elementos que aparecen en cada celda (entrada): título, fecha, autoría, etiquetas, etc.

Estilo

En la sección "Estilo" configuraremos la tipografía y el color de diferentes elementos (botón, título, texto, fondo,etc.):

EstiloPostgrid.png

Vista previa del diseño

A medida que vamos configurando todos los campos, podremos visualizar los cambios aplicados en la vista previa en la parte inferior de la pantalla. 

Vista previa de la cuasrícula de The post grid.

Publicar la cuadrícula

Una vez terminada la configuración, debemos pulsar en el botón "Publicar" para guardar todos los cambios:

Botón "Publicar" para guardar los cambios.

Para incluir nuestra cuadrícula de entradas en una página, debemos copiar el shortcode del Post Grid:
Shorcode.png
A continuación, editamos la página donde queremos incluir la cuadrícula y añadimos el bloque "Shortcode" donde pegaremos el código copiado:
Imagen de edición de una página con el bloque "Shortcode" añadido para pegar el código de la cuadrícula.
Una vez actualizada la página, visualizaremos nuestra cuadrícula de entradas (The Post Grid) donde la hayamos insertado.
Visualización de la cuadrícula de entradas creada con The Post Grid.

Formularios de WordPress

WordPress de EducaMadrid incluye una herramienta para la creación de formularios que permiten a los usuarios entrar en contacto con el centro educativo y enviar un mensaje para ser contactados después.

Para acceder a la herramienta,  pulsaremos sobre la opción Contactos que encontraremos en el menú izquierdo del escritorio de WordPress.  Si acercamos  el  ratón sin pulsar, se nos desplegará un submenú que nos permitirá acceder a todos los formularios ("Formularios de contacto") o crear un formulario nuevo ("Añadir nuevo").El acceso a "Contacto" en el escritorio de WordPress.

Configurar un formulario

Seleccionamos Contacto -> Añadir nuevo para crear nuestro formulario y añadimos un título al formulario. Por ejemplo, "Formulario de contacto".Ventana de configuración del formulario nuevo con la plantilla.Como vemos, WordPress nos ofrece una plantilla que incluye una serie de etiquetas básicas que podemos eliminar o a las que podemos añadir otras, según nuestras necesidades:

  1. Tu nombre.
  2. Tu correo electrónico.
  3. Asunto.
  4. Tu mensaje (opcional).
  5. Captcha (una medida de seguridad para completar la autenticación del usuario).

Podemos seleccionar las nuevas etiquetas en la lista que aparece en la parte superior del área de texto. Si no estamos seguros de qué etiquetas o qué campos de entrada vamos a necesitar, podemos dejar el formulario como está, ya que posteriormente podremos editarlo.

Una vez configurado el paso anterior, procedemos a configurar los elementos de correos electrónicos: pestaña "Correo".

Configuración de la pestaña "Correo".

Debemos asegurarnos de escribir una dirección de correo válida en el campo, "Para" y pulsar en Guardar para conservar los cambios ya que es la dirección en la que recibiremos todos los mensajes del formulario.

En el apartado "Cuerpo del mensaje" disponemos de una plantilla que podremos modificar en función de nuestras necesidades.

En la pestaña "Mensajes", podemos ver y modificar los mensajes que el usuario visualizará en nuestra página cuando cumplimente el formulario.

Mensajes de respuesta para el usuario cuando cumplimente y entregue el formulario.Publicar el formulario

Para publicar el formulario, debemos copiar el shortcode. Copiar el shortcode del formulario.A continuación, editaremos la página donde queremos insertar el formulario y añadiremos el bloque "Shortcode", donde pegaremos el código copiado anteriormente.

Añadir el bloque "Shortcode" y pegar el código copiado.

Una vez el formulario ha sido publicado, se visualizará en nuestra página como en la siguiente imagen.
Vista del formulario insertado en la página web.

Cuando un usuario envíe un mensaje a través del formulario, recibiremos un correo electrónico en la dirección que hemos configurado en la pestaña "Correo" con los datos que hemos incluido en la configuración.

Mensaje de correo recibido por el administrador de la página.

 

Email Subscribers

Icegram Express – Email Subscribers

Icegram Express (Email Subscribers) es un recurso que nos va a permitir gestionar suscripciones y avisos de publicaciones de nuevas entradas por correo electrónico.

Por motivos de seguridad, el funcionamiento de Icegram Express dentro del espacio multisite WordPress de EducaMadrid está limitado a usuarios de la plataforma.

Los usuarios que no disponen de correo electrónico educa.madrid.org no pueden suscribirse a las notificaciones de WordPress de EducaMadrid. Para mantenerlos informados, se recomienda el uso de RSS (Really Simple Syndication), un recurso para la distribución de contenidos en tiempo real basado en el lenguaje XML.

 
Escritorio de Icegram Express

Si seleccionamos Icegram Express en el menú lateral izquierdo del escritorio de WordPress, accederemos al panel principal del recurso:

Escritorio de Icegram Express.

En este panel podemos ver:

  1. Información sobre el número de contactos activos y la estadísticas de los envíos de los últimos 60 días.
  2. Add a Subscription Form: acceso a la sección "Formularios" para crear un formulario nuevo.
  3. Importar contactos: posibilidad de importar contactos desde un archivo CSV o desde otro sistema de suscripciones por correo electrónico.
  4. Configure Email Sending: acceso al panel de configuración general del recurso.
  5. Send a Newsletter: acceso al panel de configuración de un envío masivo a los suscriptores.
  6. Create an Auto-responder Sequence: opción de crear correos de bienvenida, campañas de envío periódico de mensajes, etc.
Configuración general del recurso

Para configurar el recurso, accederemos a Icegram Express - Configurar - General o desde el escritorio de Icegram Express seleccionando "Configure Email Sending -> Setup"

En este panel podemos modificar el nombre del remitente, el correo electrónico del remitente, la forma de suscripción (con o sin confirmación) y los textos de los mensajes de notificación.

Panel de configuración general de Icegram Express.

Si accedemos a "Notificaciones", seremos redirigidos a "Flujos de trabajo" donde podemos configurar qué mensajes queremos que reciba el suscriptor o el administrador cuando se realiza una suscripción.

Crear una lista de suscriptores

Por defecto, aparecen dos listas creadas: "Test" (no se puede eliminar o modificar) y "Main" (se puede eliminar y modificar). Además, podemos crear una lista diferente. Para ello, accedemos al escritorio de WordPress de nuestra página web, seleccionamos Icegram Express - Audiencia - Gestionar listas:

IcegramExpress_Audiencia.png

En el siguiente panel podemos modificar el nombre y la descripción de la lista "Main", borrarla o crear una lista nueva:

Editar o borrar la lista "Main" o crear una lista nueva

La lista creada nos servirá para configurar el formulario de suscripciones y la campaña de envío de notificaciones.

Crear o editar un formulario de suscripciones

Un formulario de suscripciones permite a los usuarios que acceden a la página web del centro suscribirse a una campaña de notificaciones programada. Más adelante veremos cómo el centro puede programar una campaña de notificaciones para que los suscriptores reciban un  mensaje de correo electrónico cada vez que se publique una nueva entrada.

Accederemos a Icegram Express - Formularios para crear, editar o borrar un formulario de suscripción. Seleccionaremos "Añadir nuevo" para crear un formulario nuevo.

Asistente de creación de un formulario de suscripciones Icegram Express.

Para editar, desplazar o borrar un campo, debemos clicar sobre él para visualizar las opciones en la esquina superior derecha. Una vez seleccionado el campo, podremos modificar algunas opciones de configuración en el menú lateral derecho - Settings. Para añadir un campo nuevo, lo arrastraremos del menú lateral derecho - Blocks. Podemos editar el texto en cada campo clicando dos veces en su interior. 

Si queremos editar un formulario creado con anterioridad a la versión 5.6.3. de Icegram Express, veremos un asistente distinto del que se abre al crear un formulario nuevo:

Crear un nuevo formulario de suscripciones en EmailSubscribers

  1. Modificaremos el nombre del formulario.
  2. Rellenamos el campo con la breve descripción (no es obligatorio).
  3. Configuramos los campos del formulario obligatorios (¿Requerido?) u opcionales del formulario.
  4. Seleccionamos la lista en la que queremos que se añadan los sucriptores nuevos.
  5. Activamos la casilla de verificación de consentimiento para obtener el consentimiento de un contacto antes de añadirlo a la lista. Es recomendable añadir el enlace al resumen actualizado de la política de protección de datos de la Consejería de Educación (consultar en https://dpd.educa2.madrid.org/).
  6. Activamos la casilla "Show in popup" si queremos que el formulario aparezca en este modo de presentación y guardamos los cambios.

Una vez creado el formulario tenemos que insertarlo en una página a través de un shortcode. Para ello, volvemos a Icegram Express - Formularios, copiamos el shortcode correspondiente al formulario creado y lo insertaremos en una página como recurso "Shortcode":

Copiar el shortcode del formulario de suscripcionesInsertar el shortcode copiado en la página web del formualrio de suscriptores.Importar contactos

Además de activar un formulario de suscripciones y ponerlo a disposición de los usuarios en la página web, podemos importar una lista de contactos desde un archivo CSV o importar los contactos desde otro sistema de suscripciones por correo electrónico.

Por motivos de seguridad, el funcionamiento de Icegram Express dentro del espacio multisite WordPress de EducaMadrid está limitado a usuarios de la plataforma.

 

Configurar una campaña de envío de notificaciones

El siguiente paso será configurar la campaña de envío de notificaciones. Para ello accedemos a Icegram Express - Campañas.

Escritorio de configuración de una campaña de Icegram Expres.En el apartado "Campañas" podemos crear una nueva notificación de publicación de entradas, crear campañas para diferentes listas, enviar correos de bienvenida, etc. Clicando en "Gestionar plantillas", podremos utilizar una plantilla como punto de partida para configurar una campaña nueva.

A la hora de gestionar una plantilla, veremos las palabras clave que aparecen entre paréntesis: {{NAME}}, por ejemplo. Son campos que se van a sustituir por la información del suscriptor o de la entrada una vez que se envíe el correo. En la parte inferior de la plantilla veremos las palabras clave disponibles para las notificaciones de entrada ("for Post Notification") y de otras campañas de emisiones ("en las emisiones").

Palabras clave disponibles para configurar el envío de notificaciones.Consultar informes de notificaciones

Para comprobar el estado de envío de notificaciones, podemos acceder al Icegram Express - Informes:

Informe con el estado de notificaciones de Icegram Express.

En la columna "Estado" podemos comprobar si la notificación de publicación de una nueva entrada está programada, pendiente de envío (1) o ha sido enviada (2). Normalmente, una notificación aparece como pendiente  o "In queue" si la publicación de la entrada no se ha realizado de forma inmediata, sino ha sido programada para más tarde. En este caso, podemos realizar el envío de forma manual clicando en la flecha de color naranja al lado del botón de estado o en el botón verde "Send Queued Emails Now" en la esquina superior derecha del escritorio.

 

Suscripción a noticias con RSS

Actualmente, tanto los usuarios de EducaMadrid como aquellos que no disponen de una cuenta institucional pueden recibir noticias de la página WordPress de un centro educativo usando RSS.

Por motivos de seguridad, el funcionamiento del recurso Icegram Express (Email Subscribers) dentro del espacio multisite WordPress de EducaMadrid está limitado a usuarios de la plataforma.  Los usuarios que no disponen de correo electrónico educa.madrid.org pueden suscribirse a las notificaciones de EducaMadrid a través de RSS.

RSS son las siglas de Really Simple Syndication, un recurso para la distribución de contenidos en tiempo real basado en el lenguaje XML. El formato permite distribuir contenidos sin necesidad de un navegador, utilizando un software diseñado para leer esos contenidos RSS. Para visualizar los contenidos en un navegador sin necesidad de visitar la página web de un centro es necesario activar la extensión correspondiente que viene integrada en muchos de ellos.

Configurar la suscripción a noticias con RSS

Para configurar una suscripción a noticias con RSS, son necesarias dos cosas: por un lado, el centro educativo debe proporcionar un enlace RSS a los usuarios y, en segundo lugar, los usuarios deben tener instalado un lector de RSS en su dispositivo o activar la extensión correspondiente que viene integrada en muchos navegadores.

En cuanto al enlace que da acceso a RSS, podemos obtenerlo de dos formas:

  1. Copiando la URL de la página web del centro y añadiendo /feed o /feed/rss al final. Así, por ejemplo, si la URL de la página de un centro es http://site.educa.madrid.org/IdDelCentro/, habría que proporcionar a los usuarios el enlace http://site.educa.madrid.org/IdDelCentro/feed/rss.
  2. Insertando ese enlace a través del botón del Widget de SiteOrigin disponible en WordPress de EducaMadrid.Ventana de configuración del widget SiteOrigin para el botón RSS.

En la configuración del botón de RSS debemos elegir el tipo de widget "Botones de Redes Sociales SiteOrigin por SiteOrigin" y en el apartado "Redes" seleccionar RSS. La url se generará automáticamente.

Para que el botón funcione correctamente, debemos tener bien configurada la página de entradas en la personalización de nuestra web: escritorio de WordPress - Apariencia - Personalizar - Ajustes de la página de inicio.

Para poder configurar la lectura de las entradas, los usuarios deben disponer de un lector de RSS si usan un dispositivo móvil o activar la extensión correspondiente en el navegador de su ordenador.

Algunos dispositivos móviles ya disponen de aplicaciones que permiten configurar la suscripción a través de la URL. Si no es así, es recomendable que los usuarios descarguen alguna aplicación gratuita de lector de RSS. Una vez instalado el lector de RSS en el dispositivo o activada la extensión en el navegador, hay que copiar del botón de RSS la url que contiene /feed o /feed/rss y pegarla en la aplicación o suscribirse a RSS clicando con el botón derecho del ratón en el botón insertado en la página:

 

Suscribirse a noticias por RSS.

Si previamente hemos activado la extensión de lectura de RSS en el navegador, podremos ver la opción de suscribirse al feed.

A partir de ahora se recibirán notificaciones de todas las noticias que se publiquen en la web del Centro.