ワードプレスの有料テーマのRosemary　2

ワードプレスの画像のアップロードについて調べる

ワードプレスの画像アップロードのときの動きの理解があいまいなので実際に動作して検証してみました。

設定ーメディアはデフォルトの値を使用。

最小のテーマを作成

style.cssとindex.phpのみのテーマを作成して、テーマフォルダにアップロードしました。このテーマを適用しました。

メディアから画像をアップロード

アップロードする画像は、無料の写真素材はフリー素材のぱくたそを使用。

https://www.pakutaso.com/20200515150post-27872.html

Mキャッチサイズで1600×1060ピクセルです。

６ファイル作成されました

オリジナル＋設定画面３つの合計４ファイルが作成されると思っていましたが、合計６ファイル作成されました。

  • chitose599V9A9832_TP_V.jpg・・・・・・・・オリジナル
  • chitose599V9A9832_TP_V-150×150.jpg・・・thumbnail
  • chitose599V9A9832_TP_V-300×200.jpg・・・medium
  • chitose599V9A9832_TP_V-1024×682.jpg・・・large
  • chitose599V9A9832_TP_V-1536×1023.jpg・・・1536×1536
  • chitose599V9A9832_TP_V-768×512.jpg・・・medium_large

medium_largeはググってみたところ、幅768px固定、高さは無制限のミディアムラージサイズとのことです。また、1536pxと2048pxと2560pxの３つのサイズも自動で作られるそうです。つまり、オリジナル＋７サイズが自動で作成されます。functions.phpで自動生成を停止することもできます。

また、画像をアップロードしたことにより、データベースのwp_postsテーブルに１レコード、wp_postmetaテーブルに２レコード（_wp_attached_file、_wp_attachment_metadata）が作成されました。

Rosemaryテーマでアップロードしてみた

さらに２ファイルが増えていました。

  • 1080×720.jpg
  • 520×400.jpg

これはfunction.phpで、以下の２行で設定してあります。

    add_image_size( 'solopine-full-thumb', 1080, 0, true );
    add_image_size( 'solopine-misc-thumb', 520, 400, true );

このテーマでは画像追加時に、solopine-full-thumbとsolopine-misc-thumbという名前で２つの画像を追加しています。アーカイブのアイキャッチや、Rosemary Latest Postsウィジェットのアイキャッチにこの名前で画像のパスをセットしています。

また、画像をアップロードしたことにより、データベースのwp_postsテーブルに１レコード、wp_postmetaテーブルに２レコード（_wp_attached_file、_wp_attachment_metadata）が作成されました。

同一サイズに表示するテーマはこのように独自で画像を追加しているんですね。

ということは、途中でテーマを変更する場合は、テーマ独自サイズの画像がないため、表示がくずれる可能性があります。

Rosemary Coreプラグインを有効にするとRosemary Latest Postsウィジェットが崩れる

Rosemary Latest Postsウィジェットは以下のパスにありました。

wp-content/themes/rosemary/inc/widgets/post_widget.php

Rosemary Coreプラグインを有効にすると、以下のphpが優先されました。

wp-content/plugins/rosemary-core/inc/widgets/post_widget.php

            <div class="side-pop <?php if($layout == 'small_thumb') : ?>list<?php endif; ?>">

                <div class="side-pop-img">
                    <?php if(has_post_thumbnail()) : ?>
                    <a href="<?php the_permalink() ?>"><?php the_post_thumbnail('solopine-thumb'); ?></a>
                    <?php else : ?>
                    <a href="<?php the_permalink() ?>"><img src="<?php echo get_template_directory_uri(); ?>/img/default-misc.png" alt="<?php esc_attr_e('Default', 'rosemary-core'); ?>" /></a>
                    <?php endif; ?>
                    <?php if($counter) : ?><span class="side-count"><?php echo esc_html($number_count); ?></span><?php endif; ?>
                </div>

                <div class="side-pop-content">
                    <h4><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h4>
                    <?php if(!$date) : ?><span class="sp-date"><?php the_time( get_option('date_format') ); ?></span><?php endif; ?>
                </div>

            </div>

このphpのなかの93行目のthe_post_thumbnail('solopine-thumb’)をsolopine-misc-thumbに変更したところ、小さいサイズのアイキャッチで表示できました。

Rosemary Coreプラグインの必要性がわかりませんが、なくてもいいのでしょうか。

WordPress

Posted by zzz