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

WordPressとは?

WordPress(ワードプレス)って オープンソースのブログソフトとして、2003年に公開されました。 オープンソースとは、言葉通り、誰でも無償で自由に改良したり、再配布できるソフトウェアです。 ま …

ワードプレス

WordPress テーマTwenty Sixteenでメンバー紹介や選手一覧などを作ってみた①

  WordPressでスポーツチームやサークルまたは、企業やショップなどの人物紹介などのページを作るときに行う方法として、Web製作者それぞれやり方はあると思いますが、独学で学んだ私が作っ …

選手一覧メンバー一覧

WordPress テーマLIQUID PRESSでメンバー紹介や選手一覧などを作ってみた⑤

  1.選手一覧、メンバー一覧表示   選手登録を、とりあえず5名登録したら、今度は一覧表示で見てみたいです。 そこで、前回説明した「archive-member.php」を使って …

画像を上下中央に配置

指定した範囲内に画像を上下中央に配置

  divなどで指定した部分に、画像を配置 上下中央にする方法は他にもありますが、 今回は、『position』を使ってみます。   html <div class=&quo …

sliderコピー

ヘッダーのスライドショーをページ毎に変える方法

前回の記事で、「ヘッダー画像やスライダーをページ毎に変える方法」を紹介しましたが、 今回は引き続き、スライドショーができるプラグインを使った方法をやってみましたので紹介します。   Smar …