サポート » 使い方全般 » クリックアクションでカスタムフィールドの値を読み込み

  • haha taduko

    (@shimodar)


    こんにちは。

    カスタムフィールドの値読み込みについて質問させてください。

    ホームページ(トップ)にて、下層のページに登録した以下のカスタムフィールドの項目値を
    表示させようとしています。

    ・ギャラリー画像A (下層ページでギャラリー画像A(JPG)を登録)
    ・ギャラリー画像B (下層ページでギャラリー画像B(JPG)を登録)
    ・ギャラリー画像C (下層ページでギャラリー画像C(JPG)を登録)

    実現したいことは、

    ループにより表示させている下層ページの代表ギャラリー画像のサムネイルをクリックすると、クリックされてはじめてその所属先ページのギャラリー画像A、B、Cが読み込まれて表示されるというものになります。

    クリックをトリガーとする理由は、各ギャラリー画像の解像度が高く、
    トップページでそのままロードさせるとページの表示に時間がかかってしまうという
    欠点をさけようということからです。

    イメージとしては、ホームページに

    各ページの代表ギャラリーサムネイル画像がカタログ上に並べられており、
    各サムネイル画像がクリックされると、それぞれのページで登録されたカスタムフィールドのギャラリー画像A、B、Cが並べられて表示されるものになります。

    いろいろと参考になりそうなサイトを調べた挙句、下記にたどりついたのですが、
    よりスマートな方法を探しています。

    http://wordpress.stackexchange.com/questions/32899/load-custom-fields-on-click

    jQueryと絡んだ複雑な処理が必要なようにも感じていますので、
    アドバイスいただける方に詳細ご相談にのっていただきたいと考えています。

    今現在の仕様としては、下記のとおり下層ページ用に特定の投稿テンプレートを用意し、クリックアクションでその内容を読み込んでくることで、対応をはかろうとしていますが、
    投稿記事には投稿テンプレートを1つしかあてはめられないことに気づき、ページの内容として引っ張って表示させることに問題があったため、上記のようにカスタムフィールド項目を直接引っ張って表示させたいと考えた次第です。

    var galleryhref;
    	$('#gallery section a').bind(
    		'click', function(){
    			galleryhref = $(this).attr('href');
    			この後読み込ませたい内容を

    複雑な質問内容ですみません。

    みなさまの叡智を是非お借りしたいです。

    どうぞよろしくお願いします。

7件の返信を表示中 - 1 - 7件目 (全7件中)
  • nobita

    (@nobita)

    haha tadukoさん

    ホームページ(トップ)にて、下層のページに登録した以下のカスタムフィールドの項目値を
    表示させようとしています。
    ・ギャラリー画像A (下層ページでギャラリー画像A(JPG)を登録)
    ・ギャラリー画像B (下層ページでギャラリー画像B(JPG)を登録)
    ・ギャラリー画像C (下層ページでギャラリー画像C(JPG)を登録)

    WordPressには、ギャラリーショートコード という機能がデフォルトで組み込まれていますが、ギャラリ画像というのは、単にカスタムフィールドの、画像を示すものですか?
    それとも、ギャラリショートコードに関連する意味のことですか?

    ※ギャラリショートコードというのは、投稿添付画像を、投稿に[gallary] と記述する事で、タイル状に表示する機能です。

    投稿記事には投稿テンプレートを1つしかあてはめられないことに気づき、ページの内容として引っ張って表示させることに問題があったため、上記のようにカスタムフィールド項目を直接引っ張って表示させたいと考えた次第です。

    「投稿記事には投稿テンプレートを1つしかあてはめられないことに気づき」とありますが、WordPressでは、トップページに固定ページテンプレートを設定する事が出来ます。
    また、テンプレートパートファイルを、インクルードする事も出来ます。
    どのような意味なのか、具体的なテンプレート名で、説明していただけますか?

    また、テンプレートに記述しているコードを書き込んでいただけると、理解しやすいので、書き込んでもらえますか?

    トピック投稿者 haha taduko

    (@shimodar)

    > nobitaさん

    こんにちは。
    早速のアドバイスありがとうございました。

    こちらの環境正確にお伝えできていなかったので、まとめたいと思いました。

    プラグイン:Custom Field Template

    こちらを使い、投稿記事で設定したカスタムフィールド値を引っ張っています。

    内容を図にまとめましたので、下記に紹介させていただきます。

    http://dl.dropbox.com/u/1213932/flowmap.gif

    ポイントとしましては、

    ・トップページではページ遷移をさせない
    ・クリックアクションで、投稿記事に割り当てられたカスタムフィールド値を取得
    ・個別投稿記事はアーカイブさせる必要があるので、記事として存在が必須

    以上になります。

    サムネイルに割り当てられたリンク(個別記事:カスタム投稿テンプレート)アクションにより、その投稿記事のHTMLを表示させ、それをトップページにインクルード表示させることはできるのですが、その場合は、読み取られる方の投稿記事は当該レイアウトのヘッダーやフッターをはずしたシンプルなもので設定しています。

    ただ、その投稿記事自体もアーカイブさせる必要があり、その場合のレイアウトは一般的なブログ記事のレイアウト(ヘッダーやフッターなどが付いているもの)にさせたいと考えました。

    トップページでは、

    ・各投稿記事のプレーンな内容を読ませ、

    個別記事では、

    ・一般的なブログ記事レイアウトで読ませる

    これを当初は条件分岐をその記事に適用させているカスタム投稿テンプレート内に書くことで、分岐させようと考えました。

    例えば、single.phpに下記のように書きます。

    if is_front_pageだったら、プレーンな内容(ヘッダー、フッターを外した)で表示、
    elseif in_category(‘profile’)だったら、ヘッダー、フッダーの付いたレイアウトで表示。

    こうすることで、実現をはかりましたが、

    そもそも、トップページで読み込む個別記事は読み込んだ段階では、トップページに読み込んだとしても、その記事が属するのはis_front_pageではないため、読み込む側の投稿記事の投稿テンプレートに条件分岐を書いても分岐が効かないことがわかりました。

    そのために、条件分岐をつかわずに、直接それぞれ投稿記事のカスタムフィールドに割り当てられた値を、クリックアクションをトリガーに取得できないかと考えた次第です。

    私自身もまだ頭の中が混沌としている状況で、やりたい内容はわかっているのですが、
    うまく説明できているかわかりません。

    板を汚していないか、心配ですが、
    お知恵拝借できましたら幸いです。

    どうぞ宜しくお願いします。

    nobita

    (@nobita)

    こんにちは、

    画像まで用意いただき恐縮です。

    home.phpでリンクをクリックすると、ライトボックスのようなものが表示されて、そこにシングルページの、カスタムフィールドを読み込むということですね。

    私のメモなので、参考になるかどうかわかりませんが、ご覧ください。

    ライトボックスについては、
    画像、
    http://tenman.info/study/css/lightbox/index.php
    文字列
    http://tenman.info/study/css/lightbox/text.php

    でポップアップボックスは、出来ると思います。

    この中に、投稿の画像など、カスタムフィールドのデータを読み込むという事ですが、最終的な、single.phpにその内容が表示されているという事であれば、
    jQuery.load()なんかで処理できるのではないかなと思います。

    サンプルとしては、重ね重ね恐縮ですが、

    http://tenman.info/labo/snip/?page_id=1236
    をみていただけるとわかりやすいかなと思います。

    このページで、左のリンクをhoverすると、右側に、投稿が表示されますが、これが、load()を使ったサンプルです。
    single.phpでしか表示しない部分は、読み込むクラスを分けてやればいいと思います。

    ワードプレスで、記事をどうにかするといった事をやめて、single.phpから、jQueryで内容を読み込むというアイディアです。

    追伸:例示の、ライトボックスは、レスポンシブデザインの場合は、小さい画面でのコントロールがかなり難しくなります。

    トピック投稿者 haha taduko

    (@shimodar)

    > nobitaさん

    こんにちは。

    サンプルまでありがとうございました。

    凄い。。

    まさにやりたかったことができそうな片鱗が垣間見えました。

    今回、lightboxを使用しないで、jQueryのアニメートを下記のサイトのような見せ方で、クリックすると所定箇所が展開するという仕様で考えています。

    動きの例(動画のサムネイルクリックで):http://mva.jp/playlist.html

    読み込む要素がYouTube動画なのか、投稿画像のカスタムフィールドの値かの違いだと思いますが、

    ご指摘いただきましたように、掲載項目はすべてsingle.phpで記載のものになりますので、
    そちらは問題にならないといいなと思いました。

    レスポンシブでのご意見もありがとうございました。

    ここから先の話ですが、どのような技術でnobitaさんがあのようなアクションを
    実現しているのか気になっています。

    ご紹介いただけましたら幸いですが、難しいようでしたらご連絡先など紹介いただけましたら幸いです。

    自分では考えつかなかったような視点で、驚きました。

    ありがとうございます。

    nobita

    (@nobita)

    ほめていただいたので、木に登って、

    https://gist.github.com/tenman/5283481

    に、コードを置いておきます。

    重ね重ねに重ねて恐縮ですが、私、Raindropsというワードプレスのテーマを作っていて、そのテーマ用のテンプレートになっているので、

    http://wordpress.org/extend/themes/raindrops

    を、インストールしていただいて、固定ページでこのテンプレートを指定していただければいいと思います。

    何にもすごい事やっていないのがよく解っていただけると思います

    (ブラウザ幅で、レイアウトが崩れたりするみたいですが、お許しください。)

    トピック投稿者 haha taduko

    (@shimodar)

    > nobitaさん

    コード拝見しました。

    私のために、コードまであげていただいて恐縮です。

    力量を超えているため、どのようにつなげていけばいいのかわからず、
    これから格闘してみたいと思います。

    とくにかくまずはご指示いただいたとおり、テンプレートをダウンロードさせていただきますね。

    心より感謝申し上げます。

    トピック投稿者 haha taduko

    (@shimodar)

    > nobitaさん

    この度はアドバイスいろいろありがとうございました。

    まだいただいたコードのすべては理解していませんが、

    いろんなものがつながり、取り急ぎ実現できそうなカタチが見えて来ました。

    この度はありがとうございました。

    テーマ・テンプレートにも著者紹介など表記がなく、この場でお礼申し上げることしかできなかった失礼をお許しくださいませ。

    またどこかで存じえました際は、今回のアドバイスを受けて制作完了したサイトをご披露さしあげたいと思います。

    まずはお礼申し上げます。

7件の返信を表示中 - 1 - 7件目 (全7件中)
  • トピック「クリックアクションでカスタムフィールドの値を読み込み」には新たに返信することはできません。