WordPressを1から組んでみた

1 WordPress

WordPress

スパム対策「Akismet」を使う

WordPress.comにてAPIキーを取得

RSSフィードへのリンクを追加する


<link rel="alternate" type="application/rss+xml" title="RSSフィード" href="<?php bloginfo('rss2_url'); ?>"  />
................
<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
</a>
</p>

/* ----------------------     フィード   　----------------------*/
p.feed {
	font-size: 0.75em;
	font-family: Verdana, Helvetica, sans-serif;
	border: solid 1px #0c8bcd;
	padding: 5px;
	margin: 25px 0;
}
p.feed a {
	color: #444;
	text-decoration: none;
}
p.feed img {
	vertical-align: middle;
	margin-right; 8px;
}

コメントの投稿フォームを追加する

ログインしている場合

ログアウトしている場合

index.php


<?php comments_template(); ?>
comments.php
<div id="comments">
<?php comment_form(); ?>
</div>

コメントの投稿フォームのデザインを指定する


/* ----------------------     コメント   　----------------------*/
#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: brock;
}
#comments textarea {
	width: 450px;
}
#comments .required {
	color: #ff0000;
}
#comments code {
	display:block;
	margin-top: 5px;
	font-size: smaller;
}

受信したコメントを表示する


<?php if(have_comments()): ?>
<h3>コメント</h3>

<ul>
<?php wp_list_comments(); ?>
</ul>
<?php endif; ?>

受信したコメントのデザインを指定する

comments.php


<?php wp_list_comments('callback=mydesign'); ?>
</code></pre>

function.php
<pre><code>
// ---------------------　　受信したコメント　-------------------------
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 }

#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;
}

コメントのRSSフィードへのリンクを追加する

comments.php


<p id="comfeed">
<?php post_comments_feed_link(); ?>
</p>

#comments #comfeed a {
	background-image: url(feed-icon-12x12.png);
	background-repeat: no-repeat;
	background-position: 0 50%;
	padding-left: 17px;
	line-height: 1em;
	text-decoration: none;
}
#comments #comfeed {
	background-color: #a3d2f2;
	padding: 8px;
	margin-top: 30px;
}

トラックバックURLを追加する

comments.php


<?php if(pings_open()): ?>
<p id="trurl">
<strong>トラックバックURL</strong>
<?php trackback_url(); ?>
</p>
<?php endif ?>

#comments #trurl {
	background-color: #a3d2f2;
	padding: 8px;
	margin-top: 30px;
}

コメント部分を開くリンクを追加する


カテゴリー：<?php the_category(', '); ?>
｜
<a href="<?php comments_link(); ?>">コメント
<?php comments_number(' (0) ', ' (1) ', ' (%) '); ?>
</a>

固定ページ・パーツテンプレートを作成する

index.php


<?php get_header(); ?>
..................
<?php get_footer(); ?></pre>

header.php


<!DOCTYPE html PUBLIC "-//W3c//DTD XTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="<?php bloginfo('html_type'); ?>;charset=<?php bloginfo('charset');?>" />
<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />
<link rel="alternate" type="application/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>
<p id="image"><img src="<?php bloginfo('template_url'); ?>/header.jpg" alt="*" width="760" height="200"  /></p>
</div><!-- ▲ヘッダー -->

footer.php


Copyright © <a href="mailto:%3C?php%20bloginfo%28%27admin_email%27%29;%20?%3E">Webディレクターになるための勉強blog</a>,All rights reserved.
<div id="footer">

</body>

</div>
</html>

ナビゲーションバーを作成する

function.php


// ---------------------　　カスタムメニュー　-------------------------
register_nav_menus(array(
'navigation' => 'ナビゲーションバー'
));

header.php


<!-- ▼ナビゲーションバー -->
<div id="nav">
<?php wp_nav_menu(array(
'theme_location' => 'navigation')); ?>
</div>

/* ----------------------     ナビゲーションバー     　----------------------*/
div#header {
	margin-bottom: 0;
}
div#nav ul {
	background-color: #000;
	padding: 8px 0;
	margin: 0 0 20px;
}
div#nav li a {
	font-size: 0.75em;
	color: #fff;
	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;
}

トップページをビジネスサイト風のページにする

header.php


<?php if(!(is_page('ビジネスサイト風のページ'))): ?>
<p id="image"><img src="<?php bloginfo('template_url'); ?>/header.jpg" alt="*" width="760" height="200"  /></p>
<?php endif; ?>
</div>
<!-- ▲ヘッダー -->

business.php


div#nav {
	clear: both;
	width:100%;
}

/* ----------------------     トップページ     　----------------------*/
div#topcontent p {
	text-align: center;
	line-height: 1.5;
	margin: 0 0 20px;
}

トップ

各ページ

ブログ

とこの様にデザインを各ページごとに変えることが出来る。

管理画面でヘッダー画像を変更できるようにする

function.php


// ---------------------　　カスタムヘッダー　-------------------------
add_custom_image_header(''.'admin_header_style');

function admin_header_style() {
	?>
  <style type="text/css">
	#headimg {
		width: 760px!important}
		</style>
<?php
}

define('NO_HEADER_TEXT',true);
define('HEADER_IMAGE','%s/default_header.jpg');
define('HEADER_IMAGE_WIDTH',760);
define('HEADER_IMAGE_HEIGHT',200);

管理画面で背景画像を変更できるようにする

functions.php


// ---------------------　　カスタム背景　-------------------------
add_custom_background();</pre>
header.php
<pre><?php wp_head(); ?>
</head>
<body <?php body_class(); ?&gt>

/* ----------------------     コンテンツの背景     　----------------------*/
div.post, p.feed, #comments {
	background-color: #fff;
}

WordPress3.3よりheader.phpに書き込む内容が増えました。
bodyの後に上記のphpを記述することでキッチリと動作します。

月	火	水	木	金	土	日
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

WordPress

スパム対策「Akismet」を使う

RSSフィードへのリンクを追加する

コメントの投稿フォームを追加する

ログアウトしている場合

コメントの投稿フォームのデザインを指定する

受信したコメントを表示する

コメントのRSSフィードへのリンクを追加する

トラックバックURLを追加する

コメント部分を開くリンクを追加する

固定ページ・パーツテンプレートを作成する

footer.php

ナビゲーションバーを作成する

トップページをビジネスサイト風のページにする

トップ

各ページ

ブログ

管理画面でヘッダー画像を変更できるようにする

管理画面で背景画像を変更できるようにする

コメントを残すコメントをキャンセル