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

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

関連記事

画像を順番に表示

画像を順番に重ねて表示

  画像を順番に重ねて表示したい。 画像を遅らせて表示したい。 画像に動きをつけたい。   今回は、WordPressでトップページ(フロントページ)のみ、動きのある画像を表示した …

slick

IEでスライダーslickのフェードはチカチカする

  fade:trueはやめたほうがいい WordPressに導入するのに、とても使い勝手がいいjQueryの【slick】なんですが、オプションでフェードを選択するとIEでは、隠れていた部 …

ワードプレスにアメブロ

ワードプレスにアメブロ

  ワードプレスの固定ページにアメブロの記事を読み込む WordPressでホームページを作りたいけどアメブロを止めたくない ブログを作成するなら有名なアメブロが簡単で始めやすいので、今も更 …

divでtableを作ってみた

divでtableを作ってみた(レスポンシブ対応)

  display: flexでレスポンシブにも対応させた PCとスマホで見せ方を変えたかったので、cssで調整 PCでは横4列、スマホでは横2列で表示 通常の表が横に2つ並んでいるようなも …

フォトギャラリー

WordPressでフォトギャラリーを作るのに3つのプラグインを入れてみた

  プラグインを使って簡単にフォトギャラリー   WordPressの固定ページ、投稿ページ、カスタム投稿ページに写真を並べて掲載するフォトギャラリーページは、プラグインを使って簡 …