在 WordPress 中为 post 生成动态元图像

Question

如果用户未提供任何缩略图，

GitHub 会自动为每个包含动态内容的存储库生成元标记图像。例如： <meta property="og:image" content="https://opengraph.githubassets.com/6fa26478850d4904c9e8567353350c87f35c71f7232cce8eec1d44e3ba1ca9a3/e-labInnovations/qr-code-speech"> 这是我的存储库之一的元图像 https://github.com/e-labInnovations/qr-code-speech

我想在我的 wordpress 上实现这个功能。生成包含 post title、date、author name 和 author avatar image.

的动态 png 图像

在 WordPress 中可以吗？如果是，那又如何？

Answer 1

function.php

<?php
 
add_action( 'init',  function() {
    add_rewrite_rule( 'ashad-thumbnail/([a-z0-9-]+)[/]?$', 'index.php?ashad-thumbnail=$matches[1]', 'top' );
} );
 
add_filter( 'query_vars', function( $query_vars ) {
    $query_vars[] = 'ashad-thumbnail';
    return $query_vars;
} );

 
add_action( 'template_include', function( $template ) {
    if ( get_query_var( 'ashad-thumbnail' ) == false || get_query_var( 'ashad-thumbnail' ) == '' ) {
        return $template;
    }
 
    return get_template_directory() . '/templates/ashad-thumbnail.php';
} );
 
?>

ashad-thumbnail.php

<?php
    //setting content type as png
    header ('Content-Type: image/png');
    //create image object
    $img = imagecreatetruecolor(1200, 600)
          or die('Cannot Initialize new GD image stream');
 
    //Colors
    $background_color = imagecolorallocate($img, 255, 255, 255);
    $color_primary = imagecolorallocate($img, 50, 50, 50);
    $color_secondary = imagecolorallocate($img, 100, 100, 100);
    $post_id = get_query_var('ashad-thumbnail');
 
    //setting background color
    imagefill($img, 0, 0, $background_color);
 
    //getting author name using author_id
    $author_id = get_post_field ('post_author', $post_id);
    $display_name = get_the_author_meta( 'display_name' , $author_id );
 
    // $text = "Post Id: " . get_query_var( 'ashad-thumbnail' ) . get_comments_number($post_id);
    // imagestring($img, 5, 10, 10, $text, $color_primary);
 
    //loading ttf fonts
    $fontSemiBold = get_stylesheet_directory() . '/assets/fonts/TitilliumWeb-SemiBold.ttf';
    $fontRegular = get_stylesheet_directory() . '/assets/fonts/TitilliumWeb-Regular.ttf';
 
    //creating icon image objects
    $icon_calendar = imagecreatefrompng(get_stylesheet_directory() . '/assets/img/icon_calendar.png');
    $icon_comments = imagecreatefrompng(get_stylesheet_directory() . '/assets/img/icon_comments.png');
 
    //creating site icon(favicon) image object
    $site_icon = imagecreatefrompng(get_site_icon_url(200));
    //getting title
    $title = get_the_title(get_query_var( 'ashad-thumbnail' )) ? get_the_title($post_id) : 'Error';
    
    if(strlen($title) > 21) {
        $titleArray = explode("\n", wordwrap( $title, 26));
        $titleL1 = $titleArray[0];
        if($titleArray[1]) {
            if($titleArray[2]) {
                $titleL2 = $titleArray[1] . '...';
            } else {
                $titleL2 = $titleArray[1];
            }
        } else {
            $titleL2 = flase;
        }
    } else {
        $titleL1 = $title;
    }
 
    $fsize = 48;
    //showing title line 1 and 2
    imagettftext($img, $fsize, 0, 80, 140, $color_primary, $fontSemiBold, $titleL1);
    if($titleL2) {
        imagettftext($img, $fsize, 0, 80, 210, $color_primary, $fontSemiBold, $titleL2);
    }
 
    //showing author name
    if($display_name) {
        imagettftext($img, 26, 0, 80, 295, $color_secondary, $fontRegular, 'By ' . $display_name);
    }
    
    //showing site_icon
    imagecopyresized($img, $site_icon, 922, 80, 0, 0, 200, 200, 200, 200);
 
    //showing date icon and date
    imagecopyresized($img, $icon_calendar, 80, 450, 0, 0, 32, 32, 16, 16);
    imagettftext($img, 26, 0, 130, 478, $color_primary, $fontRegular, get_the_date('F j, Y', $post_id));
    
    //showing a circle and post type label
    imagearc($img, 550, 465, 32, 32, 0, 360, $color_primary);
    imagettftext($img, 26, 0, 580, 478, $color_primary, $fontRegular, get_post_type_object(get_post_type($post_id))->labels->singular_name);
 
    //showing comments icon and count
    imagecopyresized($img, $icon_comments, 900, 450, 0, 0, 32, 32, 16, 16);
    imagettftext($img, 26, 0, 950, 478, $color_primary, $fontRegular, get_comments_number($post_id));
 
    imagepng($img);
    imagedestroy($img);
?>

要获取此缩略图，请使用 example.com/ashad-thumbnail/:post_id。将 post_id 替换为真正的 post id

示例图片

备注

我使用了两种 google 字体作为 ttf 格式。

在 WordPress 中为 post 生成动态元图像

Generate dynamic meta image for post in WordPress

wordpress

wordpress-theming

png

meta-tags

wordpress-plugin-creation