WordPress・初めてのワードプレスサイトの完成
7日ほど学校で練習してきたワードプレスサイトが完成した。
indexページ
<?php get_header(); ?> <!--コンテンツ--> <div id="content"> <!--カテゴリー別ページタイトル--> <?php if(is_category()): ?> <p id="pagetitle"><?php single_cat_title(); ?></p> <?php endif; ?> <!--月別ページタイトル--> <?php if(is_month()): ?> <p id="pagetitle"> <?php $thisyear=substr($m,0,4); $thismonth=substr($m,4,2); echo $thisyear.'年'.$thismonth.'月'; ?></p> <?php endif; ?> <?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(','); ?> | <a href="<?php comments_link(); ?>">コメント <?php comments_number('(0)','(1)','(%)'); ?> </a> </p> </div> <!--個別のページ、前の記事へのページリンク--> <?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('« 古い記事'); ?></span> <span class="newpage"><?php previous_posts_link('新しい記事 »'); ?></span> </p> <?php endif; ?> <!--カテゴリーの個別--> <?php if(is_archive()): ?> <p class="pagelink"> <span class="oldpage"><?php next_posts_link('« 古い記事'); ?></span> <span class="newpage"><?php previous_posts_link('新しい記事 »'); ?></span> </p> <?php endif; ?> <!--投稿フォーム--> <?php comments_template(); ?> </div> <!--サイドバー--> <div id="sidebar"> <ul> <?php dynamic_sidebar(); ?> </ul> <!--RSS--> <p class="feed"> <img src="<?php bloginfo('template_url'); ?>/feed-icon-28x28.png" alt="*" width="28" height="28"> <a href="<?php bloginfo('rss2_url'); ?>"> RSS FEED </p> </div> <?php get_footer(); ?>
header部分
<!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'); ?>"> <link rel="alternate" type="applicaton/rss+xml" title="RSS フィード" href="<?php bloginfo('rss2_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> <?php if(!(is_page('ビジネスサイト風のページ'))): ?> <p id="image"><img src="<?php bloginfo('template_url'); ?>/header.jpg" alt="*" width="760" height="250"></p> <?php endif; ?> </div> <!--ナビゲーション--> <div id="nav"> <?php wp_nav_menu(array('theme_location' => 'navigation')); ?> </div>
function部分
<?php //ウィジェット register_sidebar(); //受信したコメント function mydesign($comment,$args,$depth){ $GLOBALS['comment'] = $comment; ?> <li class="compost"> <?php comment_text(); ?> <p class="cominfo"> <?php comment_date(); ?><?php comment_time(); ?> | <?php comment_author_link(); ?> </p> <?php } /*カスタムメニュー*/ register_nav_menus(array('navigation'=>'ナビゲーションバー')); ?>
footer部分
<!--フッター--> <div id="footer"> <p><small>copyright © <a href="mailto:<?php bloginfo('admin_email'); ?>">hidamari diary</a>, ALL rights reserved.</small></p> </div> </body> </html>
<div id="comments"> <?php if(have_comments()): ?> <h3>コメント</h3> <ul> <?php wp_list_comments('callback=mydesign'); ?> </ul> <?php endif; ?> <?php comment_form(); ?> <p id="comfeed"> <?php post_comments_feed_link(); ?> </p> <?php if(pings_open()): ?> <p id="trurl"> <strong>トラックバックURL：</strong> <?php trackback_url(); ?> </p> <?php endif; ?> </div>
business
<?php /* Template Name:ビジネスサイト風テンプレート */ ?> <?php get_header(); ?> <!--コンテンツ--> <div id="topcontent"> <?php if(have_posts()): while(have_posts()): the_post(); ?> <p><img src="<?php bloginfo('template_url'); ?>/topimage.jpg " alt="*" widh="760" height="370"></p> <?php the_content(); ?> <!--個別のページ、前の記事へのページリンク--> <?php endwhile; endif; ?> </div> <?php get_footer(); ?>
CSS部分
/* Theme Name: sample Theme URL: localhost/wordpress Description: オリジナルテーマの挑戦！ */ /*コンテナ*/ div#container{ width:760px; margin:auto } /*ヘッダー*/ div#header h1{ font-size:1.875em; margin:0; float:left; margin-bottom:4px; } div#header h1 a{ text-decoration: none; color:#000000; } 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#header img{ vertical-align:bottom; } /*ナビゲーションバー*/ div#nav{ clear:both; width:100%; } div#header{ margin-bottom:0; } div#nav ul{ background-color:#000000; padding:8px 0; margin:0 0 20px; } div#nav li a{ font-size:0.75em; color:#FFFFFF; text-decoration:none; } div#nav li a:hover{ color:#ffaa00; } div#nav li{ display:inline; list-style-type:none; border-right:solid 1px #FFF; padding-left:15px; padding-right:15px; } /*コンテンツ*/ div#content{ width:515px; float:left; } p#pagetitle{ font-size:0.875em; font-weight:bold; color:#0c8bcd; border:dotted 1px #0c8bcd; text-align:center; padding:10px 0; margin-top:0; } /*記事*/ div.post{ border:solid 1px #0c8bcd; padding:15px; margin-bottom:20px } div.post h2{ background-color:#a3d2f2; font-size:0.875em; padding:10px; margin:0; } div.post h2v a{ text-decoration:none; color:#000000; } div.post p{ text-decoration:0.875em; line-height:1.6; margin-top:10px; } p.postinfo{ color:#0c8bcd; text-align:right; margin:20px 0; clear:both; } p.postinfo a{ color:#0c8bcd; } /*ページリンク*/ span.oldpag{ float:left; } span.newpage{ float:right; } p.pagelink a{ font-size:0.75em; color:#0c8bcd; } p.pagelink{ overflow:hidden; width:100%; } /*記事内の画像*/ .aligncenter{ display:block; margin-left:auto; margin-right:auto; } div.post img{ border:none; } .alignleft{ float:left; margin-right:10px; margin-bottom:10px; } .alignright{ float:right; margin-left:10px; margin-bottom:2px; } .wp-caption{ border:solid 1px #aaaaaa; text-align:center; padding-top:5px; } /*コメント*/ #comments{ border:solid 1px #0c8bcd; padding:0 18px; margin:20px 0; } #comments h3{ font-size:0.875em; border-bottom:solid 1px #0c8bcd; padding-bottom:3px; margin-top:20px; } #comments p{ font-size:0.75em; } #comments p a{ color:#0c8bcd; } #comments input,#comments textarea{ display:block; } #comments textarea{ width:450px; } #comments .required{ color:#ff0000; } #comments code{ display:block; margin-top:5px; font-size:smaller; } #comments ul{ margin:0; padding:0; } #comments li.compost{ list-style-type:none; border-bottom:dotted 1px #0c8bcd; margin-bottom:20px; } #comments p.cominfo{ text-align:right; } #comments #comfeed a{ background-image:url(feed-icon-12x12.png); background-repeat:no-repeat; background-position:0 50%; padding-left:17px; line-height:1em; color:#000000; text-decoration:none; } #comments #comfeed{ background-color:#a3d2f2; padding:8px; margin-top:30px; } #comments #trurl{ background-color:#a3d2f2; padding:8px; margin-bottom:30px; } /*サイドバー*/ div#sidebar{ width:220px; float:right; } 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; #FFF; margin-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; } /*カレンダー*/ .widget_calendar h2{ display:none; } #wp-calendar{ font-size:0.75em; color:#FFF; 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 #FFF; padding-bottom:8px; margin-bottom:8px; } #wp-calendar #prev{ text-align:left; padding-top:3px; } #wp-calendar #next{ text-align:right; padding-top:3px; } /*フッター*/ #footer{ clear:both; border-top:solid 3px #000000; padding:6px 0; } small{ font-size:0.75em; font-style:normal; font-family:Verdana, Geneva, sans-serif; margin:0; } small a{ color:#000000; } /*固定ページ*/ div#content.page{ width:100%; } /*ビジネスページ*/ #topcontent p{ text-align:center; font-size:0.875em; line-height:1.5; margin:0 0 20px; }
