固定ページのテンプレートの編集をして、サムネイル画像を横並びにした時の、コードの編集箇所を下記に記載します。
ダッシュボードの外観→テーマの編集から固定ページを選択して編集します。
固定ページのテンプレートは追加することが出来るので、最初からあるテンプレートを編集するのではなく、既存のテンプレートをコピーして、追加し、それを編集することをおすすめします。
固定ページのテンプレート追加方法はこちら
変更前
<?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を入れ、回り込みを解除することにより、画像を横並びにすることができました。
それ以外に画像ギャラリーみたいのを作成したかった為、コンテンツを表示しないように、コードを削除している部分があります。