【WordPress】 オリジナルテーマを作る(2) トップページと個別ページを表示する。
index.php を編集して、トップページを表示するようにします。
wordpress関数を使う。
ブログとしていろいろなデータを引き出すために、wordpress関数を使います。取り合えず、トップページと個別ページを表示するのに必要な関数を使っていきます。
- 文字エンコード
<?php bloginfo( 'charset' ); ?>
- ブログの名前
<?php bloginfo('name'); ?>
- 個別ページ名
<?php wp_title('-'); ?>
括弧内のハイフンは、ブログの名前と個別ページ名の区切りにするために置いています。(例:FPS小道 - 今日のキルレ)
- ルートパス
<?php echo home_url('/');?>
- ページ説明文
<?php bloginfo( 'description' );?>
- CSSパス
<?php bloginfo( 'stylesheet_url' ); ?>">
- テーマフォルダまでのパス
<?php bloginfo('template_url'); ?>
- 記事を出力
<?php if(have_posts()): while(have_posts()): the_post(); ?> <?php endwhile; endif; ?>
php の意味としては、記事があり、記事を持っている分だけ、出力します。
1ページの出力記事量は、Wordpress の表示設定に依存します。
- 記事のパーマリンク
<?php the_permalink();?>
- 記事タイトル
<?php the_title(); ?>
- 記事内容
<?php the_content(); ?>
- カテゴリ
<?php the_category(',');?>
- 投稿時間
<?php echo get_the_date();?> <?php the_time();?>
- 個別ページだけに出力する関数。
<?php if(is_single()): ?> <?php endif; ?>
個別ページにだけ表示したい内容を関数同士の間に書き込みます。
- 次のページ・前のページへのリンク
<?php previous_post_link(); ?> <?php next_post_link(); ?>
- トップページのみ出力する関数
<?php if(is_home()): ?> <?php endif; ?>
- 登録したEメールアドレス
<?php bloginfo('admin_email'); ?>
例
CSSは適宜作ります。<!DOCTYPE html> <html lang="ja"> <head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <title><?php bloginfo('name'); ?><?php wp_title('-'); ?></title> <link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>"> </head> <body> <div id="container"> <div id="header"><!--ヘッダー--> <h1><a href="<?php echo home_url('/');?>"><?php bloginfo('name'); ?></a></h1> <p id="desc"><?php bloginfo( 'description' );?></p> <p id="image"><img src="<?php bloginfo('template_url'); ?>/img/header.jpg" width="760" height="200"></p> </div><!--/#header--> <div id="content"><!--記事の出力/個別ページ記事出力--> <?php if(have_posts()): while(have_posts()): the_post(); ?> <div class="post"> <h2><a href="<?php the_permalink();?>"><?php the_title(); ?></a></h2> <?php the_content(); ?> <p class="postinfo"> <?php echo get_the_date();?><?php the_time();?> | カテゴリ:<?php the_category(',');?> </p> </div><!--/.post--> <?php if(is_single()): ?><!--個別ページ記事だけに、前後の記事リンクを表示--> <p class="pagelink"> <span class="oldpage"><?php previous_post_link(); ?></span> <span class="newpage"><?php next_post_link(); ?></span> </p> <?php endif; ?> <?php endwhile; endif; ?> <?php if(is_home()): ?><!--トップページにページネーション--> <p class="pagelink"><span class="oldpage"> <?php next_posts_link('« 前の記事'); ?> </span></p> <p class="pagelink"><span class="newpage"> <?php previous_posts_link('次の記事 »'); ?> </span></p> <?php endif; ?> </div><!--/#content--> <div id="footer"> <address>Copyright © <a href="mailto:<?php bloginfo('admin_email'); ?>">ひだまり日記</a> </address> </div><!--/#footer--> </div><!--/#container--> </body> </html>