ワードプレスでサイト構築中に「ブログ投稿の一覧」の文章を「the_excerpt();」抜粋表示していたのですが、ある時から文章だけが表示されなくなった時の解決方法をメモしておきます。
動作環境・状況
- ワードプレスアプリで日記ブログを投稿
- 「the_excerpt();」で抜粋表示
- PCで新規にテスト投稿したら問題なく表示される
- 「the_content();」だと表示できる
目次
原因は「<!– wp:image –>」
アプリで投稿すると、下記のように
<!-- wp:image {"id":690,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large">
<img class="wp-image-690" src="画像のURL" alt="" />
<figcaption>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.。<br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</figcaption>
</figure>
<!-- /wp:image --><!– wp:image{ } –!>このタグがひっついてくるんですが、これがどうも「ここからここまでが画像です。」と示しているようでした。
なるほど。だから「the_content();」だと表示されるのか。でも抜粋表示でないと、これまで作ってきたCSSが使えず困ります。。。
なので、画像部分の<image>タグのみをこれで括ってあげるように修正。
<figure class="wp-block-image size-large">
<!-- wp:image {"id":690,"sizeSlug":"large"} -->
<img class="wp-image-690" src="画像のURL" alt="" />
<!-- /wp:image -->
<figcaption>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</figcaption> </figure>
<!-- /wp:image -->これで公開し直すと、無事に抜粋部分が表示されるようになりました。
とっても簡単な修正ですが、色々カスタマイズしているとなかなか原因が見つけられず困りました・・・。
修正しなくても安心してアプリ投稿できるようになってほしいなぁ。（他力）
ブロックエディターで投稿した場合もこのようなコードが自動挿入されるようになっていますが、どんな役割があって払い出されるか勉強しなきゃなぁと思わされた事象でした。
Follow me!
