wordpress

固定ページにカスタム投稿記事一覧表示

投稿日:2018年9月10日 更新日:

記事一覧表示

 

 

固定ページにアイキャッチ画像付きの記事一覧を表示させたい

 

そこで、やりたかった主なことは以下の部分です。

 

・いろいろプラグインなどもあるが、プラグインを使わずに簡単に表示したい

・固定ページまたはフロントページに表示したい

・アイキャッチ画像を表示したい

・タイトルを表示したい

・サブタイトル(ひとこと)を表示したい

 

 

front-page.phpに表示させる

 

front-page.phpは、固定ページと同じような感じで、トップページのために作成します。

front-page.phpを使わないのであれば、page.phpに表示させることもできます。

表示させたい部分に記述します。

 


<div class="wrap">
  
   <?php
$args = array('post_type' => 'web-demo',
              'ignore_sticky_posts' => 1, 
              'orderby' => 'rand', 
              'order' => 'DESC', 
              'posts_per_page' => 21
             );
$post_list = get_posts($args);
if ($post_list) {
  foreach ($post_list as $post) : setup_postdata ($post);
?>
	<div class="wide-12-12s wide-12-6t wide-12-4m">		
            <a href="<?php the_permalink(); ?>">
            <?php if ( has_post_thumbnail() ) : ?>
                <?php the_post_thumbnail(); ?>
            <?php endif; ?>

            <span><?php the_title(); ?></span>
			<span><?php echo get_post_meta($post->ID , 'ひとこと' ,true); ?></span></a>
			</div>				
    <?php endforeach; wp_reset_query();}; ?>
</div>

※post_typeの部分は、web-demoとしていますので変更してください。
※orderbyのところは、ランダム表示にしています。日付で並べるときは(date)です。
※posts_per_pageのところは、21記事まで表示させています。

 

カスタムフィールドを使って個別に内容を作る

 

このカスタムフィールドも便利なプラグインもありますが、ここでもプラグインを使わずに簡単に表示させます。

 

上記の『front-page.php』に記述した

<?php echo get_post_meta($post->ID , 'ひとこと' ,true); ?>

 

の部分に表示されます。

 

 

最後に調整

 

あとは、cssでお好みになるように調整すれば完成です。

今回の例では、横並びの時に良く使う『flex』を使って表示させたイメージです。



-wordpress
-,


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

リストメニューを順番に表示

メニューリストを横から順番に表示させる jsとcss

  前回の記事では、『メニューリストを横から順番に表示させる cssのみ』ということで、 cssだけで動きのあるメニューを作成しました。   今回は、jsファイルに書き込んで同じよ …

予約1

簡単にワードプレスで予約システムを作る

  シンプル予約システム MTS Simple Bookingを使う   WordPressでお店のホームページを作って、しかも予約システムも導入できたらいいのにと思って探していた …

cssのcolumnでフロントページにランダム表示

CSSのcolumnでフロントページにランダム表示

  トップページに投稿記事をランダムに表示   通常トップページに表示するのは、 ・固定ページ ・投稿記事 のどちらかが多いと思いますが、 今回は投稿記事の新着順ではなく、ランダム …

vegas2

WordPressで画像をかっこよく見せるVEGAS

  WordPressで画像をかっこよく見せる ワードプレスを使っていて画像を扱うことも多いと思いますが、サイトをかっこよくおしゃれに見せる方法の一つとして、画像に手を加えてインパクトを与え …

オンマウス

マウスオーバーでリンク画像に変化をつける

  自分がしたことを忘れないように記事にしました。 やりたかったのは、マウスオーバー・オンマウスでリンク画像がだんだん大きくなり、上にのせていたマスクがなくなって画像がクリアになること。 い …