CG
(@du-bist-der-lenz)
先にも書いた通り、わたしはメッセージだけ投稿することが多いので、アイキャッチを設定していない時は、OGP画像を表示するように基本設計しているので。その画像が複数になったまでです。ランダムに変える処理が入るので、その分のデメリットはあります。カスタムフィールドは様々な用途に活用できます。つまりは、どうサイトを運用していくのかで、設計に関わる部分です。
アクセスが有ったページにアイキャッチが設定されていれば、それを優先し、アイキャッチが設定されていなければ、登録されている画像をアイキャッチに取得する。これを実装しています。対して、投稿作成時に、複数の画像を登録するのも考え方です。
カスタムフィールドを使用する方法について、大まかに説明しておきます。
複数画像の登録が必要なので、繰り返しフィールドが使えるプラグイン Smart Custom Fields を使用します。
繰り返しフィールドにして、フィールドタイプを「画像」に設定すれば、複数画像の登録が可能です。
フィールドの設定については、こちら
画像の出力については、content-page.php にコードを追加する必要がありますので、Twenty Fifteenテーマディレクトリーのcontent-page.php を子テーマにコピペします。
追加コードは、後でアップします。
子テーマにコピペした content-page.php を編集します。
元のコード
<?php
// Post thumbnail.
twentyfifteen_post_thumbnail();
?>
編集後
<?php
// Post thumbnail.
if ( is_front_page() ) :
$img_group_array = [];
$img_group = SCF::get( 'img_group' );
if( !empty( $img_group[0]['thumbnail_img'] ) ) : ?>
<div>
<?php
foreach ( $img_group as $fields ) {
$thumbnail_img = $fields['thumbnail_img'];
$img_group_array[] = $thumbnail_img;
}
$images = $img_group_array;
$count = count( $images );
$random = mt_rand( 0, $count - 1 );
$image = $images[$random];
$imageItem = wp_get_attachment_image_src( $image, 'large' );
?>
<img src="<?php echo ( $imageItem[0] ) ; ?>">
</div>
<?php endif;
else :
twentyfifteen_post_thumbnail();
endif;
?>
ちょっと難しく考えすぎていました。
こちらが、修正版です。
<?php
// Post thumbnail.
if ( is_front_page() ) :
$img_group = SCF::get( 'img_group' );
if( !empty( $img_group[0]['thumbnail_img'] ) ): ?>
<div>
<?php
$count = count( $img_group );
$random = mt_rand( 0, $count - 1 );
$image = $img_group[$random]['thumbnail_img'];
$imageItem = wp_get_attachment_image_src( $image, 'large' );
?>
<p><img src="<?php echo ( $imageItem[0] ) ; ?>"></p>
</div>
<?php endif;
else :
twentyfifteen_post_thumbnail();
endif;
?>
トピック投稿者
hhaa
(@hhaa)
お二方、本当に素晴らしい回答をありがとうございます。
CGさま
>つまりは、どうサイトを運用していくのかで、設計に関わる部分です。
本当にこれに尽きますね。思いつきでTOPページのアイキャッチ画像をランダム表示したいと思ったまでですが、実際に運用していく中で変化させていかなければならない場合も多いと思うので、この部分に関しては全体をある程度構築した後でもう一度見直すことにします。その際、現在のスライダープラグインで事足りるのか、カスタムフィールドが必要なのか。あらためて検討したいと思います。言ってしまえば、現在の実装にいい印象はありません。そもそも選んだ写真のせいかもしれませんが、のちに手を加えることになると思います。
こちらでご回答いただいたたことで、各実装のイメージができ、選択肢として数えられるよになったので、すごく助かりましたし、納得することができました。ありがとうございます。
Toshiyuki Hondaさま
コード、本当にありがとうございます。格闘する中で、ようやく、いただいたコードがだいたい何を指し示すのか、ということくらいはわかるようになってきました。一度、お教えいただいた方法で実装してみます。
と回答しようとしたら、リンク先で非常に丁寧に解説していただいていて、コードの説明もいただいており、感謝に尽きます。
時間のあるときに読み込み、様々な実装を自分の手でできるようになるための足がかりとさせていただきます。ありがとうございます。
//
私の運営するHPはレジャー施設ですので、目的はたくさんのお客さまにみてもらって、実際に足を運びたいと思ってもらうことです。CGさまの「設計」の言葉にずいぶんと考えさせられることがあります。今しばらく、wordpressでのカスタマイズに時間を割いてみようと思います。みなさまありがとうございます。
CG
(@du-bist-der-lenz)
個人ブログでは十分でも、対象を利用者に向けたレジャー施設のホームページには、思いつきで変化していくことでなく、将来充実させていこうと思う部分を設計段階で想定しておきましょう。現実のレジャー施設を建てる時とかわりませんよ。頑張ってください。こういうことできるかなって、思いつきでも、気軽に問をかけてくれても相談に乗ります。幸い、WordPressはいくらでもサイトを作って検証にすることがしやすいですから、動作を確認しながら、ホームページに取り込んでいきましょう。
トピック投稿者
hhaa
(@hhaa)
CGさま
あたたかいお声掛けを本当にありがとうございます。
そのように言っていただければ、例えば、見栄えや配置について、必要な記事のアドバイスなど、フォーラムの趣旨からは若干ズレてしまうかなと思うものでもとても相談しやすいです。
明確なお題があれば新しくトピックを立てさせていただくかも知れませんが、ログを参照することも含めて基本的にはこのスレッドで相談させていただきます。
トピック投稿者
hhaa
(@hhaa)
引き続き、ご厚意に甘える形にはなりますが、ご質問させてください。
現実装にて、スマホ表示時に右上のメニューバーを開いた画面がとても気に入ってしまい、
この画面
をそのままスマホアクセス時のホーム画面にしてしまえないか、と考えています。
スマホアクセス時とその他の場合をifで分岐することを前提に、
sidebarの内容をそのままフロントページに指定する
トップページに指定した固定ページに似た表示になるように記述する（メニューなど各要素を配置する）
スマホでホームアクセス時に常にメニューをオープンにするよう指示する
などを思いついています。
さらに、サイトタイトルと「ホーム」の間に画像を挿入しようと思っています。
どのような方法がよいと思われますでしょうか。
また、主観的な問題ですが、スマホアクセス時の現状のページとどちらが見やすい、印象がよい等の意見がありましたら、合わせてお伝えくだされば幸いです。
CG
(@du-bist-der-lenz)
Twenty Fifteen テーマはヘッダー画像を、スマホ時は丈夫に表示できるので、サーフィンの風景写真を上部に置くなど効果的に思います。スマホアクセス時は、ドロワーページをワンクッションするのが好ましいです。現状では、デフォルトでメニューが開いている設定にするのが簡易です。
CSS で変更するのもいいかと思います。
セレクターの body.home などでホームページのみを対象にすることができます。
テーマの style.css またはカスタマイズの追加 CSS に、
/* 横幅 956px 以下 */
@media screen and (max-width: 956px) {
body.home .secondary-toggle {
/* メニューボタンを非表示 */
display: none;
}
body.home .secondary {
display: block;
}
}
なお、本題と外れる追加の質問は、お手数でも新たにトピックを立てください。
@hhaa
このトピックの質問については解決済みですので、新しい質問は、別のトピックを立ててください。
後から質問する人が、同様の質問がすでに存在していないか確認することが困難になります。
トピック投稿者
hhaa
(@hhaa)
@ishitaka さま
CSSに追加したところ、思った通りの実装ができました。早急に解決いただいて嬉しい限りです。ありがとうございます。
@ishitaka さま @rocketmartue さま
ご指摘ありがとうございます。以降、新しくトピックを作成したいと思います。
