PR PR

アイキャッチ画像がない場合後でプラグイン使わずアイキャッチ画像設定方法

スポンサーリンク
新着情報
2023.04.09
2023.04.06
2023.04.03
2023.03.19
スポンサーリンク
スポンサーリンク
Blogger
記事内に広告が含まれています。

先日の記事にて、BloggerブログからWordPressへの移行方法を簡単に長めの記事にしました。

BloggerブログからWordPressに移行する方法
BloggerブログからWordPressに移行する方法
BloggerブログからWordPressに移行する方法です。

スポンサーリンク

ですが、Bloggerブログやその他FC2ブログなどの場合にはアイキャッチ画像を設定することができません。なのでWordPressに移行したとしてもWordPressにおいてはアイキャッチ画像がない状態になってしまいます。

スポンサーリンク
カスタム検索
スポンサーリンク
  1. アイキャッチ画像がない場合や設定し忘れてしまった場合に、プラグインを使用しないでアイキャッチ画像を後から追加する方法です。
  2. プラグインを使わないということは、function.phpにコードを追加していくということになります。function.phpはとても大切なのでバックアップを必ずとってからにしましょう。
    1. そういった内容ではないので、そういう内容でお困りの方は記事作成時にアイキャッチ画像を自動追加させるfunction.phpに追加するコードを追加してください。
  3. 今回は、過去記事にアイキャッチ画像を設定もしくはアイキャッチ画像がない場合に後でアイキャッチ画像を表示させる方法を記載します。
    1. また、上記コードは記事内にある一番目の画像を自動的にアイキャッチ画像に設定するようになっています。
  4. 今回は独自関数なので、<?the_post_thumbnail();?>にて呼び出すことはできません。
  5. 参照サイトです。とても助かりました。
    1. 上記サイトには、独自関数のみではなく通常のアイキャッチ画像のコードもありますので、とても為になります。通常のアイキャッチ画像表示方法でも全く問題なく表示されます。
  6. ですので、独自関数にて過去記事の投稿にアイキャッチ画像を表示させるようにしました。
  7. 最後にテーマによってはアイキャッチ画像にCSSにて装飾したりCSSにてアイキャッチ画像などの画像を判断されているようなのもあるので、通常の方法で実施しても独自関数で実施してもテーマ側で画像と判断されるCSSコードをhtmlとして出力する際に同時に
  8. プラグインを使用してアイキャッチ画像を設定する場合には以下のようなAuto Featured Image (Auto Post Thumbnail)プラグインやXO Featured Image Toolsプラグインがあります。

アイキャッチ画像がない場合や設定し忘れてしまった場合に、プラグインを使用しないでアイキャッチ画像を後から追加する方法です。

WordPressにおいてはプラグインを使用することによって多くの拡張機能が利用可能になります。ですがプラグインを追加すればする程セキュリティ的にもサイトの表示速度やサイトの軽さが重く?なってしまいます。

なので、出来得る限りはプラグインを使用しないほうが良いと考えます。セキュリティ的なプラグインを除いてですが、セキュリティ的なプラグインも良く吟味した方が良いと思います。

スポンサーリンク

プラグインを使わないということは、function.phpにコードを追加していくということになります。function.phpはとても大切なのでバックアップを必ずとってからにしましょう。

アイキャッチ画像を設定し忘れない為の、自動追加的なコードでしたら比較的簡単に追加可能です。いくつかの紹介サイトにてそのコードは複数掲載されています。

サムネイル画像が設定されていない場合、かわりの画像をfunctions.phpで出力させる為の簡単なコードはないでしょうか?投稿サムネイルのリンクを見て思うに、elseとget_template_directory_uri();を組み合わせるとよさげなものができそうなのですが、、

そういった内容ではないので、そういう内容でお困りの方は記事作成時にアイキャッチ画像を自動追加させるfunction.phpに追加するコードを追加してください。

スポンサーリンク

今回は、過去記事にアイキャッチ画像を設定もしくはアイキャッチ画像がない場合に後でアイキャッチ画像を表示させる方法を記載します。

以下のコードをfunction.phpに追記します。

if ( ! function_exists( 'nxw_get_post_thumbnail' ) ) {
  function nxw_get_post_thumbnail( $post_id = null, $size = 'post-thumbnail' ) {
    if ( has_post_thumbnail( $post_id ) ) {
      $thumbnail_id = get_post_thumbnail_id( $post_id );
      $thumbnail_url = wp_get_attachment_image_url( $thumbnail_id, $size );
      $thumbnail_alt = get_post_meta( $thumbnail_id, '_wp_attachment_image_alt', true );
      $thumbnail_title = get_the_title( $thumbnail_id );

      if ( empty( $thumbnail_alt ) ) {
        $thumbnail_alt = $thumbnail_title ? $thumbnail_title : get_the_title( $post_id );
      }
    } else {
      preg_match( '/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', get_the_content( $post_id ), $matches );
      $thumbnail_url = ! empty( $matches[1] ) ? $matches[1] : get_theme_file_uri( 'images/no-thumbnail.png' );
      $thumbnail_alt = get_the_title( $post_id );
    }

    return sprintf(
      '<img src="%s" alt="%s">',
      esc_url( $thumbnail_url ),
      esc_attr( $thumbnail_alt )
    );
  }
}

if ( ! function_exists( 'nxw_the_post_thumbnail' ) ) {
  function nxw_the_post_thumbnail( $post_id = null, $size = 'post-thumbnail' ) {
    echo nxw_get_post_thumbnail( $post_id, $size );
  }
}

上記コードの場合には、独自関数になりますので、WordPressの管理画面でのアイキャッチ画像部分には表示されません。

アイキャッチ画像を設定し忘れてしまった場合にプラグインを使わずに表示

このようにWordPressの管理画面では、すべてのアイキャッチ画像は表示されませんが、投稿記事においてはWordPressのテーマによりますがアイキャッチ画像の設定項目があるテーマの場合には表示されるようになります。

また、上記コードは記事内にある一番目の画像を自動的にアイキャッチ画像に設定するようになっています。

アイキャッチ画像のアクションフックが、

<?the_post_thumbnail();?>

なので基本的なテーマや通常のWordPressでは上記のにて呼び出すことができます。また、それが基本でもあります。

スポンサーリンク

今回は独自関数なので、<?the_post_thumbnail();?>にて呼び出すことはできません。

上記した独自関数を呼び出すには該当関数にて呼び出すことになりますので、以下のコードにて表示したい部分のテンプレートに追記します。

<?nxw_the_post_thumbnail();?

この独自関数の呼び出すコードを記載しなければ、いつまで経ってもアイキャッチ画像は表示されませんので、ご自分が表示させたいテンプレートの部分に記載し忘れにご注意してください。

スポンサーリンク

参照サイトです。とても助かりました。

WordPressでアイキャッチを利用するテーマの場合、登録されなかったときの処理として記事内にあるひとつ目の画像やあらかじめ用意しておいた代替画像をアイキャッチとして表示させることが多いのですが、そのようなときに使えるスニペットの備忘録です。

上記サイトには、独自関数のみではなく通常のアイキャッチ画像のコードもありますので、とても為になります。通常のアイキャッチ画像表示方法でも全く問題なく表示されます。

※テーマによっては、通常のアイキャッチ画像呼び出しコードですと投稿記事においてアイキャッチ画像を表示する設定にしていますと、2回同じ処理が行われることになり2つアイキャッチ画像が表示されてしまいます。(Cocoonなど。他にもあると思われます。他に人気記事Popular Postのアイキャッチ画像もすべて同じになってしまいます。)

スポンサーリンク

ですので、独自関数にて過去記事の投稿にアイキャッチ画像を表示させるようにしました。

また、コード内の投稿記事内に画像がなかった場合に表示させるデフォルト画像のURL部分はご自分で用意してthemeのimageフォルダ内にFTPなどでアップロードしておきましょう。

該当部分のコードは以下です。

'images/no-thumbnail.jpg'

この部分をファイル名を変更した時には、変更された画像ファイル名にします。また、拡張子も.jpgでなければ同じになるように修正します。

デフォルトで設定したいアイキャッチ画像の拡張子が、
.jpgでなければ.pngにします。

スポンサーリンク

最後にテーマによってはアイキャッチ画像にCSSにて装飾したりCSSにてアイキャッチ画像などの画像を判断されているようなのもあるので、通常の方法で実施しても独自関数で実施してもテーマ側で画像と判断されるCSSコードをhtmlとして出力する際に同時に

<div class="eye-catch-wrap<?php echo $display_none; ?>">

<div class="eye-catch-wrap<?php echo $display_none; ?>">

などのCSSも一緒にoutputしてしまうと、
2回アイキャッチ画像が出力されて2回表示されるようになりますのでご注意してください。

(今のところ当ブログも・・・。)

スポンサーリンク

スポンサーリンク

プラグインを使用してアイキャッチ画像を設定する場合には以下のようなAuto Featured Image (Auto Post Thumbnail)プラグインやXO Featured Image Toolsプラグインがあります。

Automatically generate the Featured Image from the first image in post or any custom post type only if Featured Image is not set manually. Featured Image Generation From Title. Native image search for Elementor, Gutenberg, Classic Editor.
投稿の画像からアイキャッチ画像を自動生成します。
This session is using  IPv4  is established in
スポンサーリンク
本ページはプロモーションが含まれています。
BloggerWordPress伝えたいこと備忘録
スポンサーリンク
ioをフォローする
スポンサーリンク
スポンサーリンク
〜備忘録〜

カテゴリー

スポンサーリンク
タイトルとURLをコピーしました