Tema hijo o modificaciones manuales para web y para plugins

por | Última actualización el 24 Aug 2021 a las 1:35AM | Publicado el 17 Jan 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:

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.

Plugin Crayon Syntax Highlighter

Con la nueva actualización 5.x de wordpress, la necesidad de implementar versiones superiores a php 5 y 7 -especialmente esta última-, así como el hecho de tener que bregar con el editor de pantalla Gutenberg, el fantástico plugin Crayon Syntax Highlighter no solo no funciona sino que nos provoca unos errores de compatibilidad de código desastrosos. En nuestro caso, el tema lo constriñe solamente a las entradas que lo utilizan, pero sabemos de otras páginas que fallan en su totalidad. Para arreglar esto seguimos los siguientes tres pasos:

Paso 1

Lo primero que debemos hacer es acudir al archivo crayon_langs.class.php a través del editor de plugins y buscar la línea número 340 que tendrá esta pinta:

Y la sustituimos por ésta:

Paso 2

Cambiamos de archivo. Igual que el anterior buscamos file crayon_formatter.class.php y lo modificamos con cuidado pues tenemos que eliminar 2 líneas de código e insertar 3, lo que va a cambiar la numeración del código. Como no haremos más modificaciones, será más que suficiente. Buscamos las líneas 118 y 119 que serán las siguientes:

Las eliminamos sin miedo y las sustituimos por las siguientes:

Paso 3

Ahora nos vamos al archivo principal crayon_settings.class.php el cual nos da una clase indefinida generadora de error y tenemos que buscar dos lineas. La primera:

Cuando la tengamos localizada, justo debajo insertamos la siguiente variable «show_mixed»:

A continuación buscamos la siguiente función un poco más abajo:

Y, del mismo modo que en el caso anterior, insertamos la nueva línea correspondiente a la función:

De este modo tendríamos el plugin activo sin problema alguno. La prueba es este artículo que muestra los diferentes fragmentos de código a la perfección. Estas modificaciones es necesario conocerlas, no obstante podemos acudir a la página https://github.com/Crunchify/crayon-syntax-highlighter/releases y descargarnos una versión no oficial, concretamente la 2.8.6 que incorpora todas estas modificaciones pero que no pertenece al autor original de este complemento.

Licencia Creative Commons
Todas las imágenes contenidas en el artículo titulado ‘Tema hijo o modificaciones manuales para la web y para los plugins’ son contenido original. Han publicadas por primera vez en sobredos.com y se encuentran bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivar 4.0 Internacional.

Resumen de este artículo
Tema hijo o modificaciones manuales
Título del post
Tema hijo o modificaciones manuales
Breve descripción
Una recopilación en continuo crecimiento de nuestras razones por las que elegir tocar manualmente el tema padre en vez de incorporar un tema hijo y las líneas de código a sustituir; una especie de guía propia de cara a la actualización de nuestra página web.
Autor
Editor
Sobre 2
Logo
¿Te ha sido útil, te ha interesado o gustado este artículo?
¡Haz clic para puntuar esta entrada!
(Votos: 23 Promedio: 5)
[et_social_share icon_style=»simple» icon_shape=»rectangle» col_number=»auto» counts=»true» counts_num=»0″ spacing=»true» custom_colors=»true» bg_color=»» bg_color_hover=»» icon_color=»» icon_color_hover=»» outer_color=»dark» network_names=»true»]

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: