「WordPressで学ぶPHP(3)関数編」を発売しました。
本書は「WordPressで学ぶPHP(1)変数・制御構造編」「WordPressで学ぶPHP(2)データ構造(配列・オブジェクト)編」の続編にあたり、PHP組み込みの関数や、独自の関数を作る方法などを解説します。
Kindle本で、定価400円です。
PHP+Ajaxゲストブック(その6・WordPressへの基本的な組み込み手順)
昨日に引き続いて、PHP+Ajaxゲストブックの解説です。
今日は、WordPressの標準テーマ(EasyAll)にゲストブックを組み込む手順を解説します。
なお、EasyAll以外のテーマに組み込むことも可能ですが、スタイルシートの調整が必要になると思われます。
1.ヘッダー(header.php)にJavaScriptを追加
まず、テーマのヘッダーのファイル(header.php)で、HTMLのヘッダー部分(<head>~</head>)に、以下のJavaScriptを追加します。
<script type="text/javascript" src="http://アップロード先/js/prototype.js"></script> <script type="text/javascript" src="http://アップロード先/js/prototype_add.js" charset="utf-8"></script> <script type="text/javascript" src="http://アップロード先/js/guestbook/guestbook.js" charset="utf-8"></script>
例えば、「http://www.foo.com/phpajax/~」に各ファイルをアップロードした場合は、以下のJavaScriptを追加します。
<script type="text/javascript" src="http://www.foo.com/phpajax/js/prototype.js"></script> <script type="text/javascript" src="http://www.foo.com/phpajax/js/prototype_add.js" charset="utf-8"></script> <script type="text/javascript" src="http://www.foo.com/phpajax/js/guestbook/guestbook.js" charset="utf-8"></script>
2.スタイルシートの追加
次に、header.phpのHTMLのヘッダー部分に、以下のように、スタイルシートを組み込む行を追加します。
<link rel="stylesheet" href="http://アップロード先/css/guestbook/guestbook_wp.css" type="text/css" />
例えば、「http://www.foo.com/phpajax/~」に各ファイルをアップロードした場合だと、以下の行を追加します。
<link rel="stylesheet" href="http://www.foo.com/phpajax/css/guestbook/guestbook_wp.css" type="text/css" />
ただし、このスタイルシートでは、EasyAllの標準のスタイルシートと同じ配色になるようにしています。
また、EasyAllのサイドバーのちょうど良い位置に表示されるように、ゲストブック全体のdiv要素(<div id="ajax_guestbook">~</div>)に対して、margin-rightを20ピクセルに設定しています。
スタイルシートをカスタマイズして配色を変えている場合などは、guestbook_wp.cssもそれに合わせてカスタマイズする必要があります。
guestbook_wp.cssのカスタマイズ方法は、後日解説します。
3.ゲストブックを表示する位置にタグを追加
次に、サイドバーのファイル(sidebar.php)の中で、ゲストブックを表示したい位置に、以下のタグを追加します。
<li><h2>Guestbook</h2> <div id="ajax_guestbook"></div> <div id="ajax_guestbook_msg"></div> <script type="text/javascript"> //<![CDATA[ ag_obj = new AjaxGuestBook({ main_url : 'http://アップロード先/app/guestbook/guestbook.php', edit_url : 'http://アップロード先/app/guestbook/edit.php' }); ag_obj.view_page(1); //]]> </script> </li>
例えば、「http://www.foo.com/phpajax/~」に各ファイルをアップロードした場合は、以下のJavaScriptを追加します。
<li><h2>Guestbook</h2> <div id="ajax_guestbook"></div> <div id="ajax_guestbook_msg"></div> <script type="text/javascript"> //<![CDATA[ ag_obj = new AjaxGuestBook({ main_url : 'http://www.foo.com/phpajax/app/guestbook/guestbook.php', edit_url : 'http://www.foo.com/phpajax/app/guestbook/edit.php' }); ag_obj.view_page(1); //]]> </script> </li>
4.動作の確認
ここまでで、ゲストブックの組み込みの作業は終わりです。
組み込み先のBlogを開いてみて、ゲストブックが表示されることを確認します。