自由自在!WordPress上級

投稿から画像だけを抜き出す

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
投稿にアップした画像だけを抜き出してJavaScriptやCSSを使ってデザインしたい場合があります。やや難しいですが、テンプレートタグとPHP関数を使って実現できる便利な方法を解説します。
講師:
13:53

字幕

このレッスンでは 投稿から画像だけを抜き出して 表示する方法について学習します サンプルギャラリーサイトという 架空の― フォトギャラリーというサイトを使って レッスンを進めていきます このサイトでは一つの― 投稿をクリックすると このようにアップした画像を スライダーで表示するようにしています そして画像の下には 日付とタイトルを表示しています この投稿が どのような仕組みになっているのかを 投稿の編集画面で確認してみます 入っているデータはタイトルと アイキャッチ画像だけで 特に本文などは入力していません メディアを追加をクリックして この投稿へのアップロードという プルダウンを選択すると この投稿にアップロードした画像を 自動的に表示するようにしています しかも このように並び替えを 行うことができるようになっていて 並び替えを行って 更新ボタンを押せば 自動的に 画像が並び変わるようになっています このような表示を実際に行おうと思うと 通常ですと 例えば 投稿のこの本文欄に アップした画像を一枚ずつ 選択して投稿に挿入というふうにやって 画像を入れて その画像に div タグとか list タグをつけたり 画像を並び替えたりといったことを 行わなければいけないんですけれども そのような面倒くさいことをしなくても あるいは HTML が書けない人でも 簡単に並び替えを 行えるようになっています それでは実際にエディターから この画面を作成していきたいと思います その前にテーマを切り替えておきます これから作成するテーマに 切り替えを行います 投稿の詳細ページですので single.php を まず編集しておきます single.php は普通に get_header と get_footer を書いておいて そしてメッセージループを書いています 一つの投稿データを取得して そしてメッセージループの中では get_template_part を使って post-detail というテンプレートファイルを 読み込むようにしています それでは post-detail テンプレートファイルを 編集していきたいと思います posts-detail.php を開いて 記述していきたいと思います 最初に全体をくくる div タグを書いていきます id を付けておきます 今回特に この id は必要ないんですけども id を付けるクセを 付けておくと良いと思います 同様に post_class を使って CSS クラスも 出力するようにしておきます そしてですね 実際にある投稿にアタッチされた 画像たちを取得する方法なんですが get_children という テンプレートタグを使っていきます get_children という タグなんですけれども テンプレートタグの紹介ページで 確認してみたいと思います 公式サイトに get_children に関する情報があります get_children は指定した投稿の 添付ファイルページや サブページやリビジョンを取得します ということで ここでは この指定した投稿の添付ファイル 画像も添付ファイルとして扱われますので この添付ファイルを取得する― という機能を使って アップされた画像たちを取得していきます パラメータなんですが post_parent というパラメータを指定して 親となる投稿の ID を指定できます そして post_type から添付ファイルとか 固定ページ リビジョンなどを指定します 今回は attachment を指定します それから添付ファイルの種類ですね image が画像 video が動画 というふうになっています そしてこのタグを使った場合の 取得できるデータなんですけれども 連想配列形式の投稿オブジェクト というふうになっています それでは記述を続けていきます post_parent には この投稿の id を表示します この投稿の id は get_the_ID で取得することができます さきほど書いた the_ID と ちょっと似てるんですけれども ここでは get_children に渡す値として id を出力する必要がありますので 画面に出力する the_ID ではなくて データを取得するための get_the_ID を 使って取得します そして&を使って パラメータを追加していきます post_type は添付ファイルである attachment そして image を指定して これで $files という変数に 投稿にアタッチした画像が渡されます 画像は一つではありませんので 配列という― 複数のデータが集まった状態の 情報が渡されています そして最初にですね 今取得した $files という― データが空でないかどうかを チェックする必要があります 投稿に画像が一個も ついてないことがありえますので $files が空でないかを調べてみます そして今度はですね foreach という phpの― 繰り返し構文を使います この foreach というのは さきほど取得した― 画像がいっぱい入っている $files 変数を 一つ一つ処理していくための構文です $files の中にある画像データ 一件ずつ― 今度は $file という変数に入れ直して この {} の中の処理を― 行いなさいという そういう命令になります そして行った処理は 再び $files に戻されます ここでは $menu_order という 新しい配列を作って 添付ファイルの並び順を取得しています 今 ここに $file そして矢印のように - と > を使って ID― またここで $file->menu_order と書いていますが 一つ一つの投稿データには ID ですとかあるいは menu_order この menu_order というのが さきほど管理画面でドラッグして 並び替えを行いましたが あの並び替えた並び順が入っています 投稿オブジェクトというのは このように 一つのファイルの中にある menu_order を持ってきてください― というな命令を書いて 取得することができます ちょっと難しいと思うんですけれども php にあまり詳しくない方はですね 完ぺきに理解しようと しなくても大丈夫です そして array_multisort という― これは php の関数になりますが php の関数を使って このさきほど取得した 並び順の順番に 画像が複数入っている $files を並び替えなさい― ソートしなさいという これが命令になります ここまでで $files の中に 指定した並び順で アップされた画像が入りました それではですね 実際に画像を 表示するところを 書いていきたいと思います JavaScript で 画像をスライド表示するための 記述をいくつか行っていって ul タグを書いて 一個一個 画像を list タグで 出していきたいと思います そして一つ一つ処理を行いますので ここでまた foreach を使います $files の一件一件を $file という変数に入れて処理していきます $file の中に入っている― 画像に関するデータを 実際に画像の― URL などを取得するための get_attachment_image_src という テンプレートタグ― 非常に長い テンプレートタグを使用します この wp_get_attachment_image_src について また公式サイトの情報を 見てみたいと思います こちらは英語サイトしか今ないので 英語サイトでの表示になります パラメータとして取得したい 添付ファイルのID― そして画像のサイズ これらを指定します そして指定して得られる情報というのは 配列になっているんですが 0 でそのファイルの URL 1 で width 2 で height を 取得できるようになっています さきほど ここに書いたのと同じように ファイルの中に一つ一つの 画像の情報が入っていますので ID を指定して まず画像の ID を決定します そしてサイズですが ここでは medium を取得します これで必要な情報が得られましたので 実際に― 表示するリストタグと image タグを書いていきます URL は 0 に入っています width は 1 に入っています そして height は 2 に入っています このようになります そして list タグを閉じてこれで完成です そして if 文の終了タグも閉じます ここですね 文字列と変数の間に 小さいドットを付けていますが このようにして 文字列と変数を連結していくことが できますので 覚えておいてください はい ここまで書けたらですね 後は― 直接今回のレッスンとは関係ないので コピペしてしまいます ちょっと間違ってましたね ここを ここに入れます 左右のナビゲーションの表示と それから 日付とタイトルを 表示する部分を記述しています それでは実際に画面で画像が 正しく表示されるかどうか 確認をしてみましょう サイトに移動します はい 正しく画像が取得できました このようにして 投稿にアップされた画像を 本文とかとは関係なく抜き出して 表示させることができます このレッスンでは 投稿から画像だけを 抜き出して表示する方法について学習しました

自由自在!WordPress上級

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

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

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

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

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