Lipaonline

Catégorie : Tips

Tips WordPress : Comment afficher vos Custom Post Type ?

Posted on by lipaonline

Pour améliorer votre blog/site, vous avez créé des Custom Post Type (avec ou sans Pods), c’est très bien.. si si je vous assure ! 😉

Maintenant, à moins que vous vouliez être le/la seul(e) à les voir (pourquoi pas ?), il va falloir les afficher non ?

Avant, je fonçais tête baissée (pas sur que ça aille plus vite mais bon…) dans le code du template pour modifier les « loop » de WordPress…

Mais ça c’était avant que je devienne pote avec Captain Hook ! 🙂

Oui, avant faire quoique se soit sous WordPress, pensez à regarder si un hook pourrait vous rendre service !

Et c’est bien sur le cas pour nos CPT…

Il s’agit du hook « pre_get_posts« , qui va nous permettre de reprendre la main, avant que WordPress ne lance sa requête.

add_filter( 'pre_get_posts', 'my_get_posts' );
 
function my_get_posts( $query ) {
 
	
		$query->set( 'post_type', array( 'post', 'livre' ) ); // livre is our Custom Post Type
 
	return $query;
}

A noter que la fonction set nous permet de modifier n’importe quel paramètre de notre requête, pour plus de détails, reportez-vous à la classe WP_Query

Le problème avec ce code, c’est qu’il va modifier toutes les requêtes de votre site ! Il faut ajouter des restrictions à l’emploi de cette fonction.

ex: afficher les CPT uniquement sur la Home, et n’affecter que la requête principale (il peut y avoir plusieurs requêtes sur une même page !)

add_filter( 'pre_get_posts', 'my_get_posts' );

function my_get_posts( $query ) {

	if ( is_home() && $query->is_main_query() )
		$query->set( 'post_type', array( 'post', 'livre' ) );

	return $query;
}

Pour ajouter nos CPT à notre flux RSS, on ajoutera la condition is_feed()… ( Conditional Tag)

Vous trouverez certainement une utilisation de ce hook… c’est une bombe non ?? 🙂

Pods tips : Lazy load avec WP Rocket

Posted on by lipaonline

On ne présente plus le plugin de cache WP Rocket (enfin si ne le connaissait pas, c’est par ici)…

Il y a quelques temps, j’ai eu des soucis avec Pods et le lazy load de WP Rocket, mais, avec le concours des support des 2 plugins, l’explication et la résolution du problème a vite été trouvé 🙂

Comme je l’ai déjà dit, avec Pods, quelques fois « on sort des clous » de WordPress, ce n’est pas propre à ce plugin, cela peut être le cas dès qu’on code en PHP dans un thème…

WP Rocket, comme tout bon plugin, utilise des « hook » (des fonctions qui se greffent à des fonctions de WordPress), en l’occurrence the_post_thumbnail(), mais en dehors d’un post, cette fonction ne donne aucun résultat.

La solution est alors, de faire le lazy load « à la main »:

<?php $img = wp_get_attachment_image_src( $pods->field( 'photo.ID' ), 'full' ); ?>

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" 
data-lazy-original="<?php echo $img[0];?>" 
alt="<?php echo $pods->field( 'name' );?>" 
width=<?php echo $img[1];?> height=<?php echo $img[2];?>>

« photo » est le nom de votre champs image, « full » est la taille originale, pour plus de détails sur la fonction wp_get_attachment_image_src.

A noter que si vous utiliser des templates ou un champs WYSIWYG, Pods utilise alors la fameuse fonction the_post_thumbnail() , du coup, plus aucun problème de lazy load 🙂

WordPress Tips : Taille des images par défaut

Posted on by lipaonline

Lorsqu’on ajoute une image dans un article ou une page dans WordPress, il est fastidieux à chaque de devoir changer les options de cette image : avec ou sans lien, vignette ou taille normale, alignement centré ou à gauche etc…

Heureusement TooWP vous propose un petit hook pour cela 🙂

add_action( 'after_setup_theme', 'default_attachment_display_settings' );
/**
 * Set the Attachment Display Settings "Link To" default to "none"
 *
 * This function is attached to the 'after_setup_theme' action hook.
 */
function default_attachment_display_settings() {
	update_option( 'image_default_align', 'left' );
	update_option( 'image_default_link_type', 'none' );
	update_option( 'image_default_size', 'large' );
}

Explication :

image_default_align : configure l’alignement ; valeurs : left,right,center,none

image_default_link_type : pour le lien ; valeurs : file, post,custom,none

image_default_size : pour la taille de l’image ; valeurs : thumbnail, medium, large, full

La manière la plus simple de profiter de cette astuce, est d’ajouter ces lignes dans le fichier functions.php de votre thème… bientôt je vous proposerai d’autres méthodes 🙂