Wordpressの独自テーマに記事一覧を表示してみた。
今回はWordpressの独自テーマに記事一覧を表示してみました。
この記事は実施内容の備忘録となります。
- 1. 環境
- 2. 作業前の状態
- 3. 準備
- 4. 記事が存在したら表示する
- 5. 記事ページへのリンクを追加する
- 6. 記事の公開日を表示する
- 7. 記事のサムネイル(アイキャッチ)を表示する
- 8. 記事の文章を50文字表示する
1. 環境
2. 作業前の状態
index.php上でヘッダーとフッターを呼び出しているだけの状態です。
3. 準備
まずは記事一覧を表示する前の準備をしていきます。
(1) サムネイル(アイキャッチ)付き投稿の設定
サムネイル(アイキャッチ)を記事投稿時に追加できるよう、functions.phpに下記を追加します。
add_theme_support( 'post-thumbnails' );
すると、投稿画面にアイキャッチ画像を設定できるメニューが追加されました。
(2) 記事の投稿
プレビュー用に下記の記事を6つ投稿します。
(3) デザイン(HTML/CSS)の作成
表示する記事のデザインをHTMLとCSSを使用して作成します。
今回はこんな感じで作成しました。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>タイトル</title> <link rel="stylesheet" href="./style.css"> </head> <body> <header id="header">ヘッダー</header> <div id="content"> <article id="top"> <h1 id="top-title">新着記事一覧</h1> <section> <a href="" title="タイトルタイトル"> <time>2019-12-20</time> <h1><img src="./image.png" alt="タイトルタイトル" title="タイトルタイトル"></h1> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </a> </section> <section> <a href="" title="タイトルタイトル"> <time>2019-12-20</time> <h1><img src="./image.png" alt="タイトルタイトル" title="タイトルタイトル"></h1> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </a> </section> <section> <a href="" title="タイトルタイトル"> <time>2019-12-20</time> <h1><img src="./image.png" alt="タイトルタイトル" title="タイトルタイトル"></h1> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </a> </section> <section> <a href="" title="タイトルタイトル"> <time>2019-12-20</time> <h1><img src="./image.png" alt="タイトルタイトル" title="タイトルタイトル"></h1> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </a> </section> <section> <a href="" title="タイトルタイトル"> <time>2019-12-20</time> <h1><img src="./image.png" alt="タイトルタイトル" title="タイトルタイトル"></h1> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </a> </section> <section> <a href="" title="タイトルタイトル"> <time>2019-12-20</time> <h1><img src="./image.png" alt="タイトルタイトル" title="タイトルタイトル"></h1> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </a> </section> </article> </div> <footer id="footer">フッター</footer> </body> </html>
@import url("reset.css"); #header, #footer { background: #ccc; clear: both; padding: 2rem; text-align: center; } #top { overflow: hidden; } #top-title { font-size: 1.5rem; padding: 1rem; } #top section { border: 1px solid #ccc; float: left; margin: 0 0 1rem 1%; width: 32%; } #top section a { color: #464646; display: block; text-decoration: none; padding: 1rem; } #top section time { display: block; margin-bottom: 0.5rem; text-align: right; } #top section h1 { margin-bottom: 1rem; } #top section img { width: 100%; }
4. 記事が存在したら表示する
記事が存在したら表示する記載方法が下記となります。
<?php if(have_posts()) : ?> <?php while(have_posts()) : the_post();?> <!-- ここに記事の内容が表示される --> <?php endwhile; ?> <?php endif; ?>
用意したデザインを含めて、index.phpを編集します。
<?php get_header(); ?> <!-- ↓↓↓↓ 追加 ↓↓↓↓ --> <div id="content"> <article id="top"> <h1 id="top-title">新着記事一覧</h1> <?php if(have_posts()) : ?> <?php while(have_posts()) : the_post();?> <section> <!-- ここに記事の内容が表示される --> </section> <?php endwhile; ?> <?php endif; ?> </article> </div> <!-- ↑↑↑↑ 追加 ↑↑↑↑ --> <?php get_footer(); ?>
6記事分の枠だけ表示されました。
5. 記事ページへのリンクを追加する
記事ページへのリンク先URLを出力する記載方法が下記となります。
<?php echo get permalink(); ?>
また記事ページのタイトルを出力する記載方法が下記となります。
<?php echo get_the_title(); ?>
これらを組み合わせ、用意したデザインを含めて、index.phpを編集します。
<?php get_header(); ?> <div id="content"> <article id="top"> <h1 id="top-title">新着記事一覧</h1> <?php if(have_posts()) : ?> <?php while(have_posts()) : the_post();?> <section> <!-- ↓↓↓↓ 追加 ↓↓↓↓ --> <a href="<?php echo get_permalink(); ?>" title="<?php echo get_the_title(); ?>"> </a> <!-- ↑↑↑↑ 追加 ↑↑↑↑ --> </section> <?php endwhile; ?> <?php endif; ?> </article> </div> <?php get_footer(); ?>
画面の表示は変わりませんが、枠内を押下すると、記事ページに遷移できることが確認できます。
6. 記事の公開日を表示する
公開日を表示する記載方法が下記となります。
<?php echo get_the_date("Y-m-d"); ?>
用意したデザインを含めて、公開日が表示されるようindex.phpを編集します。
<?php get_header(); ?> <div id="content"> <article id="top"> <h1 id="top-title">新着記事一覧</h1> <?php if(have_posts()) : ?> <?php while(have_posts()) : the_post();?> <section> <a href="<?php echo get_permalink(); ?>" title="<?php echo get_the_title(); ?>"> <!-- ↓↓↓↓ 追加 ↓↓↓↓ --> <time><?php echo get_the_date("Y-m-d"); ?></time> <!-- ↑↑↑↑ 追加 ↑↑↑↑ --> </a> </section> <?php endwhile; ?> <?php endif; ?> </article> </div> <?php get_footer(); ?>
公開日が表示されました。
7. 記事のサムネイル(アイキャッチ)を表示する
サムネイル(アイキャッチ)の画像URLを表示する記載方法が下記となります。
<?php if(get_the_post_thumbnail_url()): ?> <?php echo get_the_post_thumbnail_url(); ?> <?php endif; ?>
用意したデザインを含めて、サムネイル(アイキャッチ)が表示されるようindex.phpを編集します。
※今回はサムネイルに記事タイトルが含まれていることを前提にHTMLを作成しています。
<?php get_header(); ?> <div id="content"> <article id="top"> <h1 id="top-title">新着記事一覧</h1> <?php if(have_posts()) : ?> <?php while(have_posts()) : the_post();?> <section> <a href="<?php echo get_permalink(); ?>" title="<?php echo get_the_title(); ?>"> <time><?php echo get_the_date("Y-m-d"); ?></time> <!-- ↓↓↓↓ 追加 ↓↓↓↓ --> <h1> <?php if(get_the_post_thumbnail_url()): ?> <img src="<?php echo get_the_post_thumbnail_url(); ?>" alt="<?php echo get_the_title(); ?>"> <?php else: ?> <?php echo get_the_title(); ?> <?php endif; ?> </h1> <!-- ↑↑↑↑ 追加 ↑↑↑↑ --> </a> </section> <?php endwhile; ?> <?php endif; ?> </article> </div> <?php get_footer(); ?>
画像が表示されました。
8. 記事の文章を50文字表示する
記事の文章を50文字表示する記載方法が下記となります。
※記事内のHTMLタグは除去しています。
<?php $content = str_replace("\n", "", strip_tags(get_the_content())); if(mb_strlen($content,'UTF-8') > 50) { $content = mb_substr($content, 0, 50,'UTF-8'); } echo $content . "..."; ?>
用意したデザインを含めて、記事の文章が表示されるようindex.phpを編集します。
<?php get_header(); ?> <div id="content"> <article id="top"> <h1 id="top-title">新着記事一覧</h1> <?php if(have_posts()) : ?> <?php while(have_posts()) : the_post();?> <section> <a href="<?php echo get_permalink(); ?>" title="<?php echo get_the_title(); ?>"> <time><?php echo get_the_date("Y-m-d"); ?></time> <h1> <?php if(get_the_post_thumbnail_url()): ?> <img src="<?php echo get_the_post_thumbnail_url(); ?>" alt="<?php echo get_the_title(); ?>"> <?php else: ?> <?php echo get_the_title(); ?> <?php endif; ?> </h1> <!-- ↓↓↓↓ 追加 ↓↓↓↓ --> <p> <?php $content = str_replace("\n", "", strip_tags(get_the_content())); if(mb_strlen($content,'UTF-8') > 50) { $content = mb_substr($content, 0, 50,'UTF-8'); } echo $content . "..."; ?> </p> <!-- ↑↑↑↑ 追加 ↑↑↑↑ --> </a> </section> <?php endwhile; ?> <?php endif; ?> </article> </div> <?php get_footer(); ?>
記事本文が表示されました。
以上、Wordpressの独自テーマに記事一覧を表示してみた。でした。