画像URLが入ったカスタマーフィールドを取り扱う

ゲスト投稿はできた。
となると、あとは表示。
User Submitted Postsの画像出力を使ってもいいけど(投稿の前・後・表示しないを設定画面で選べる)、思った位置に思ったように表示したいとかもあるし、Duplicate Postを使って投稿をdupicate(copy)、表示チェックしたりすると、User Submitted Posts
の外にでてしまうので、表示されなかったりもするので、動作検証的に必要な局面もあるので、ね。

User Submitted Postsは、複数画像をアップロードしした時に、指定のカスタマーフィールドに配列として、画像のURLを入れといてくれる。

wordpress カスタムフィールド

これをテーマに入れるには

<?php if ( $post->user_submit_image ) : ?>
<?php foreach ( get_post_meta( $post->ID, 'user_submit_image', false ) as $user_submit_image ) : ?>
  <a href="<?php echo esc_html( $user_submit_image ); ?>">
  <img src="<?php echo esc_html( $user_submit_image ); ?>" alt="<?php the_title(); ?>" width="200" >
  </a>
  <?php endforeach; ?>
<?php endif; ?>

こんな感じにforeachでループさせて出力。

さらっと表記したけど、実は!!
どぉ書くかでphpやらwordpressの関数やら探したわw
こういう例は探してもヒットしなかったので、記録のために書いておくという(笑)

小さく出して、lightboxを使って拡大表示させたいので、リンクつき。

引用元:Lightbox系のWordPressプラグイン8選 – 簡単に利用できるプラグインを超厳選!
Lightbox系のプラグインを利用する場合は、WordPressで記事に画像を貼り付ける際に、リンク先を「メディアファイル」に指定します。そう設定しないと、動作しませんのでご注意下さい。

というわけで、次の段階はlightboxのplugin設定。
採用してみたのは「Easy FancyBox

設定>メディアの下に管理画面が追加されているので、開いて、基本はデフォルト設定でOKそうだけど、画像のタイトルをだされても困るので、「Appearance」の「Show title」のチェックを外した。

設定など、詳しく説明が必要なときはEasy FancyBox – 記事のサムネイル画像を別ウィンドウ風に拡大表示できるWordPressプラグインがオススメ。

通常は、小さいのを表示しといて、クリックされたら大きいのをロードして表示となるところ、今回は投稿を表示する際に、小さくは見えていても「実体」をロードしているので、拡大表示は早い。

というところで、あとは、テーマの作り込みとなっていくので、見せる側の基本Plugin構成は、これでおしまいかな。

あとは、投稿をチェックする管理者アカウントの設定。
権限グループには

権限グループ概要
購読者
Subscriber
WordPressにログインすることが可能。
寄稿者
Contributor
レビュー待ちの投稿を作成することができる。レビュー待ちになった投稿の公開は、編集者以上の権限グループのユーザーが行う。
投稿者
Author
投稿を行うことはできるが、固定ページや他のユーザーが作成した投稿を扱うことはできない。
編集者
Editor
投稿や固定ページ、カテゴリーなどを、他の人が作成した投稿を含めて扱うことができる。テーマやプラグイン、ユーザー、サイト設定を扱うことはできない。
管理者
Administrator
トップレベルの権限グループで、すべての権限を持つ
引用:WordPressのユーザーの権限グループについて。管理画面のスクショ、権限の追加など。

 
 
この表をみると、投稿をチェックして、公開・非公開(削除)などを行う人には「編集者」でいい感じ。
てか、プラグインやテーマまわりなんぞ、いぢられた日には。
泣くしなwwww
 
 

【アイキャッチ画像について追記】
通常のアイキャッチ画像は

<?php echo the_post_thumbnail(); ?>

ででるけど、元が縦長だったりすると、まんなかへんしか表示されない。
と、それだとアイキャッチにならないともいう状況なので

<?php echo the_post_thumbnail('thumbnail' , array( 'class' => 'index-thumbnail' )); ?>

にして
さらにcssで指定したクラスの設定を

.index-thumbnail img {
width: auto;
height: auto;
max-width: 100px;   //サムネイル画像の上限(幅)
max-height: 100px;   //サムネイル画像の上限(高さ)
}

とすると、アイキャッチがアイキャッチ画像が持つ画像の比率で表示されるようにできた。
参考:[WordPress]アイキャッチ画像を綺麗に表示するには


コメントを残す

メールアドレスが公開されることはありません。* が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)