67回目授業内容　テスト〜WordPress昨日の続き

[授業][Dreamweaver][PHP][WordPress]

WordPress昨日の続き

  • スパム対策 
<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

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

function.php

// ---------------------　　受信したコメント　-------------------------
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;
}

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

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>
</p>
  • 固定ページ・パーツテンプレートを作成する

index.php

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

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



|

ーナビゲーションバーを作成する
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);

header.php



*











    
脱線話（復活）

    
-
[http://tokiyo.hateblo.jp:title=四十路男Tokiyoの人生再スタートblogもやってます。