【WordPress】最高に便利な投稿記事のサムネイル表示方法。2.0【WordPress】最高に便利な投稿記事のサムネイル表示方法。ONZEhttps://on-ze.com/archives/400HomeBlog【WordPress】最高に便利な投稿記事のサムネイル表示方法。サムネイルを表示させるための「アイキャッチ機能」がありますが、今回はそのアイキャッチ機能もプラグインも使わずに、記事一覧のページなどにサムネイル画像を表示させる方法を紹介します。アイキャッチ機能は、投稿記事1つ1つに設定しなくてはいけないので少々面倒なんですよね。そこで、この作業を省いて、投稿記事に挿入されている画像を自動的にサムネイルとして表示させようという魂胆です。記事に使われている画像のサイズはバラバラですから、サムネイル化するときに任意のサイズにトリミングさせることも重要です。投稿記事で最初に使われている画像を取得。記事内で画像が使われていない場合は、あらかじめ用意しておいたサムネイル用の画像を使用する。任意の大きさにトリミングしてサムネイルとして表示させる。以上を1つずつ解決していきましょう。以下のコードを追加します。部分は記事内に画像がない場合に表示させるための、あらかじめ用意しておいたサムネイル画像へのパスになります。いうコードを追加すればサムネイル画像を表示させることができます。これだけだと画像がトリミングされていないため、記事によってサイズがバラバラのまま。いうスクリプトを使います。ダウンロード「TimThumb」のダウンロードは以下より。TimThumb(tmthumb.php)配布元:https://code.google.com/p/timthumb/直リンク:https://code.google.com/archive/p/timthumb/本体はわずか1ページのphpファイルになっています。以降では解決されていますのでご心配なく。テーマファイルの中などにアップロードします。ここまでで、すべての準備が整いました。テーマファイルの中、サムネイルを表示させたい場所に以下のコードを記述しましょう。呼び出し、トリミングの処理をかけています。以上で目的は達成されましたが、TimThumbにはあらかじめ用意された様々なパラメーターがあるので、その一部も合わせて紹介します。画像の大きさ:w:画像の幅を指定します。例[&w=200]デフォルト値:100h:画像の高さを指定します。例[&h=200]デフォルト値:100q:クオリティを指定します。例[&q=80](0〜100で指定)デフォルト値:90上記のデモ:http://www.binarymoon.co.uk/demo/timthumb-basic/(作者サイト)ズーム&クロップ:画像サイズを変えて切り取るための設定です。0:切り取らずにサイズ調整だけで合わす。例[&zc=0](変形の恐れあり)1:最も良いサイズにして切り取る。[&zc=2]3:小さくするだけ。読み込んだ画像をサムネイル化して表示する際に、作った画像をキャッシュとして保存します。この際に自動で「cache」という名のフォルダを生成するのですが、サーバーの設定によってはフォルダが生成されない場合もあります。同じディレクトリに手動でフォルダを作り、そのフォルダを「cache」と名称変更してください。動かなかった場合、以下の点を確認してみてください。ディレクトリのパーミッションは「707」または「777」も試してみてください。それでも動かない場合は...?以下のコメント投稿フォームかお問い合わせフォームからご質問をどうぞ。アイキャッチ機能もプラグインも使わずにサムネイルを表示させる方法でした。いうスクリプトもあります。こちらも非常に便利なのですが、未だ脆弱性の問題が残っていて、開発も停滞しているようです。オンズ株式会社オンズ制作チーム。ウェブサイト制作、デザイン制作でお悩みの際はお気軽にご相談ください。https://on-ze.comTwitterFacebookFeedlyLINEこちらの記事もいかがですか?アナタにオススメ!同じカテゴリーの他の記事です。Fields]のメニューを非表示にしたかった。ウェブページ上に表示する方法。【WordPress】キャッシュを有効化しつつ[CSS]や[JavaScript]ファイルの変更を確実に反映させる方法。【WordPress】固定ページの編集時にだけビジュアルエディターを使用不可能にする方法。【WordPress】固定ページでも[抜粋]の機能を有効にしたい。