Durante mi actividad con blogs basados en WordPress he recopilado varios fragmentos de código para personalizar la apariencia de mis sitios web, implementar alguna función o modificar alguna.
Los códigos a continuación los he usado y probado en el tema Genesis Sample (basado en Genesis Framework). Seguramente funcionarán en cualquier otro tema basado en Genesis Framework. Solo tendrás que copiar el código en el archivo functions.php de tu child theme. Si es código de estilos, sugiero añadirlo a la sección CSS personalizado (en Apariencia > Personalizar). Así se mantiene separado de la hoja de estilos original del child theme (style.css)
Códigos para functions.php
Personalizar la información del post
//* Modificar la info de la entrada
add_filter( 'genesis_post_info', 'sp_post_info_filter' );
function sp_post_info_filter($post_info) {
if ( !is_page() ) {
$post_info = '[post_date] [post_comments zero="Comentarios bienvenidos" one="1 Comentario" more="% Comentarios"] [post_edit]';
return $post_info;
}}
Personalizar los créditos en el footer
Si quieres quitar el crédito en el footer que dice algo como «Copyright © 2019 · Genesis Sample on Genesis Framework · WordPress · Log out» y poner algo propio, usa el siguiente código:
//* Customize the entire footer
remove_action( 'genesis_footer', 'genesis_do_footer' );
add_action( 'genesis_footer', 'sp_custom_footer' );
function sp_custom_footer() {
?>
<p>© 2019 Tecno Jefe · Todos los derechos reservados</p>
<?php
}Puedes reemplazar el siguiente fragmento por el texto que tu prefieras:
© 2019 Tecno Jefe · Todos los derechos reservadosPoner «Leer más» en español
//* Modify the Genesis content limit read more link
add_filter( 'get_the_content_more_link', 'sp_read_more_link' );
function sp_read_more_link() {
return '... <a class="more-link" href="' . get_permalink() . '">[Sigue Leyendo...]</a>';
}Este código reemplaza el texto «Read more» de Genesis, por el texto «[Sigue Leyendo…]» en las entradas donde está «cortado» el contenido. Cámbialo a tu gusto.
Post aleatorio a partir de una lista específica de posts
//random posts
function wpb_rand_posts() {
$args = array(
'post_type' => 'post',
'orderby' => 'rand',
'post__in' => array(XXX,YYY,ZZZ),
'posts_per_page' => 1,
);
$the_query = new WP_Query( $args );
if ( $the_query->have_posts() ) {
$string .= '<ul>';
while ( $the_query->have_posts() ) {
$the_query->the_post();
$string .= '<li><a href="'. get_permalink() .'">'. get_the_title() .'</a></li>';
}
$string .= '</ul>';
/* Restore original Post Data */
wp_reset_postdata();
} else {
$string .= 'no posts found';
}
return $string;
}
add_shortcode('wpb-random-posts','wpb_rand_posts');
add_filter('widget_text', 'do_shortcode'); Este código originalmente creado por WPbeginner.com (y apenas modificado por mí con la ayuda de la información oficial de WordPress), genera un post al azar (mediante las líneas «orderby» y «post_per_page») de una lista de tres posts con los IDs «XXX», «YYY», «ZZZ». Deberás modificar estas líneas para aumentar el número de posts mostrados y los ID de los posts que quieres incluir.
Una vez copiado este código en el functions.php de tu child theme, también deberás añadir el shortcode [wpb-random-posts] dentro de algún widget o post donde quieras añadir el post o posts al azar.
Artículo Anterior y Siguiente
add_action( 'genesis_before_content', 'genesis_prev_next_post_nav', 5 );Este código añade un link hacia el post anterior y post siguiente (con sus respectivos títulos como anchor text) antes de la caja de comentarios. Un código algo mejor que este es el siguiente (aunque honestamente no recuerdo la fuente):
/** Genesis Previous/Next Post Post Navigation */
add_action( 'genesis_entry_footer', 'eo_prev_next_post_nav' );
function eo_prev_next_post_nav() {
if ( is_single() ) {
echo '<div class="prev-next-navigation">';
previous_post_link( '<div class="previous"><b>Artículo anterior</b>: %link</div>', '%title' );
next_post_link( '<div class="next"><b>Siguiente artículo</b>: %link</div>', '%title' );
echo '</div><!-- .prev-next-navigation -->';
}
}Este código añade el post anterior y siguiente al pie del contenido del post, algo un poco más adecuado. Además añade las palabras «Artículo anterior» y «Artículo siguiente» a los links de navegación.
Quitar las etiquetas HTML permitidas en el formulario de comentarios
add_filter( 'comment_form_defaults', 'sp_remove_comment_form_allowed_tags' );
function sp_remove_comment_form_allowed_tags( $defaults ) {
$defaults['comment_notes_after'] = '<div class="form-allowed-tags"><b>Nota:</b> Si el comentario no aparece luego de ser publicado, actualiza la página. No lo envies de nuevo.</div>';
return $defaults;
}Adicionalmente, la línea «comment_notes_after» añade una nota.
Links no cliqueables en los comentarios
remove_filter( 'comment_text', 'make_clickable', 9 );Crear un nuevo tamaño predeterminado de imagen en WordPress
/* Definir nuevos tamaños de imágenes */
add_image_size( 'chica', 210, 400, false );
add_filter( 'image_size_names_choose', 'agregar_imagen_lista' );
function agregar_imagen_lista( $sizes ) {
return array_merge( $sizes, array(
'chica' => __('Pequeño'),
) );
}En este caso se está añadiendo un tamaño de imagen de nombre «Pequeño», con un ancho máximo de 200px por un alto máximo de 400px. Se podrá escoger éste tamaño entre los tamaños de imagen personalizados que ofrece WordoPress al insertar una imagen en un artículo.
Eliminar caja de comentarios de todo el sitio
add_action( 'genesis_after_entry', 'rv_remove_comments_genesis', 0 );
function rv_remove_comments_genesis() {
remove_action( 'genesis_after_entry', 'genesis_get_comments_template' );
}Adsense dentro del texto de los posts
//*adsense en medio del contenido. Banner: dentro-del-post
add_filter( 'the_content', 'wpsites_adsense_middle_content' );
function wpsites_adsense_middle_content( $content ) {
if( !is_single() )
return $content;
$paragraphAfter = 3; //Numero de parrafo o linea
$content = explode ( "</p>", $content ); //desencadenante
$new_content = '';
for ( $i = 0; $i < count ( $content ); $i ++ ) {
if ( $i == $paragraphAfter ) {
$new_content .= '<div style="padding: 5px 5px 5px 0; margin-right: 0; margin-bottom: 15px;">';
$new_content .= '
<!-- Dentro del post -->
<ins class="adsbygoogle dentro-del-post"
style="display:inline-block"
data-full-width-responsive="true"
data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
data-ad-slot="XXXXXXXXXXXX"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>';
$new_content .= '</div>';
}
$new_content .= $content[$i] . "</p>";
}
return $new_content;
}Ten la precaución de cambiar las XXXXXX por los valores respectivos de tu ID de editor (ca-pub) y el ID del banner (data-ad-slot).
Con este código, el bloque de anuncio aparece tras el tercer párrafo (puedes poner otro número), cuando en el código html aparece el desencadenante:
</p>Puedes cambiar ese desencadenante por el siguiente:
\nEn este caso, el bloque de anuncio aparecerá tras el tercer salto de línea. Tendrás que probar entre ambos para ver cuál es mejor para ti.
El crédito a wpsites.net por este código.
Códigos para CSS personalizado (o style.css)
Lista anidada ordenada
.lista-anidada ol {
list-style-type: none;
counter-reset: item;
margin-left:20px;
}
.lista-anidada ol > li {
display: table;
counter-increment: item;
margin:0;
}
.lista-anidada ol > li:before {
content: counters(item, ".") "";
display: table-cell;
padding-right: 0.4em;
}
.lista-anidada li ol > li {
margin-left:-5px;
}
.lista-anidada li ol > li:before {
content: counters(item, ".") " ";
}En un post puedes insertar una lista dentro de un DIV asociado con esta clase. Es decir algo como esto:
<div class="lista-anidada">
<ol>
<li>Item 1
<ol>
<li>Subitem 1.1</li>
<li>Subitem 1.2</li>
<li>Subitem 1.3</li>
<li>Subitem 1.4</li>
</ol>
</li>
<li>Item 2</li>
</ol>
</div>La desventaja de este código es que no funciona cuando quieres iniciar un item en un número determinado mediante el código <ol start=»algúnvalor»> . El creador del mismo supo decirme mediante Twitter que es imposible solucionar esto solo con CSS y que se necesita javascript, aunque no tengo idea de cómo hacer aquello. Por esa razón es que asocio este código a la clase «lista-anidada» y lo uso donde lo necesito (en los índices de los artículos, por ejemplo). Para listas donde necesito reiniciar los items, simplemente uso la opción de lista ordenada de WordPress, que no tiene problema en este aspecto.
