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

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

デモサイトのキャプチャ

com.bydust.ajax
demo

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

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

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

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

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

  1. 以上で、完了です。

WordPressをAJAX対応にする方法

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

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

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

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

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

sponsors

top of page

©2018 coliss