Tema hijo o modificaciones manuales

por | 17/01/2016 | Profesión, Programas, Técnicas | 1 Comentario

Puede que el término tema hijo suene algo extraño para los que no hayan metido la nariz en montaje de contenidos CMS: foros, blogs, wikis, páginas de comercio electrónico o cosas así. No es que haya que ser una lumbrera para su manejo, pero a veces es necesario y conveniente salirse de las funciones básicas que ofrecen los temas de pago que se pueden adquirir en las diferentes plataformas o directamente a los diseñadores web.

Más que un tutorial para terceros esto no es sino una especie de chuleta para nosotros que nos permita disponer de los cambios de modo inmediato. Y de paso nos da la oportunidad de aprender a utilizar y practicar con algunos plugins como el Nav XT o el Crayon Syntax Highliter que son bastante prácticos; el primero para el SEO y el segundo para contar todo esto de manera eficaz.

Dashicons

Lo primero es añadir los dashicons: la función de iconos de wordpress que la propia plataforma incorpora pero que a día de hoy aún es necesario implementar de manera manual en el código del tema. Tan sencillo como añadir al final del archivo functions.php las siguientes lineas:

Footer

Esto sirve para incorporar una pequeña cantidad de iconos al texto -los mismos que se usan en el CMS- que es lo que queremos al modificar el pie de página con nuestra firma. Para ello editamos el archivo footer.php de la plantilla. Como es lógico, solamente cambiaremos las líneas originales del tema que no son editables desde el panel de control; precisamente aquella que colocan y ajustan el texto en el llamado footer-bottom en un sólo párrafo:

Esta línea -y no otra- hay que sustituirla por la siguiente:

Con el tiempo esta línea la hemos ido cambiando un poco, añadiendo otro enlace y despajándolos un poco para no resultar repetitivos, por lo que la última versión quedaría como sigue:

Ya que tenemos el archivo footer.php abierto en el editor, le metemos de paso nuestra imagen de fondo recortado. Esto lo hacemos insertando una sola línea justo debajo del div principal que se llama main-footer. Sin embargo, este div no es el del texto insertado, sino el del rectángulo que se muestra justo al final de la página:

Desde la versión 3.0.4 del tema que usamos, esta nota ya no se introduce de manera arcaica y engorrosa en el código del propio tema sino en un cajetín de texto, algo que se agradece mucho pues es algo menos de lo que ocuparse de aquí en el futuro. Sin embargo la colocación de la imagen encima del pie sí sigue siendo necesaria.

Se necesita en paralelo un ajuste css para que la imagen que hemos creado quede pegada a la parte superior y flote por encima del relleno de color rojo. Como dicha regla css queda fuera de los archivos del tema padre, nos ahorramos el andar reescribiéndola aquí. Hasta aquí todo lo necesario para la parte baja de la web. Por eso el cambio con el que nos quedamos es en el que obligamos al div directamente a ajustarse sin necesidad de otro archivo .css. Así:

Migas de pan

El segundo cambio es añadir los breadcrumbs o migas de pan a las entradas del blog. Para ello tan sólo es necesario seguir las instrucciones del plugin y añadir el siguiente código en el archivo de la entrada.

En vez de ser obedientes y añadir estas líneas al archivo header.php las añadimos a cada single.php y exactamente detras de la etiqueta <div class=”et_post_meta_wrapper”> que es la que abre el div del contenido. Nosotros lo hemos puesto justo encima del título principal pero se puede colocar donde se quiera.

Añadiremos, ya sin código ni modificaciones de archivos, una imagen de fondo. En nuestro caso hemos elegido una que simula una cartulina perforada que algunas veces hemos utilizado en maquetas para conseguir una textura visible en las fotografías y, en ocasiones también, como portada de algunos cuadernos y dosieres.

sobre-2-fondo-documentaciones-memorias-propuestas-tecnicas-licitaciones-obras

Tan sólo nos restan unos pequeños cambios internos a modo de detallismo febril. a) El primero de ellos sería la sustitución del término “Dirección de correo electrónico” por “Correo electrónico”, simplemente porque no entra completa en su cuadro correspondiente. b) El segundo sería reponer la columna lateral fija de información del blog con el siguiente contenido en sentido descendente: título y enlace fijo a la página principal, campo de búsqueda, nube de categorías, nube de metaetiquetas y finalmente la lista de entradas recientes sin restricción de número.

Y por ahora eso es todo, solamente cambios en el pie y el añadido de las migas de pan. Todo lo demás son cambios en los estilos del tema desde su propia interfaz y añadidos de plugins. Por eso -y esto es una decisión propia- hemos preferido documentar y realizar estos cambios directamente en el tema padre en vez de implementar un tema hijo. La adicción de código css y de plantilla mediente un tema hijo se nos antoja sencilla, pero no andamos tan ágiles cuando se trata de modificar la parte intermedia del código mediante un archivo externo.

Recuperar sidebar

Tras unos meses de probar que este procedimiento no es incómodo, hemos de añadir un cambio más. Los diferentes widgets de la barra lateral desaparecen y hay que volver a configurarlos. Afortunadamente usamos solamente cuatro: el primero es un enlace de texto a la página principal del blog, y con ese mismo título: Blog con el siguiente código:

El segundo widget por orden descendente es una cajita de búsqueda con título Buscar; así de fácil. Y el resto más aún: el tercer widget es una nube de etiquetas con la taxonomía puesta en Categorías y el título con ese mismo nombre, y el cuarto son las entradas recientes con el título Textos del blog y un número de muestra muy elevado -1000 o más por ejemplo- y sin mostrar la fecha de edición de la entrada.

Nueva plantilla para artículos

A partir de hoy vamos a ir introduciendo un modelo modificado para las plantillas del tema que simplemente maqueaban un post básico pero que no permitían modificar otra cosa que no fueran los sencillos parámetros de todo blog wordpress: la barra lateral, los widgets o los contadores. Con esta modificación hemos conseguido maquetar todo el código del artículo, lo que nos está permitiendo controlar la sencillez de los contenidos, de los botones sociales y la relación con los elementos comunes del resto de páginas.

Tras eliminar el sidebar (que pasa a tener otro nombre aunque los mismos contenidos y funciones) modificamos el PHP de Monarch copiando la linea de la matriz “follow” y creando una nueva linea para “share” (que son las que nos gustan más):

Debemos añadir el PHP de la función para que esto funcione en el archivo principal del plugin y para ello hemos estudiado en el foro de soporte de wordpress.org este artículo: https://wordpress.org/support/topic/call-a-plugin-with-a-shortcode que lo explica absolutamente todo. No estamos seguros de cuál es el lugar ideal para insertar la función, así que la hemos metido justo después del interminable código de function display_shortcode después de modificarla un poco y por ahora podemos decir que funciona:

No hay más que ir a la sección de “social follow” del plugin y crear un código nuevo para insertar en un módulo te texto o código -no hemos encontrado diferencias-, cambiando el nombre de la orden “et_social_follow” por “et_social_share” y proporcionarle el CSS adecuado para que no se junten las líneas demasiado.

¿Te ha sido útil, te ha interesado o gustado este artículo?

[Total:12    Promedio:5/5]

1 Comentario

  1. Cucho

    Nunca me ha gustado este tema mucho, es muy pesado y consume muchas líneas de código si no utilizas todos los módulos, pero me han gustado vuestras notas. +1

    Responder

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Textos del blog:

documentación técnica licitaciones
documentacion técnica para licitaciones
documentacion técnica licitación obras
documentaciones técnicas licitaciones
documentaciones técnicas para licitaciones
estudios licitaciones obras
estudios de licitación
estudios técnicos licitaciones
estudios técnicos de obras

estudios técnicos licitación obras
licitación de obras
licitaciones de obras
licitaciones y concursos de obra
memoria técnica licitación obras
memoria técnica para licitación
memoria técnica licitaciones
memoria técnica descriptiva de obra
memoria técnica para licitación

memorias técnicas licitaciones
memorias técnicas para licitaciones
oferta técnica licitacion
oferta técnica para licitación
oferta técnica para licitaciones
ofertas para licitaciones
ofertas técnicas licitaciones
preparación de documentación técnica
preparación de licitaciones

preparación de memorias técnicas
propuesta técnica de licitación
propuesta técnica para licitación
propuesta técnica para una licitación
propuesta técnica para licitación pública
propuesta técnica para licitaciones
propuestas técnicas para licitaciones
sobres técnicos para concursos
sobres técnicos para licitaciones