30代は創造する

フッターを表示します。

01. フッターを表示する
・記述
<!-- フッター -->
<div id="footer">
<address>Copyright &copy; 太郎松の備忘録, All rights reserved.</address>
</div>
・出力


02.メールアドレスへのリンクを設定する。
コピーライトにリンクを作成します。
・記述
<!-- フッター -->
<div id="footer">
<address>Copyright &copy; <a href="mailto:<?php bloginfo('admin_email'); ?>">太郎松の備忘録</a>, All rights reserved.</address>
</div>
<!-- フッター -->
<div id="footer">
<address>Copyright &copy; <a href="mailto:tarouma2@gmail.com">太郎松の備忘録</a>, All rights reserved.</address>
</div>


03. 装飾
style.cssを編集します
p.pagelink  {overflow: hidden;
  width: 100%}

/* フッター */
div#footer  {clear: both;
  border-top: solid 3px #000000;
  padding: 6px 0}

address {font-size: 0.75em;
  font-style: normal;
  font-family: Verdana, sans-serif;
  margin: 0}

address a {color: #000000}

[0回]

トップページの記事を複数ページで表示します。

01. 1ページに表示する記事の件数を設定する
動作確認ができるように、2件に設定しました。
設定 ＞ 表示設定 ＞ 1ページに表示する最大投稿数



02.次ページへを表示
次ページへのリンクを表示します。
・記述
<p class="pagelink">
<span class="oldpage"><?php next_posts_link(); ?></span>
</p>
・出力
<p class="pagelink">
<span class="oldpage"><a href="http://ranka.sub.jp/taroumatsu/?paged=2" >次ページへ &raquo;</a></span>
</p>



03.前ページへを表示
次ページへのリンクを表示します。
・記述
<p class="pagelink">
<span class="newpage"><?php previous_posts_link(); ?></span>
<span class="oldpage"><?php next_posts_link(); ?></span>
</p>
・出力
<p class="pagelink">
<span class="newpage"><a href="http://ranka.sub.jp/taroumatsu/" >&laquo; 前ページへ</a></span>
<span class="oldpage"><a href="http://ranka.sub.jp/taroumatsu/?paged=3" >次ページへ &raquo;</a></span>
</p>



04. 表示する文字の変更
表示を、古い記事、新しい記事に変更します。
・記述
<?php if(is_home()): ?>
<p class="pagelink">
<span class="oldpage"><?php next_posts_link('&laquo; 古い記事'); ?></span>
<span class="newpage"><?php previous_posts_link('新しい記事 &raquo;'); ?></span>
</p>
<?php endif; ?>
・出力
<p class="pagelink">
<span class="oldpage"><a href="http://ranka.sub.jp/taroumatsu/?paged=3" >&laquo; 古い記事</a></span>
<span class="newpage"><a href="http://ranka.sub.jp/taroumatsu/" >新しい記事 &raquo;</a></span>
</p>

関数のカッコ内に文字を記述することで、表示を変更できます。
<?php if(is_home()): ?> ～ <?php endif; ?>は、
トップページの場合のみ、囲まれた部分を表示します。

05. リンクを左右に表示する
style.cssを編集し、リンクを左右に表示させます。

/* ページリンク */
span.oldpage  {float: left}

span.newpage  {float: right}

p.pagelink a  {font-size: 0.75em;
  color: #0c8bcd;}

p.pagelink  {overflow: hidden;
  width: 100%}

[0回]

画像を使ってデザインを行います。

01. 画像をアップロードする
使用する画像をアップロードします。

wp/　　← WordPressをインストールしたフォルダ
│
└　wp-content/
　　│
　　└　themes/
　　　　│
　　　　└　sample/
　　　　　　│
　　　　　　├　index.php
　　　　　　├　screenshot.jpg
　　　　　　├　style.css
　　　　　　└　images/　　← 作成
　　　　　　　　│
　　　　　　　　├　header.jpg　　← アップロード
　　　　　　　　└　titlebar.png　　← アップロード

02. ヘッダに画像を表示する
ヘッダに画像(header.jpg)を表示させます。
・記述
<p id="image"><img src="<?php bloginfo('template_url'); ?>/images/header.jpg" alt="*" width="760" height="200" /></p>
・出力
<p id="image"><img src="http://ranka.sub.jp/taroumatsu/wp-content/themes/sample/images/header.jpg" alt="*" width="760" height="200" /></p>

<?php bloginfo('template_url'); ?>は、テーマのディレクトリのURLを出力します。

03. 装飾（style.css）
style.cssを編集します。

/* ヘッダー */
div#header h1 {
  font-size: 1.875em;
  margin: 0;
  float: left;
  margin-bottom: 4px;
}

div#header p#desc {
  font-size: 0.75em;
  color: #444444;
  margin: 0;
  float: right;
  margin-top: 18px;
}

div#header {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 20px;
}

div#header p#image {
  margin: 8px 0 0;
}

div.post h2 {
  background-color: #a3d2f2;
  background-image: url(images/titlebar.png);
  font-size: 0.875em;
  padding: 10px;
  margin: 0;
}
 

[0回]

上の画像のように、記事の投稿日時とカテゴリを表示します。

01.日付の表示
投稿日付を表示します。
・記述
<p class="postinfo">
<?php echo get_the_date(); ?>
</p>
・出力
<p class="postinfo">
2012年3月10日</p>



<?php echo get_the_date(); ?>は、日付を出力します。
日付のフォーマットは、下記で設定したものが繁栄されます。
設定 ＞ 一般 ＞ 日付のフォーマット

02. 時刻の表示
日時の後に時を追加します。
・記述
<p class="postinfo">
<?php echo get_the_date(); ?> <?php the_time(); ?>
</p>
・出力
<p class="postinfo">
2012年3月10日 12:16</p>



<?php the_time(); ?>は、時刻を出力します。
時刻のフォーマットは、下記で設定したものが繁栄されます。
設定 ＞ 一般 ＞ 時刻フォーマット

03. カテゴリの表示
記事のカテゴリを表示します。
・記述
<p class="postinfo">
<?php echo get_the_date(); ?> <?php the_time(); ?>
 |
カテゴリー：<?php the_category(); ?>
</p>
・出力
<p class="postinfo">
2012年3月10日 12:16 |
カテゴリー：<ul class="post-categories">
  <li><a href="http://ranka.sub.jp/taroumatsu/?cat=3" title="(X)HTML の投稿をすべて表示" rel="category">(X)HTML</a></li>
  <li><a href="http://ranka.sub.jp/taroumatsu/?cat=4" title="CSS の投稿をすべて表示" rel="category">CSS</a></li></ul></p>



<?php the_category(); ?>は、記事のカテゴリをリスト（ul要素）で出力します。
カンマ区切りで出力させたい場合は、下記のように記述します。
・記述
<p class="postinfo">
<?php echo get_the_date(); ?> <?php the_time(); ?>
 |
カテゴリー：<?php the_category(','); ?>
</p>
・出力


04.装飾
記事の投稿日時、カテゴリを装飾します。（style.css）

p.postinfo  {color: #0c8bcd;
  text-align: right;
  margin: 20px 0 0;
  clear: both}

p.postinfo a  {color: #0c8bcd}

[0回]

style.cssを編集し、上記のように装飾します。

01. 各記事を枠で囲む
/* 記事 */
div.post {
  border: solid 1px #0c8bcd;
  padding: 15px;
  margin-bottom: 20px;
}

02. タイトルのデザインを指定する
div.post h2 {
  background-color: #a3d2f2;
  font-size: 0.875em;
  padding: 10px;
  margin: 0;
}div.post h2 a {
  text-decoration: none;
  color: #000000;
}

03. 記事本文のデザインを指定する
div.post p  {
  font-size: 0.875em;
  line-height: 1.6;
  margin-top: 10px;
}

04. 全体の横幅を指定
/* コンテナ */
div#container {
  width: 760px;
  margin: auto;
}

[0回]