未分類

ワードプレス　固定ページのテンプレートを使って　サムネイル画像を横並びにする方法

固定ページのテンプレートの編集をして、サムネイル画像を横並びにした時の、コードの編集箇所を下記に記載します。
ダッシュボードの外観→テーマの編集から固定ページを選択して編集します。
固定ページのテンプレートは追加することが出来るので、最初からあるテンプレートを編集するのではなく、既存のテンプレートをコピーして、追加し、それを編集することをおすすめします。
固定ページのテンプレート追加方法はこちら

変更前

3

<?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(); ?>

変更後

99

変更後のコード

<?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を入れ、回り込みを解除することにより、画像を横並びにすることができました。
それ以外に画像ギャラリーみたいのを作成したかった為、コンテンツを表示しないように、コードを削除している部分があります。

-未分類