WordPressテーマ作成～記事一覧に載せるもの追加(記事のカテゴリ・サムネイル・記事タイトル・投稿日)～
投稿日
更新日
記事一覧を下の画像みたいな感じの並びで出したいと思っているので、
今回は、記事のカテゴリ・サムネイル・記事タイトル・投稿日を表示させていく内容です。
メインのページの一覧に表示させていくので、
home.phpのファイルに下記コードを書きます。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
if ( have_posts() ) : echo '<ul>' , PHP_EOL; while ( have_posts() ) : the_post(); ?> <li> <?php the_category( ',' ); ?> <?php the_post_thumbnail( 'full' ); ?> <time><?php the_time( get_option( 'date_format' ) . ' ' . get_option( 'time_format' ) ); ?></time> <?php the_title( printf( '<h2><a href="%s">', get_permalink() ), '</a></h2>' ); ?> </li> <?php endwhile; echo '</ul>' , PHP_EOL; endif; |
これで1つの記事分です。
whileで繰り返し出力していってくれます。
必要に応じて(出したいものに応じて)他の項目もwhile内に記述することで
表示する内容は変えられます。
ちなみに内訳は下記の通り
|
1 2 3 4 |
カテゴリー・・・the_category( ',' ); サムネイル・・・the_post_thumbnail( 'full' ); 投稿日・・・・・<time><?php the_time( get_option( 'date_format' ) . ' ' . get_option( 'time_format' ) ); ?></time> タイトル・・・・the_title( printf( '<h2><a href="%s">', get_permalink() ), '</a></h2>' ); |
これだけだとWordPress側に登録されている情報を出力できないのもあるので、
functions.phpにも必要なコードを書いていきます。
|
1 2 3 4 5 6 7 8 9 |
function theme_setup() { add_theme_support( 'title-tag' ); //←タイトルはココ add_theme_support( 'post-thumbnails' ); //←サムネイルはココ add_theme_support( 'custom-header' ); register_nav_menus( array( 'global' => 'グローバルナビゲーション' ) ); theme_remove(); } |
あと、投稿日の表示形式は、管理画面上の設定から変更しましょう。
設定＞一般の中に「日付形式」というものがあります。
カテゴリーの「( ‘,’ )」の部分は、複数のカテゴリーに属する内容だった場合に、
カテゴリーごとの区切りをどんな文字にするかを決めています。
実際に出力される状態になったら、あとはCSSで表示を整えていきましょー。
