Ajax

かなり久々の投稿です。実ははてなダイアリーに浮気してましたｗ
どういった物なのかを見ていたのですが、ある程度分かってきたので戻って参りました。

今後は雑記をはてなダイアリーに書いていく形に使用かと思います。

リニューアルしました！

分かる人には分かる、デザインですね。超有名テンプレートの「wp.Vicuna Ext.」を今回は使用しました。
さらにはてな系のHTMLの追加などは「Vicuna Adaptor」を使用しました。このWordPress用プラグインは、wp.Vicuna Ext.専用に出来ています。備考に「カスタマイズをする人には向かないかも」なんてことも書いてありますが、全然そんなことはありません。

CSSテーマは、「Warship」です。

テーマカスタマイズ

CSSはお好みでいじる物ですが、VicunaシリーズはWordPressのファイルアップロード機能で追加されるCSSには対応していません（画像の右寄せとか）。他にも色々とプラグインを追加することでCSSの”追加”が必要になってくることがあるので、オリジナルのCSSは別途ファイルを用意しました。

「style.php」の28行目あたりに下記のコードを追加。

@import url($lt; ?php echo $skin; ?>/6-user.css);

「6-user.css」というファイルを自分の場合は「wp-content/themes/wp.vivuna.ext/style-warship/」に作成。

しっかりは調べてませんが、多分デフォルトのテーマのこの辺を追加しておけば大丈夫

/*	Using 'class="alignright"' on an image will (who would've
	thought?!) align the image to the right. And using 'class="centered',
	will of course center the image. This is much better than using
	align="center", being much more futureproof (and valid) */

img.centered {
	display: block;
	margin-left: auto;
	margin-right: auto;
	}

img.alignright {
	padding: 4px;
	margin: 0 0 2px 7px;
	display: inline;
	}

img.alignleft {
	padding: 4px;
	margin: 0 7px 2px 0;
	display: inline;
	}

.alignright {
	float: right;
	}

.alignleft {
	float: left
	}
/* End Images */

/* Captions */
.aligncenter,
div.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption {
	border: 1px solid #ddd;
	text-align: center;
	background-color: #f3f3f3;
	padding-top: 4px;
	margin: 10px;
	-moz-border-radius: 3px;
	-khtml-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}

.wp-caption img {
	margin: 0;
	padding: 0;
	border: 0 none;
}

.wp-caption p.wp-caption-text {
	font-size: 11px;
	line-height: 17px;
	padding: 0 4px 5px;
	margin: 0;
}
/* End captions */

それと、サイドバーのカテゴリー部分にDTタグの「CATEGORIES」というタイトルに加えて、カタカナで「カテゴリー」って表示されてるのが気に入らなかったので、修正。

sidebar.php の 35行目あたりにある

< ?php wp_list_categories('sort_column=name&optioncount=0&hierarchical=1&'); ?>

に、「title_li=」を足して、

< ?php wp_list_categories('sort_column=name&optioncount=0&hierarchical=1&title_li='); ?>

とすることで、カタカナのタイトル（WPが自動ではき出しているタイトル）を消すことが出来ます。

プラグイン

追加したプラグインはこんな感じ。

• AdSense Manager
  AdSense広告を管理する為のプラグイン。追加場所とかはテーマファイルをじっさいに自分でいじって追加する形になるけど、以降の修正が一括で出来たりと便利
• Ultimate Google Analytics
  Google AnalyticsのJavaScript埋め込み用。色々とパラメーター追加してくれたりするので便利。
• Auto External Link
  外部リンクにJavaScriptで自動的に「新しいウインドウで開くアイコン」をつけてくれる。XHTMLではtarget=”_blank”とかは使わない様な方向に進んでいるので、これで対応。
• Google XML Sitemaps
  サイトマップを作ってくれるプラグイン
• Lightview Plus
  画像の拡大表示をAjaxで行うためのプラグイン。手動でやるより楽ちん！

プラグインのインストールがブラウザーから出来る様になったので、すごく便利ですね！
でも、プラグイン検索のシステムがダメダメで、検索結果からほしいプラグインを探すのが大変でした・・・ｗ
プラグインの名前で検索してるのに1ページ目に出てこない事が多々・・・。

Ajax系の対応

Lightview Plus と、Auto External Link は両方とも prototype.js を使うんです。
しかも、Lightview Plus が自動で prototype.js を読み込む用にヘッダーにタグを追加してくれるのですが、そのバージョンが古いのと、上手く Auto External Link に働きかけてくれないので、

lightview-plus.phpの480行目あたりにある add_header() を下記のように書き換えました。

	function add_header() {
		$path = get_option('siteurl')."/wp-content/plugins/lightview-plus";

		$script = "n<!-- Lightview Plus Plugin -->n";

		$script .= "<link rel="stylesheet" type="text/css" href="$path/css/lightview.css" media="screen" />n";
		$script .= "<script type='text/javascript' src='$path/js/lightview.js'></script>n";
		//$script .= "<link rel="stylesheet" type="text/css" href="$path/style.css" media="screen" />n";
		$script .= "<!-- Lightview Plus Plugin -->n";

		echo $script;
	}

これによって、prototype.js と、scriptaculous.jsが読み込まれなくなります。

読み込まれないだけでは困るので、追加して テーマファイルの header.php の最後の行にある < ?php wp_head(); ?> の手前に下記の2行を追加しました。

	<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js'></script>
	<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1/scriptaculous.js?load=effects'></script>

主な改造はこれぐらいかな。あとはCSSファイルをちょこちょこいじったぐらいですね。
WordPressのテーマファイルのいじり方の基本は今回で学べたので、あとはPHPを勉強しないとな。

ちかいうちにFlikerのライブラリーをギャラリーページとして公開出来る様な仕組みとか作ろうと思います。