(オリジナルからの変更点)

ローカルとサーバーとの変更点の他に次のカスタマイズをしている

 

疑似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についても同様の修正を行います。

簡単なカスタマイズで効果絶大。是非お試しください。^^

 

POST