やっぱりなんだかんだ言って無料のワードプレステーマの中では「Cocoon」が頭ひとつ抜きん出ているよね。
どうも、Cocoon愛用中のだとばぐです。
「Cocoon」を使っているブロガーのみなさん、OGP画像をデフォルトのまま放置していないでしょうか？デフォルトのままだとSNSでブログのトップページをシェアしてもらった際に非常にダサい感じを醸し出してしまう恐れがあります。
この記事では「Cocoon」ユーザー向けにトップページのOGP画像を編集する方法をシェアしていきたいと思います。
OGP画像の重要性
まずはOGPという聴き馴染みのない単語から説明していきたいと思います。
OGPとはOpen Graph Protocolの略称。
headタグ内を見てみると、<meta property="og:image" content="hogehoge.jpg">というタグを見つけることができると思いますが、contentという属性内でOGP画像のURLを指定をしています。
OGP画像とはFacebookなどのSNSでシェアされた時にタイムラインに表示されるサムネイル画像のことです。
OGP画像はブログのジャケットのようなもの
ブログの記事を執筆した際に、ツイッターなどのSNSでシェアすると記事に追加したアイキャッチという画像が表示されるのを見たことがあると思います。SNSでシェアした記事がクリックされるかどうかは、このアイキャッチ画像にかかっていると言っても過言ではありません。
記事を執筆した際にアイキャッチ画像は多くの人が忘れずに設定していると思いますが、トップページのOGP画像についてはデフォルトのまま放置しているブロガーが実は少なくない。
特にワードプレステーマ「Cocoon」のトップページのOGP画像については編集するのがわかりにくいため放置されがちです。
OGP画像は自分のブログの個性を出せる部分なので、せっかくならデフォルトのままではなくオリジナル画像を設定したいところです。
CocoonのOGP画像を変更する
「Cocoon」で子テーマを使わずに親テーマのみを使ってブログを運営している場合、テーマファイルであるcocoon-masterというディレクトリ内にあるscreenshot.jpgというファイルを変更することでOGP画像を変更することができます。
ただこの方法では、親テーマの定期的なアップデートにより毎回上書きされてしまうので、その都度変更しなくてはならずめちゃくちゃ面倒くさいことになります。この方法はマジでおすすめできません。
「Cocoon」は子テーマを使おう
「Cocoon」ではテーマファイルを編集する場合、子テーマを作ることが推奨されています。
子テーマの作り方は非常に簡単で、「Cocoon」公式サイトからダウンロードした雛形をサーバーにアップロードするだけで完了します。
子テーマのディレクトリ内にもscreenshot.jpgというファイルはあるのですが、このファイルを変更してもなぜか「Cocoon」トップページのOGP画像は変更されません。
子テーマのfunctions.phpにコピペ
SNSでトップページをシェアされた際のOGP画像を設定するために、まずは子テーマのfunctions.phpを編集します。cocoon-child/functions.phpを開くと上から７行目あたりに以下に子テーマ用の関数を書くというコメントを発見できるかと思います。
指示通りにコメントの下の行に以下をコピペしていきます。
if ( !function_exists( 'set_my_ogp_home_image' ) ) {
function set_my_ogp_home_image () {
$def_url = get_stylesheet_directory_uri() . '/ogp_home_image.jpg';
$url = trim($def_url);
return $url;
}
add_filter('get_ogp_home_image_url', 'set_my_ogp_home_image');
}
以上。
めちゃくちゃ簡単ですね。
上記ではogp_home_image.jpgという名前のjpg画像ファイルを子テーマ直下にアップロードするだけで、OGP画像がogp_home_image.jpgへと変更されます。
プログラミング学習をするならUdemyが絶対おすすめ
独学でプログラミング学習をするならUdemyというサービスが一番おすすめです。
動画を見ながら同時進行でプログラミングの学習ができるので、書籍での学習と比べても上達するスピードが期待できます。
学習内容はプログラミングだけではなく、FXや株、SEOやブログ運営のノウハウなど非常に多岐にわたっているので、必ず自分の興味のある分野の講座が見つかると思います。
もちろんWordpressを使ったWebサイト構築の講座もあります。
今なら30日間返金保証付きなので、30日間だけお試しに使ってみるのもあり。
30日あればWordpressの講座なら一通りマスターできると思います。
「Cocoon」内ではどのような動きでOGP画像を設定しているかを説明（読み飛ばし可）
cocoon-master/tmp/header-ogp.phpというファイルの67行目（下の例では13行目）にあるget_ogp_home_image_url()という関数でトップページのOGP画像を設定しています。
基本的にこの関数は、親テーマの`screnshot.jpgを参照しているのですが、個人的にはヘッダーロゴがある場合を優先順位に記述するべきだと思ったり思わなかったり。
if (is_singular()){//単一記事ページの場合
if ($ogp_image = get_singular_sns_share_image_url()) {
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_query_var('tag_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がある場合
echo '';echo "\n";
}
}ちなみに、このget_ogp_home_image_url()はcocoon-master/lib/page-settings/ogp-funcs.phpというファイル内に記述されています。
//ホームイメージ
define('OP_OGP_HOME_IMAGE_URL', 'ogp_home_image_url');
if ( !function_exists( 'get_ogp_home_image_url' ) ):
function get_ogp_home_image_url(){
$def_url = get_template_directory_uri().'/screenshot.jpg';
$url = get_theme_option(OP_OGP_HOME_IMAGE_URL, $def_url);
$url = trim($url);
if (empty($url)) {
$url = $def_url;
}
return apply_filters('get_ogp_home_image_url', $url);
}
endif;
関数内で関数と同じ名前でapply_filtersをするので一瞬訳が分からなくなりかけましたが、apply_filtersの動きを考えるとなんとなく理解できてきます。
要は、apply_filters関数で'get_ogp_home_image_url'というアクションフックを新規登録しているということ。
上記の5行目の$def_urlではget_template_directory_uri()関数を使っているので、子テーマからでも親テーマのディレクトリURIを取得します。子テーマのディレクトリURIを取得するならget_stylesheet_directory_uri()を使いましょう。
