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>
この記事を書いた人
connecti
CONNECTIは人と人を繋ぐ架け橋になるという思いで創業しました。
