目次
- 1 WordPress
- 1.1 スパム対策「Akismet」を使う
- 1.2 RSSフィードへのリンクを追加する
- 1.3 コメントの投稿フォームを追加する
- 1.4 ログアウトしている場合
- 1.5 コメントの投稿フォームのデザインを指定する
- 1.6 受信したコメントを表示する
- 1.7 コメントのRSSフィードへのリンクを追加する
- 1.8 トラックバックURLを追加する
- 1.9 コメント部分を開くリンクを追加する
- 1.10 固定ページ・パーツテンプレートを作成する
- 1.11 footer.php
- 1.12 ナビゲーションバーを作成する
- 1.13 トップページをビジネスサイト風のページにする
- 1.14 トップ
- 1.15 各ページ
- 1.16 ブログ
- 1.17 管理画面でヘッダー画像を変更できるようにする
- 1.18 管理画面で背景画像を変更できるようにする
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><!-- ▲ヘッダー -->
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(); ?>>
/* ---------------------- コンテンツの背景 ----------------------*/
div.post, p.feed, #comments {
background-color: #fff;
}
WordPress3.3よりheader.phpに書き込む内容が増えました。
bodyの後に上記のphpを記述することでキッチリと動作します。