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.
Índice de contenidos
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:
|
1 2 3 4 5 |
//Soporte de dashicons add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' ); function load_dashicons_front_end() { wp_enqueue_style( 'dashicons' ); } |
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:
|
1 |
<p id="footer-info"><?php printf( __( 'Designed by %1$s | Powered by %2$s', 'Divi' ), '<a href="http://www.elegantthemes.com" title="Premium WordPress Themes">Elegant Themes</a>', '<a href="http://www.wordpress.org">WordPress</a>' ); ?></p> |
|
1 |
<p id="footer-info"><?php printf( __( '%1$s es una página web hecha con <span class="dashicons-before dashicons-heart"></span> y con <span class="dashicons-before dashicons-wordpress"></span> en Madrid' ), '<a href="http://sobredos.com" title="Sobre 2">sobredos.com</a>' ); ?></p> |
|
1 2 3 |
<div class="footer-silueta"> <img src="http://sobredos.com/wp-content/uploads/2015/04/estudios-documentaciones-licitaciones-memorias-tecnicas-sobre-2-pie-silueta.png" alt="estudios-documentaciones-licitaciones-memorias-tecnicas-sobre-2-pie-silueta" title="estudios-documentaciones-licitaciones-memorias-tecnicas-sobre-2-pie-silueta"> </div> |
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í:
|
1 2 3 |
<div style="width: 100%; margin-top: 0px;"> <img src="http://sobredos.com/wp-content/uploads/2015/04/estudios-documentaciones-licitaciones-memorias-tecnicas-sobre-2-pie-silueta.png" alt="estudios-documentaciones-licitaciones-memorias-tecnicas-sobre-2-pie-silueta" title="estudios-documentaciones-licitaciones-memorias-tecnicas-sobre-2-pie-silueta"> </div> |
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:
|
1 2 3 4 5 6 |
<div class="breadcrumbs" typeof="BreadcrumbList" vocab="http://schema.org/"> <?php if(function_exists('bcn_display')) { bcn_display(); }?> </div> |
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.
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:
|
1 |
<a href="http://sobredos.com/blog" target="_top" rel="noopener noreferrer">página principal</a> |
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):
|
1 2 |
add_shortcode( 'et_social_follow', array( $this, 'display_shortcode' ) ); add_shortcode( 'et_social_share', array( $this, 'display_mine' ) ); |
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:
|
1 2 3 4 |
function display_mine() { $monarch_options = $this->monarch_options; return $this->generate_inline_icons( 'et_social_inline' ); } |
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:
|
1 |
return preg_replace('/[^\w-+#]/msi', '', $id); |
|
1 |
return preg_replace('/[^\w\-+#]/msi', '', $id); |
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:
|
1 2 |
$toolbar_height = $font_size * 1.5 . 'px !important;'; $info_height = $font_size * 1.4 . 'px !important;'; |
|
1 2 3 |
$crunchify_height = 1.5; $toolbar_height = $_font_size * $crunchify_height . 'px !important;'; $info_height = $_font_size * $crunchify_height . 'px !important;'; |
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:
|
1 |
const TAB_CONVERT = 'tab-convert'; |
|
1 |
const SHOW_MIXED = 'show_mixed'; |
|
1 |
new CrayonSetting(self::TAB_CONVERT, FALSE), |
|
1 |
new CrayonSetting(self::SHOW_MIXED, FALSE), |
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.
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.
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