[JS]チョー簡単にサイトをAJAX対応にするスクリプト -com.bydust.ajax

Post on:2008年11月10日

サイトをAJAX対応にする方法

サイトをAJAX対応にする基本的なスクリプトの設置方法は、下記の通りです。
下記は、対象となる全ページに適用します。

ダウンロードした２つのスクリプト（com.bydust.ajax.js, com.bydust.array.js）を外部スクリプトとして記述します。
HTMLの基本構造は、「id="page"」を親要素として、「id="content"」「id="sidebar"」のコンテンツとサイドバーを並列に配置します。
※コメント（begin, end）は必須です。

<textarea name="code" class="html" cols="60" rows="5">
<div id="page">
<div id="content">
<!-- begin content -->
*your primary content*
<!-- end content -->
</div>
<div id="sidebar">
<!-- begin sidebar -->
*your secondary content*
<!-- end sidebar -->
</div>
</div>
</textarea>

*your primary content*

</div>

*your secondary content*

</div>

</textarea>

下記のスクリプトを記述します。

<textarea name="code" class="html" cols="60" rows="5">
<script type="text/javascript">
window.onload = function(){
var refreshed_content = Array('!content','sidebar');
// you need to mark your primary area with a "!".
// you can add as many secondary area's as you like, for example
// var refreshed_content = Array('!content','sidebar', 'navigation', 'another_area');
bda.start(refreshed_content); // initiate the script
}
</script>
</textarea>

window.onload = function(){

var refreshed_content = Array('!content','sidebar');

// you need to mark your primary area with a "!".

// you can add as many secondary area's as you like, for example

// var refreshed_content = Array('!content','sidebar', 'navigation', 'another_area');

bda.start(refreshed_content); // initiate the script

}

</script>

</textarea>

以上で、完了です。

WordPressをAJAX対応にする方法

com.bydust.ajaxは、WordPressのテーマファイルにも簡単にAJAX対応に変更できます。

以下、「WordPress Classic」への設置方法です。

ダウンロードした２つのスクリプト（com.bydust.ajax.js, com.bydust.array.js）を外部スクリプトとして「header.php」に記述します。
下記のスクリプトを「header.php」に記述します。

<textarea name="code" class="html" cols="60" rows="5">
<script type="text/javascript">
window.onload = function(){
var refreshed_content = Array('!content','sidebar');
// you need to mark your primary area with a "!".
// you can add as many secondary area's as you like, for example
// var refreshed_content = Array('!content','sidebar', 'navigation', 'another_area');
bda.start(refreshed_content); // initiate the script
}
</script>
</textarea>

window.onload = function(){

var refreshed_content = Array('!content','sidebar');

// you need to mark your primary area with a "!".

// you can add as many secondary area's as you like, for example

// var refreshed_content = Array('!content','sidebar', 'navigation', 'another_area');

bda.start(refreshed_content); // initiate the script

}

</script>

</textarea>

次に、親要素「id="page"」を設置します。
「header.php」の「<div id="content">」の前に、「<div id="page"><!–– begin content ––>」を記述します。
「footer.php」の「<!–– end content ––><p class="credit">」の前に、「</div>」を記述します。
最後に「sidebar」を修正します。
「sidebar.php」の「<div id="menu">」を<div id="sidebar">に変更し、「<!–– begin sidebar ––>」を記述します。
一番下にある「</div>」の前に「<!–– end sidebar ––>」を記述します。
「style.css」内の「menu」の箇所を全て、「sidebar」に変更します。

以上で、完了です。

WordPressに設置する際の補足

contentやsidebarの前後に記述するコメントは、スペースを含め正確に記述する必要があります。
「WordPress Classic」のように「index.php」でアーカイブやシングルやページを表示する以外のテーマファイルに設置する場合は、「archive.php, page.php, single.php」など全てのファイルに記述をします。
「WordPress Classic」の「 id="menu"」を変更しない場合は、「header.php」のスクリプトに「var refreshed_content = Array('!content','menu');」と記述し、コメントの「sidebar」を「menu」にして記述します。
WorsPress Classicの差分ファイルです。
Classicの差分ファイル
スクリプト（com.bydust.ajax.js, com.bydust.array.js）は本家からダウンロードしてください。
3カラムでテストした「Writer's Quill」の差分ファイルです。
Writer's Quillの差分ファイル
スクリプト（com.bydust.ajax.js, com.bydust.array.js）は本家からダウンロードしてください。