Tag pre para WordPress sin Plugins

Sin duda a los que nos gusta la programación y la divulgación nos gusta también tener un blog donde hablar sobre ello, compartir funciones, Plugins, aplicaciones y demás, o como en este mismo blog hablar sobre funciones para WordPress.

Y para eso mismo necesitamos, por norma general, embeber código en nuestros artículos, ya sea PHP, CSS, HTML….., el caso es que para hacer esto mismo nos tenemos que apoyar en dos tags que nos proporciona WordPress de forma nativa, hablamos de los tags CODE y PRE.

En este blog nos apoyamos en el tag PRE siempre para embeber nuestro código fuente, y como podéis ver dicho código se ve muy bien en el blog, esto es gracias a que hacemos uso de una función que nos permite modificar el tag PRE para que el código se visualice a nuestro antojo.

Y eso es lo que veremos hoy, así que sin más demoras vamos a pasar a realizar el ejercicio de hoy para que veamos como hacerlo.

El primer paso es el mismo que realizamos siempre, con nuestro ID de programación favorito abrimos nuestro fichero funtions.php, que lo encontramos en la raíz de nuestro Theme, una vez abierto y al final de todo el código copiamos y pegamos el siguiente.

 

 


<?php

//función para modificar el tag pre
function wp_code_pre_filter($posts){
    foreach(
$posts as $post){
        
$thePostContent $post--->post_content;
        
$matchpre "/&lt;pre\b>(.*?)&amp;lt;.pre\b&amp;gt;/s";
        
$thePostContent preg_replace_callback(
            
$matchpre,
            function(
$m){
                return 
'&amp;lt; pre &amp;gt;'.highlight_string($m&#91;1],true).'&amp;lt; /pre &amp;gt;';
            
},
            
$thePostContent
        
);
        
$post-&amp;gt;post_content $thePostContent;
    }
    return 
$posts;
}
add_filter('the_posts''wp_code_pre_filter');
?>

Como podemos ver estamos creando una nueva función llamada wp_code_pre_filter, esta función no está haciendo más que eso, filtrar mediante un foreach el contenido de nuestro post en busca de la tag PRE, si la encuentra la reemplaza.

Y por último el CSS básico para que nuestro tag PRE se visualice de forma correcta en cualquier Theme de WordPress, localizamos en la raíz de nuestro Theme el archivo style.css y lo abrimos, buscamos la linea donde se encuentra la clase PRE, normalmente suele estar al principio de la hoja de estilos ya que es uno de estilos de normalización de cualquier Theme.


<style>

pre {
    background: #eee;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 1.6em;
    max-width: 100%;
    overflow: auto;
    padding: 1.6em;
}
</style>

Una vez tenemos localizada la clase PRE la modificamos por el siguiente código CSS para que todo se vea bien después en el frontend.

Estos son los estilos que utilizamos en este mismo blog, lo más importante de todo es el overflow auto, este permite que si el código es más largo que el ancho del artículo aparezca la barra de navegación y no sobre salga del mismo quedando todo sobre posicionado, como es lógico vosotros podéis adaptar estos estilos a vuestro gusto.

21 abril, 2020 por ricard

ricard
Soy Ricard FS, me dedico a la programación desde el año 2000, me dediqué en pleno a WordPress desde el año 2015, ahora creo Plugins y Theme para WordPress desde código cero, y me gusta la divulgación de código, por ello la creación de este blog.

Deja tu comentario

Deja una respuesta

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

:wink: :-| :-x :twisted: :) 8-O :( :roll: :-P :oops: :-o :mrgreen: :lol: :idea: :-D :evil: :cry: 8) :arrow: :-? :?: :!: