「Crop Thumbnails」サムネイル画像をトリミングできるワードプレスのプラグインにOGP設定

2021-08-14

Crop Thumbnailsとは

サムネイル画像をトリミングできるWordPressプラグイン。プラグインは画像サイズを追加せず、トリミング領域を編集する機能のみになる。

使い方は、記事作成のアイキャッチ画像登録の下やメディア・ライブラリーで画像を確認したときにでる下記のボタンを押すとTOP画像のようにトリミング場所を指定できる画面に移管する。

OGP画像とは

OGP画像はTWやFBでURL投稿をしたときに掲載されるサムネイルサイズ

横幅1200px、高さ675px。もしくは600 x 315 px。

見え方になるかは下記のサイトで確認すると良いと思う。

OGP確認ツール 

https://ogp.buta3.net/

OGP画像シミュレータ

http://ogimage.tsmallfield.com/

トリミング画像サイズを定義する方法

今回は 1200×630 のサイズで定義する

OGP画像のトリミングの指示をする

プラグイン＞プラグインエディター＞crop-thumbnails＞crop-thumbnails.phpに下記のコードを記入する

//画像を横幅1200px、高さ675pxにトリミングする場合
add_image_size('ogp1200x630', 1200, 630, true);

if ( has_post_thumbnail() ) {
the_post_thumbnail( 'ogp1200x630' );
}

新しいサムネイル画像サイズの使用

外観＞Cocoon＞tmpheader＞twitterｰcard.php

５７行目くらい

if (is_singular()){//単一記事ページの場合
	//0913書き換えたとこ
  if ($ogp_image = get_singular_sns_share_image_url()) {
    echo '<meta name="twitter:image" content="';echo the_post_thumbnail_url('ogp1200x630'); echo '">';echo "\n";
  }
} else {//単一記事ページページ以外の場合（アーカイブページやホームなど）
  if (is_category() && !is_paged() && $eye_catch = get_the_category_eye_catch_url(get_query_var('cat'))) {
    $ogp_image = $eye_catch;
  } elseif (is_tag() && !is_paged() && $eye_catch = get_the_tag_eye_catch_url(get_queried_object_id())) {
    $ogp_image = $eye_catch;
  } elseif ( get_ogp_home_image_url() ) {
    $ogp_image = get_ogp_home_image_url();
  } else {
    if ( get_the_site_logo_url() ){//ヘッダーロゴがある場合はロゴを使用
      $ogp_image = get_the_site_logo_url();
    }
  }
  if ( !empty($ogp_image) ) {//使えそうな$ogp_imageがある場合
	  //0913書き換えたとこ
echo '<meta name="twitter:image" content="';echo the_post_thumbnail_url('ogp1200x630'); echo '">';echo "\n";
  }
}

外観＞Cocoon＞tmp＞header-ogp.php

５７行目くらい

if (is_singular()){//単一記事ページの場合
	//0913書き換えたとこ
 if ($ogp_image = get_singular_sns_share_image_url()) {
  	echo '<meta property="og:image" content="';echo the_post_thumbnail_url('ogp1200x630'); echo '">';echo "\n";
}
} else {//単一記事ページページ以外の場合（アーカイブページやホームなど）
  if (is_category() && !is_paged() && $eye_catch = get_the_category_eye_catch_url(get_query_var('cat'))) {
	  //0913書き換えたとこ
    $ogp_image = the_post_thumbnail_url('ogp1200x630');
  } elseif (is_tag() && !is_paged() && $eye_catch = get_the_tag_eye_catch_url(get_queried_object_id())) {
	  //0913書き換えたとこ
    $ogp_image = the_post_thumbnail_url('ogp1200x630');
  } elseif ( get_ogp_home_image_url() ) {
    $ogp_image = get_ogp_home_image_url();
  } else {
    if ( get_the_site_logo_url() ){//ヘッダーロゴがある場合はロゴを使用
      $ogp_image = get_the_site_logo_url();
    }
  }
  if ( !empty($ogp_image) ) {//使えそうな$ogp_imageがある場合
	  //0913書き換えたとこ
   echo '<meta property="og:image" content="';echo the_post_thumbnail_url('ogp1200x630'); echo '">';echo "\n";
  }
}

プラグイン

説明したプラグインの詳細や入手はこちら。

Crop-Thumbnails