投稿内の指定の画像を、トップページに小さく表示されたりするやつ。
SNSへ共有した時も引用されますね。
アイキャッチが無い時に表示する画像を設定します。
No image画像を自分の好きな画像に変える方法
私の使っているWordPressテーマはStinger5です。
他のテーマをお使いの方は、参考程度に読んで下さい。
応用すれば、ご自身のテーマでも画像変更が出来ると思います。
アイキャッチが無い時用の画像を準備する
やり方を説明します。
親テーマに入っているNo image画像はそのまま置いておきます。
子テーマに、No image用の画像をアップロードします。
そして、子テーマの画像を指定するように、
子テーマのitiran.php、kanren.php、newpost.php
内にあるコードを書き換えます。
流れはこんな感じです。
まず、No image用の画像を準備しておいて下さい。
お好きなもので構いませんが、
アイキャッチは小さく表示されますので、見やすい画像が良いですね。
あまり細かいと、小さくて見えないかも。
大きさは200px～400px位あれば良いと思います。
もっと大きくても構いません。
画像タイトルは
no-img.png
または
no-img.JPG
で保存。
拡張子はお使いの画像にあわせて下さい。
画像はFTPソフトで、WordPress・子テーマの
images
の中に入れて下さい。
子テーマです。
ここまで出来たら、あとはコードを指定するだけです。
No-img用画像を指定するコードをテーマに追加
WordPressテーマの編集をしましょう。
No-imgを使用しているphpファイルは
- itiran.php、
- kanren.php
- newpost.php
です。
これら3つのテーマを編集します。
<?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
<?php the_post_thumbnail( 'thumb150' ); ?>
<?php else: // サムネイルを持っていないときの処理 ?>
<img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="100" height="100" />
<?php endif; ?>
それぞれのphpファイルから、
上記のようなコードを探して下さい。
こちらを書き換えます。
（このままコピーしないで下さい。UTF-8Nに変換して下さい。）
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/no-img.JPG" alt="no image" title="no image" width="100" height="100" />
ちょっと変化している事に気づきましたか？
テンプレートと書かれているところが、スタイルシートに変わっています。
子テーマのフォルダを指す様にしました。
template_directoryと
stylesheet_directoryについてはこちらも参考にどうぞ。
themesのimageに入っている画像｜WordPressフォーラム
No-img画像を複数用意しランダム表示させる
こだわりたい派の方におすすめです。
私はやっていませんが…。
No-img画像をランダム表示させる事が出来ます。
もし、本当に色んな種類の画像をアイキャッチとして表示させたいのなら、
投稿毎にアイキャッチ画像を指定した方が良いですね。
No-img画像をランダム表示させるのは、
アイキャッチを設定しないという場合と、
5～6枚の画像をランダム表示してくれたらそれで良いや、
という場合におすすめです。
ではやってみましょう。
途中までは、先ほどのやり方と全く同じです。
複数の画像を子テーマ内の
images
フォルダに入れておきます。
ファイル名は、仮に三枚用意するとしたら、
no-img1
no-img2
no-img3
…
という風にして下さい。
必ず全てに数字を付けます。
no-img
だけではダメです。
ではコードです。
（このままコピーしないで下さい。UTF-8Nに変換して下さい。）
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/no-img<?php echo(rand(1,3)); ?>.png" alt="no image" title="no image" width="100" height="100" />
または
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/no-img<?php echo(rand(1,3)); ?>.JPG" alt="no image" title="no image" width="100" height="100" />
参考にしたサイト
Stinger5でno-imageサムネイル画像を美しい写真に変更してランダム表示させる方法
こちらのブログはBloggerです。
WordPressの実際の表示を確認したい方は
ラビットしま子の「人生美容パラダイス」をご覧下さい。
当ブログの情報は全ての方に応用できるとは限りません。
ご利用は自己責任です。当ブログ側はいかなる責任も負いません。
必ずデータは最新のバックアップを取っておいて下さい。
WordPressを利用される場合はUTF-8Nの文字コードに必ず変換して下さい。
当ブログのコードをコピーしてphpファイル等に直で貼付けすると
ファイルやデータが破損します。
パソコンのメモ帳は不可です。
詳細はWordPressヘルプを参照下さい。
ラビットしま子はサイト制作のプロではありません。
個別のカスタマイズについての相談は乗ってあげたいけど、乗れません。
（わからんから）
スポンサードリンク