投稿2020/11/20 04:30
編集2020/12/08 01:10Wordpressでカテゴリ別の記事一覧でアイキャッチ画像を表示させたいと考えております。
画像はできるだけ（常識的な範囲で）小さく一覧性の高い感じにしたいです。
▼現状ページ（一覧の画像がデカく一覧性に乏しい）
↓開発中のサイトなので予告なくリンク切れの可能性があります！
http://ictaga.com/members/okui/wp2/
・Wordpress 5.5.3
・テーマはTwenty Twentyバージョン: 1.5
・index.phpにカテゴリ一覧を入れるソース（下記サイトの）を追加してます！
http://technical.decogr.net/wordpress/%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA-wordpress/wordpress%E3%81%A7%E3%82%AB%E3%83%86%E3%82%B4%E3%83%AA%E3%83%BC%E4%B8%80%E8%A6%A7%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B/
▼目標ページ
http://www.sakata-kensetu.co.jp/contents/?cat=3
エラーというエラーは出てないですが、カスタマイズの最中って感じです！
PHP
下記のサイト等見てますがいまいち理解できませんでした
https://arts-factory.net/thumbnail2/
https://www.tsukimi.net/wordpress_thumbnail.html
ez-HTML 7.71
Dream weaver CS5
上記2つは使える環境です！
ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。
Wordpressでカテゴリ別の記事一覧でアイキャッチ画像を表示させたいと考えております。
画像はできるだけ（常識的な範囲で）小さく一覧性の高い感じにしたいです。
▼現状ページ（一覧の画像がデカく一覧性に乏しい）
http://ictaga.com/members/okui/wp2/
・Wordpress 5.5.3
・テーマはTwenty Twentyバージョン: 1.5
・index.phpにカテゴリ一覧を入れるソース（下記サイトの）を追加してます！
http://technical.decogr.net/wordpress/%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA-wordpress/wordpress%E3%81%A7%E3%82%AB%E3%83%86%E3%82%B4%E3%83%AA%E3%83%BC%E4%B8%80%E8%A6%A7%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B/
▼目標ページ
http://www.sakata-kensetu.co.jp/contents/?cat=3
▼サイトの現状 http://ictaga.com/members/okui/wp2/
php
1<?php 2/** 3 * The main template file 4 * 5 * This is the most generic template file in a WordPress theme 6 * and one of the two required files for a theme (the other being style.css). 7 * It is used to display a page when nothing more specific matches a query. 8 * E.g., it puts together the home page when no home.php file exists. 9 * 10 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/ 11 * 12 * @package WordPress 13 * @subpackage Twenty_Twenty 14 * @since Twenty Twenty 1.0 15 */ 16 17get_header(); 18?> 19 20<main id="site-content" role="main"> 21<!-- カテゴリ一覧の表示 ここから --> 22<ul class="category_list"> 23 <?php 24 $cat_all = get_terms( "category", "fields=all&get=all&exclude_tree=12&exclude=11" ); 25 foreach($cat_all as $value): 26 ?> 27 <li><a href="<?php echo get_category_link($value->term_id); ?>"><?php echo $value->name;?>(<?php echo $value->count;?>)</a></li> 28 <?php endforeach; ?> 29</ul> 30<!-- カテゴリ一覧の表示 ここまで --> 31 32<!-- アイキャッチ画像一覧の表示 ここから --> 33<div class="article-wrap"> 34 <?php 35 36 $archive_title = ''; 37 $archive_subtitle = ''; 38 39 if ( is_search() ) { 40 global $wp_query; 41 42 $archive_title = sprintf( 43 '%1$s %2$s', 44 '<span class="color-accent">' . __( 'Search:', 'twentytwenty' ) . '</span>', 45 '“' . get_search_query() . '”' 46 ); 47 48 if ( $wp_query->found_posts ) { 49 $archive_subtitle = sprintf( 50 /* translators: %s: Number of search results. */ 51 _n( 52 'We found %s result for your search.', 53 'We found %s results for your search.', 54 $wp_query->found_posts, 55 'twentytwenty' 56 ), 57 number_format_i18n( $wp_query->found_posts ) 58 ); 59 } else { 60 $archive_subtitle = __( 'We could not find any results for your search. You can give it another try through the search form below.', 'twentytwenty' ); 61 } 62 } elseif ( is_archive() && ! have_posts() ) { 63 $archive_title = __( 'Nothing Found', 'twentytwenty' ); 64 } elseif ( ! is_home() ) { 65 $archive_title = get_the_archive_title(); 66 $archive_subtitle = get_the_archive_description(); 67 } 68 69 if ( $archive_title || $archive_subtitle ) { 70 ?> 71 72 <header class="archive-header has-text-align-center header-footer-group"> 73 74 <div class="archive-header-inner section-inner medium"> 75 76 <?php if ( $archive_title ) { ?> 77 <h3 class="archive-title"><?php echo wp_kses_post( $archive_title ); ?></h3> 78 <?php } ?> 79 <?php 80 $thumbnail_id = get_post_thumbnail_id();//アイキャッチのID 81 $data = wp_get_attachment_image_src($thumbnail_id,'thumbnail');//配列 82 ?> 83 <img src="<?php echo $data[0] ;?>" width="<?php echo $data[1] ;?>" height="<?php echo $data[2] ;?>" > 84 <?php if ( $archive_subtitle ) { ?> 85 <div class="archive-subtitle section-inner thin max-percentage intro-text"><?php echo wp_kses_post( wpautop( $archive_subtitle ) ); ?></div> 86 <?php } ?> 87 88 </div><!-- .archive-header-inner --> 89 90 </header><!-- .archive-header --> 91 92 <?php 93 } 94 95 if ( have_posts() ) { 96 97 $i = 0; 98 99 while ( have_posts() ) { 100 $i++; 101 if ( $i > 1 ) { 102 echo '<hr class="post-separator styled-separator is-style-wide section-inner" aria-hidden="true" />'; 103 } 104 105 the_post(); 106 107 get_template_part( 'template-parts/content', get_post_type() ); 108 109 } 110 } elseif ( is_search() ) { 111 ?> 112 113 <div class="no-search-results-form section-inner thin"> 114 115 <?php 116 get_search_form( 117 array( 118 'label' => __( 'search again', 'twentytwenty' ), 119 ) 120 ); 121 ?> 122 123 </div><!-- .no-search-results --> 124 125 <?php 126 } 127 ?> 128 129 <?php get_template_part( 'template-parts/pagination' ); ?> 130 131</main><!-- #site-content --> 132</div><!-- /.article-wrap --> 133 134<?php get_template_part( 'template-parts/footer-menus-widgets' ); ?> 135 136<?php 137get_footer();
PHP
検索してヒットした下記のサイト等見てますがいまいち理解できませんでした
https://arts-factory.net/thumbnail2/
https://www.tsukimi.net/wordpress_thumbnail.html
回答2件
0
ベストアンサー
要望がなんとなく判明したのでさらに書き換えました。
「トップページにカテゴリー一覧（リスト）を表示させる」
「トップページには各カテゴリーのタイトルとそれに所属する記事を画像（150*150）とタイトルで表示→個別ページにリンク」
「アーカイブページもトップページと同じような見た目で表示」
◆index.phpをすべて下記に書き換える↓
php
1<?php 2/** 3 * The main template file 4 * 5 * This is the most generic template file in a WordPress theme 6 * and one of the two required files for a theme (the other being style.css). 7 * It is used to display a page when nothing more specific matches a query. 8 * E.g., it puts together the home page when no home.php file exists. 9 * 10 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/ 11 * 12 * @package WordPress 13 * @subpackage Twenty_Twenty 14 * @since Twenty Twenty 1.0 15 */ 16 17get_header(); 18?> 19 20<main id="site-content" role="main"> 21<div class="category_list"><!-- カテゴリ一覧の表示 ここから --> 22<ul> 23 <?php 24 $cat_all = get_terms( "category", "fields=all&get=all&exclude_tree=12&exclude=11" ); 25 foreach($cat_all as $value): 26 ?> 27 <li><a href="<?php echo get_category_link($value->term_id); ?>"><?php echo $value->name;?>(<?php echo $value->count;?>)</a></li> 28 <?php endforeach; ?> 29</ul> 30</div><!-- カテゴリ一覧の表示 ここまで --> 31 32<?php if ( is_home() ) { ?> 33 <?php 34 $categories = get_categories(); 35 foreach($categories as $category) : 36 ?> 37 <hr class="post-separator styled-separator is-style-wide section-inner" aria-hidden="true" /> 38 <div class="has-text-align-center"><h2><a href="<?php echo get_category_link( $category->term_id ); ?>"><?php echo $category->cat_name; ?></a></h2></div> 39 <?php 40 query_posts('cat='.$category->cat_ID.'&showposts=-1'); 41 if (have_posts()) : ?> 42 <div class="ex-list"> 43 <?php while (have_posts()) : the_post(); ?> 44 <div><a href="<?php the_permalink(); ?>"><?php if(has_post_thumbnail()): ?><img src="<?php the_post_thumbnail_url( 'thumbnail' ); ?>"><?php else: ?><img src="http://placehold.jp/cfcfcf/ffffff/150x150.png?text=NO%20IMAGE"><?php endif; ?><?php the_title(); ?></a></div> 45 <?php endwhile; ?> 46 </div> 47 <?php endif; ?> 48 <?php endforeach; ?> 49 50 51<?php }else{ ?> 52 <?php 53 54 $archive_title = ''; 55 $archive_subtitle = ''; 56 57 if ( is_search() ) { 58 global $wp_query; 59 60 $archive_title = sprintf( 61 '%1$s %2$s', 62 '<span class="color-accent">' . __( 'Search:', 'twentytwenty' ) . '</span>', 63 '“' . get_search_query() . '”' 64 ); 65 66 if ( $wp_query->found_posts ) { 67 $archive_subtitle = sprintf( 68 /* translators: %s: Number of search results. */ 69 _n( 70 'We found %s result for your search.', 71 'We found %s results for your search.', 72 $wp_query->found_posts, 73 'twentytwenty' 74 ), 75 number_format_i18n( $wp_query->found_posts ) 76 ); 77 } else { 78 $archive_subtitle = __( 'We could not find any results for your search. You can give it another try through the search form below.', 'twentytwenty' ); 79 } 80 } elseif ( is_archive() && ! have_posts() ) { 81 $archive_title = __( 'Nothing Found', 'twentytwenty' ); 82 } elseif ( ! is_home() ) { 83 $archive_title = get_the_archive_title(); 84 $archive_subtitle = get_the_archive_description(); 85 } 86 87 if ( $archive_title || $archive_subtitle ) { 88 ?> 89 90 <header class="archive-header has-text-align-center header-footer-group"> 91 92 <div class="archive-header-inner section-inner medium"> 93 94 <?php if ( $archive_title ) { ?> 95 <h1 class="archive-title"><?php echo wp_kses_post( $archive_title ); ?></h1> 96 <?php } ?> 97 98 <?php if ( $archive_subtitle ) { ?> 99 <div class="archive-subtitle section-inner thin max-percentage intro-text"><?php echo wp_kses_post( wpautop( $archive_subtitle ) ); ?></div> 100 <?php } ?> 101 102 </div><!-- .archive-header-inner --> 103 104 </header><!-- .archive-header --> 105 106 <?php 107 } 108 109 if ( have_posts() ) { 110 ?> 111 <div class="ex-list"> 112 <?php while ( have_posts() ) { the_post(); ?> 113 <div><a href="<?php the_permalink(); ?>"><?php if(has_post_thumbnail()): ?><img src="<?php the_post_thumbnail_url( 'thumbnail' ); ?>"><?php else: ?><img src="http://placehold.jp/cfcfcf/ffffff/150x150.png?text=NO%20IMAGE"><?php endif; ?><?php the_title(); ?></a></div> 114 <?php } ?> 115 </div> 116 <?php 117 } elseif ( is_search() ) { 118 ?> 119 120 <div class="no-search-results-form section-inner thin"> 121 122 <?php 123 get_search_form( 124 array( 125 'label' => __( 'search again', 'twentytwenty' ), 126 ) 127 ); 128 ?> 129 130 </div><!-- .no-search-results --> 131 132 <?php 133 } 134 ?> 135 136 <?php get_template_part( 'template-parts/pagination' ); ?> 137<?php } ?> 138</main><!-- #site-content --> 139 140<?php get_template_part( 'template-parts/footer-menus-widgets' ); ?> 141 142<?php 143get_footer();
◆[外観]-[カスタマイズ]-[追加CSS]に追記↓
（flexbox使用。横幅700px以上で横4つ、それより小さい場合は横2つ）
css
1.category_list{ 2 padding:4rem 0 0; 3 max-width: 58rem; 4 width: calc(100% - 4rem); 5 margin-left: auto; 6 margin-right: auto; 7} 8.ex-list{ 9 display:flex; 10 flex-wrap: wrap; 11 width: calc(100% - 4rem); 12 padding:4rem 0 0; 13 max-width: 58rem; 14 margin-left: auto; 15 margin-right: auto; 16} 17.ex-list>div{ 18 width:50%; 19 padding: .5em; 20} 21.ex-list img{ 22 display:block; 23} 24@media (min-width: 700px){ 25 .ex-list>div{ 26 width:25%; 27 } 28}
書き換える部分を極力少なくしました。
index.phpとカスタマイズの所の追加CSSだけです。
※テーマの更新があった場合カスタマイズした内容が元に戻る可能性がありますので子テーマの作成をお勧めします。（子テーマについては知らなければまずは調べていただき、わからなければまた質問してください。）
投稿2020/11/26 05:26
編集2020/12/07 05:34総合スコア3235
0
サンプルサイトを作成しました。
https://ki-hi-ro.com/sample/thumbnail-list/
実現したいイメージはこんなかんじでしょうか？
ますはPHPで、投稿が繰り返されている箇所を article-wrap で囲います。
PHP
1<div class="article-wrap"> 2 3 <?php 4 while ( have_posts() ) { 5 $i++; 6 if ( $i > 1 ) { 7 echo '<hr class="post-separator styled-separator is-style-wide section-inner" aria-hidden="true" />'; 8 } 9 10 the_post(); 11 12 get_template_part( 'template-parts/content', get_post_type() ); 13 14 } 15 ?> 16 17</div><!-- article-wrap -->
CSS
1.article-wrap { 2 display: flex; 3 flex-wrap: wrap; 4 padding: 0 15px; 5 margin: 1rem auto; 6 max-width: 80%; 7}
一つ一つの記事は、articleタグで表現されていて、以下のようにスタイリングします。
CSS
1article { 2 border: 1px solid #ddd; 3 width: 22%; 4 height: max-content; 5 min-width: 200px; 6 padding: 1rem; 7 margin-bottom: 3rem; 8}
画像は、以下のようにして一つ一つの記事の幅に合わせます。
CSS
1img { 2 max-width: 100%; 3 height: auto; 4}
細かいところは省くと、以上でサンプルサイトのようになります。
ソースコードはこちらからダウンロードできます。
GitHub
PHPが出力されたあとのHTMLを使用しました。
そのため、以下の箇所が計10回繰り返されています。
jquery.matchHeightで、一つ一つのアイテムの高さを揃えました。
１ jQueryの本体を準備する
assets/jsに、jquery-3.5.1.min.jsを作成し、このページの以下の箇所をクリックした後のページから本体のコードをコピペします。
jQuery
1コピペしたコード
２ jquery.matchHeight.jsを準備する
assets/jsに、jquery.matchHeight.jsを作成し、このページからjquery.matchHeight.jsをコピペします。
jQuery
1コピペしたコード
３ 自分でスクリプトを用意する
例えば、script.jsを用意します。
jQuery
1(function ($) { 2 3 $('.item').matchHeight( 4 { 5 byRow: true, 6 property: 'height', 7 target: null, 8 remove: false 9 } 10 ); 11 12})(jQuery);
４ 一つ一つの要素に同じクラスを付ける
itemというクラスを以下の場所に付けます。(計10箇所)
HTML
1<article class="item post-268 post type-post status-publish format-standard has-post-thumbnail hentry category-kindergarten" id="post-268">
５ 3つのファイルを読み込む
HTML
1 <script src="assets/js/jquery-3.5.1.min.js"></script> 2 <script src="assets/js/jquery.matchHeight.js"></script> 3 <script src="assets/js/script.js"></script> 4</body>
以上で一つ一つの投稿の高さが揃いました。
画像の高さを揃えるには、まずimg-wrapで**<img>**を囲います。(計10箇所)
HTML
1<div class="img-wrap"> 2 <img loading="lazy" class="aligncenter size-full wp-image-269" src="http://ictaga.com/members/okui/wp-content/uploads/2020/09/minori.jpg" alt="" width="768" height="576"> 3</div>
img-wrapに適応させるCSSはこちら
CSS
1.img-wrap { 2 height: 150px; 3 margin: 1rem 0; 4 overflow-y: hidden; 5}
そうすると、タイトルが1行と2行の2パターン存在してしまい、画像の高さが少しだけ揃わなくなります。
そこで、タイトルが共通で持っているentry-titleというクラスに以下のCSSを適応させます。
CSS
1.entry-title { 2 width: 100%; 3 display: -webkit-box; 4 -webkit-line-clamp: 1; 5 -webkit-box-orient: vertical; 6 overflow: hidden; 7}
さらに、デバイスごとの横幅にも対応します。
以下の記述があることを確認し、
HTML
1<head> 2 3 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 4 5</head>
デバイスの横幅が699pxまでの、投稿全体を覆う要素の幅を定義します。
CSS
1.article-wrap { 2 width: 256px; 3}
700pxから
CSS
1@media screen and (min-width: 700px) { 2 .article-wrap { 3 width: 590px; 4 } 5}
1166pxから
CSS
1@media screen and (min-width: 1166px) { 2 .article-wrap { 3 width: 870px; 4 justify-content: flex-start; 5 } 6}
一つ一つの投稿は、以下のようにCSSを調整しました
CSS
1article { 2 min-width: 262px; 3 margin: 0 .5rem 3rem; 4}
twentytwentyの以下の部分について、解説します。
PHP
1if ( have_posts() ) { 2 3 $i = 0; 4 5 while ( have_posts() ) { 6 $i++; 7 if ( $i > 1 ) { 8 echo '<hr class="post-separator styled-separator is-style-wide section-inner" aria-hidden="true" />'; 9 } 10 the_post(); 11 12 get_template_part( 'template-parts/content', get_post_type() ); 13 14 } 15 }
まず全体が、
PHP
1if ( have_posts() ) { 2 3 4 }
で囲まれてますね。
これは、もし投稿があれば中身が実行されるということです。
次に、
PHP
1$i = 0;
ここでは、$iに0を入れています。この後で使います。
その下に、
PHP
1 while ( have_posts() ) { 2 3 4 }
とあります。
これは、投稿がある間は中身をずっと繰り返すということです。
投稿が10件あれば、10回繰り返されます。
その直後の
PHP
1$i++;
は、自分自身に1を足すという意味です。
一番最初の $i を思い出してください。
0が入っていますね。
PHP
1$i++;
とすることで、 $i に 1 が入ります。
2周目は、1 + 1 = 2
3周目は、2 + 1 = 3
4周目は、3 + 1 = 4
が、$i に入ります。
つまり、1周目だけ、$i に 1が入っています。
その次に
PHP
1if ( $i > 1 ) { 2 echo '<hr class="post-separator styled-separator is-style-wide section-inner" aria-hidden="true" />'; 3}
とあります。
PHP
1if ( $i > 1 ) { 2 3}
これは、もし$i が1よりも大きい時、中身を実行するという意味です。
中身は、こちらでしたね。
PHP
1echo '<hr class="post-separator styled-separator is-style-wide section-inner" aria-hidden="true" />';
これは、以下を表示するという意味です。
HTML
1<hr class="post-separator styled-separator is-style-wide section-inner" aria-hidden="true" />;
記事同士を区切っている線のことです。
PHP
1if ( $i > 1 ) { 2 echo '<hr class="post-separator styled-separator is-style-wide section-inner" aria-hidden="true" />'; 3}
ということは、$i が2以上の時、つまり、2つ目の投稿から
区切り線を表示するということです。
その次の
PHP
1the_post();
では、投稿のデータを取得しています。
ここでは、template-parts というフォルダの、content.php を読み込んでます。
PHP
1get_template_part( 'template-parts/content', get_post_type() );
長いですが、content.php は以下です。
PHP
1<article <?php post_class(); ?> id="post-<?php the_ID(); ?>"> 2 3 <?php 4 5 get_template_part( 'template-parts/entry-header' ); 6 7 if ( ! is_search() ) { 8 get_template_part( 'template-parts/featured-image' ); 9 } 10 11 ?> 12 13 <div class="post-inner <?php echo is_page_template( 'templates/template-full-width.php' ) ? '' : 'thin'; ?> "> 14 15 <div class="entry-content"> 16 17 <?php 18 if ( is_search() || ! is_singular() && 'summary' === get_theme_mod( 'blog_content', 'full' ) ) { 19 the_excerpt(); 20 } else { 21 the_content( __( 'Continue reading', 'twentytwenty' ) ); 22 } 23 ?> 24 25 </div><!-- .entry-content --> 26 27 </div><!-- .post-inner --> 28 29 <div class="section-inner"> 30 <?php 31 wp_link_pages( 32 array( 33 'before' => '<nav class="post-nav-links bg-light-background" aria-label="' . esc_attr__( 'Page', 'twentytwenty' ) . '"><span class="label">' . __( 'Pages:', 'twentytwenty' ) . '</span>', 34 'after' => '</nav>', 35 'link_before' => '<span class="page-number">', 36 'link_after' => '</span>', 37 ) 38 ); 39 40 edit_post_link(); 41 42 // Single bottom post meta. 43 twentytwenty_the_post_meta( get_the_ID(), 'single-bottom' ); 44 45 if ( post_type_supports( get_post_type( get_the_ID() ), 'author' ) && is_single() ) { 46 47 get_template_part( 'template-parts/entry-author-bio' ); 48 49 } 50 ?> 51 52 </div><!-- .section-inner --> 53 54 <?php 55 56 if ( is_single() ) { 57 58 get_template_part( 'template-parts/navigation' ); 59 60 } 61 62 /** 63 * Output comments wrapper if it's a post, or if comments are open, 64 * or if there's a comment number – and check for password. 65 * */ 66 if ( ( is_single() || is_page() ) && ( comments_open() || get_comments_number() ) && ! post_password_required() ) { 67 ?> 68 69 <div class="comments-wrapper section-inner"> 70 71 <?php comments_template(); ?> 72 73 </div><!-- .comments-wrapper --> 74 75 <?php 76 } 77 ?> 78 79</article><!-- .post -->
これが、一つ一つの投稿です。
投稿2020/11/23 11:35
編集2020/11/26 11:35
総合スコア43
あなたの回答
tips
プレビュー
Q&A
