自由自在!WordPress上級

ポストサムネールの活用

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ポストサムネールは簡単に記事に関連した画像を取得できるとても便利な機能です。ポストサムネールを使った投稿一覧の見せ方について解説します。
講師:
12:00

字幕

このレッスンでは ポストサムネイルの 活用について学習します 架空のサンプルギャラリーサイトという フォトギャラリーサイトを作りながら 画像の様々な活用について 学習していきたいと思います このサイトでは トップページでそれぞれの投稿の ポストサムネイル画像を使って 通常のブログとはちょっと違った― リストの見せ方をしてみたいと思います 仕組みとしては 一件ずつの― 投稿の設定されたアイキャッチ画像を メインのビジュアルとして表示しています その下にはシンプルに 日付とタイトルだけを表示して それを CSS を使って 横に並べて表示しています アイキャッチ画像が 設定されていない場合には 自動でダミーの画像を 表示したいと思います さらに JavaScript を使って このようにスライドして 投稿を表示していけるように したいと思います それでは管理画面に移動します 最初に制作途中の― テーマに切り替えます ある程度 途中までできているテーマですね 基本的は CSS などは用意しています ここから― トップページに 投稿を表示していきたいと思います 記事もすでにある程度 登録をしています それぞれの記事には タイトルと そして アイキャッチ画像を登録しています このような投稿を いくつか用意しておいてください それではエディターに移動して さっそく トップページを完成させていきたいと思います オリジナルの sample-gallery というテーマを作っています ざっと構成を紹介しますと トップページを表示する index.php があります そしてヘッダーとフッターは それぞれ header.php と footer.php になっています ヘッダーは― head タグを表示して あと body タグですね サイト名とサイトのキャッチフレーズは head div の中に― h1 タグと info クラスのついた div タグを使って 普通に表示しています そしてメインの― コンテンツ部分には contents という id を付けています footer.php もシンプルに contents という id の div を閉じるタグと footer という id のついた div タグに コピーライト表記をしているだけです トップページを表示する index.php を開きます index.php には get_header と get_footer を 書いて ヘッダーとフッターを読み込んでいます それから 投稿を表示する メッセージループを記述しています メッセージループを書いて その中で get_template_park で posts と lists というテンプレートを 読み込むようにしています 全体を ul タグで― 囲っているので 一件一件の投稿は list タグで表示するようにします その他の記述は JavaScript で使用するための div タグなどを入れています そして前後の投稿に移動するための ページナビゲーション それぞれ photos_prev と photos_next という id のついた div タグを入れています それでは photo-list.php を編集していきます 最初に一件一件の投稿を list タグで 表示しますので list タグから開始します post には今回特に必要ないんですが id で the_ID を使えば その記事の― id が出てきますので id を振っておきます これはもうクセにしておくと― 良いと思います そして同様に post_class も付けておきます はい これで一番外側の list タグと div タグが出来ました ついで まず画像部分へ― 表示するための image という div を作って そして画像からリンクしますので ここに the_permalink を設定しておきます こうですね はい それで先に― タイトルと投稿日を表示するところを 書いていきたいと思います div class="info" を付けて date の― 中に the_time で 日付を入れておきます the_date だと 同じ投稿日のものは 日付が二つ目以降出てこないので 必ず 日付を出したい場合には the_time の方を使うと良いと思います そして the_title を使って 投稿のタイトルを表示します h2 タグで囲っておきます はい できました このように テンプレートを記述していくときはですね 全体の HTML の構造を最初に ババッと書いてしまうと 混乱することなく テンプレートが作成できると思います それではメインの― イメージの中を作成していきたいと思います 最初に― マウスオーバーをした時に ちょっとこう― 影が付くようにしたいので そのための div タグをつけておきます ovr というクラスで 空の div タグを作りました そしてポストサムネイルを表示します the_post_thumbnail ですね そして― パラメータに thumbnail と指定しておけば サムネイルの画像が表示されます 一度これで保存をして サイトで表示を確認してみます はい 表示が正しくできました このサムネイル画像が 設定されてないところだけ まだできていませんが その他の部分は問題なくできています このマウスオーバーのところですが この ovr というクラスで表示しています 少しどんな CSS なのかっていうのを 紹介しておくと はい ここですね image の a タグの中にある ovr というクラスに対して background を none にして position を absoluteにすることで 画像の上に重なるようになります そして幅と高さを指定しておきます a タグに hover した時の ovr に対して background で― 影を付けた 透過した png 画像を設定しています このようにすることで マウスオーバーした時にだけ 背景画像が表示されて マウスアウトした時には再び― background が none になるような 仕組みになっています それでは ポストサムネイルがない場合に ダミー画像を表示する― 記述をしていきたいと思います この部分ですね the_post_thumbnail だけだと ポストサムネイルがない場合に 何も表示されなくなってしまいまうので そういった時に使うのが 条件分岐です if を使って― has_post_thumbnail という テンプレートタグが用意されています この has_post_thumbnail というのは ポストサムネイルがあるかどうかを 調べるテンプレートタグです これを if の中で使えば ポストサムネイルがある場合には {} の中を実行するという命令になります そして else を使って 今度は― ポストサムネイルが 設定されていなかった時の HTML を書くことができます この場合には― img src を使って ダミーの画像を表示するというようにします あらかじめアップロードしておいた 画像のパスを書いていきます こんな感じですね そして else も終了して これで完成です アップロードができたら ページをリロードして確認してみます 画像が ポストサムネイルの― 設定がされていない時には ダミーの画像が表示されるようになりました ここでは JavaScript については 説明しませんが jquery とそのライブラリーを使えば このような画像スライドを 作成することも 比較的簡単にできると思います 通常の WordPress で作ったサイトとは 少し違うデザインで 画像をメインに使ったデザインというのも 今見たように それほど複雑ではない テンプレートタグを使って作ることができます 特にポストサムネイル アイキャッチ画像は とてもこういった形で便利に使える― 機能ですので the_post_thumbnail と そして ポストサムネイルが 設定されてるかどうかを調べる has_post_thumbnail というテンプレートタグは ぜひ活用してみてください このレッスンでは ポストサムネイルの 活用について学習しました

自由自在!WordPress上級

このコースではWordPressを利用したさまざまな種類のサイトを構築しながら、より実践的なテクニックを解説します。コースの前半はカスタムフィールド機能などについて説明しながら、後半では自由度の高いサイト構築が可能になるマルチサイトについても学習します。

3時間17分 (26 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
カテゴリー
ウェブデザイン
CMS
価格: 2,990
発売日:2014年03月05日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。