(オリジナルからの変更点)
ローカルとサーバーとの変更点の他に次のカスタマイズをしている
疑似CRONのための設定
binフォルダに次の2つを追加
・chkmail.php
・chkmail.ini
ルートに次のファイルを追加
chkmailimg.php
ログインフォームに次のタグを追加
<img src="chkmailimg.php" width="1" height="1" alt="" />
設定ファイル
画像サイズ制限の変更 300→400
宛名アドレスのハッシュ化 true→false
Envelope-From ヘッダを設定 false→true
OpenPNEでSNSを運用する際、ローカル環境では「XAMPP」などを使ってテストを実施してから、サーバーへモジュールをアップロードするパターンが多いかと思います。
その際に、データベース名を同じにする等、設定をできるだけサーバーと同じにしておくと楽なのですが、どうしてもローカル環境と異なる点が出てきます。
参考としてどのあたりに注意すべきかを記載しておきます。相違点は個別に異なるとは思います。実際の設定はサーバーや運用方針により決定してください。
以下、設定ファイル(config.php)についての記述です。
上段:ローカル
下段:サーバー
1.URL
define('OPENPNE_URL', 'http://localhost/hoge/');
define('OPENPNE_URL', 'http://hoge.com/');
2.データベース接続
'hostspec' => 'localhost',
'hostspec' => 'xxx.lolipop.jp',
3.メールサーバー
define('MAIL_SERVER_DOMAIN', 'mail.example.com');
define('MAIL_SERVER_DOMAIN', 'hoge.com');
4.デバッグモード
define('OPENPNE_DEBUGGING', 1);
define('OPENPNE_DEBUGGING', 0);
導入の際には、各ライブラリの導入手順をまず読んでください。ここでは、「lightbox.js」を例に説明をします。
(Step.1)
jsファイルの配置
「js」フォルダに「lightbox.js」および「scriptaculous.js」を配置します。
(Step.2)
「css」フォルダに「lightbox.css」を配置します。
(Step.3)
ヘッダーインクルードファイル(inc_header.tpl)を修正します。
「head」タグ内の適当な箇所に次の文を追加します。
<link rel="stylesheet" href="./css/lightbox.css" type="text/css" media="screen" />
<script src="./js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="./js/lightbox.js" type="text/javascript"></script>
設置自体は以上で終わりです。
後は、呼び出すだけですが、JSライブラリごとに手順が異なりますので、ここでは「lightbox.js」の説明をします。
(呼び出し手順例)
効果を付けたい画像へのリンクのタグ内にrel属性を追加します。
rel="lightbox"
「日記の写真を表示する際に効果をつける」でも紹介したように、「lightbox.js」ライブラリを使用します。
ここでは、修正箇所だけ記載しておきます。
(修正テンプレート)
fh_diary.tpl
(修正箇所)
770行目あたり
({if $item.image_filename_1})<span class="padding_s"><a href="({t_img_url filename=$item.image_filename_1})" target="_blank"><img src="({t_img_url filename=$item.image_filename_1 w=120 h=120})"></a></span>({/if})
↓
({if $item.image_filename_1})<span class="padding_s"><a href="({t_img_url filename=$item.image_filename_1})" target="_blank" rel="lightbox"><img src="({t_img_url filename=$item.image_filename_1 w=120 h=120})" ></a></span>({/if})
写真2、写真3についても同様の修正を行います。
簡単なカスタマイズで効果絶大。是非お試しください。^^
デフォルトでは別ウィンドウで写真を表示するだけですが、これではちょっと物足りません。
そこで、JSライブラリを使って見栄えを良くしようと思います。
今回使用するライブラリは「lightbox.js」
http://huddletogether.com/projects/lightbox/
詳しい設置方法は他に任せるとして、修正箇所だけ記載しておきます。
(修正テンプレート)
fh_diary.tpl
(修正箇所)
430行目あたり
({if $target_diary.image_filename_1})<span class="padding_s"><a href="({t_img_url filename=$target_diary.image_filename_1})" target="_blank"><img src="({t_img_url filename=$target_diary.image_filename_1 w=120 h=120})"></a></span>({/if})
↓
({if $target_diary.image_filename_1})<span class="padding_s"><a href="({t_img_url filename=$target_diary.image_filename_1})" rel="lightbox" target="_blank"><img src="({t_img_url filename=$target_diary.image_filename_1 w=120 h=120})"></a></span>({/if})
写真2、写真3についても同様の修正を行います。
簡単なカスタマイズで効果絶大。是非お試しください。^^
