Archivo de la etiqueta: Temas Wordpress

Actualizando el Blog (I) – Adecuando el tema

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

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:      https://the-vice.com
    Description:    A Twenty Twelve child theme
    Author:         Michael Park
    Author URI:     https://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