wordpressの投稿の出力・表示

wordpressの投稿の出力・表示

記事のタイトルを表示するには次のように記述します。


タイトル

<?php the_title();?>

■参考例
原則、theがついているためwordpressのループ内で利用します。

<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php the_title();?>
<?php endwhile;?>
<?php else : ?>
記事が1件も見つからなかったときの処理
<?php endif; ?>

記事の本文を表示するには次のように記述します。


本文

<?php the_content();?>

■参考例
原則、theがついているためwordpressのループ内で利用します。

<?php if ( have_posts() ) : ?>
    <?php while ( have_posts() ) : the_post(); ?>
        <?php the_content();?>
    <?php endwhile;?>
    <?php else : ?>
        記事が1件も見つからなかったときの処理
<?php endif; ?>

■記事の本文を出力して100文字以降は「…」を表示するには次のように記述します。

<?php echo mb_substr(strip_tags($post-> post_content),0,100).' ...'; ?>

アイキャッチ画像

■アイキャッチ画像を<img>タグで出力し表示するには次のように記述

<?php the_post_thumbnail( 'thumbnail' ); ?> // サムネイル (デフォルトでは 150x150px)
<?php the_post_thumbnail( 'medium' ); ?> // 中サイズ (デフォルトでは 300x300px)
<?php the_post_thumbnail( 'large' ); ?> // 大サイズ (デフォルトでは 640x640px)
<?php the_post_thumbnail( 'full' ); ?> // フルサイズ (アップロードした画像の元サイズ)

■アイキャッチ画像をurlで出力し表示するには次のように記述します。

imgタグに記述したり背景にbackgroundを指定する際に利用いたします。

<img src="<?php bloginfo('template_directory'); ?>/" class="" alt="">
<a href="#" class="" style="background-image: url('<?php the_post_thumbnail_url('thumbnail'); ?>')"></a>

bootstrapでのarchive.phpでの出力参考例

<div class="container">
<div class="row">
  <?php
  $wp_query = new WP_Query();
  $args = array(
  'post_type' => 'post',
  'post_status' => 'publish',
  'posts_per_page' => 3,
  'order' => 'DESC'
  );
  $wp_query->query($args);
  if($wp_query->have_posts()){
  ?>
  <?php
  while (have_posts()) {
  the_post();
  ?>
  <!-- 出力部分 -->

  <div class="col-md-4">
    <div class="" style="background-image: url(<?php the_post_thumbnail_url('large'); ?>);">
      <div class="overlay"></div>
      <a href="<?php echo get_permalink(); ?>" class=""><span class=""></span></a>
      <div class="">
        <h3><a href="<?php echo get_permalink(); ?>"><?php the_title(); ?></a></h3>
        <span>Web Design</span>
      </div>
    </div>
  </div>

  <!-- 出力部分 -->
  <?php
  }
  wp_reset_query();
  }
  ?>
</div>
</div>

bootstrapでのsingle.phpでの出力参考例

  <div class="container">
    <div class="row">
      <?php if(have_posts()): the_post(); ?>

        <div class="col-lg-8">
          <?php the_post_thumbnail( 'full', array('class' => 'myclass') ); ?>
          <h1 class=""><?php the_title();?></h1>
          <?php the_content(); ?>
        </div> <!-- .col-md-8 -->

      <?php endif; ?>

      <?php get_sidebar(); ?>
    </div>
  </div>
制作のご相談等は下記よりお願いいたします。

お手数ではございますが、下記リンクよりお問い合わせください。

お問い合わせフォームはこちら