先日の記事にて、BloggerブログからWordPressへの移行方法を簡単に長めの記事にしました。
ですが、Bloggerブログやその他FC2ブログなどの場合にはアイキャッチ画像を設定することができません。なのでWordPressに移行したとしてもWordPressにおいてはアイキャッチ画像がない状態になってしまいます。
- アイキャッチ画像がない場合や設定し忘れてしまった場合に、プラグインを使用しないでアイキャッチ画像を後から追加する方法です。
- プラグインを使わないということは、function.phpにコードを追加していくということになります。function.phpはとても大切なのでバックアップを必ずとってからにしましょう。
- 今回は、過去記事にアイキャッチ画像を設定もしくはアイキャッチ画像がない場合に後でアイキャッチ画像を表示させる方法を記載します。
- 今回は独自関数なので、<?the_post_thumbnail();?>にて呼び出すことはできません。
- 参照サイトです。とても助かりました。
- ですので、独自関数にて過去記事の投稿にアイキャッチ画像を表示させるようにしました。
- 最後にテーマによってはアイキャッチ画像にCSSにて装飾したりCSSにてアイキャッチ画像などの画像を判断されているようなのもあるので、通常の方法で実施しても独自関数で実施してもテーマ側で画像と判断されるCSSコードをhtmlとして出力する際に同時に
- プラグインを使用してアイキャッチ画像を設定する場合には以下のようなAuto Featured Image (Auto Post Thumbnail)プラグインやXO Featured Image Toolsプラグインがあります。
アイキャッチ画像がない場合や設定し忘れてしまった場合に、プラグインを使用しないでアイキャッチ画像を後から追加する方法です。
WordPressにおいてはプラグインを使用することによって多くの拡張機能が利用可能になります。ですがプラグインを追加すればする程セキュリティ的にもサイトの表示速度やサイトの軽さが重く？なってしまいます。
なので、出来得る限りはプラグインを使用しないほうが良いと考えます。セキュリティ的なプラグインを除いてですが、セキュリティ的なプラグインも良く吟味した方が良いと思います。
プラグインを使わないということは、function.phpにコードを追加していくということになります。function.phpはとても大切なのでバックアップを必ずとってからにしましょう。
アイキャッチ画像を設定し忘れない為の、自動追加的なコードでしたら比較的簡単に追加可能です。いくつかの紹介サイトにてそのコードは複数掲載されています。
そういった内容ではないので、そういう内容でお困りの方は記事作成時にアイキャッチ画像を自動追加させる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();?この独自関数の呼び出すコードを記載しなければ、いつまで経ってもアイキャッチ画像は表示されませんので、ご自分が表示させたいテンプレートの部分に記載し忘れにご注意してください。
参照サイトです。とても助かりました。
上記サイトには、独自関数のみではなく通常のアイキャッチ画像のコードもありますので、とても為になります。通常のアイキャッチ画像表示方法でも全く問題なく表示されます。
※テーマによっては、通常のアイキャッチ画像呼び出しコードですと投稿記事においてアイキャッチ画像を表示する設定にしていますと、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回表示されるようになりますのでご注意してください。
（今のところ当ブログも・・・。）
