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