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 指定したページにジャンプさせる方法しかもフェードインで滑らかに表示

【自動で切り替わる】【何秒後に切り替わる】【指定したページにジャンプさせたい】 たぶんこれを使う理由としては、 ・新しくWebサイトを作り直した時に、古い方のURLにアクセスした人に自動で新しいURL …

カスタムスクロールバー

スクロールバーをカスタマイズできるプラグインjQuery custom content scrollerを試してみた

  WordPressでスクロールバーをカスタマイズ 別にスクロールバーは変えなくてもいいんじゃない?って思っているかもしれませんが、 実は、あるサイトを作っていて変えたくなったんです。 そ …

カスタム投稿

【サンプル】プラグインなしでカスタム投稿タイプを複数作る

  あまりWordPressをテクっていない私が、今回はプラグインなしでカスタム投稿タイプを作ってみました。 たぶん、詳しい人からするとかなり簡単にできてしまうんだと思いますが、 詳しい人ほ …

表示件数

意外と忘れていた表示件数

  アーカイブの表示件数   WordPressのテーマをカスタマイズしていて、 記事の一覧表示やカスタム投稿の一覧表示を出力する【アーカイブ.php】で、 1ページに表示される件 …

きれいに拡大したい

小さい画像をきれいに拡大する

  小さい画像(写真)をホームページのデザインに合わせて、きれいに大きくしたい時に役立つwebサービスが『waifu2x-multi』   普通に拡大してしまうと、どうしても画像が …