30代は創造する

カレンダーを追加します。

01.カレンダーを追加する。
「外観 ＞ ウィジット」よりカレンダーを追加します。



02.装飾
style.cssに下記を記述します。

/* カレンダー */
.widget_calendar h2 {display: none}

#wp-calendar  {font-size: 0.75em;
  color: #ffffff;
  width: 100%}

#wp-calendar a  {color: #ffffff}

#wp-calendar td, #wp-calendar th
  {text-align: center}

#wp-calendar caption  {font-weight: bold;
  text-align: left;
  border-bottom: solid 1px #ffffff;
  padding-bottom: 8px;
  margin-bottom: 8px}

#wp-calendar #prev  {text-align: left;
  padding-top: 3px}

#wp-calendar #next  {text-align: right;
  padding-top: 3px}

 

[0回]

月別のページを作成します。

01.タイトルを表示する。
現在表示している月別アーカイブの年月を表示します。
・記述
<?php if(is_month()): ?>
<p id="pagetitle"><?php single_month_title(); ?></p>
<?php endif; ?>

02.古い記事、新しい記事のリンクの確認
カテゴリーページのときに表示させたリンクは、
月別アーカイブでも機能するので、
編集の必要はありません。

[0回]

カテゴリーページを作成します。

01.カテゴリー名を表示する
記事のタイトルの上に、カテゴリーを表示します。
・記述
<p id="pagetitle"><?php single_cat_title(); ?></p>
・出力
<p id="pagetitle">(X)HTML</p>



02.カテゴリー名の装飾
style.cssを編集し、カテゴリー名を装飾します。

p#pagetitle {font-size: 0.875em;
  font-weight: bold;
  color: #0c8bcd;
  border: dotted 1px #0c8bcd;
  text-align: center;
  padding: 10px 0;
  margin-top: 0}



03. トップページに枠が表示されないようにする
トップページを表示すると、余計な枠が表示されています。


下記条件分岐を、カテゴリータイトル部分に追加することで、
カテゴリーページの場合のみ、カテゴリータイトル部分を表示させることが出来ます。
・記述
<?php if(is_category()): ?>
<p id="pagetitle"><?php single_cat_title(); ?></p>
<?php endif; ?>


04.古い生地と新しいきじのページへのリンクを追加する
下記記述を追加します。
・記述
<?php if(is_archive()): ?>
<p class="pagelink">
<span class="oldpage"><?php next_posts_link('&laquo; 古い記事'); ?></span>
<span class="newpage"><?php previous_posts_link('新しい記事 &raquo;'); ?></span>
</p>
<?php endif; ?>

<?php if(is_archive()): ?>～<?php endif; ?>は、
アーカイブ関連の場合に内容を表示します。
カテゴリーページはアーカイブ関連に含まれます。

[0回]

サイドバーの装飾を行います。

01. ソースの確認、編集
ソースを見ると、サイドバーのリストは、ul要素で囲まれていないことが確認できます。
ul要素で囲むように、index.phpを編集します。
サイドバーのPHPタグをul要素で囲みます。
--- 編集前のHTMLソース（サイドバー部分） ここから--
<!-- サイドバー -->
<div id="sidebar">
<li id="categories-3" class="widget widget_categories">
    <h2 class="widgettitle">カテゴリー</h2>
    <ul>
        <li class="cat-item cat-item-3"><a href="http://ranka.sub.jp/taroumatsu/?cat=3" title="HTML、XHTML">(X)HTML</a> (6)</li>
        <li class="cat-item cat-item-4"><a href="http://ranka.sub.jp/taroumatsu/?cat=4" title="CSS">CSS</a> (6)</li>
        <li class="cat-item cat-item-5"><a href="http://ranka.sub.jp/taroumatsu/?cat=5" title="JavaScript">JavaScript</a> (4)</li>
        <li class="cat-item cat-item-6"><a href="http://ranka.sub.jp/taroumatsu/?cat=6" title="jQuery">jQuery</a> (2)</li>
        <li class="cat-item cat-item-7"><a href="http://ranka.sub.jp/taroumatsu/?cat=7" title="PHP">PHP</a> (3)</li>
        <li class="cat-item cat-item-8"><a href="http://ranka.sub.jp/taroumatsu/?cat=8" title="WordPress">WordPress</a> (3)</li>
        <li class="cat-item cat-item-1"><a href="http://ranka.sub.jp/taroumatsu/?cat=1" title="未分類 に含まれる投稿をすべて表示">未分類</a> (3)</li>
    </ul>
</li>
<li id="archives-3" class="widget widget_archive">
    <h2 class="widgettitle">月別アーカイブ</h2>
    <ul>
        <li><a href='http://ranka.sub.jp/taroumatsu/?m=201203' title='2012年3月'>2012年3月</a>&nbsp;(15)</li>
    </ul>
</li>
<li id="recent-posts-2" class="widget widget_recent_entries">
    <h2 class="widgettitle">最近の記事</h2>
    <ul>
        <li><a href="http://ranka.sub.jp/taroumatsu/?p=47" title="キャプションを付けてみる">キャプションを付けてみる</a></li>
        <li><a href="http://ranka.sub.jp/taroumatsu/?p=45" title="はみ出る">はみ出る</a></li>
        <li><a href="http://ranka.sub.jp/taroumatsu/?p=42" title="本文の左右に画像を挿入する">本文の左右に画像を挿入する</a></li>
        <li><a href="http://ranka.sub.jp/taroumatsu/?p=36" title="画像を挿入する">画像を挿入する</a></li>
        <li><a href="http://ranka.sub.jp/taroumatsu/?p=25" title="１０たいとる１０">１０たいとる１０</a></li>
    </ul>
</li>
</div>
--- 編集前のHTMLソース（サイドバー部分） ここまで--

・記述
<!-- サイドバー -->
<div id="sidebar">
<ul>
<?php dynamic_sidebar(); ?>
</ul>
</div>


02. サイドバーの装飾
style.cssに下記を追記します。

div#sidebar ul  {margin: 0;
  padding: 0;}

div#sidebar li  {list-style-type: none}

div#sidebar .widget {background-color: #0c8bcd;
  padding: 16px;
  margin-bottom: 10px}

div#sidebar h2  {font-size: 0.75em;
  color: #ffffff;
  border-bottom: solid 1px #ffffff;
  padding-bottom: 8px;
  margin: 0 0 10px}

div#sidebar li li {font-size: 0.75em;
  margin-bottom: 4px;
  background-image: url(listmark.gif);
  background-repeat: no-repeat;
  padding-left: 16px}

div#sidebar li li a {text-decoration: none;
  color: #ffffff}

[0回]

ウィジットを使って、サイドバーの中身を作ります。
ウィジットとは、簡易的なアプリのことです。

01. ウィジットの機能を有効にする
ウィジットは、「外観 ＞ ウィジット」で設定できます。
ただし、現状では使用できないので、まず使用できるようにします。


「functions.php」という殻のファイルを作成し、アップロードします。

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

「外観 ＞ テーマ編集」より、テーマのための関数（functions.php）を編集します。
・記述
<?php
// ウィジット
register_sidebar();
?>


これで、ウィジットが有効になりました。


02. 表示するメニューを選択する。
表示するメニューを、「利用できるウィジット」から、画面左の「サイドバー1」へドラッグします。
今回は、カテゴリー、アーカイブ、最近の投稿の３つを選択しました。


03. ウィジットを出力する
設定したウィジットを画面に出力するために、index.phpを編集します。
サイドバーのdiv要素を編集します。
・記述
<!-- サイドバー -->
<div id="sidebar">
<?php dynamic_sidebar(); ?>
</div>

画面をすると、サイドバーにメニューがリスト（ul要素）で表示されています。


04. メニューの編集
メニューを編集します。
タイトルを編集、投稿数を表示するように設定しました。

[0回]