頑張らない!でも諦めない!必死にならずにええかげん

wordpressでメディアページ(ギャラリー、gallery)を表示する方法

      2014/11/22

ふとJetPackの機能を確認しているときに、
投稿の途中にギャラリーを表示する仕組みがあるということに触れましたので、
ご参考までにご紹介しておきます。

はじめに

あんまり使うことはないのかもしれないですが、
多くの写真を表示したいようなときには非常に便利な機能なのかもしれません。

例えば、以下のような表示です。



この画像は以下の投稿でご紹介させて頂いた際の写真ですが、
こうした見せ方もあったのかとちょっとした発見でした。って私が無知なだけか。
秋を愛でる 神戸市立森林植物園2013

表示設定の方法

新規投稿の画面にてテキストエディタの状態で「gallery_snippet」というショートコードを入力します。

ビジュアルエディタに対して入力しても、一旦テキストエディタに切り替えてから、
ビジュアルエディタに戻ですことでショートコード(スニペット)がギャラリー表示に変わります。

01_投稿本文中にgalleryスニペット入力

投稿本文中にgalleryスニペット入力

ギャラリー表示になった状態が以下の状態です。

02_ギャラリー挿入の表示

ギャラリー挿入の表示

ギャラリー表示の上をクリックして写真アイコンを表示します。
写真アイコンをクリックしてギャラリーを編集します。

03_ギャラリーを編集

ギャラリーを編集

ギャラリーの編集画面でサイドバーから[ギャラリーに追加]を選択し、
メディアライブラリから表示したい写真を複数選択します。
選択が終わったら[ギャラリーに追加]をクリックしてギャラリーへの追加を完了します。

04_写真をギャラリーに追加

写真をギャラリーに追加

写真の追加が完了したら「ギャラリーを編集」画面が開きます。
今追加した写真が表示されますので、
写真をドラッグして並び替えたり、見栄えを調整します。
最後に[ギャラリーを更新]をクリックすれば完了です。

05_ギャラリーを編集

ギャラリーを編集

投稿画面に戻ると、ギャラリーをマウスオーバーすると、
写真が登録されていることがわかるようにツールチップが表示されます。

06_挿入されたギャラリー

挿入されたギャラリー

あとは、投稿を公開して終了です。

実際の表示と画像をクリックした際の動作はこの投稿です。

プロモーション(btm)

Google or AdMax Promotion (it)

さいごに

実際にこの見せ方を使うかどうかはわかりませんが、
多くの写真を一度に見せるような場合には便利かもしれません。

個人的にはdivでレイアウトする方が好きかなと思うところではあります。

Litboxのポップアップ効果をギャラリーに対しても仕込もうと思うと、
少し面倒そうな感じなので。。。

参考

といいますか、もっと詳しく書いてくださっているので、
以下を参考にされますといいと思います。

使いづらいWordPressのギャラリーをけっこう使えるギャラリーにする方法

*本ページ内に記載されされた各社ブランド、サービス名、商標、登録商標については、
各社ブランドのロゴや商標等に関する帰属についてをご確認ください


最後までお読みいただきありがとうございました。
アルゴリズン


役に立ったと思っていただけたら、以下からシェア頂けたら幸いです^^

QRコードからもこのURLを開けます。

アイキャッチ画像に利用させて頂いております、各社ブランドのロゴやシンボルに関しては、
各社ブランドのロゴや商標等に関する帰属についてをご確認頂けますようお願い致します。
ロゴの使用等に関する苦情・ご意見等がございましたら管理者までご連絡ください。

AdMax Promotion

ブログ記事のご紹介
すべて展開 | すべて省略

Rakuten Promotion

ページ
すべて展開 | すべて省略

 - WordPress

  関連記事

eye_vaultpress
VaultPress™を利用して運用中のメインサイト(Primary)を復旧する手順

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_wordpress
WordPress標準機能を利用してメール投稿する方法と設定

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_php
PHP.iniに設定する設定をhttpd.confや.htaccessに対して行うメリット

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_wordpress
JetPackのカスタムCSSエディタのACE Code Editorが表示されない場合

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_wordpress
投稿の前後挿入にNew Adman_v1.6.8-wordpressプラグインを利用

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_wordpress
WordPressの独自ショートコード埋め込みにJavaScript外部ファイルを指定する

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_google_ads
GoogleAdSense,ウェブマスターツール(WMT)の確認にGoogle Publisher Plugin-v0.1.0Betaを利用

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_wordpress
WordPressの独自ショートコードを設定しJavaScriptを出力

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_facebook
Facebook Like ボックスウィジェットをJetpackを利用して表示する

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_wordpress
RSS購読ボタンをサイドバーウィジェットにJetpackを利用して表示する

Google or AdMax Promotion(it) 禁断の機能がau公式 …