index.phpのbody内の編集

body内の記述はおおまかなところは、Wordpressで作ったサイトあろうと普通のサイトであろうとさほど違いはありませんので、自分が今持っているサイトをブログ風にするためにWordpressを使うといった目的であれば、既存のサイトのbody内をそのままコピーしていただいて構いません。

同様にスタイルシートの方も、既存のスタイルシートを使えば、あっという間にWordpress上で、今までと同じ見た目のサイトができあがります。

ただし、ディレクトリの階層が普通のサイトとは異なるので、index.phpの見た目は同じに出来ますが、リンクで飛ばすページをどう作るか(投稿で作るか、固定ページで作るか)、ページのURLはどうやって設定するか、あたりで最初はつまづくのではないでしょうか。

どちらであろうと、body内にサイトの骨格は作る必要はあります。(ID名はなんでもOKです。2カラムにしました。)

図のような並べ方にするスタイルシートでfloatを指定する必要がありますが、そのへんのことは割愛します。

カテゴリページと固定ページ

Wordpressにはカテゴリページと固定ページという2タイプのページが存在します。

カテゴリページは、操作パネルの投稿から作るページで、新規投稿が行われると自動的にページが作成され、任意のカテゴリに登録されます。作成されたページは、基本的には新しいものが上に来るようにトップページ上では配列されます。登録したカテゴリ名をクリックすれば、そのカテゴリに登録されたページを全て呼び出すことができます。

一方、固定ページは、操作パネルの固定ページから作るページで、投稿してもカテゴリに登録されず、トップページにも表示されませんので、自分で固定ページへのリンクを設定する形になります。

ですので、形にする程でもないとりあえず書くような情報はカテゴリページ、一度作ったら変更しないような情報は固定ページに書くのがいいと思います。会社HPであれば、会社概要や沿革のような情報は固定ページへ、お知らせのようなものはカテゴリページに。カテゴリページの内容が溜まってきたら一度整理して固定ページに書き写すなど。

カテゴリページの作り方

最初に最も重要なタグと言ってもいいループタグをコンテンツ部分(上図で言うa2)に記述します。

<?php if(have_posts()):while(have_posts()):the_post();?>
この部分に記事が生成する
<?php endwhile;endif;?>

この中にトップページで表示される最新の記事がデータベースから最大10件表示されます。(これを記述した時点で見えない場所にデータが取得されています。)

そのデータの中から、タイトル名とコンテンツを出力するようにするには、the_titleタグとthe_contentタグを使用します。

<?php if(have_posts()):while(have_posts()):the_post();?>
<div class="a5">
<h2><a href="<?php the_permaLink();?>"><?php the_title();?></a></h2>
<div class="a6"><?php the_content();?></div>
</div>
<?php endwhile;endif;?>

divでくくったのは、四角でくくって見やすくしたり、色々スタイルを調整しやすくするためです。

the_titleタグは、その記事のタイトル名を取得、the_contentタグはその記事のコンテンツを取得、the_permaLinkタグはその記事のページのURLを取得します。

これだけで、Wordpressの操作パネルで投稿→新規投稿したときの記事が、デフォルトでは10件まで上から順に羅列されます。

続いて、表示された各記事にコメントや投稿時間を表示させます。

<?php if(have_posts()):while(have_posts()):the_post();?>
 
<div class="a5">
<h2><a href="<?php the_permaLink();?>"><?php the_title();?></a></h2>
<div class="a6"><?php the_content();?></div>
<p class="b1"><?php echo get_the_date();?><?php the_time();?>&nbsp;|&nbsp;カテゴリー:&nbsp;<?php the_category(',');?>&nbsp;|&nbsp;<a href="<?php comments_link();?>">コメント<?php comments_number('(0)','(1)','(%)');?></a></p>
</div>
 
<?php endwhile;endif;?>

echo get_the_date投稿日を、the_time投稿時間を、the_category記事の属するカテゴリ名を、comments_linkコメント部分を開くリンクを、comments_numberコメント数の情報を出力します。

the_categoryで出力したカテゴリ名は自動的にa(アンカー)でマークアップされると共に、リスト(ul)でくくられてしまいますので、リストによるマークアップを解除するために、パラメータでカンマを指定します。
(詳しい説明は割愛します)

コメントor補足情報orご指摘あればをお願いします。

(件名or本文内でキーワード検索できます)



  • << 前のページ
  • 次のページ >>
ページトップへ