サポート » テーマ » Twenty Elevenヘッダー画像のランダム表示

  • Twenty Elevenをカスタマイズしています。

    外観-ヘッダーの設定で、画像をランダム表示させているのですが、
    ランダムではなく、順番を指定することはできますか?

    画像を表示しているのはget_header_imageという関数のようで、これをカスタマイズすればいいのかと思うのですが、どこに定義されているのでしょうか。
    また、他によい方法があればご教授願います。

15件の返信を表示中 - 1 - 15件目 (全20件中)
  • get_header_image()は[wp-includes/theme.php]に定義されています。
    同じファイルにアップロードしたヘッダー画像を取得するget_uploaded_header_images()が定義されていますから、この関数を使用してヘッダー画像を取得後、順番に表示するようにしてはいかがでしょうか。
    WPのコアファイルをカスタマイズする必要なく、通常通りテンプレートファイルをカスタマイズするだけで済みます。
    get_uploaded_header_images – WordPress私的マニュアル
     
    ヘッダー画像の表示順は、クッキーを利用して判定するといいかもしれません。

    トピック投稿者 momo-sophia

    (@momo-sophia)

    popup様

    アドバイスありがとうございます。
    申し訳ないのですが、PHP初心者で、get_uploaded_header_images()の返り値の使い方がわかりません。
    配列で返されるとのことなので、以下のコードで確認してみたところ

    $header_image = get_uploaded_header_images();
    $header_url = $header_image['url'];
    print_r($header_image);
    print_r($header_url);

    $header_image → Array ( )
    $header_url → 空白

    これは、空の配列を返されたということなのでしょうか?
    でも、images\headersに画像はアップロードしており、get_header_image()ではURLが返されるのですが。。。

    get_upload_header_images()では配列の配列(ジャグ配列)が返ってきます。
    よって、以下のような使い方になるかと。

    $header_images = get_upload_header_images();
    foreach($header_images as $image) {
        $header_url = $image['url'];
        print_r($header_url);
    }


    get_header_image() はよく見ていただくとわかるのですが、関数名の最後が「image」です。
    get_upload_header_images()は「images」で複数形です。

    でも、images\headersに画像はアップロードしており、get_header_image()ではURLが返されるのですが。。。

     
    管理画面の[外観]>[ヘッダー]メニューから画像をアップロードしてありますか?
     
    get_uploaded_header_images()の使い方はsigeyamaさんの回答にある通りで大丈夫かと思います。
    変数の出力確認は、var_dump()で行った方が少しだけわかりやすいかもしれません。
     
     
    [ヘッダー]メニューからアップロードするのではなく、[wp-content/themes/テーマフォルダ/images/headers]にアップロードした画像を使用したい場合、Twenty Elevenのfunctions.phpを参考にして、次のようにヘッダー画像を登録すると、$_wp_default_headersで使えると思います。

    register_default_headers( array(
    		'wheel' => array(
    			'url' => '%s/images/headers/wheel.jpg',
    			'thumbnail_url' => '%s/images/headers/wheel-thumbnail.jpg',
    			/* translators: header image description */
    			'description' => __( 'Wheel', 'twentyeleven' )
    		),
    ...
    	) );

    トピック投稿者 momo-sophia

    (@momo-sophia)

    回答ありがとうございます。でもできません。

    sigeyama様
    書かれている内容はよくわかるのですが、いざ記述してみると、$imageが空っぽです。

    popup様
    [wp-content/themes/テーマフォルダ/images/headers]に画像をアップロードして、function twentyeleven_setup()を変更しました。
    wordpressの外観-ヘッダー画面の「デフォルト画像」に、アップロードした画像は表示されています。
    でも、get_uploaded_header_images()では何も受け取れないようなのです??

    トピック投稿者 momo-sophia

    (@momo-sophia)

    追記です。

    popup様のアドバイスくださった$_wp_default_headersですが

    foreach($_wp_default_headers as $image) {
        $header_url = $image[url] ;
    }

    画像のURLを取得できそうなのですが、頭に%s/がついてしまいます。
    また、foreachで回せても、実際に表示する画像をどうやって順番に指定するか迷走中です。。。

    [wp-content/themes/テーマフォルダ/images/headers]に画像をアップロードして、function twentyeleven_setup()を変更しました。
    wordpressの外観-ヘッダー画面の「デフォルト画像」に、アップロードした画像は表示されています。
    でも、get_uploaded_header_images()では何も受け取れないようなのです??

     
    get_uploaded_header_images()で取得出来る画像は、[外観]>[ヘッダー]でファイルを選択してアップロードした画像です。
    ここからアップロードした画像は、メディア機能でアップロードしたファイルと同じ場所[wp-content/uploads]に保存されます。
    register_default_headers()で定義した画像は、$_wp_default_headersで取得出来ます。
     
    sigeyamaさんの回答にあるコードですが、関数名が間違っているのが原因です。
    正しくは、’get_upload_header_images()’ではなくて、’get_uploaded_header_images()’ですね。
     
    ‘%s’はsprintf()でフォーマットを指定して出力するといいです。

    foreach($_wp_default_headers as $header_images):
    	echo sprintf( $header_images['url'], get_template_directory_uri() );
    endforeach;

    get_template_directory_uri()・・・親テーマのディレクトリのURL取得
    get_stylesheet_directory_uri()・・・子テーマのディレクトリのURL取得
     
    PHP: sprintf – Manual
     
     
    javascriptでやる場合は、次のようにやっているようです。
    アクセス毎に画像を順番に切替表示させる方法について – OKWave
    アクセス毎に画像を順番に表示したい – OKWave
     
    PHPでやる場合は、次のような流れで処理すると、アクセスごとに順番に表示出来るかと思います。

    ・クッキーがあるか確認して、値を取得して変数に代入してから次の画像の順番を保存
    (初回アクセス等でクッキーがない場合は、変数に0を代入してから次の画像の順番を保存)
    ・forまたはforeachでヘッダー画像の配列のループを回す
    (foreachを使う場合は、現在のループの回数用の変数を、ループに入る前に定義して置き、ループ内の処理ごとにループ回数に1足す)
    ・ifでクッキーの値とループ回数の変数の値が同じになった時を判定して、画像を表示する処理を記述
     
    PHP: setcookie – Manual
    PHP: for – Manual
    PHP: foreach – Manual

    トピック投稿者 momo-sophia

    (@momo-sophia)

    popup様
    丁寧にありがとうございます。

    ■get_uploaded_header_images()について
    WordPressの外観-ヘッダー画面の「画像をアップロード」は失敗したので、WinSCPツールで[wp-content/themes/テーマフォルダ/images/headers]にアップロードしました。
    それだと、この関数は使用できないということでしょうか。
    でも、$_wp_default_headersが使用できることがわかったので、大丈夫です。

    ■クッキーについて
    何だかできそうで嬉しいです。
    もう少しお付き合いいただけますか?

    $if="if";
    $else="else";
    
    if( isset($_COOKIE['my_cookie']) )
    {
    	echo $if;
    	$count++;
    }
    else
    {
    	echo $else;
    	$count=0;
    	setcookie( "my_cookie","value", time()+3600);
    	echo $_COOKIE['my_cookie'];
    }

    こんなロジックを作ってみたのですが、毎回elseに流れてしまいます。
    setcookieが失敗しているのでしょうか。

    上記のコードを何処に記述しているでしょうか?
    setcookieのマニュアルにありますが、何かを表示するより先にセットする必要があります。
    header.phpの最初に記述して確認してください。
     

    setcookie() は、その他のヘッダ情報と共に 送信するクッキーを定義します。 ほかのヘッダ情報と同様に、 クッキーは、スクリプトによる他のあらゆる出力よりも前に 送信される必要があります(これはHTTPプロトコルの制約です)。 <html> や <head> タグはもちろん 空白も含め、あらゆる出力よりも前にこの関数をコールするようにしなければなりません。

     

    <?php
    $if="if";
    $else="else";
    
    if( ! isset($_COOKIE['my_cookie']) ) {
    	$set = setcookie( "my_cookie","value", time()+3600);
    }
    ?>
    <!-- HTML出力など -->
    <?php
    // 任意の箇所で出力確認
    if( isset($_COOKIE['my_cookie']) ) {
    	echo $if;
    	echo $header_image_number = $_COOKIE['my_cookie'];
    } else {
    	echo $else;
    	if(!$set) {
    		echo "cookieの保存に失敗しました。<br>";
    	}
    }
    
    // 以降にループで画像表示処理
    ?>

    トピック投稿者 momo-sophia

    (@momo-sophia)

    申し訳ありません。
    きちんと読めていませんでした。

    header.phpでクッキーセット、home.phpで画像表示処理を行います。
    ループカウントの変数($count)は、phpファイルを跨って使用できないのですね??

    マニュアルなどみて、$_SESSION変数が利用できるかと思ったのですが、他によいやり方があればアドバイスお願いします。

    header.phpでクッキーセット、home.phpで画像表示処理を行います。
    ループカウントの変数($count)は、phpファイルを跨って使用できないのですね??

     
    ループ処理の直前で変数を定義し、カウントアップはループ内で行いますので、問題は生じないはずです。
    header.phpでクッキーの取得・変数への代入とクッキーへの次の値のセットを行っておき、home.phpの画像表示を行いたい部分で、次のようにループを行います。
     

    $loop = 0;
    foreach($_wp_default_headers as $header_images) :
    	if(~) :
    		/* 画像表示処理 */
    	endif;
    	$loop++;
    endforeach;

    トピック投稿者 momo-sophia

    (@momo-sophia)

    すみません、最初から読み直して理解しました。

    ■header.php
    クッキー確認
     なければクッキー発行して$countに0をセット。
     あれば、$countをカウントアップ。

    ■home.php
    ループ内で、$count番目の画像を表示。

    のつもりでした。
    $countを使わずに、クッキーの値で判定するということですね?
    クッキーがあっても、setcookieを実行してよいのですね??

    何度も申し訳ないのですが、最後の質問です。

    if( !isset($_COOKIE['my_cookie']) )
    {
    	setcookie( "my_cookie3",0);
    }
    else
    {
    	setcookie( "my_cookie",$_COOKIE['my_cookie']+1);
    }

    クッキーの値は、空白→1→3→5・・・となっていくのですが、何故でしょうか。
    header.phpは1度しか呼ばれないはずだし、最初が空白なのもよくわかりません。

    $countが画像の順番を代入する変数ですね?
    クッキーを確認
    ・あった場合 -> クッキーから値を取得して$countに代入後、+1した値をクッキーに保存
    ・なかった場合 -> $countに0を代入して、クッキーに1を保存
     
    $loopがループ回数をカウントする変数として、$loopと$countが一致した時に、画像を表示する処理を行うようにすれば、順番に画像が表示されるかと思います。
     

    クッキーの値は、空白→1→3→5・・・となっていくのですが、何故でしょうか。

     
    クッキーがない場合に’my_cookie3’で、クッキーがある場合に’my_cookie’と、クッキーの名前が違っているのが原因ではないでしょうか?
    同じ処理で使うのですから、クッキーの名前は揃えてください。
     
    上記のコードでは、クッキー’my_cookie’がない場合に’my_cookie3’に0を保存しているので、ずっとクッキーがない場合の処理しか実行されないと思いますが、他にも関連するコードを記述しているのでしょうか?
    クッキーの値を確認する部分のコードはどうなっていますか?

    トピック投稿者 momo-sophia

    (@momo-sophia)

    ごめんなさい、クッキーの名前が違うのは間違いです。
    うまくいかないので、何度か試していました。
    (ブラウザを閉じてもelseのロジックに流れるので、クッキー名を変えて試していました。)

    変数$countのかわりに、クッキーの値で代替できるのかと考えたものです。
    header.phpで以下のロジック

    if( !isset($_COOKIE['my_cookie']) )
    {
    	setcookie( "my_cookie",0);
    }
    else
    {
    	setcookie( "my_cookie",$_COOKIE['my_cookie']+1);
    }

    home.phpのforeachの中で、$loop(ループカウント)と$_COOKIE[‘my_cookie’]が一緒だったら、画像表示しようとしています。

    (ブラウザを閉じてもelseのロジックに流れるので、クッキー名を変えて試していました。)

     
    期限を設定しないクッキーはセッションと言って、ブラウザを閉じたら無効になりますので、最初の例のように期限を設定したクッキーを保存してください。
    変数への代入で大丈夫なはずです。

15件の返信を表示中 - 1 - 15件目 (全20件中)
  • トピック「Twenty Elevenヘッダー画像のランダム表示」には新たに返信することはできません。