たなブログ WordPress入門講座

WordPress テーマの作成　トップページ作成 その3

WordPress入門

Tweet

　トップページ作成の続きです。
次は、トップページに記事を配置します。

　記事の配置の仕方もいろいろありますが、
最初なので とりあえずオーソドックスなものを
おこうと思います。

記事の内容は、「タイトル」、「本文」、「カテゴリー」、
「投稿年月日」を表示することにします。

 そして、ある一定数以上の記事を投稿したら、
ページナビを表示して過去記事のリストを参照できる
ようにします。 

それでは、やっていきましょう。まずは、home.phpに以下の記述を記入（コピペ）してください。
home.php <?php get_header(); ?><!-- 　ヘッダー部分（上部分）呼び出し　 --> <div id="body2"> <div id="content"><!-- 　記事コンテンツ（中央部分）　 --> <p class="title">記事一覧 </p> <?php get_template_part('pagenation'); ?> <?php if(have_posts()): while(have_posts()): the_post(); ?> <?php get_template_part('content'); ?> <?php endwhile; endif; ?> <?php get_template_part('pagenation'); ?> </div> <!-- 　左サイドバー　 --> </div> <!-- 　右サイドバー　 --> <?php get_footer(); ?><!-- 　フッター部分（下部分）呼び出し　 -->

こんな感じに記入（コピペ）してください。　→　サンプル

　上の記述の＜?php if(have_posts()): while(have_posts()): the_post(); ?＞～
＜?php endwhile; endif; ?＞部分が、投稿記事を記入するWordPress用のタグです。
内容を簡単に説明すると、 ＜?php get_template_part(‘content’); ?＞で選択されている
content.phpファイルの記事の表示の仕方で、投稿記事を羅列する、という意味になります。

そして＜?php get_template_part(‘pagenation’); ?＞は、ページナビの記述となります。
 ＜?php get_template_part(‘pagenation’); ?＞も、
 pagenation.phpファイルの記述を代入するという
意味となっています。 

 　同じ記述が上下で2個入ってる理由は、
ページナビで次のページに行きやすいように
するためです。
ですので、記事を上下で囲むように配置してます。 

 　content.phpとpagenation.phpには、まだ何も記入していませんので このままだと何も記事が
表示されません。

というわけで 続いてcontent.phpとpagenation.phpを記入していきます。

　 次の記述をcontent.phpに記入（コピペ）してください。
content.php <div class="post"> <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2><!-- 　タイトル　 --> <p class="postcat"><?php the_category(' '); ?></p><!-- 　カテゴリー　 --> <?php the_content(); ?><!-- 　本文　 --> <p class="postinfo"><?php echo get_the_date(); ?></p><!-- 　投稿日時　 --> </div>

  次のように記入（コピペ）してください。　→　サンプル

そして、次の記述をpagenation.phpに記入（コピペ）してください。
pagenation.php <div class="tablenav"><?php global $wp_rewrite; $paginate_base = get_pagenum_link(1); if (strpos($paginate_base, '?') || ! $wp_rewrite->using_permalinks()) { $paginate_format = ''; $paginate_base = add_query_arg('paged', '%#%'); } else { $paginate_format = (substr($paginate_base, -1 ,1) == '/' ? '' : '/') . user_trailingslashit('page/%#%/', 'paged');; $paginate_base .= '%_%'; } echo paginate_links( array( 'base' => $paginate_base, 'format' => $paginate_format, 'total' => $wp_query->max_num_pages, 'mid_size' => 5, 'current' => ($paged ? $paged : 1), )); ?></div>

次のように記入（コピペ）してください。　→　サンプル 

　追加すると、content.phpで指定したものが
トップページに表示されます。 

「カテゴリー」が出てきましたので、ここで記事に
カテゴリーの登録をする方法について少し説明します。

　まずは、登録の仕方です。管理画面の「投稿」の「カテゴリー」を選んでください。
　

　続いて、登録したいカテゴリーの名前を
入力してください。入力したら「スラッグ」の方も、
決めましょう。「スラッグ」は、半角小文字と数字などで
記入することが推奨されています。

「親」という項目は、カテゴリーに階層構造を作りたい
場合に使用します。
ここは、お好みで使用してください。
使わなくても得に不自由しませんので。
とりあえず、通常は「なし」で大丈夫です。
「説明」 は、とくに無記入で大丈夫です。

終わったら「新規カテゴリーを追加」をクリックします。右の一覧に新しいカテゴリーが追加されます。

なお、カテゴリーに最初からある「未分類」という項目は、削除できません。邪魔ですので、右の一覧で
「編集」を選択して、カテゴリー名とスラッグを自分の使うものに変更してしまいましょう。

　追加したカテゴリーは、記事の投稿画面で選択できるようになります。記事には、必ずカテゴリーを
登録していくようにしましょう。

※記事の投稿画面でもカテゴリーは追加できますが、「スラッグ」が指定できません。
 　なるべく「カテゴリー」から追加しましょう。

 　さて、最後は、cssで投稿記事のデザインとレイアウトを調整します。
style.css /* 左と中央カラム領域指定ボックス */ div#body2 { width: 830px; margin: 5px 0px 5px 0px; text-align: left; float:left;} /* 中央コンテンツ */ div#content { width: 590px; float: right; margin: 5px 5px 5px 5px} div#content_image { width: 1080px; float: right; margin: 5px 5px 5px 5px} p.title {font-weight: bold; color: #585858; width: 200px; margin: 0 0 10px; padding: 0 30px 0 10px; background-image: url(image/bar.png); background-repeat: no-repeat; background-position: right top} p.pagenation {font-size: 0.75em; overflow: hidden} span.oldpage {float: left} span.newpage {float: right} /* 記事 */ div.post {margin-bottom: 30px; overflow: hidden} div.post h2 {background-image: url(image/chip.png); background-repeat: no-repeat; background-position: left center; border-top: solid 1px #aaaaaa; border-bottom: solid 1px #aaaaaa; font-size: 0.875em; padding: 10px 18px; margin: 0} div.post h2 a {color: #000099} div.post h2 a:hover {background: #f7e29e; padding: 2px 7px 2px 0px} div.post p {font-size: 0.875em; line-height: 1.6} div.post p.postcat {text-align: right; margin: -10px 10px 10px 0} div.post p.postcat a {font-size: smaller; background-color: #a7d043; border-radius: 2px; color: #ffffff; padding: 1px 5px} div.post p.postcat a:hover {font-size: smaller; background-color: #d7f063; border-radius: 2px; color: #ffffff; padding: 1px 5px} div.post p.postinfo {color: #0c8bcd; text-align: right; margin: 0} /* 記事内の画像 */ .aligncenter {display: block; margin-left: auto; margin-right: auto} .alignleft {float: left; margin-right: 10px; margin-bottom: 10px} .alignright {float: right; margin-left: 10px; margin-bottom: 10px} .wp-caption {border: solid 1px #aaaaaa; text-align: center; padding-top: 5px} /* ページ番号リンク */ .tablenav { padding: 2px 7px; color: #2583ad; background:white; margin: 0em auto; line-height:2em; text-align:center} a.page-numbers, .tablenav .current { color: #00019b; padding: 2px .4em; border:solid 1px #ccc; text-decoration:none; font-size:0.9em} a.page-numbers:hover { color:white; background: #328ab2} .tablenav .current { color: white; background: #328ab2; border-color: #328ab2; font-weight:bold} .tablenav .next, .tablenav .prev { border:0 none; background:transparent; text-decoration:underline; font-size:0.9em; font-weight:bold} #ue_page { margin: 0px 0px -5px 0px}  

 以上の記述をstyle.cssに追加してください。 →　サンプル

　今回のページは3カラム（3列）のサイトですので、スタイルシートで左右のスペースを空けています。
 Webページを見てみましょう。かなりブログの形に近づいてきたと思います。

次の講座は、サイドバーの追加です。

次でトップページの基本の講座は完了です。がんばっていきましょう。 

 続いて、WordPress テーマの作成　トップページ作成 その4です。  

登録タグ: wordpress　・ WordPress入門講座　・ ページナビ　・ ページ番号　 | 2012年3月21日