PCゲーマーのWebデザイン備忘録

PCゲーマーのWebデザイン備忘録。東京都内でWEBデザイナーとして働いています。Webデザインやゲームに関することをブログに書いていきます

【WordPress】 オリジナルテーマを作る(2) トップページと個別ページを表示する。

f:id:game-web-design:20141105090221p:plain
index.php を編集して、トップページを表示するようにします。



wordpress関数を使う。

ブログとしていろいろなデータを引き出すために、wordpress関数を使います。
取り合えず、トップページと個別ページを表示するのに必要な関数を使っていきます。

<?php bloginfo( 'charset' ); ?>
  • ブログの名前
<?php bloginfo('name'); ?>
  • 個別ページ名
<?php wp_title('-'); ?>

括弧内のハイフンは、ブログの名前と個別ページ名の区切りにするために置いています。(例:FPS小道 - 今日のキルレ)

  • ルートパス
<?php echo home_url('/');?>
  • ページ説明文
<?php bloginfo( 'description' );?>
<?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('&laquo; 前の記事'); ?>
</span></p>
<p class="pagelink"><span class="newpage">
<?php previous_posts_link('次の記事 &raquo;'); ?>
</span></p>

<?php endif; ?>
</div><!--/#content-->

<div id="footer">
<address>Copyright &copy; 
<a href="mailto:<?php bloginfo('admin_email'); ?>">ひだまり日記</a>
</address>
</div><!--/#footer-->

</div><!--/#container-->
</body>
</html>