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

com.bydust.ajaxは、スタティックなサイトでもWordPressのようなサイトでも、ページ全体のロードをせずに必要な箇所のみロードして表示するAJAX対応にするスクリプトです。

com.bydust.ajax
demo

デモサイトでは、右のナビゲーションや各記事のタイトルをクリックすると、通常のページ遷移とは異なり必要な箇所のみ非同期通信を行い表示します。
※外部リンクなどは自動認識して、別ウインドウで表示します。

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

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

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

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

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

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

4. 以上で、完了です。

WordPressをAJAX対応にする方法

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

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

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

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

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

5. 以上で、完了です。

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）は本家からダウンロードしてください。

Post on:2008年11月10日