Cómo embeber todo lo que quieras en WordPress (org)

Como en prácticamente cualquier plataforma de blogging, en los WordPress instalados en Catedu es posible embeber vídeos online (Youtube, Vimeo, etc.), presentaciones y documentos (Scribd, Calameo, etc.) y prácticamente cualquier cosa.

Para ello necesitaremos conseguir el código HTML para embeber. Por ejemplo, en Calameo:

embeber

 Hay que tener cuidado porque podemos encontrarnos en las opciones de compartir de algún servicio, el compartir en WordPress. Hemos de ser fuertes y resistir la tentación. Se están refiriendo a WordPress.com, que no es el caso de los WordPress instalados en Catedu. De esta manera, lo que nos darían en lugar de HTML sería un shortcode que no nos funcionaría.

A lo que vamos, una vez tenemos nuestro código HTML a embeber nos pasamos al modo TEXTO (darle a la pestaña correspondiente) y lo pegamos donde queramos que aparezca, tal cual:

embeber3

Guardamos el borrador, y si ahora nos pasamos al modo VISUAL veremos algo similar a esto:

embeber4

Sin  embargo, la vista previa de la entrada es lo que esperamos:

embeber5

Algunos códigos HTML que usan marcas especiales (especiales para WordPress, claro) pueden darnos algún quebradero de cabeza. Por ejemplo,  Rosa nos comenta que los flash de Spicynodes no se incrustan bien, a no ser que seas administrador del WordPress. En estos casos la solución pasa por avisar al administrador y que instale un plugin que permita embeber flash en las entradas. Aquí en FacilyTIC hemos puesto KIMILI (http://kimili.com/plugins/flash-embed). Con este plugin, que se puede descargar desde el gestor de plugins,  podremos poner cualquier flash dentro de una entrada desde el modo VISUAL, usando la siguiente expresión:

[kml_flashembed movie="http://media.spicynodes.org/display.swf?id=4588f80b5a2ec4be2d5fd416b2971f36&nodemapID=447506" height="300" width="300" /]

Donde movie=”dirección_del_archivo_flash”.

Eso es todo, de momento.

Menús, menús y menús (WordPress)

¿Qué se entiende por menú? Un menú es una lista de elementos ordenados, en la que además puede haber jerarquía entre dichos elementos; es decir, que unos ítems pueden ser subitems de otros. Los elementos de menú típicamente son:

  • Páginas (páginas estáticas )

  • Enlaces personalizados (URL que puede apuntar a donde sea; es decir, a páginas o entradas de nuestro WP o a cualquier otra página de la red)

  • Categorías de entradas (despliega entradas de una categoría)

  • Otros tipos, dependiendo de los plugins que tengamos activos.

WordPress nos permite tener creados tantos menús como queramos. Esto se hace desde Apariencia->Menús. Crear un menú no implica que se vaya a mostrar en la web.

menus_explicados

Podemos tener entonces un menú principal, un menú especial, etc. Ahora hemos de decidir dónde mostrarlos. Esto se hace definiendo las ubicaciones del tema (ver imagen). Dependiendo del tema que tengamos activo, tendremos unas ubicaciones u otras. Hay temas que permiten mostrar un solo menú, otros que permiten cuatro…

Página de inicio estática en WordPress

New WordPress Buttons and Stickers

WordPress ofrece la posibilidad de configurar la apariencia para mostrar siempre una página estática como entrada, en lugar de lo que hace por defecto, que es mostrar los últimos artículos publicados.

 Aunque todo depende de la funcionalidad de la página web y del público objetivo, tener una página estática no es realmente una práctica muy recomendable, salvo quizá en las etapas iniciales. ¿Por qué? Porque los visitantes quieren saber de un vistazo de qué va la web en cuestión y encontrar la información rápidamente. Una página estática implica como mínimo un click más para acceder a la información relevante.

¿Por qué hemos puesto entonces una página estática en las nuevas instalaciones WordPress para centros educativos y en las migraciones de e-Ducativa? La respuesta es porque nos ha facilitado a nivel técnico la tarea de unificar la apariencia inicial, dada la diversidad de usos de la página web original. Hay que tener en cuenta que hay centros que tienen webs más dinámicas que otras y algunos le dan un uso casi exclusivo de presentación, con enlaces a blogs de profesores, etc.

¿Y cómo se quita o configura esa página estática? Aquí hay dos opciones, dependiendo de si el tema que hemos elegido permite configurarla directamente o, en cambio, es el propio WordPress el que la controla:

  • Si es el tema: por ejemplo, el tema Responsive que ponemos por defecto, en sus opciones, ofrece la posibilidad de tomar el control de la página de inicio. Para ello, basta con marcar la casilla correspondiente y, a continuación, configurar la apariencia de dicha página: título, contenido destacado (imagen, vídeo), botón de llamada a la acción, menús especiales, etc.

Esto se hace en: Apariencia->Opciones del tema->Página de inicio (Enable Custom Front Page)

  • Si es el propio núcleo de WordPress: si en el tema no tenemos opción de página estática de inicio, WordPress se puede hacer cargo. Y si el tema sí que tiene la opción, también podemos elegir la funcionalidad básica de WordPress para ello.

Esto se hace en: Ajustes->Lectura->Página frontal muestra (y aquí elegimos una página de nuestra elección, que habremos creado previamente)

Recursos WordPress en línea

Wordpress Schwag

En esta entrada vamos a hablar de los recursos que podemos encontrar en la red sobre WordPress. Desde los primeros pasos, como puede ser la creación de entradas y páginas, hasta la instalación y configuración de plugins y otros extras.

En primer lugar, cuando busquemos información sobre WordPress, tenemos que tener claro que hay dos WordPress, tocayos a fin de cuentas y productos de la misma empresa. Uno se llama WordPress y se apellida .com, y el otro también se llama WordPress, pero se apellida .org.

  • WordPress.com es un servicio de alojamiento de blogs al estilo de Blogger. Es decir, tú te registras con una cuenta gratuita, eliges un título para el blog y listo, ya tienes montado tu blog. Puedes elegir entre unos cuantos temas gratuitos y tu blog vendrá con una serie de plugins por defecto, como los relacionados con el control de spam. A partir de aquí, si quieres modificar el tema para hacerlo más especial o instalar un plugin que necesitas para hacer algo en concreto, tienes que pagar. Tampoco se pueden embeber todos los iframes y javascripts que queramos, sólo unos pocos.

  • WordPress.org aloja el código fuente de WordPress. Si tienes un servidor, puedes descargarte la último versión e instalarla. Eso es lo que hacemos en Catedu. Una vez instalado, puedes hacer lo que quieras con tu WordPress, cambiar el tema, instalar plugins, etc.

Por eso, si googleamos en busca de solución para alguna duda, tendremos que tener claro que los WordPress de Catedu son .org. No obstante, es cierto que hay elementos comunes y el panel de administración es idéntico, por lo que habrá muchas cosas de WordPress.com (vídeos, tutoriales) que nos sirvan para nuestros propósitos.

 

Dicho esto, en esta página tenemos una de las más completas recopilaciones de tutoriales para todos los gustos:

http://centros.educacion.navarra.es/devcursos/cursowp2012/manuales-y-tutoriales-sobre-wordpress/

 

Y en Youtube también podemos encontrar vídeos sobre WordPress, como éste:

http://www.youtube.com/watch?v=L_Kd0s6WgNA

Otro de los mejores sitios en español sobre WordPress es:

http://ayudawordpress.com/

Tema Responsive de WordPress paso a paso

featured-image-responsive Responsive es uno de los temas por defecto que hemos puesto en las instancias WordPress que proceden de un sitio de e-Ducativa. Por supuesto, esto es algo que se puede cambiar y que va a gusto del consumidor.

Sin embargo, lo hemos elegido como tema por defecto por su gran capacidad y facilidad de personalización, tener licencia GNU GPLv3, por estar traducido a nuestro idioma y, sobre todo, por ser adaptativa (responsive). El hecho de que sea adaptativa es importante, ya que hoy en día accedemos a las webs desde múltiples dispositivos: PCs, tablets, teléfonos móviles, etc. Una web adaptativa, como su propio nombre indica, se adapta automáticamente según el dispositivo desde el que se accede, teniendo en cuenta su ancho de pantalla. Si queréis saber un poco más sobre diseño adaptativo, podéis empezar por la página de Wikipedia que trata sobre ello.

A continuación, comentaremos las opciones más comunes:

Apariencia->Opciones del tema->página de inicio (front page)

front_page_explicada

Si marcamos la opción Enable Custom Front Page nos aparecerá una pantalla especial como página principal. Es llamativa y permite ser configurada de modo que se acceda fácilmente a las noticias y avisos importantes, o a la actualidad del centro.

Podemos cambiar el título, subtítulo, el texto del área de contenido y:

  • Llamada a la acción (URL) Es la dirección web a la que queremos que nos lleve al hacer click en el botón de llamada a la acción. Por ejemplo, que nos liste las entradas de la categoría de noticias.
  • Llamada a la acción (texto) Es el texto que queremos mostrar en el botón de llamada a la acción.
  • Contenido destacado La imagen o el vídeo que queremos poner como contenido destacado. Si como imagen de cabecera hemos puesto una foto del centro educativo, en contenido destacado podemos poner alguna imagen o vídeo de actualidad (campañas, proyectos, exposiciones, etc). Para ello, hay que poner un poquito de código html. Aquí os dejamos unos sencillos ejemplos:
    • Para poner una imagen:
<img src="http://s.wordpress.org/about/images/logos/wordpress-logo-simplified-rgb.png" width="440" height="300" alt="">

Tendremos que copiar y pegar ese código cambiando la dirección web de la imagen que queramos poner, así como la anchura (width) y altura (height) .Si se trata de una imagen subida a la librería multimedia de nuestro WordPress, buscaremos allí su URL (URL de archivo).

    • Para poner un vídeo de Youtube, únicamente tendremos que copiar el código de inserción (en las opciones de compartir propias de Youtube)
<iframe width="560" height="315" src="http://www.youtube.com/embed/V0Bz_29XBd4" frameborder="0" allowfullscreen></iframe>

Apariencia->Cabecera

Desde aquí podremos cambiar la imagen de cabecera, que no hay que confundir con el contenido destacado (ver imagen de más arriba)

Apariencia->Menús

El tema Responsive permite poner hasta 4 menús. El menú superior y el de pie de página no aparecen en la imagen que hemos puesto. En nuestra opinión, añadir el menú superior puede recargar innecesariamente la página, y queda más integrado en el tema el menú de cabecera.

Para crear los menús (y esto es independiente del tema que elijamos), tendremos que ir a Apariencia-> Menús y configurar los menús que queramos, añadiendo páginas, categorías o enlaces. Una vez tengamos todos los elementos de menú los podremos ordenar arrastrando, pudiendo establecer niveles arrastrando los elementos que queramos debajo de otros.

Podemos tener creados más menús de los que vayamos a utilizar. Sólo se mostrarán aquellos que seleccionemos en la ubicación del tema.

Apariencia->Widgets

Por último, comentaremos los Widgets de la página de inicio. Son tres y se llaman Widget 1,2 y 3 de la página inicial. No son otra cosa que ubicaciones preestablecidas donde podemos poner lo que queramos: un menú, una sindicación RSS, enlaces, etc. Lo normal en nuestro caso será poner en uno de los widgets el menú principal de navegación y en otro, tal vez, las últimas entradas de la categoría de bitácora o actualidad del centro.

Eso es todo de momento.