シンプルなアコーディオンメニュー

xhtml:

<ul class="acc">
	<li><a href="1">category1</a>
		<ul class="fxmn">
			<li><a href="11">menu 1-1</a></li>
			<li><a href="12">menu 1-2</a></li>
			<li><a href="13">menu 1-3</a></li>
		</ul>
	</li>
	<li><a href="2">category2</a>
		<ul class="fxmn">
			<li><a href="21">menu 2-1</a></li>
			<li><a href="22">menu 2-2</a></li>
			<li><a href="23">menu 2-3</a></li>
			<li><a href="24">menu 2-4</a></li>
		</ul>
	</li>
	<li><a href="3">category3</a>
		<ul class="fxmn">
			<li><a href="31">menu 3-1</a></li>
			<li><a href="32">menu 3-2</a></li>
			<li><a href="33">menu 3-3</a></li>
			<li><a href="34">menu 3-4</a></li>
			<li><a href="35">menu 3-5</a></li>
		</ul>
	</li>
</ul>

css:

ul.acc, ul.acc li ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

ul.acc a{
	display: block;
	height: 30px;
	line-height: 30px;
	color: #feffff;
}

ul.acc {
	background-color: #185AAC;
}

ul.acc li ul {
	background-color: #A6B5E2;
}

javascript:

	var j$ = jQuery;

	j$(function(){
		j$(".acc").each(function(){
			j$("li > a", this).each(function(index){
				var $this = j$(this);

				if(index > 0) $this.next().hide();

				$this.click(function(){
					j$(this).next().toggle().parent().siblings()
						.children("ul:visible").hide();
					return false;
				});
			});
		});
	});

アコーディオンメニュー：

• category1
  • menu 1-1
  • menu 1-2
  • menu 1-3
• category2
  • menu 2-1
  • menu 2-2
  • menu 2-3
  • menu 2-4
• category3
  • menu 3-1
  • menu 3-2
  • menu 3-3
  • menu 3-4
  • menu 3-5

メニューの開閉動作をスムースなアニメーションにする

jQueryっぽく、メニュー開閉時にアニメーションさせます。

javascript:

//　変更前
				j$(this).next().toggle().parent().siblings()
					.children("ul:visible").hide();
 				//　変更後
				var params = {height:"toggle", opacity:"toggle"};
				j$(this).next().animate(params).parent().siblings()
					.children("ul:visible").animate(params);

スムーズに開閉するアコーディオンメニュー：

• category1
  • menu 1-1
  • menu 1-2
  • menu 1-3
• category2
  • menu 2-1
  • menu 2-2
  • menu 2-3
  • menu 2-4
• category3
  • menu 3-1
  • menu 3-2
  • menu 3-3
  • menu 3-4
  • menu 3-5

メニューの高さを揃える

メニュー項目の数によらずメニュー領域の高さを固定にする場合は、ul.acc li ul 要素の height を指定します。これはアコーディオンというのかスライドメニューというのか。

CSS:

ul.acc li ul {
  height 150px;
}

各メニューの高さが揃っているアコーディオンメニュー:

• category1
  • menu 1-1
  • menu 1-2
  • menu 1-3
• category2
  • menu 2-1
  • menu 2-2
  • menu 2-3
  • menu 2-4
• category3
  • menu 3-1
  • menu 3-2
  • menu 3-3
  • menu 3-4
  • menu 3-5

横幅を指定する

アコーディオンメニューの横幅を固定にする場合は、最上位の ul 要素の width を指定します。

CSS:

ul.acc {
  width 150px;
}

横幅が固定されたアコーディオンメニュー:

• category1
  • menu 1-1
  • menu 1-2
  • menu 1-3
• category2
  • menu 2-1
  • menu 2-2
  • menu 2-4
• category3
  • menu 3-1
  • menu 3-2
  • menu 3-3
  • menu 3-4
  • menu 3-5

カテゴリの背景を画像にする

背景画像を使って角が丸いアコーディオンメニューを作成します。最下段のカテゴリは、閉じているときに角丸、開いているときに矩形、の画像に各々切り替えます。

javascript:

function setBackground() {
	var $last = j$(".acc > li:last > a");
	if($last.hasClass("close"))
		$last.css("background-position", "left bottom");
	else
		$last.css("background-position", "left -30px");
}

j$(".acc").each(function(){
	j$("li > a", this).each(function(index){
		var $this = j$(this);

		if(index > 0)
			$this.addClass("close").next().hide();
		else
			$this.css("background-position", "left top");

		setBackground();

		var params = {height:"toggle", opacity:"toggle"};
		$this.click(function(){
			j$(this).toggleClass("close").next().animate(params)
				.parent().siblings().children("ul:visible")
					.animate(params).prev().addClass("close");
			setBackground();
			return false;
		});
	});
});

CSS:

/* 背景色は削除すること
ul.acc{
	background-color: #185AAC;
}
*/
/* ul.acc > li > a {  IE6では無効 */
/* ↓メニュー項目にも背景画像が設定される */
ul.acc li a {
  background: url(images/acc_bg.png) left -30px no-repeat;
}

/* メニュー項目の背景画像をクリアする */
ul.acci li ul li a {
  background: none;
}

カテゴリの背景画像を設定したアコーディオンメニュー:

• category1
  • menu 1-1
  • menu 1-2
  • menu 1-3
• category2
  • menu 2-1
  • menu 2-2
  • menu 2-3
  • menu 2-4
• category3
  • menu 3-1
  • menu 3-2
  • menu 3-3
  • menu 3-4
  • menu 3-5

IE6の場合

IE6ではアニメーション動作が飛んでしまいます。また、背景画像の透過部分が青っぽくなります。iepngfix 等で透過させると background-position での背景画像切り替えが動作しません。IE6での表示を考えるなら、透過画像ではなく角丸の外を背景色でペイントした画像を使うのが簡単です。

Finally

以下の項目を調整して完成です。

• 最下段メニューのオープン時にメニューリストの bottom を角丸にする。
• アンカーリンクのインデント，デコレーション。
• メニュー開閉時のアニメーション速度。

brush-up 後のアコーディオンメニュー:

• category1
  • menu 1-1
  • menu 1-2
  • menu 1-3
• category2
  • menu 2-1
  • menu 2-2
  • menu 2-3
  • menu 2-4
• category3
  • menu 3-1
  • menu 3-2
  • menu 3-3
  • menu 3-4
  • menu 3-5

ダウンロード

xxx_accordion.zip(4KB)

以下のファイルが含まれています。

• index.htm
• acc_bg.png　カテゴリの背景画像
• acc_menu_last.png　最下段メニューリストの bottom 用画像

利用するには、jQuery(バージョン1.2.6以上)が必要です。

カスタマイズの内容

オリジナルの syntaxhighlighter は、name="code"の属性を指定した pre，textarea の DOM 要素に作用します。また、言語の種類やオプションをclass="html:collapse"のように class の値で指定します（使い方を参照）。

変更したい点:

• name は XHTML では id に代わるので使いたくない。
• class にコロン（：）区切りでオプションを指定したくない
• 対象タグは pre，textarea よりも pre，code にしたい。

SyntaxHighlighter プラグインでは、エントリ本文中に以下のようなプレースホルダでコードを囲みます（使い方を参照）。エントリが表示されるときにフィルタでフックして、プレースホルダを syntaxhighlighter の仕様にあわせた pre タグに変換します。

エントリ記述例:（※実際は半角のカッコを使います）

［code="css"］background-color: #123456;［/code］

変換例:

<pre name="code" class="css">background-color: #123456;</pre>

変更したい点:

• 言語以外の以下のオプションも指定したい。
  • 行番号の有無
  • 開始行番号
  • ツールバーの有無
• リストの表示（＋開く）/非表示（－閉じる）を切り替えたい。
• 1行だけの表示を簡単に可能にしたい。
• インライン表示を可能にしたい。

カスタマイズ仕様

プレースホルダは以下の書式とします。

［code="言語 オプション1 オプション2･･･"］コード［/code］

言語の種類は、本家を参照してください。オプションは、オリジナルのものと、追加したものをあわせて指定できるようにします。

オリジナルのオプション:

• nogutter　･･･　行番号欄を非表示にします。
• nocontrols　･･･　ツールバーを非表示にします。
• showcolumns　･･･　リストの初めにカラムを表示します。
• collapse　･･･　リストを閉じて表示します。ツールクリックでリストが開きます。オリジナルは1度開くと開きっぱなしですが、自由に開閉できるようにします。
• first-番号　･･･　行番号の開始番号を指定します。オリジナルの書式は first[番号] ですが、これをクラス名に指定したくないので変更しました。

オリジナルのオプション:

• simple　･･･　行番号欄、ツールバーともに非表示。
• span　･･･　インライン表示します。

WordPressプラグインのカスタマイズ

syntaxhighlighter.php:

• GetBBCode() 関数の正規表現にオプションの内容を追加します。

  $regex .= '((\s+(span|simple|nogutter|nocontrols|collapse|showcolumns|firstline\-[0-9]+))*)';

• 正規表現でマッチしたソースコード部分のインデックスを随所で「5番目」と決め打ちしているので、変数にしておきます。正規表現を変更したのでインデックス値も変わります。

  var $match_code = 8;
  var $match_lang = 4;
  var $match_opt = 5;
  　　：
  $match[5]
  　　↓
  $match[$this->match_code]
  

• タグ生成の箇所で、span オプション指定なら code タグ、それ以外は pre タグにします。また、name="code"をクラスへ変更します。

  $content = str_replace( $match[0], '<pre name="code" class="' . $language . ～
  　　↓
  $opt = $match[$this->match_opt];
  $tag = strpos($opt, 'span') ? 'code' : 'pre';
  $content = str_replace( $match[0], '<' . $tag . ' class="code ' . $language . $opt . ～
  

syntaxhighlighterのカスタマイズ

WordPressプラグインSyntaxHighlighter に同梱されている shCore.js は、コメントやスペースが除かれていて読みにくいため、オリジナルを使いましょう。以下に変更の要点を説明します。

shCore.js:

• 適用対象である code の値を持つ属性を name から class に変更します。

  if(tags[i].getAttribute('name') == name)
  　　↓
  if(tags[i].className.indexOf(name) != -1)
  

• オプション区切りをコロン（：）からスペースに変更します。

  options = options.split(':');
  　　↓
  options = options.split(' ');
  

• 書式を firstline[番号]から firstline-番号に変更します。

  var regex = new RegExp('^' + name + '\\[(\\w+)\\]$', 'gi');
  　　↓
  var regex = new RegExp('^' + name + '\\-(\\w+)$', 'gi');
  

• 対象要素を textarea から code に変更します。

  	FindTagsByName(elements, name, 'textarea');
  　　↓
  	FindTagsByName(elements, name, 'code');
  

• インライン表示のために各所を変更します。asSpan の記述全般です。

  dp.sh.Highlighter = function()
  {
  　　：
    this.asSpan = false; // 追加
  　　：
  

• collapse 指定時にソースリストを開閉できるようにします。

  sender.parentNode.removeChild(sender);
  highlighter.div.className = highlighter.div.className.replace('collapsed', '');
  　　↓
  if(highlighter.div.className.indexOf('collapsed') != -1){
    highlighter.div.className = highlighter.div.className.replace('collapsed', '');
    sender.innerHTML = '－source';
  }
  else{
    highlighter.div.className = highlighter.div.className + ' collapsed';
    sender.innerHTML = this.label;
  }
  

インライン表示時の不具合修正

span オプションでインライン表示する場合は、code タグに変換しているのですが、WordPressのエディタのタグ自動補完機能によりソースコードの最後に<br />が付いてしまいます。これを回避するために、WordPress のファイル wp-includes/formatting.php を修正します。

1. function clean_pre() と同じ処理を code タグ用に追加します。

   function clean_code($matches) {
     if ( is_array($matches) )
       $text = $matches[1] . $matches[2] . "</code>";
     else
       $text = $matches;
   
     $text = str_replace('<br />', '', $text);
     $text = str_replace('<p>', '', $text);
     $text = str_replace('</p>', '', $text);
   
     return $text;
   }
   

2. 上記関数を pre タグの処理後に呼び出します。

     if (strpos($pee, '<pre') !== false)
       $pee = preg_replace_callback(～
     //  以下を追加
     if (strpos($pee, '<code') !== false)
       $pee = preg_replace_callback('!(<code.*?>)(.*?)</code>!is', 'clean_code', $pee );
   

使用例

“php span”:

これはスパンif($hoge == 'hoge')の例です。

“php nogutter”:

if($hoge == 'hoge')

“php nocontrols”:

if($hoge == 'hoge')

“php simple”:

if($hoge == 'hoge')

“php collapse firstline-13″:

if($hoge == 'hoge')
  $hoe .= 'hoge';

ダウンロード

オリジナル:

SyntaxHighlighter

変更したファイル:

xxx_SyntaxHighlighter.zip (27KB)

以下のファイルが含まれています。

• shCore.js
• syntaxhighlighter.php
• SyntaxHighlighter.css
• formatting.php

WordPressプラグインの作成

# で始まるページ内リンクはリンク先へスムーススクロールし、リンク先が #_top となっているリンクは body タグへスムーススクロールさせます。 #_top を id に持つタグを XHTML に記述しておく必要はありません。プラグインファイルは以下のようになります。jquery.js は必須です。ScrollTo プラグインを使うなら jquery.scrollTo.js も必要です。このように、WordPressプラグインが他のライブラリに依存する場合は、通常はプラグインのフォルダを作成し、そこに関連ファイルをまとめます。プラグイン公開・配布の予定が無い場合で、共通に使うライブラリファイルがプラグインごとに重複して存在するのを避けたいなら、/wp-includes/js/jquery/ 以下や独自の js フォルダ以下にアップロードして参照すると良いでしょう。

<?php
/*
Plugin Name: XXX Smooth Scroll to Anchor
Plugin URI: http://triplexxx.jp/
Description: Smooth Scroll to Anchor
Author: xxx
Author URI: http://triplexxx.jp/
Version: 1.0
*/

function xxx_scroll_init()
{
	//  JavaScriptファイルの場所を指定します
	$url = get_bloginfo('wpurl');

	//  インクルードフォルダ以下の場合
	$url .= '/wp-includes/js/jquery/';
	//  プラグインフォルダの場合
	//$url .= '/wp-content/plugins/xxx_scroll/';

	wp_enqueue_script('jquery');

	//  jQuery ScrollToプラグインを使う場合
	//wp_enqueue_script(
	//	'jquery_scrollTo'
	//	, $url . 'jquery.scrollTo.js'
	//	, array('jquery'), '1.3.3'
	//);
}

function xxx_scroll()
{
?>
<script type="text/javascript">
	var j$ = jQuery;

	j$(function(){
		j$('a[href^=#]').click(function() {
			var href= this.hash;
			var $target = j$(href == '#_top' ? 'body' : href);

			if($target.size()) {
				//  jQuery のみの場合
				var top = $target.offset().top;
				j$(j$.browser.safari ? 'body' : 'html')
					.animate({scrollTop:top}, 800, 'swing');
				//  jQuery ScrollToプラグインを使う場合
				//j$.scrollTo($target, 800, {easing:'swing'});
			}
			return false;
		});
	});
</script>
<?php
}

add_action('wp_print_scripts', 'xxx_scroll_init');
add_action('wp_head', 'xxx_scroll');
?>

プラグインの要点を順に説明します。

function xxx_scroll_init()

スクリプトのインクルード用関数です。

$url .= '/wp-includes/js/jquery/';

js ファイルを共通に使用します。WordPress の jQuery 関連フォルダにアップロードした場合です。

$url .= '/wp-content/plugins/xxx_scroll/';

js ファイルをプラグイン専用に用意する場合は、こちらを使います。xxx_scroll プラグインフォルダ以下にアップロードした場合です。

wp_enqueue_script('jquery');

WordPress で 定義されている jQuery をインクルードします。wp_enqueue_script を使うと重複せずにインクルードできます。

wp_enqueue_script('jquery.scrollTo', $url . 'jquery.scrollTo.js', array('jquery'), '1.3.3');

ScrollTo プラグインをインクルードします。ファイルのパスと jquery に依存していることを指定しています。これだけでインクルード順序や重複の管理は WordPress が自動で行ってくれます。

function xxx_scroll()

スクロール処理を定義します。

var j$ = jQuery;

jQuery のままでも良いです。jQuery が長くて嫌、という場合にお好みの変数に代入しましょう。$ という表記もできますが prototype.js でも同じ表記を使用しているため名前が衝突します。jQuery では以下のようにしてこれを回避できます。

jQuery.noConflict();
var j$ = jQuery;

noConflict() で $ を他のライブラリに戻し、他の変数（例: j$）に置き換えます。面倒な場合は初めから jQuery の表記を使えば何も問題ありません。

j$(function(){

DOM の構築後に実行される関数です。いくつ定義しても上書きされず、すべて実行されるので便利です。j$(document).ready(function(){ と記述しても同じです。

j$('a[href^=#]').click(function() { 

リンク先が # から始まる a タグを対象にして、click イベント時の処理を定義します。

var href= this.hash;

href の # 以降の文字列を取得します。

var $target = j$(href == '#_top' ? 'body' : href);

#_top なら body 要素、それ以外は href の値を id に持つ DOM 要素を取得します。

if($target.size()) { 

DOM 要素が存在する場合のみ、以降を実行します。

var top = $target.offset().top;

DOM 要素のページ内での top 位置を取得します。この位置までスクロールさせます。余分にスクロールさせたい場合は、必要なピクセル数を引きます。例:　var top = $target.offset().top - 50;

j$(j$.browser.safari ? 'body' : 'html')
	.animate({scrollTop:top}, 800, 'swing');

html は FF3，IE6，Opera9、body は Safari3 でそれぞれページ全体を対象として正しく動作させるための指定です。animate で 800ms で top へスムーズに移動します。第3引数の easing には swing または linear を指定できますが、省略しても構いません。様々な easing 動作をさせる easing プラグインもありますので、お好みで利用すると良いでしょう。

j$.scrollTo( $target, 800, {easing:'swing'});

ScrollTo プラグインを使う場合は、このように記述します。

add_action( 'wp_print_scripts', 'xxx_scroll_init' );

xxx_scroll_init 関数を wp_print_scripts フックに追加します。wp_print_scripts は <head> 内にスクリプトをインクルードするタグを挿入します。

add_action('wp_head', xxx_scroll);

xxx_scroll 関数を wp_head フックに追加します。wp_head フックは通常、WordPressテーマの ヘッダテンプレート header.php 内 </head> 終了タグの直前に記述されています。

<?php wp_head(); ?>
</head>

ご使用のテーマのヘッダテンプレートにこの記述がない場合は追加してください。

XHTML の記述

以下のように、ページ内アンカーは通常通り、ページトップへのアンカーは #_top を指定します。

<a href="#h3-1">「WordPressプラグインの作成」へ移動</a>
<a href="#_top">ページの先頭へ移動</a>

リンクの例:

• 「WordPressプラグインの作成」へ移動
• ページの先頭へ移動

“ページの先頭へ移動”を自動で追加

エントリの最後には”ページの先頭へ移動”のリンクがあると親切です。これを自動で追加するプラグインを作成します。WordPress のエントリは、おおよそ以下のような構造になっています。

<div id="content">
  :
  <div class="post">
    :
    <div class="entry">
      エントリ本文
    </div>
    エントリ関連情報
  </div>
  :
</div>

テーマによっては、構造が異なりますので、ご利用のテーマについて予め調べておいてください。ここでは post の最後にリンクを作成することにします。

post の最後にリンクを追加:

$post = j$('.post');
if($post.size())
	$post.append('<div class="block"><a href="#_top">ページの先頭へ</a></div>');

append は、対象の DOM 要素の子要素の末尾に XHTML文字列や DOM 要素を追加します。この例では、post クラスを持つ div の終了タグ直前にアンカーリンクを追加しています。これを先ほどのプラグインの初めに記述します。

j$(function(){
　ここに記述します

a タグの click イベント定義後に a タグを追加しても、リンク動作をしないので注意してください。a タグ作成後に click イベント定義、の順です。

IEでは動作しない

スクリプトで動的に a タグを追加すると IE では href に http から始まるホスト名が付加されるため、# から始まるリンク先を選択するセレクタ [href^=#] では対象外になってしまいます。そのため、以下のようにセレクタを追加する必要があります。

'a[href^=#], a[href$=#_top]'

これで #_top で終わっている a タグも選択されます。ただし、ほとんどないとは思いますが、別ページや外部リンクに #_top が付加されていると正しく動作しません。その場合は、自動で追加する a タグの id 名を #_top から他のものに変更してください。

横幅がキャプション（リンクテキスト）に応じて伸縮するボタンを、CSSのみ・ボタン用画像1枚だけ、で実現する方法をまとめます。これは、海外で scalable button，fancy button，sexy button，sliding doors 等と呼ばれているテクニックです。簡単に言うと「a タグに span タグを入れ子にして、それぞれの背景でボタンの左端からと右端からを表示する」となります。言うのは簡単ですが、クロスブラウザで実現するには細かなテクニックが必要です。さらに、ボタンの状態に合わせてボタンの画像を変更するテクニックも説明します。

ボタン用画像

ボタンの背景画像は、ボタンの状態に合わせてそれぞれ、通常状態，hover 状態（，active 状態）のように縦方向に連続して作成します。横幅は、サイトに使用するボタンとして十分に長いものにしてください。ここでは、透過PNG画像を使用します。

XHTML 記述例

例としてボタンのクラスを “hogebutton” とします。XHTML は a タグに span タグを入れ子にしただけのもので良いです。

XHTMLソース:

<a class="hogebutton" href="#"><span>button</span></a>;

span タグの存在が美しくない、という場合は、JavaScript でこっそり追加すると良いでしょう。以下は、前回作成した insert プラグインを使って、jQuery で button クラスを持つの DOM 要素内に span タグを追加する例です。

エントリ本文:

<a class="hogebutton" href="#">button</a>;
<!--xxx_insert:button_span,js-->

カスタムフィールド button_span:

jQuery(function() {
  jQuery('.hogebutton').each(function() {
    var me = jQuery(this);
    me.html('<span>'+ me.html() +'</span>');
  });
});

CSS 記述例

幅方向に伸縮するボタンを実現する CSS は以下の通りとてもシンプルです。

最小限の CSS:

a.hogebutton {
	float: left;
	padding-right: 20px; /* ボタン内　右側余白*/

	line-height: 42px;   /* ボタン高さ */
	background: url(hogebutton.png) right top no-repeat;

	cursor: pointer;
	margin-right: 5px;   /* ボタン外　右側余白*/
	outline: none;       /* FireFox:点線を非表示 */
}

a.hogebutton span {
	display: block;
	padding-left: 20px;  /* ボタン内　左側余白*/

	background: url(hogebutton.png) left top no-repeat;
	background-color: #E6DCDC; /* 透過部分の背景色 */
}

• a タグに floatと右余白を指定。
  背景画像は右上端を基点にします。
• span タグに display と左余白を指定
  背景画像は左上端を基点にします。
• span タグに 上位層と同じ背景色を指定します。

余白はアンカーテキストの左右に表示させるボタンの幅です。span タグに背景色を指定することで、span の背景画像の透過部分に a タグの背景画像が透けるのを防ぎます。

hover，active でボタンの画像を変更

実際は、ボタンの画像を変更するのではなく、表示する範囲を変更します。これは background-position の指定で実現できます。

hover，active の CSS:

a.hogebutton:hover {
	background-position: right -42px;
}

a.hogebutton:hover span {
	background-position: left -42px;
}

a.hogebutton:active {
	background-position: right bottom;
}

a.hogebutton:active span {
	background-position: left bottom;
}

hover 時にY方向を -42px と指定することで背景画像を上にずらしています。その結果、ブロック内に表示されるのは背景画像のY=42px からとなります。active 時の bottom 指定は、画像の下端から表示することになります。

IE:ボタンクリック後の表示

IEではボタンクリック後も active の状態で表示されてしまいます。これを回避するには、ボタンの click イベント時に this.blur(); とします。

<a class="hogebutton" href="#" onclick="this.blur();">

タグ内に JavaScript を記述したくない場合は、前述の span タグ追加と同じように jQuery で追加するのが簡単です。

jQuery(function() {
  jQuery('.hogebutton').each(function() {
    var me = jQuery(this);
		me.html('<span>'+ me.html() +'</span>');
		me.click(function() { this.blur(); });
  });
});

ボタンへの回り込みを回避する

float 指定したボタンは、以下のように以降の要素が回り込んでしまいます。

float 要素への回り込み:

button

このようにテキストがボタンに回り込んでしまいます。これを回避するためによく用いられるのは、float を解除する属性 clear: both; を使う方法です。

• float の次の要素に指定する。
  次の要素で前の float 要素の指定を解除するのは微妙？
• after 擬似要素で指定する。
  IEでは使えない。

clear を使用しない方法には、float された要素群を div で囲むというものがあります。このエントリで回り込みが発生していないボタンは、すべて以下の div で a タグ（群）を囲んでいます。このようにすると、前後に関係なくこのブロック内のみが float となるので、汎用的なコンテナとして使えます。

XHTML:

<div class="block">float要素</div>

CSS:

.block {
  overflow: hidden;
   width: 100%; /* IE */
}

JavaScript で XHTML Valid

通常は以下のように、HTML の任意の位置に <script> タグで括って、document.write(’～’) と記述すれば JavaScript は実行されます。<!– ～ –> の部分はコメントと見なされるので XHTML Valid となります。

ソース:

<script type="text/javascript">
<!--
document.write('
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" WIDTH="200" HEIGHT="50" id="/image/flash_sample" ALIGN=""> <PARAM NAME=movie VALUE="/image/flash_sample.swf"> <PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=#FFFFFF> <EMBED src="flash_sample.swf" quality=high bgcolor=#FFFFFF  WIDTH="200" HEIGHT="50" NAME="flash_sample" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED></OBJECT>
');
//-->
</script>

しかし、WordPressのエディタにそのまま記述すると、’ や — が 実体参照の &#番号; のように変換されてしまうため、プラグインを使って document.write() を機能させる必要があります。

プラグインの作成

エントリ内にプレースホルダを記述し、ファイルやカスタムフィールドの内容と置換させます。

プレースホルダ:

<!--xxx_insert:ファイル名またはカスタムフィールドのキー-->

例:　<!--xxx_insert:hoge.js-->  ファイル名　
例:　<!--xxx_insert:hoge,js-->  カスタムフィールド

ピリオドとコンマが紛らわしいですが、ファイル拡張子が .js の JavaScript ファイル名か、カスタムフィールドのキー,jsと記述すれば、JavaScript 用のタグを自動で追加するようにします。書式はお好みで変更してください。

ソース:

function hoge_insert($content)
{
  global $post;

  $pattern = '<!--xxx_insert:([\w\-\/]+)([\.|,\w$]*)-->';

  if(!preg_match_all('@'.$pattern.'@', $content, $fields))
    return $content;

  $search  = array();
  $replace = array();

  for($i=0; $i<count($fields[0]); $i++) {
    $key = $fields[1][$i];
    $ext = $fields[2][$i];
    $sep = substr($ext, 0, 1);
    $typ = substr($ext, 1);
    $val = '';

    if($sep == '.')
      $val = file_get_contents(TEMPLATEPATH.'/'.$key.$ext);
    else
      $val = get_post_meta($post->ID, $key, true);

    if(!empty($val)) {
      switch($typ) {
        case 'js':
          $val = '<script type="text/javascript">'
               . "<!--\n" . $val . "\n//-->"
               . '</script>';
        break;
      }

      $search[]  = $fields[0][$i];
      $replace[] = $val;
    }
  }

  return str_replace($search, $replace, $content);
}

add_filter('the_content', 'xxx_insert');

このソースでプラグインファイルを作成し、プラグインフォルダにアップロードして、管理画面からプラグインを有効にします。

ファイルから置換する場合:

<!--xxx_insert:js/flash_sample.js-->

カスタムフィールドから置換する場合:

<!--xxx_insert:flash_sample,js-->

jQuery で XHTML Valid

jQuery Flash Pluginを使うとさらに簡単に Flash を表示できます。 ソース:

jQuery(function(){
  jQuery('#insert_flash_sample').flash({
    src: '/image/flash_sample.swf',
    width: 200,
    height: 50
  });
});

上記ソースを .js ファイルかカスタムフィールドに記述し、エントリにはプレースホルダを記述します。ここでは例として、カスタムフィールドを使用し、キーを jquery_flash_sample とします。

ソース（エントリ内）:

<div id="insert_flash_sample"></div>
<!--xxx_insert:jquery_flash_sample,js-->

表示結果（Flash）:

なお、jQuery Flash Plugin は Flash 挿入元の div を class=”alt” で置換するため、すでに同じクラス名を使用している場合は、これを変更しましょう。バージョン 1.0.1 なら、216行目 $$.replace 関数です。

this.innerHTML = '<div class="alt">'+this.innerHTML+'</div>';

Flashで生成したソースをコピー＆ペースト

FlashMXで[ファイル｜パブリッシュプレビュー｜HTML]から表示させたページのソースをコピーして、WordPressのHTMLエディタでペーストします。

ソース:

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
 codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
 WIDTH="200" HEIGHT="50" id="/image/flash_sample" ALIGN="">
 <PARAM NAME=movie VALUE="/image/flash_sample.swf"> <PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=#FFFFFF> <EMBED src="flash_sample.swf" quality=high bgcolor=#FFFFFF  WIDTH="200" HEIGHT="50" NAME="flash_sample" ALIGN=""
 TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED>
</OBJECT>

表示結果（画像）:

貼り付けたソースの一部が表示されてしまいます。

表示したページのソース:

<p><OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"<br />
 codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"<br />
 WIDTH="200" HEIGHT="50" id="flash_sample" ALIGN=""><br />
 <PARAM NAME=movie VALUE="/image/flash_sample.swf"> <PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=#FFFFFF> <EMBED src="/image/flash_sample.swf" quality=high bgcolor=#FFFFFF  WIDTH="200" HEIGHT="50" NAME="flash_sample" ALIGN=""<br />
 TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED><br />
</OBJECT></p>

WordPress のエディタによって p タグと br タグが自動で追加されてしまっています。

Flashで生成したソースを1行にしてコピー＆ペースト

前記のソースの<OBJECT>～</OBJECT>に含まれる改行を無くし、1行にして、WordPressのHTMLエディタへペーストします。

ソース:

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" WIDTH="200" HEIGHT="50" id="/image/flash_sample" ALIGN=""> <PARAM NAME=movie VALUE="/image/flash_sample.swf"> <PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=#FFFFFF> <EMBED src="flash_sample.swf" quality=high bgcolor=#FFFFFF  WIDTH="200" HEIGHT="50" NAME="flash_sample" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED></OBJECT>

表示結果（画像）:

正しく表示されています。しかし、見た目はこれで良いのですが、XHTMLをチェックするとエラーになります。

XHTML Validation 結果:

以下の内容が指摘されます。

• OBJECTタグに classid，codebase、WIDTH，HEIGHT，id，ALIGN の属性は無い。
• PARAMタグに NAME，VALUE の属性は無い。
• EMBEDタグに src，quality，bgcolor の属性は無い。
• 属性値は引用符（"）で括る。
• PARAMタグは /> で閉じる。

さらに注意すべきなのは以下の点です。

• タグや属性の表記は小文字にする。
• embed タグは使えない（XHTML で定義されていない）。

XHTML Valid になる記述

以上を踏まえてソースを修正します。

ソース:

<object data="/image/flash_sample.swf" type="application/x-shockwave-flash" width="200" height="50">
<param name="movie" value="/image/flash_sample.swf" />
</object>

表示結果（Flash):

正しく表示されますが、この場合は、Flash Player の自動インストール/アップデートはできません。Express Install を利用すれば可能ですが、閲覧中のブラウザにFlash Player 6 r65 以降がインストールされ JavaScript が有効になっている必要があります。

また、Light Box を使用する場合は、Flash が Light Box の前面に表示されてしまうことがあるようです（このサイトでは WordPress LightBox2 プラグインを使用していますが、現象は再現しません）。これを回避するには、以下の param タグを追加します。

<param name="wmode" value="transparent" />

表示結果（Flash）:

背景が透過になっているのがわかります。ただし、wmode を transparent にした Flash では、以下のような不具合があるので注意してください。

• 日本語のテキスト入力ができない（ペーストは可能）
  （FireFox3，Opera9，Safari3 で確認済）
• ボタンがクリックできない
  （現象再現できず）

入力テスト用（Flash，wmode無し ）:

入力テスト用（Flash，wmode=transparent ）:

プラグインによくあるのは「エントリ本文の特定の文字列（＝プレースホルダ）を置き換え（て様々な処理をす）る」ものです。例えば WordPress の基本機能では、エントリ内に <!–more–> と記述すると、エントリ一覧ではその位置までエントリ本文が表示され、続きを読むリンクが追加されます。このような動作をプラグインで実現することができます。以下では、WordPress のプラグインの作成方法を順に説明します。

アクションとフィルタ

プラグインはアクションとフィルタを利用します。それぞれに用意されたフックに、独自の関数を追加することでプラグインとして動作します。現状ではコーディング上、アクションとフィルタは同じものですが、将来のバージョンでは変更があるかもしれないため、目的に応じて使い分けるようにしましょう。

アクション

ユーザが行うと思われるほぼすべてのイベントがフック用に用意されています。アクションはデータベースに対する変更や、変更に伴う任意の処理を行う場合に使います。

アクションの追加:

add_action('アクション用フック', '独自の関数' {, プライオリティ});

フィルタ

フィルタは、データベースに対する変更は行いません。データが表示される際に加工を行い、ユーザーに見えるものを変更します。フィルタ用に用意されているフックは、ほとんどがテンプレートタグです。

フィルタの追加:

add_filter('フィルタ用フック', '独自の関数' {, プライオリティ});

プライオリティ

add_action，add_filter の第3引数「プライオリティ」には実行の優先順位を指定します。フックには複数の関数が関連付けられており、それらの実行の順序を制御しないと不都合がある場合に指定します。通常は省略して良いです。

• デフォルトは10です。
• 0が最優先で、順にプライオリティが下がっていきます。
• 一つのフックに同じプライオリティのアクション，フィルタがある場合は、追加された順に実行されます。

アクション，フィルタの削除

フックに追加されたアクションやフィルタ（の関連付け）を削除するには以下の関数を使います。

アクション，フィルタの削除:

remove_action('アクション用フック', 'アクション用関数');
remove_filter('フィルタ用フック', 'フィルタ用関数');

自分で追加した以外の関数も削除できます。削除はアクション，フィルタの動作を十分理解したうえで行ってください。

プラグインの作成

WordPress には、エントリ本文を出力する the_content というテンプレートタグがあります。例として、これをフックしてテキストファイルをインクルードさせるプラグインを作成します。

php なら readfile()，include() を使えばファイルをインクルードできますが、WordPressではエントリ本文に php を記述して動作させることはできません。Exec-PHP のように php をエントリ本文中で動作可能にするプラグインはありますが、それは嫌という場合に応用できるでしょう。

プラグイン関数（フィルタ、アクション）

プラグインの処理は、以下の通りです。

1. 本文中からプレースホルダを検索します。
2. プレースホルダで指定されたファイルの内容を取得します。
3. プレースホルダをファイルの内容に置換します。

function hoge_include($content)
{
  $pattern = '\[include:([\w\-\/]+\.txt)\]';

  if(! preg_match_all('/'.$pattern.'/', $content, $files))
    return $content;

  for($i=0; $i<count($files[0]); $i++) {
    $text = file_get_contents(TEMPLATEPATH.'/'.$files[1][$i]);
    $content = str_replace($files[0][$i], $text, $content);
  }
  return $content;
}

エントリ本文中のプレースホルダ [include:ファイル名.txt] を記述した場所に"ファイル名.txt"の内容をそのまま出力します。php ファイルの場合は php の処理を実行する必要があるので、簡単のため今回はテキストファイルのみをインクルード対象とします。

$pattern = '\[include:([\w\-\/]+\.txt)\]';

プレースホルダ[include:ファイル名.txt]の簡易的な正規表現です。

if(! preg_match_all('/'.$pattern.'/', $content, $files))

preg_match_all は、$content 中の $pattern に一致する部分をすべて $files に格納します。preg_match では初めの1件しか検索しないので注意してください。$files は2次元の配列です。

$files[$j][$i] とした場合:

• $j … 正規表現内のどの部分に相当するかを指定します。
  • $files[0][$i] … 正規表現全体＝プレースホルダ。
    例: [readfile:hoge.txt]
  • $files[1][$i] … 正規表現内の1つめのカッコ()に相当する部分＝ファイル名。
    例: hoge.txt
• $i … 何件目の検索文字列かを指定します。

for($i=0; $i<count($files[0]); $i++) {

count($files[0]) は正規表現全体に相当する部分の数、つまり検索件数です。

$text = file_get_contents(TEMPLATEPATH.'/'.$files[1][$i]);

$files[1][$i] は正規表現内のファイル名に相当する部分です。TEMPLATEPATH 以下のパスから成るテキストファイルの内容を file_get_contents で $text に取得します。

$content = str_replace($files[0][$i], $text, $content);

$content 内の $files[0][$i] に相当するプレースホルダを $text に置換します。

プラグインファイルの作成

1. 作成したプラグインをWordPressに認識させるために、ファイルの先頭に以下のようなコメント形式でプラグインの情報を記述します。

   /*
   Plugin Name: プラグイン名
   Plugin URI: プラグインの配布URL
   Description: プラグインの説明
   Author: プラグインの作者名
   Author URI: プラグイン作者のURL
   Version: バージョン
   */
   

2. 作成したプラグイン関数を、フックするテンプレートタグに関連付けます。

   add_filter('the_content', 'hoge_include');
   

   これだけで the_content に hoge_include が追加されます。特に問題がないため、第3引数の優先度は省略しています。

プラグインの登録

1. プラグインファイルを http://～/wp-content/plugins 以下にアップロードします。
   例: プラグイン名: hoge_include，プラグインファイル名: hoge_include.php
2. http://～/wp-admin の[管理画面｜プラグイン]を開くと、hoge_include が自動で検出され、一覧に表示されています。hoge_include の"使用する"をクリックします。
   

プラグインの利用

1. 例として http://～/wp-content/themes/テーマ　のフォルダ内に"hoge.txt"をアップロードします。
   例: "hoge.txt"

   <h3>これはインクルードされたファイルです</h3>
   

2. エントリ本文内に [include:hoge.txt] と記述します。
   
3. エントリを表示すると、"hoge.txt"の内容がインクルードされているのを確認できます。
   

テーマの変更方法

1. お好みのテーマをダウンロードします。
   テーマはWordPress Theme Viewerの他にも、「WordPress　テーマ」で検索するとたくさん出てきます。
2. 圧縮されているテーマを解凍します。
3. /wp-content/themes/ のサブディレクトリとして解凍したテーマをアップロードします。
4. WordPressの管理画面から［デザイン｜テーマ］を開きます。
   
5. テーマ一覧からお好みのテーマを選択します。

これだけでテーマを変更できます。

テーマのカスタマイズ

使用中のテーマをカスタマイズするには、管理画面のテーマエディタを使用するか、テーマを構成するファイル（*.php）をテキストエディタ（UTF-8を使用できるもの）で編集してアップロードします。カスタマイズする前に元のテーマをバックアップしておくと良いでしょう。

管理画面［デザイン｜テーマエディタ］

テーマはスタイルシートと、テンプレートファイルと呼ばれる php のファイルで構成されています。

スタイルシート

• style.css
  テーマに必須のファイルです。ファイルの初めに、以下のようなコメント形式でテーマの情報を記述します。

/*
Theme Name: テーマ名
Theme URI: テーマを提供しているサイトのURI
Description: テーマの説明
Author: 作者の名前
Author URI: 作者のURI
Version: バージョン番号（オプション）
Template: 親テーマ（オプション）

その他、利用許諾など自由に記述できます。

*/

Template は、あるテーマの画像やCSSのみを変更したい場合に、そのテーマの名前を指定します。これを記述するとテンプレートファイルは親テーマのものが使われます。

テンプレートファイル

WordPressは、閲覧者からの要求（クエリ）によって、表示すべき内容に応じたテンプレートファイルを使用します。テンプレートファイルが無ければWordPressのデフォルトの表示が適用されます。

テンプレートファイルには、WordPressで自動的に使用される「単一のエントリ（投稿，ページ）やエントリの一覧を表示するもの」と「それらの内部で明示的に記述して共通に使用されるもの」があります。必要なものだけをカスタマイズすれば良いです。よく使うものを以下に列挙します。

1エントリのみを表示するテンプレートファイル:

• 404.php
  存在しないURLへのアクセスがあったときの表示です。
• single.php
  単一の投稿を表示します。
• page.php
  単一のページを表示します。

分類されたエントリ一覧を表示するテンプレートファイル:

• index.php
  最新エントリから順に一覧表示します。デフォルトでトップページとして表示されます。最低限、このファイルとstyle.cssがあればテーマとして成り立ちます。
• home.php
  index.php とは別にトップページとして表示する場合に作成します。
• category.php
  カテゴリで分類したエントリを一覧表示します。
• archive.php
  年月などで分類したエントリを一覧表示します。

• search.php
  検索の結果を一覧表示します。

テンプレートファイル内部で共通に使用されるもの:

「テンプレートタグ」を記述して、php ファイルの内容を組み込みます。

• comments.php
  エントリのコメントすべてを表示します。
  テンプレートタグ: comments_template()
• header.php
  共通のフッタを表示します。<head>～</head> の記述も含みます。
  テンプレートタグ: get_header()
• footer.php
  共通のフッタを表示します。
  テンプレートタグ: get_footer()
• sidebar.php
  サイドバーを表示します。
  テンプレートタグ: get_sidebar()

関数ファイル:

• functions.php
  テンプレートファイルから呼び出す関数群を定義します。

独自のテンプレートファイル

WordPressで用意されているものの他に、独自にテンプレートファイルを追加することができます。

• ページテンプレート
  ページのレイアウトをいくつかに分けたい場合に作成します。ページテンプレートがあると、ページの新規作成時にどのページテンプレートを適用するかが選択できます。

  任意のファイル名（*.php）を作成し、ファイルの先頭から以下のコメントを記述すれば、WordPressはページテンプレートとして認識します。
  

  /*
  Template Name: テンプレート名
  */
  

• 共通の記述をテンプレートにする
  phpのファイルインクルードを使います。例えば、どのテンプレートファイルでも使用する検索フォームがある場合、その部分を php ファイルとして作成し、必要な箇所でそのファイルをインクルードします。

  例: 検索フォーム searchform.php

  <form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
  <input type="text" value="<?php the_search_query(); ?>" name="s" id="s" />
  <input type="submit" id="searchsubmit" value="検索" />
  </form>
  

  テンプレートファイルでの使用方法

  <?php include (TEMPLATEPATH . '/searchform.php'); ?>
  

  TEMPLATEPATH には現在使用中のテーマへのパスが定義されています。この記述のある箇所に searchform.php の内容が組み込まれます。

]]> http://triplexxx.jp/archives/111/feed http://triplexxx.jp/archives/111 http://feedproxy.google.com/~r/Triplexxx/~3/xlAOpSlF1w8/110 http://triplexxx.jp/archives/110#comments Thu, 03 Jul 2008 03:41:28 +0000 triplexxx http://www.triplexxx.jp/?p=76 WordPressはブログに止まらず、その柔軟な拡張性からCMSとしても利用できるオープンソースのプラットフォームです。商用を含めすべて無料であり、導入も簡単なためシェアを拡げています。また、テーマやプラグインが豊富で、カスタマイズも手軽にできます。PHPやjavascriptの知識があればかなり複雑なことができますし、プログラミングに明るくない場合にも、オリジナリティ溢れるサイトを作成できます。
以下では、WordPress のインストール方法を順に説明します。

インストールの前に

WordPressはデータベースにMySQL、スクリプトにPHPを使用しています。またパーマリンクを実現するため、Apacheのmod_rewriteモジュールが必要です。レンタルサーバーの場合は、それらが利用可能かをまず確認してください。使えない場合は引越しをおすすめします。Apache、MySQL、PHPすべて無料ですので、ローカルでテスト環境を構築してみるのもいいでしょう。WordPress 日本語版の推奨する動作環境は以下の通りです。

動作環境:

PHP: 4.3以上

MySQL server: 4.1以上

日本語版WordPressをダウンロードします

1. WordPress 日本語ローカルサイトからWordPressのzipファイルをダウンロードします。2008年7月3日現在、最新バージョンは2.5.1です。
   
2. wordpress-2.5.1-ja.zip を解凍します。解凍された wordpress-2.5.1-ja¥wordpress フォルダ以下がWordPressに必要なファイルです。

MySQLでデータベースとユーザを作成します

cPanel、phpMyAdmin、MySQL Command Line Client（コマンドラインクライアント）のいずれかでMySQLのデータベースとユーザを作成します。レンタルサーバーなどでデータベースの作成権限がない場合は、サーバー管理者がデータベースを作成しますので、管理者からデータベースの情報を取得してください。

ここではコマンドラインクライアントを例に説明します。作成するデータベースの情報は次の通りとします。

データベース名: wp_hoge_db
ユーザ名　　　: wp_hoge_user
パスワード　　: hogehoge

コマンドラインクライアントを使用する場合

1. コマンドラインクライアントを実行します。
   ［スタート｜すべてのプログラム｜MySQL｜MySQL Server 5.0｜MySQL Command Line Client］をクリックします。
2. データベースとユーザを作成します。
   • mysql> の箇所でコマンドを入力します。
   • コマンドの途中で Enter 入力すると、プロンプトが -> になり、継続してコマンドを入力することができます。
   • コマンドの最後にはセミコロン（；）を忘れずに入力してください。
   • ユーザ名の後には @localhost のようにホスト名を付けますが、通常は省略可能です。

データベースの作成

mysql> create database wp_hoge_db;

ユーザの作成

mysql> grant all privileges on wp_hoge_db.* to
    -> wp_hoge_user identified@localhost by 'hogehoge';
mysql> flush privileges;

なお、データベースを削除する場合は、以下のように入力します。

mysql> drop database wp_hoge_db;

wp-config.phpを設定します

wordpress-2.5.1-ja¥wordpress フォルダ内の wp-config.php ファイルに記述してあるMySQLデータベースの接続情報を、使用環境に合わせて変更します。

// ** MySQL 設定 ** //
define('DB_NAME', 'putyourdbnamehere');
define('DB_USER', 'usernamehere');名
define('DB_PASSWORD', 'yourpasswordhere');
define('DB_HOST', 'localhost');
define('DB_CHARSET', 'utf8');
define('DB_COLLATE', '');
　（略）
define('SECRET_KEY', 'put your unique phrase here');
　（略）
$table_prefix  = 'wp_';

1. wp-config-sample.php ファイルを wp-config.php にリネームします。
2. wp-config.php を開いて、データベースの情報を書き換えます。
   データベースの情報は、サーバー管理者から指定されたもの、または前述のように自分で作成したものを使用します。

   DB_NAME

   MySQLのデータベース名（例: wp_hoge_db）に変更します。

   DB_USER

   MySQLのユーザ名（例: wp_hoge_user）に変更します。

   DB_PASSWORD

   上記ユーザのパスワード（例: hogehoge）に変更します。

   以下の2つは、MySQLデータベース内で一意の文字列を設定します。

   SECRET_KEY

   使用するWordPressに固有の任意のフレーズにします。

   $table_prefix

   使用するWordPressに固有の任意のプレフィクス（例: wp_hoge_）にします。WordPressが作成・使用するテープル名の初めに付加されます。

   同じサーバーの同じMySQLデータベースでも、この2つの設定値ごとに別のWordPressを使用することができます。つまり複数のWordPressを設置することが可能になります。ローカルのテスト環境であれば wp-config.php だけを複数用意し、それらを切り替えて使うことで実現できます。

   • 例:　ブログhoge1
     wp-config-hoge1.php

     define('SECRET_KEY', 'hoge1 secret key');
     $table_prefix  = 'wp_hoge1_';
     

   • 例:　ブログhoge2
     wp-config-hoge2.php

     define('SECRET_KEY', 'hoge2 secret key');
     $table_prefix  = 'wp_hoge2_';
     

   wp-config-hoge1.php を　wp-config.php にリネームすればブログhoge1、wp-config-hoge2.php を wp-config.php にリネームすればブログhoge2がそれぞれ利用可能になります。

3. wp-config.php を保存します。

アップロードします

アップロード先は、WordPressのみでサイトを構成するなら、サイトのルートディレクトリにします。もちろん、ルートでなくともサブディレクトリでも良いです。アップロード先がそのままWordPressのURLになります。

例: サイトURLが http://www.hogehoge.com/ の場合

• ルートディレクトリにアップロード
  http://www.hogehoge.com/
• サブディレクトリ（例: blog）にアップロード
  http://www.hogehoge.com/blog/

アップロードするのは wordpress-2.5.1-ja¥wordpress フォルダ内のファイルおよびフォルダすべてです。wordpress フォルダ自身はアップロードしません。ローカルのApache環境なら、htdocs フォルダ以下にコピー（または移動）します。

注意

FFFTP Ver 1.87a では、全ファイルを一度にアップロードしようとすると、途中で失敗しFFFTPが終了することがあります。その場合は、フォルダ単位などで何回かに分けてアップロードしてください。

インストールします

ブラウザで ［アップロードしたディレクトリ］/wp-admin/install.php にアクセスします。

例: サイトURLが http://www.hogehoge.com/ の場合

• ルートディレクトリ
  http://www.hogehoge.com/wp-admin/install.php
• サブディレクトリ（例: blog）
  http://www.hogehoge.com/blog/wp-admin/install.php

成功した場合

1. サイト名とメールアドレスを入力し、［WordPressをインストール］をクリックします。
   
   • サイト（ブログ）名は、後から変更できます。
   • メールアドレスも後から変更できます。admin（管理者）のパスワードが送信されますので、受信可能なメールアドレスを入力してください。
2. ［ログイン］をクリックします。
   

   WordPress管理者のユーザ名とパスワードをメモしておいてください。前項で入力したメールアドレスにも同じ情報が送信されています。

3. WordPress管理画面が表示されます。

   WordPressが利用可能になりました。

   

   管理画面では投稿、ページの作成やユーザ、プラグイン、テーマの管理などができます。サイトもこの時点で閲覧可能になっています。今後、管理画面にログインするためのURLが次のようになります。

   例: サイトURLが http://www.hogehoge.com/ の場合

   • サイトの管理画面のURL
     http://www.hogehoge.com/wp-admin/

   管理画面にアクセスするとログイン画面が表示されますので、ユーザ名とパスワードを入力し、［ログイン］をクリックします。使用するテーマにログインのリンクがあります。

   

失敗した場合

wp-config.php の記述に誤りがないかを確認してください。どうしても接続できない場合は、MySQLの権限があるなら、現在のデータベースを削除して、新規にデータベースとユーザの作成からやり直すのが早いです。

]]> http://triplexxx.jp/archives/110/feed http://triplexxx.jp/archives/110