Archivo de la etiqueta: Wordpress

Actualizando el blog (III) – Ajustando plugins

Deja un comentario

wordpress-plugin

 

Abusar de los plugins es uno de los problemas mas habituales de los novatos en wordpress, cientos de plugins que no hacen nada realmente practico y que ralentizan hasta el infinito tu blog, yo utilizo unos cuantos te voy a contar los mas interesantes:

Básicos:

  • WP-Supercache: este es basico lo tienes que tener instalado si o si, permite cachear tu blog de forma que funcione mas rápido y no sobrecargue tanto el servidor donde lo tengas instalado.
  • WP-DBManager: este plugin es basico, optimizara tu base de datos y hara copias de forma regular.
  • XML Google Maps: Este plugin solo es necesario si publicas rutas de senderismo o geolocalizas fotografias, este plugin transforma cualquier fichero en formato .gpx, .kml o similar en un mapa con la ruta impresa y un grafico con el desnivel e información adicional.
  • JetPack de WordPress: Esto ya mas que un plugin es una extensión de wordpress que alarga muchas funciones de tu blog, hasta hacerlo casi increíble, incluye muchas opciones y cada dia esta en expansión, (requiere usuario de WordPress.com)
  • Akismet: Intentar tener un blog sin que Akismet este capturando los post de spammers es una faena poco agradecida, es uno de los mejores sistemas anti-spam y es compatible con otros si eres un poco paranoico como el tema.

SEO

  • Google Author Link: Este plugin añade a las cabeceras de tu blog de tus mensajes enlace a tu profile en Google+, eso junto con un proceso a realizar en tu paginad e google plus permite que en en la indización de tu contenido en google salga tu nombre y tu imagen.
  • WP Admintools: esta herramienta permite optimizar tus contenidos (metatags por post, asi como los titulos de los post y otros parámetros) para que sean «google friendly» adicionalmente te permite borrar las revisiones, eliminar de forma automatica los spam de los comentarios y los auto-borradores generados mejorando la optimización de la base de datos y por lo tanto mejorando la velocidad general del blog.
  • Apple Icons and Loading Screen: cuando pruebas tu web con herramientas web como woorank una de las cosas que suelen faltar son los apple iconos, que son iconos que ponen en tu ipad/iphne cuando los añades como si de aplicaciones se trataran, adicionalmente permite definir una loading screen.
  • Google XML Sitemaps: Genera el sitemap para que el robot de google lo coja en el plazo fijado y tenga la información sobre la composición de tu web.

Adicionales Interesantes

  • Add from server: Este plugin permite añadir contenidos que ya estan en una carpeta del FTP o que subiremos y saltarnos el limite de tamaño de subida de ficheros a la web.
  • Creative Commons Configurator: Si queremos publicar nuestro sitio bajo contenido CC este plugin nos ayuda a configurar nuestro blog
  • Efficient Related Post:  Este plugin permite que tras nuestros post añada un numero de post relacionados con el mismo (con base a las etiquetas del post)
  • P3 (plugin perfomance profiler): Este plugin analiza los plugins que tienes instalados y te informa de cuanto te estan ralentizando tu web.

Si tienes duda de como configurar alguno de estos plugins puedes contactar conmigo.

Actualizando el Blog (II) – Eliminando Flash

Deja un comentario

Steve Jobs No Flash

Introducción

En 2010 Steve Jobs CEO de Apple en una de sus Keynotes confirmo que los teléfonos y las tablets con sistema operativo iOs no tendrían nunca soporte para flash, algunos en su momento lo achacaron a los continuos roces entre Apple y Adobe, por distintos programas, las razones las puedes leer en este articulo , como ya hace tiempo de ello solo decir que en apenas tres años el flash ha pasado desde ser lo mas en webs y prácticamente imprescindible en la programación web a ser casi una tecnología leprosa con cada vez menos expansión.

Como el objetivo es optimizar la web pues estoy intentando suprimir el flash sino en su totalidad si en su mayor parte.

Videos y Audios

Hasta la fecha utilizaba el plugin Wordtube de Alex Rabe para visualizar los vídeos, este plugin esta basado en jwplayer un reproductor que en un principio utilizaba flash pero actualmente podía funcionar como reproductor html5, no obstante el plugin wordtube no se actualizaba y que jwplayer podía funcionar de forma autónoma, abandone el uso de wordtube, no obstante, las posteriores actualizaciones de wordpress han hecho que dicho plugin sea innecesario incluyo para la inclusión de vídeos de youtube, con tan solo poner una etiqueta antes del video y a funcionar, gracias a la tecnología mediaelements.js, esta tecnología también se aplica a los ficheros de auto, así que me permitió eliminar los reproductores flash de audio, así que ya tenemos una parte limpia.

Galerias de imágenes

Para las galerias de imagenes estaba usando la versión pro del plugin Simpleviewer para nextgen gallery, es un plugin muy bonito y eficaz, pero que no permite su visualización en el ipad y en el móvil, asi como otras incompatibilidades, estuve buscando plugins html5 para sustituirlo, y en un principio me parecio bueno la galeria incluida en el jetpack de Worpress pero esta limitada en el numero de fotos, finalmente he optado por la versión pro de Nextgen Gallery y con esto ya esta solucionado el problema al menos de momento.

Finalizando

Buenos, he limpiado la web, aun quedan detalles por pulir, si encuentras algún contenido desactualizado deja un mensaje y lo arreglare.

Actualizando el Blog (I) – Adecuando el tema

2 respuestas

Introducción

Aunque hace unos dias ya hice sin querer un anticipo, la verdad es que he estado los últimos meses arreglando la web y es que uno de los problemas de mantener la web durante mucho tiempo basandose en plugins de terceros, porque si el tercero de turno decide dejar de dar soporte a su plugin y dado que yo no tengo conocimientos suficientes para mantenerlos me toca sustituirlos, ya me ocurrió cuando me vi obligado a cambiar de Gallery a NextGen Gallery o mas recientemente cuando se acabo el soporte y la actualización de Wordtube y he tenido que buscar opciones (o no utilizar ninguna como ire contando mas adelante).

Como son muchas cosas voy a ir contando poco a poco como he ido cambiando las cosas y como las he ido optimizando para el SEO también contare que herramientas estoy usando tema.

El Tema

Durante mucho tiempo utilice temas para WordPress que encontraba en distintos repositorios de blogs, era una tarea ardua el bajar y probar hasta que uno cuadraba con la idea de un blog, (Colores, disposición, tamaño), si no sabes mucho código y no puedes revisar totalmente la plantilla te puedes encontrar que le acabas de dejar un puerta abierta a algún hacker o alguna cosa peor.

Posteriormente adquirí la herramienta Artisteer y la utilice para hacer muchos blogs, pero ello me generaba un problema, básicamente que WordPress de actualiza mas rápido que los programas de edición y ello conlleva que no puedes aplicar todos los cambios que hay en la tecnología de WordPress en tu plantilla, dando problemas de compatibilidad y haciendo que la web no sea segura o que simplemente no funcione.

Finalmente opte por utilizar uno de los temas estándar en este caso el TwentyTwelve, que tenia básicamente lo que buscaba, es un tema de 2 columnas, con una cabecera con imagen, adaptable a distintas resoluciones y con todo lo que las modificaciones de WordPress incluya ademas de la opción de que cada vez que se actualiza WordPress pues se actualiza automáticamente, aparte de algunas opciones de configuración ya incluidas.

Modificandolo

Ya explique en el anterior post el como crear un tema hijo, asi que no me voy a poner a volverlo a explicar, voy a ser mas practico voy  a dejar al final de este correo un zip con los ficheros modificados listos para usar y voy a cortar y pegar aqui las modificaciones que he realizado y donde realizarlas, todos los cambios estan realizados en el fichero style.css del tema hijo.

Cabecera con sombra y borde redondeado

/* Cabecera con sombra
————————————————————– */
.site-header h1 {
font-size: 24px;
font-size: 1.714285714rem;
line-height: 2;
color: #FFF;
background-color: #6E6E6E;
box-shadow: 2px 2px 2px #c6c6c6;
padding-left: 10px;
border-radius: 3px;
}
.site-header h2 {
font-weight: normal;
font-size: 13px;
font-size: 0.928571429rem;
line-height: 1.846153846;
color: #FFF;
background-color: #A4A4A4;
box-shadow: 2px 2px 2px #c6c6c6;
padding: 2px 0 5px 10px;
border-radius: 3px;
}

En la cabecera de la web se pueden ve dos zonas mas oscuras estas son las lineas que modifican la cabecera modificando los background-color modificas el color de fondo y modificando el color modificas el color del texto, el color de la sombra y la extension de la misma se modifican al cambiar el color en el box-shadow, el comando border-radius es el borde redondeado y el padding la separación, algunos de estos parametros se repetiran en varias ocasiones.

Barra de navegación

/* Barra de Navegación
————————————————————*/
.main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
border-bottom: .10rem solid #c6c6c6;
border-top: .10rem solid #c6c6c6;
}
.main-navigation li a {
color: #7C7E81;
font-weight: bold;
}
.main-navigation .current-menu-item > a, .main-navigation .current-menu-ancestor > a, .main-navigation .current_page_item > a, .main-navigation .current_page_ancestor > a{
color: #6E6E6E;
}

Con esto modificamos la barra de menus, los comandos border-bottom y border-top son las lineas de las que puedes configurar el grosor y el color.

Forma y fondo de la web

/* Web
————————————————————*/
body .site {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
background-color: #E6E6E6;
border: 1px;
border-color: #FAFAFA;
box-shadow: 2px 2px 2px #c6c6c6;
}

Aqui modificamos el borde del contenido y el color de fondo.

Forma y fondo de la web

/* Blockquote
————————————————————*/
blockquote {
background: #f9f9f9;
border-left: 10px solid #ccc;
margin: 1.5em 10px;
padding: .5em 10px;
}
blockquote:before {
color: #ccc;
content: open-quote;
font-size: 4em;
line-height: .1em;
margin-right: .25em;
vertical-align: -.4em;
}
blockquote p {
display: inline;
}
blockquote:before {
content: ”\201C”;
}
blockquote:after {
content: ”\201D”;
}

Formato de las citas o blockquotes

Modificación artículos

/* Modificación articulos
————————————————————*/
.entry-header {
line-height: 1.2;
font-weight: normal;
background-color: #A4A4A4;
box-shadow: 2px 2px 2px;
padding: 5px 5px 2px 10px;
border-radius:3px;
}
.entry-content {
line-height: 1.2;
font-weight: normal;
background-color: #FFF;
box-shadow: 2px 2px 2px #c6c6c6;
padding: 5px 5px 2px 10px;
border-radius:3px;
}
.entry-meta {
line-height: 1.2;
font-weight: normal;
background-color: #A4A4A4;
box-shadow: 2px 2px 2px;
padding: 5px 5px 2px 10px;
border-radius:3px;
}

Modificación del articulo, cabecera y pie.

Modificación widgets y cabeceras de los mismos

/* Modificación widgets
————————————————————*/
.widget-title {
margin-bottom: 24px;
margin-bottom: 1.714285714rem;
background-color: #A4A4A4;
box-shadow: 2px 2px 2px ;
padding: 5px 5px 2px 10px;
border-radius:3px;
}
.first.front-widgets {
margin-bottom: 24px;
margin-bottom: 1.714285714rem;
background-color: #FFFFFF;
box-shadow: 2px 2px 2px ;
padding: 5px 5px 2px 10px;
border-radius:3px;
width: 47.916666667%;
}
.second.front-widgets {
margin-bottom: 24px;
margin-bottom: 1.714285714rem;
background-color: #FFFFFF;
box-shadow: 2px 2px 2px ;
padding: 5px 5px 2px 10px;
border-radius:3px;
width: 47.916666667%;
}
.widget-area {
line-height: 1.2;
font-weight: normal;
background-color: #FFF;
box-shadow: 2px 2px 2px;
padding: 15px 5px 2px 5px;
border-radius:3px;
}

Modificación de la cabecera y el contenido de los widgets

Enlaces

/* Modificación enlaces
————————————————————*/
a {
outline: none;
color: #757575;
}
a:hover {
color: #6E6E6E;
}
.site-header h1 a,
.site-header h2 a {
color: #FFF;
display: inline-block;
text-decoration: none;
}
.site-header h1 a:hover,
.site-header h2 a:hover {
color: #6E6E6E;
}

.main-navigation a {
color: #757575;
}
.main-navigation a:hover {
color: ##6E6E6E;
}
.widget-area .widget a {
color: #757575;
}
.widget-area .widget a:hover {
color: #6E6E6E;
}
footer[role=»contentinfo»] a {
color: #FFFFFF;
}
footer[role=»contentinfo»] a:hover {
color: #6E6E6E;
}
footer.entry-meta {
color: #FAFAFA;
box-shadow: 2px 2px 2px #6E6E6E;
}
footer.entry-meta a {
text-decoration: none;
color: #FAFAFA;
}
footer.entry-meta a:hover {
color: #6E6E6E;
}

Estos son los enlaces de la web, con ellos gestionas el color de gran parte del texto de la web tanto cuando están normal, como cuando has pasado el ratón por encima o ya has utilizado el enlace.

Comentarios

/* Comentarios
————————————————————– */
.comments-title {
margin-bottom: 24px;
margin-bottom: 1.714285714rem;
background-color: #A4A4A4;
box-shadow: 2px 2px 2px ;
padding: 5px 5px 2px 10px;
border-radius:3px;
}
.commentlist .pingback {
line-height: 1.714285714;
margin-bottom: 24px;
margin-bottom: 1.714285714rem;
background-color: #FAFAFA;
box-shadow: 2px 2px 2px ;
padding: 5px 5px 2px 10px;
border-radius:3px;
}
.comments-area article {
margin: 24px 0;
margin: 1.714285714rem 0;
background-color: #FFF;
box-shadow: 2px 2px 2px ;
padding: 5px 5px 2px 10px;
border-radius:3px;
}

Personalización de comentarios

Aqui dejo los ficheros modificados: theviceCSS

Muestra el autor en blogs de un solo autor con Twenty Twelve

1 respuesta

En los blogs como este basados en la plantilla twenty twelve como este no se imprime la información sobre el autor del post, simplemente se asume que el propietario y el autor es el mismo y por lo tanto esta deshabilitado por defecto.

Para saltarte esta limitación, tienes tres opciones :

  1. La mas simple registra otro usuario y publica al menos un post, esta es la solución mas simple y la mas fácil de implementar.
  2. Copia content.php a un tema hijo y borra  && is_multi_author() sobre la linea 47, con esto no realiza la comprobación.
  3. Añade add_filter( 'is_multi_author', '__return_true' ); en la pagina functions.php de tu tema hijo de twenty twelve, esto hace que siempre que realice la comprobación sobre el multiautor devuelva la respuesta si.

Yo he optado por la tercera opción, puesto que toda la personalización de la web la estoy realizando sobre este tema de WordPress y esto requiere la implementación de los temas hijos de WordPress asi que …..

Vamos a ello

Estos son los pasos que he seguido para que esto funcione:

  1. Crea una nueva carpeta para el tema hijo: wp-content/themes/twentytwelve-child (yo la mia la he llamado theviceCSS.
  2. Crea una hoja de estilos en esa misma carpeta: wp-content/themes/twentytwelve-child/style.css
  3. Sigue las instrucciones en the WordPress Codex para rellenar la hoja de estilos . Esta es la mia:

    /*
    Theme Name:     Twenty Twelve
    ChildTheme URI:      http://the-vice.com
    Description:    A Twenty Twelve child theme
    Author:         Michael Park
    Author URI:     http://the-vice.com
    Template:       twentytwelve
    Version:        0.1.0
    */
    @import url(«../twentytwelve/style.css»);

  4. copy wp-content/themes/twentytwelve/functions.php to wp-content/themes/twentytwelve-child/functions.php
  5. delete content (apart from first comment block) and add filter to enable:


    add_filter( ‘is_multi_author’, ‘__return_true’ );

  6. Guardar wp-content/themes/twentytwelve-child/functions.php
  7. Activar el tema hijo: Escritorio » Panel Administración » Apariencia » Temas

Este post es una traducción literal con comentarios de este otro

XML Google Maps – Se acabo la esclavitud del Wikiloc !!!!

1 respuesta

Tampoco es que wikiloc sea un tirano, nos da mucho a cambio de nada, pero la gente con años en la web tenemos una paranoia porque nutres una web de contenidos que aprovechas para publicar algo y cuando menos te lo esperas cierran, cambian algo, lo venden o cualquier parida y te quedas sin los contenidos. Hasta la fecha yo estoy subiendo mis videos en la web usando WordTube, los ficheros los tengo en descarga mediante Wp-downloads y para publicar utilizo un wordpress en mi hospedaje en Dreamhost, pero hasta la fecha no habia nada para publicar los tracks y los perfiles en la web, hoy he descubierto un plugin que me va a permitir poco a poco ir prescindiendo de wikiloc el XML Google Maps.

Sigue leyendo →