Ajouter automatiquement le thumbnail d’un post (image et Youtube) sur WordPress [functions + PHP + CSS]

Ce code permet d’ajouter automatiquement une image miniature pour un post sur WordPress. Le choix se fera en fonction de sa position dans le post (la première image ou video Youtube).

L’avantage de ce code est qu’il permet de mettre une miniature à partir d’une vidéo youtube. Ce qui sera visible dans les pages Archives.php ou Index.php (ou ailleurs selon votre choix ou votre thème)

Dans fonctions.php :

// recherche de l'image sur le post
function post_thumbnail( $post_id ){

$post = get_post($post_id);
$post_thumbnail = get_post_meta($post_id, '_thumbnail_id', true);

if ( has_blocks( $post->post_content ) && empty($post_thumbnail) ) {
$blocks = parse_blocks( $post->post_content );

$find = false;
$i = 0;
$blocks_length = count($blocks);
while(!$find && $i < $blocks_length){
$block = $blocks[$i];
if($block['blockName'] === 'core-embed/youtube' || $block['blockName'] === 'core/image' ){
$find = true;
}
$i++;
}

if(!$find){
return;
}else{
$attributs = $block['attrs'];

if($block['blockName'] === 'core/image'){
update_post_meta( $post_id, '_thumbnail_id', $attributs['id'], '' );
}else{
$explode_video_url = explode('v=', $attributs['url']);
$video_id = $explode_video_url[1];
$video_thumbnail_url = 'https://img.youtube.com/vi/'. $video_id . '/hqdefault.jpg';
$image_id = crb_insert_attachment_from_url($video_thumbnail_url, $post_id);
update_post_meta( $post_id, '_thumbnail_id', $image_id, '' );
}
}
}

}

add_action('save_post' ,'post_thumbnail' ,10 ,1);

// Fonction qui permet de télécharger une photo de miniature à partir de son URL

function crb_insert_attachment_from_url($url, $parent_post_id = null) {

if( !class_exists( 'WP_Http' ) )
include_once( ABSPATH . WPINC . '/class-http.php' );

$http = new WP_Http();
$response = $http->request( $url );
if( $response['response']['code'] != 200 ) {
return false;
}

$upload = wp_upload_bits( basename($url), null, $response['body'] );
if( !empty( $upload['error'] ) ) {
return false;
}

$file_path = $upload['file'];
$file_name = basename( $file_path );
$file_type = wp_check_filetype( $file_name, null );
$attachment_title = sanitize_file_name( pathinfo( $file_name, PATHINFO_FILENAME ) );
$wp_upload_dir = wp_upload_dir();

$post_info = array(
'guid'           => $wp_upload_dir['url'] . '/' . $file_name,
'post_mime_type' => $file_type['type'],
'post_title'     => $attachment_title,
'post_content'   => '',
'post_status'    => 'inherit',
);

// Create the attachment
$attach_id = wp_insert_attachment( $post_info, $file_path, $parent_post_id );

// Include image.php
require_once( ABSPATH . 'wp-admin/includes/image.php' );

// Define attachment metadata
$attach_data = wp_generate_attachment_metadata( $attach_id, $file_path );

// Assign metadata to attachment
wp_update_attachment_metadata( $attach_id,  $attach_data );

return $attach_id;

}

Ajouter une image sur le thumbnail qui permettra de faire comprendre à vos visiteurs qu’il s’agit d’un post avec une vidéo.

A placer dans votre thème (ex : archive.php ou index.php)

<picture>
                  <?php the_post_thumbnail('thumbnail'); ?>
                  <?php 
                    global $post;
                    
                    if( has_blocks($post->post_content) ){
                      $blocks = parse_blocks( $post->post_content );
                      $find = false;
                      $i = 0;
                      $blocks_length = count($blocks);
                      while(!$find && $i < $blocks_length){
                        $block = $blocks[$i];
                        if($block['blockName'] === 'core-embed/youtube' || $block['blockName'] === 'core/image' ){
                          $find = true;
                        }
                        $i++;
                      }
                      if($find){
                        if($block['blockName'] === 'core-embed/youtube'){
                          echo '<span class="playbutton"></span>';
                        }
                      }
                    }
                  ?>
</picture>

 

Toujours pour le bouton ajouter cette image. Ajouter dans votre thème le bouton suivant (ou un autre plus à votre goût)

 

 

Dans votre feuille de style (CSS) – à vous de changer le chemin de votre image sur votre feuille des style

.playbutton {
  background: url('img/bouton-youtube.png') center center no-repeat; 
  position: absolute;
  top: 25%;
  left: 50%;
  width: 74px;
  height: 74px;
  margin: -35px 0 0 -35px;
  z-index: 10;
  opacity:0.6;
}
.playbutton:hover { 
  opacity:1.0;
}