Tag : wordpress

Rendre compatible son blog wordpress avec le nouveau like de facebook

Cela ne vous a certainement pas échappé mais le bouton like a changé (cf l’article d’hier). Ce nouveau like prenant maintenant une image sur votre blog, il faut donc maintenant aider facebook à prendre une image adaptée au contenu de l’article et ainsi éviter que facebook pioche une image au hasard.

Donc pour associer une image à un article il faut utiliser et composer avec Open Graph de Facebook et intégrer une nouvelle balise dans le header de votre blog pour indiquer l’image à miniaturiser. Pour wordpress, le code générique à intégrer dans le fichier header.php est le suivant :

<meta property="og:image" content="<?php echo wp_get_attachment_url( get_post_thumbnail_id( $post->ID ) ); ?>"/>

Une fois intégré le bouton like prendra automatiquement l’image intégrée dans l’article. Si jamais votre article n’a pas d’image vous pouvez bien entendu lui donner une option par défaut comme par exemple :

<?php if ( has_post_thumbnail() ) { ?>
<meta property="og:image" content="<?php echo wp_get_attachment_url( get_post_thumbnail_id( $post->ID ) ); ?>"/>
<?php } else { ?>
<meta property="og:image" content="<?php bloginfo('template_url'); ?>/images/defaut.png"/>
<?php }?>

Et si vous préférez ne pas toucher au fichier header.php vous pouvez intégrer une fonction dans le fichier function.php :

// add image to facebook like button
function fb_like_thumb() {
if ( has_post_thumbnail() ) { ?>
<meta property="og:image" content="<?php echo wp_get_attachment_url( get_post_thumbnail_id( $post->ID ) ); ?>"/>
<?php } else { ?>
<meta property="og:image" content="<?php bloginfo('template_url'); ?>/images/defaut.png"/>
<?php }
}

add_action('wp_head', 'fb_like_thumb');

Et voilà vous voici compatible avec le like de facebook!

02-3-2011 | 21

Exclure des catégories de la page d’accueil avec wordpress 3.1

Et oui cette nouvelle version de wordpress n’est pas sans bug. Preuve en est celui de l’exclusion d’une ou plusieurs catégories de la boucle des articles. Sur le principe cette fonction est très pratique pour ne pas diffuser certains articles dans votre flux RSS ou bien sur la page d’accueil du site.

Afin d’avoir quelque chose de fonctionnel voici le nouveau bout de code à intégrer dans votre fichier functions.php de votre thème.

// Exclude category from home
function myFilter($query) {
	if ($query->is_home) {
		$query->set('category__not_in',array(39,10));
	}
return $query;
}
add_filter('pre_get_posts','myFilter');

Dans l’exemple ci-dessus on utilise donc category__not_in au lieu de cat. J’exclue donc les catégorie 10 et 39.

Ce bug est identifié chez wordpress.

24-2-2011 | 6

Désactiver la nouvelle barre d’administration de WordPress 3.1

Vous l’avez peut être vu mais la nouvelle version de wordpress vient juste d’être disponible en téléchargement. Parmi les nouveautés, vous verrez l’apparition d’une nouvelle barre d’administration qui vient se poser en haut de votre blog une fois que vous êtes loggé. Certains ne vont pas apprécier cette intrusion, alors plutôt que de hacker votre wordpress, sachez que cette barre se désactive simplement via une option dans votre back office.

En effet en allant sous utilisateurs>votre profil vous allez trouver une nouvelle option qu’il va falloir désactiver. Et puis c’est tout!

Personnellement je viens de la désactiver car je la trouve pas assez complète version versus celle de Viper007 qui malheureusement va arrêter le support de cette dernière…

23-2-2011 | 1

Afficher un flux RSS sur son blog wordpress

Vous le savez très certainement mais il est possible et très facilement d’afficher des flux RSS d’autres sites directement dans sa barre latérale ou ailleurs, c’est selon l’envie et vos compétences! Pour afficher facilement un flux il suffit d’aller dans la sélection des widgets de votre thème et de sélectionner « Flux ».

Mais ce que vous ne savez pas c’est que vous pouvez en faire plus avec un flux et faire un peu de mise en page, dans ce cas le widget ne vous servira plus à rien il va falloir bidouiller un peu. Voici un bout de code qui permet d’extraire l’image d’un flux et de l’afficher à côté du texte, l’affichage sera donc plus élégant.


< ?php
$url = 'http://www.votreurldeflux.com/';
$rss = fetch_feed( $url );
// Figure out how many total items there are, but limit it to 5.
$maxitems = $rss->get_item_quantity(1);
// Build an array of all the items, starting with element 0 (first element).
$rss_items = $rss->get_items(0, $maxitems);
if ($maxitems == 0) echo 'No items.';
else
// Loop through each feed item and display each item as a hyperlink.
foreach ( $rss_items as $item ) : 
$feedDescription = $item->get_content();
$image = returnImage($feedDescription);
$image = scrapeImage($image);
echo '';
?>
< ?php echo $item->get_title(); ?>

< ?php
$description = strip_tags( $feedDescription );
$char_limit        = 180;
if( strlen( $description ) > $char_limit ) {
$description = substr( $description, 0, $char_limit ) . ' ... ';
}
echo $description; ?>

< ?php endforeach; ?>

Mais lorsque le flux RSS que vous diffusez (celui qui ne vous appartient pas donc) part en carafe et bien cela fait une belle erreur fatale (ce qui fut le cas sur mon blog de décoration hier). Alors voici comment en 5 secondes faire en sorte que tout ne plante pas :


< ?php 
$url = 'http://www.votreurldeflux.com/';
$feed = fetch_feed( $url );
if ( is_wp_error( $feed ) ) {
   echo $rss->get_error_message(); // tout ce que vous voulez afficher par défaut
} else {
   // do your stuff here
}
?>

A vous de faire un peu de mise en forme! Mais c’est qui est utilisé sur les articles des partenaires sur le blog de décoration.

Source trac WP

02-12-2010 | 5

La bible wordpress 3.0

La mise à jour du livre « WordPress 3.0 » des compères Amaury Balmer, Francis Chouquet et Xavier Borderie vient de paraitre. Comme pour la première édition on trouve l’essentiel et plus pour gérer un blog sous wordpress mais aussi pour développer des plugins ou encore un thème.

Un livre en vente sur amazon (31,35€). Et puis si vous ne trouvez pas votre bonheur dans ce bouquin il reste le forum de wordpress-fr qui est très actif et réactif!

13-10-2010 | 2

Ajoutez un effet d’apparition fluide sur vos images

Voici un petit script qui théoriquement vous permettra d’améliorer la qualité de l’expérience utilisateur sur votre site et blog. Sur le principe vous allez faire afficher les images uniquement lorsque le visiteur pourra les voir avec un petit effet fade in très sympathique. Ce script jQuery « Lazy Load » est disponible sous la forme d’un script jQuery mais aussi sous la forme d’un plugin pour wordpress, Image Lazy Load, alors n’hésitez pas à vous faire plaisir.

Quelques images pour la démonstration (cela ne marchera pas dans votre lecteur RSS) :

Par ailleurs si vous utilisez le plugin wp-minify sachez qu’il faudra commenter les lignes 15, 16 et 17 du fichier jquery-image-lazy-loading.php comme cela :

< ?php
   
  /*
  Plugin Name: jQuery lazy load plugin
  Plugin URI: http://github.com/ayn/wp-jquery-lazy-load/
  Description: a quick and dirty wordpress plugin to enable image lazy loading.
  Version: v0.10
  Author: Andrew Ng
  Author URI: http://blog.andrewng.com
  */

function jquery_lazy_load_headers() {
  $plugin_path = plugins_url('/', __FILE__);
  $lazy_url = $plugin_path . 'javascripts/jquery.lazyload.mini.js';
//  $jq_url = 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js';
//  wp_deregister_script('jquery');
//  wp_enqueue_script('jquery', $jq_url, false, '1.4.2');
  wp_enqueue_script('jquerylazyload', $lazy_url, 'jquery', '1.5.0');
}

function jquery_lazy_load_ready() {
  $placeholdergif = plugins_url('images/grey.gif', __FILE__);
  echo <<
jQuery(document).ready(function($){
  if (navigator.platform == "iPad") return;
  jQuery("img").lazyload({
    effect:"fadeIn",
    placeholder: "$placeholdergif"
  });
});

EOF;
}

  add_action('wp_head', 'jquery_lazy_load_headers', 5);
  add_action('wp_head', 'jquery_lazy_load_ready', 12);
?>

09-7-2010 | 9

Ajouter des images pour les articles relatifs

Certains sites ou blogs proposent des contenus fortement axés sur le visuel, c’est le cas de mon blog déco ou encore du blog auto, ces deux supports mettent en avant des produits et donc des images. Les articles relatifs qui étaient proposés à la fin de chaque article étaient uniquement sous un format texte (comme sur 2803.fr), malheureusement ce format peu visuel n’incitait pas les visiteurs à poursuivre plus loin.

En septembre 2008, papygeek m’avait fourni son code pour intégrer ces vignettes des articles relatifs. Depuis plusieurs plugins pour les blogs WordPress proposent cette navigation visuelle.

Le premier est un vieux de la vieille qui permet d’afficher les articles relatifs sur 2803.fr : WordPress Related Posts qui fonctionne avec les tags, ce dernier permet d’afficher les vignettes mais il faut lui donner un champs personnalisé, il n’est pas suffisamment malin pour trouver cette vignette ou encore pour la générer au cas par cas. Il est donc fonctionnel mais pas tellement pratique pour l’affichage de ces thumbnails.

Le second, Wp-Thumbie, est installé sur Blog Deco Design et Blog 4 Auto. Il est beaucoup plus simple à utiliser et à configurer. En 30 secondes vous aurez des petites images sous vos articles. L’inconvénient de ce dernier est qu’il n’utilise pas les tags des articles pour trouver les articles similaires mais les titres (donc moins performant à mon avis), les vignettes sont générées à la volée par TimThumb. L’exclusion de certaines catégories ne fonctionne pas chez moi vous me direz si vous y arrivez… Globalement c’est un excellent choix pour les blogs avec du visuel, vous allez augmenter votre nombre de pages vues et peut être diminuer le bounce rate!

27-5-2010 | 8

Intégrer le bouton like de Facebook sur un site Internet

Vous le savez certainement mais Facebook a fait quelques changements (encore une fois) en ce qui concerne les plugins mis à disposition des éditeurs de sites et des développeurs. Ainsi on ne va donc plus parler du bouton « partager » ou « share » ni d’ailleurs de « devenir fan » ou « become fan » qui d’un coup deviennent obsolètes. Donc maintenant on remplace tout cela par le bouton « like » ou « j’aime » en français. Dans un sens c’est plus simple mais un peu perturbant vis à vis des pages fans car on peut aussi bien aimer un article qu’un site maintenant…

L’intérêt de ce bouton like est qu’il est simple, très simple même. Avec un clic un internaute (qui sera logué sur son compte facebook) pourra aimer l’un de vos articles et le faire savoir à ses amis sur facebook. Un système de notation comme avec les étoiles sauf que dans ce cas c’est social, donc plus proche de la recommandation.

Tous les nouveaux plugins proposés par Facebook sont sur cette page : http://developers.facebook.com/plugins. Pour mon usage seul le bouton « like » est utile pour l’instant car les autres ralentissent fortement le chargement des pages donc exit l’affichage des photos des membres (2 secondes de plus en général).

Alors pour intégrer le bouton « like » sur votre blog rien de plus simple il suffit d’aller sur cette page et de choisir ses options (affichage d’un texte avec le nom des personnes, leur photo, le mot à afficher : like ou recommend, la police à utiliser et le thème du bouton : couleur claire ou foncée).

Vous allez donc avoir un code de ce type pour la homepage de 2803.fr :

Pour le rendre dynamique sur votre blog (wordpress) il faut l’intégrer dans le fichier single.php dans votre thème et surtout faire un modification sur l’url qui devra être :

< ?php echo urlencode(get_permalink($post->ID)); ?>

Le code utilisé sur 2803.fr est donc le suivant :

Finalement c’est plutôt facile et pas besoin de plugin sur ce coup. Libre à vous de l’intégrer où vous le souhaitez en bas ou en haut de l’article…

26-4-2010 | 28