固定ページのテンプレートの編集をして、サムネイル画像を横並びにした時の、コードの編集箇所を下記に記載します。
ダッシュボードの外観→テーマの編集から固定ページを選択して編集します。
固定ページのテンプレートは追加することが出来るので、最初からあるテンプレートを編集するのではなく、既存のテンプレートをコピーして、追加し、それを編集することをおすすめします。
固定ページのテンプレート追加方法はこちら
変更前
<?php /* Template Name:PAGE pc */ ?> <?php get_header(); ?> <div class="post"> <!--ループ開始--> <h2> <?php the_title(); ?> </h2> <div class="kizi"> <div class="sumbox02"> <div id="topnews"> <div> <?php query_posts($query_string); query_posts('cat=30&paged='.$paged);//表示したいカテゴリIDを列挙 ?> <?php if ( have_posts() ) : ?> <?php while ( have_posts() ) : the_post(); ?> <dl> <dt> <a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"> <?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?> <?php $title= get_the_title(); the_post_thumbnail(array( 110,110 ), array( 'alt' =>$title, 'title' => $title)); ?> <?php else: // サムネイルを持っていないときの処理 ?> <img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="110" height="110" /> <?php endif; ?> </a> </dt> <dd> <h4 class="saisin"><a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"> <?php the_title(); ?> </a></h4> <p class="datebox"> <?php the_time('Y/m/d') ?> | <?php the_category(', ') ?> <?php the_tags('', ', '); ?> </p> <p class="dami"><?php echo mb_substr( strip_tags( stinger_noshotcode( $post->post_content ) ), 0, 60 ) . ''; ?></p> <p class="motto"><a class="more-link" href="<?php the_permalink() ?>">続きを見る</a></p> </dd> </dl> <?php endwhile; ?> <?php else: ?> <p>記事はありませんでした</p> <?php endif; wp_reset_postdata(); ?> </div> </div> </div> </div> <!--/kizi--> <div style="padding:20px 0px;"> <?php get_template_part('ad');?> </div> <!--ページナビ--> <?php if (function_exists("pagination")) { pagination($wp_query->max_num_pages); } ?> <!--ループ終了--> </div> <!-- END div.post --> <?php get_footer(); ?>
変更後
変更後のコード
<?php /* Template Name:PAGE pc */ ?> <?php get_header(); ?> <div class="post"> <!--ループ開始--> <h2> <?php the_title(); ?> </h2> <div class="kizi"> <div class="sumbox02"> <div id="topnews"> <div> <?php query_posts($query_string); query_posts('cat=30&paged='.$paged);//表示したいカテゴリIDを列挙 ここを変更してカテゴリごとのギャラリー画像を作る ?> <?php if ( have_posts() ) : ?> <?php while ( have_posts() ) : the_post(); ?> <div style="float:left"> <dl> <dt> <a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"> <?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?> <?php $title= get_the_title(); the_post_thumbnail(array( 110,110 ), array( 'alt' =>$title, 'title' => $title)); ?> <?php else: // サムネイルを持っていないときの処理 ?> <img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="110" height="110" /> <?php endif; ?> </a> </dt> </dl> </div> <?php endwhile; ?> <?php else: ?> <p>記事はありませんでした</p> <?php endif; wp_reset_postdata(); ?> </div> </div> </div> </div> <!--/kizi--> <div style="padding:20px 0px;"> <?php get_template_part('ad');?> </div> <!--ページナビ--> <?php if (function_exists("pagination")) { pagination($wp_query->max_num_pages); } ?> <!--ループ終了--> </div> <!-- END div.post --> <?php get_footer(); ?>
変更箇所は25行目に下記のコードを入れ39行目で /div で閉じています。
<div style="float:left">
floatを入れ、回り込みを解除することにより、画像を横並びにすることができました。
それ以外に画像ギャラリーみたいのを作成したかった為、コンテンツを表示しないように、コードを削除している部分があります。