サポート » 使い方全般 » ギャラリーのソースコードを事前に作成しておく方法

  • 解決済 makotos1112

    (@makotos1112)


    記事に記述するギャラリーのソースコードを事前に作成しておく方法を探しています。

    現在の記事作成の手順は、
    1,記事(html)を事前に作成する
    2,画像をwordpressにアップロードする
    3,ギャラリーを手動で作成する

    という流れで投稿を作成しています。
    このうち、3のギャラリーをコードして事前にhtmlに記述しておくことは可能でしょうか?
    というのが質問の意図です。

    背景としましては、
    画像単体であれば事前にimgタグをhtmlに記述するなどして、
    ソースを記事にコピペした時点で反映させることができますが、

    ギャラリーに関しては、

    [gallery link="file" columns="4" size="large" ids="101,102,103]

    といった形で画像をアップロードしたあとにできるidによって生成されるため、
    事前にhtmlに記述して用意おくことができません。
    また、画像の読み込み速度によって、順番にアップしたにもかかわらず、
    アップした順番とidの順番が若干前後したりもしますので、ギャラリー作成後に画像の順番も1つ1つチェックが必要な状態です。

    ギャラリーの作成の手間が大変なので、効率化させたくよろしくお願いします。

8件の返信を表示中 - 1 - 8件目 (全8件中)
  • こんにちは

    「事前」というのがいつの前かにもよりますが、ご質問を言い換えれば
    「img タグに記述するためのアップロード画像の URL を知ることができるか?」
    ということで合っているでしょうか?
    画像のURLを知ることができれば、ご自身でギャラリーの HTML を記述して任意の画像の順で並べることができるのではないでしょうか。

    画像の URL はメディアライブラリで画像を選択し、「ファイルの URL」で確認することができます。

    スレッド開始 makotos1112

    (@makotos1112)

    回答ありがとうございます。質問が分かりづらく申し訳ありません。
    おっしゃるように、確かに画像単体のURLであればファイル名称を元に、事前にマークアップしておくことはできます。
    そうではなく、私がやりたいのはギャラリーを事前にマークアップしておく方法です。

    もう少し具体的に状況をお話します。
    フォルダにある aaa.jpg, bbb.jpg, ccc.jpg という3つの画像について、
    ・各画像単体で表示させる
    ・ギャラリーとして表示させる
    の2つをやりたかったとします。

    最初の単体で表示させる分にはご回答の通り、
    アップロードする前から各画像のタグは分かりますので、
    事前に3つの画像のマークアップは可能ですでに実現できています。

    問題は2つ目のギャラリーとして表示させる場合で、
    ギャラリーに使用される画像のIDは画像アップ後に割り振られる(と理解しています)ため、
    例えば上の3つが順番に格納されたギャラリーを事前にマークアップしておきたくても、

    [gallery link="file" columns="4" size="large" ids="???,???,???]

    における???はアップしてから初めて分かるものなので、事前にマークアップを済ませておくことができません。

    私の質問はご理解頂けましたでしょうか?
    ギャラリーの仕様について私は上記の様に理解しています。
    個人的な予想ですが、画像アップ後にidが割り当てられる以上、事前にマークアップを済ませておくことは
    不可能ではないかな?と考えており、それを確かめるために質問させて頂いております。

    もしも、事前にギャラリーのマークアップができる方法があれば
    具体的なコードの例を示していただけると大変ありがたいです。

    こんにちは、

    画像単体なら、text エディタで開いた時に、htmlソースが見えるので、変更もできるけど、
    ギャラリーだと、text エディタで開いても、ショートコードが表示されるだけでソースが見えないくて、作業が面倒くさいという事でしょうか?

    もしそういう事で、クラッシクエディタを使っているのであれば、

    フィルターを追加すれば、エディタ内で、HTMLソースを見ることができるようになると思います。

    
    add_filter( 'format_for_editor', 'function_name' );
    
    function function_name( $return_value ) {
    	$content= get_post_field('post_content', get_the_ID());
    
    	return do_shortcode( $content );
    }
    

    余談ですが、ギャラリーは、テーマの設定によっては、dl要素を使って表示する場合と、figure要素で表示することもあります。
    サイドバーのギャラリーは、それはそれで、HTMLは異なったと思いますので注意してください。

    • この返信は9ヶ月、 3週前にnobitaが編集しました。
    スレッド開始 makotos1112

    (@makotos1112)

    回答ありがとうございます。

    なるほど、ショートコードの実態を表示させる方法があるということですね。
    上記のコードはどこに設置させてどのように反映させるものでしょうか?
    function.phpに記述させれば良いですか?

    functions.php に記述します PHPコードです。

    • この返信は9ヶ月、 3週前にnobitaが編集しました。
    スレッド開始 makotos1112

    (@makotos1112)

    ありがとうございます、上記のコードを反映させた後、ショートコードの仕組みが理解できました。
    これなら画像名から事前にマークアップできそうです。

    Chromeなどの検証で表示されるDOMも最終的にこのようなショートコードが展開されて表示されるわけですね。色々と理解が深まりました。

    最後に1つ、追加で質問させて頂きたいのですが、
    同じギャラリーを作成するとして、
    ・投稿にショートコードを用いて表示させる場合と、
    ・ショートコードを用いずに純粋なマークアップだけで作成する場合
    とで、ブラウザでの表示速度や、その他、違いが生じる部分はありますでしょうか?

    厳密にいえば、ショートコードはPHPなので、多少差が出るのかもしれませんが、一番は複数の画像を表示するので、それが表示速度に一番影響与えるのではないかと思います。

    なので、ブラウザの表示範囲外の画像を遅延ロード(lazyload)とか、画像フォーマットの工夫などの方が効果ははっきりと表れると思います。

    スレッド開始 makotos1112

    (@makotos1112)

    御両名とも回答頂き大変助かりました。
    WPの知識が深まりました。

8件の返信を表示中 - 1 - 8件目 (全8件中)
  • トピック「ギャラリーのソースコードを事前に作成しておく方法」には新たに返信することはできません。