ワードプレスの有料テーマのRosemary 2
ワードプレスの画像のアップロードについて調べる
ワードプレスの画像アップロードのときの動きの理解があいまいなので実際に動作して検証してみました。
設定ーメディアはデフォルトの値を使用。
最小のテーマを作成
style.cssとindex.phpのみのテーマを作成して、テーマフォルダにアップロードしました。このテーマを適用しました。
メディアから画像をアップロード
アップロードする画像は、無料の写真素材はフリー素材のぱくたそを使用。
https://www.pakutaso.com/20200515150post-27872.html
Mキャッチサイズで1600×1060ピクセルです。
6ファイル作成されました
オリジナル+設定画面3つの合計4ファイルが作成されると思っていましたが、合計6ファイル作成されました。
- 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の3つのサイズも自動で作られるそうです。つまり、オリジナル+7サイズが自動で作成されます。functions.phpで自動生成を停止することもできます。
また、画像をアップロードしたことにより、データベースのwp_postsテーブルに1レコード、wp_postmetaテーブルに2レコード(_wp_attached_file、_wp_attachment_metadata)が作成されました。
Rosemaryテーマでアップロードしてみた
さらに2ファイルが増えていました。
- 1080×720.jpg
- 520×400.jpg
これはfunction.phpで、以下の2行で設定してあります。
add_image_size( 'solopine-full-thumb', 1080, 0, true );
add_image_size( 'solopine-misc-thumb', 520, 400, true );
このテーマでは画像追加時に、solopine-full-thumbとsolopine-misc-thumbという名前で2つの画像を追加しています。アーカイブのアイキャッチや、Rosemary Latest Postsウィジェットのアイキャッチにこの名前で画像のパスをセットしています。
また、画像をアップロードしたことにより、データベースのwp_postsテーブルに1レコード、wp_postmetaテーブルに2レコード(_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プラグインの必要性がわかりませんが、なくてもいいのでしょうか。
ディスカッション
コメント一覧
まだ、コメントがありません