OpenPNEカスタマイズ

OpenPNEカスタマイズする方法を紹介します。

TOC(inline,depth=3,heading=目次)?

管理画面でカスタマイズ

管理画面から設定を行うことで、OpenPNE本体の挙動を変更したり、機能を追加することが出来ます。

デザインをカスタマイズする

配色設定

• ​PC版配色設定対応表
• 携帯版配色設定対応表

HTML挿入、テンプレート挿入、カスタムCSS設定

OpenPNE2.12以降のバージョンでのHTML、CSS関連の設定については wiki:pne-xhtmlcss/tips をご覧ください。

!MyNews機能を使用する

!MyNews機能とは、フレンドが自分のホームにアクセスした場合に自分の近況を一言表示する機能です。マイホームに入力フォームを、フレンドホームに表示部分を作ることで使用可能になります。

入力フォームの作成

管理画面「デザイン ＞ テンプレート挿入」から「【PC版】 h_home 9」などに以下を入力してください。

<div class="dparts formTable"><div class="parts">
<div class="partsHeading"><h3>My News!</h3></div>
({if $c_member.profile.PNE_MY_NEWS_DATETIME.value})
<div class="partsInfo" style="padding: 5px 36px;">
<p>({$c_member.profile.PNE_MY_NEWS_DATETIME.value|date_format:"%m/%d %H:%M"}) 更新</p>
</div>
({/if})
({t_form_block m=pc a=do_h_home_update_my_news})
<div class="block" style="padding: 5px;">
<textarea style="width: 320px; height: 50px; vertical-align: middle;"
 name="prof_my_news" rows="3" cols="50">({$c_member.profile.PNE_MY_NEWS.value})</textarea>
<input type="submit" style="height: 50px; vertical-align: middle;" value=" 変 更 " />
</div>
({/t_form_block})
</div></div>

表示部分の作成

管理画面「デザイン ＞ テンプレート挿入」から「【PC版】 f_home (h_prof) 7」などに以下を入力してください。

({if $target_c_member.profile.PNE_MY_NEWS_DATETIME.value})
<div class="dparts formTable"><div class="parts">
<div class="partsHeading"><h3>My News!</h3></div>
<div class="partsInfo" style="padding: 5px 36px;">
<p>({$target_c_member.profile.PNE_MY_NEWS_DATETIME.value|date_format:"%m/%d %H:%M"}) 更新</p>
</div>
<div class="block" style="padding: 5px;">
<p>({$target_c_member.profile.PNE_MY_NEWS.value|nl2br|t_url2a})</p>
</div>
</div></div>
({/if})

OpenPNE2.12より前のバージョンで使用するには

OpenPNE2.10

OpenPNE2.10の場合、上記のテンプレートではレイアウトが崩れてしまいます。OpenPNE2.10での!MyNews表示方法はこちらをご覧ください。

OpenPNE2.8以前のバージョン

!MyNews機能に対応していないため、使用できません。

画面イメージ

• 入力フォーム

• 表示部分

MyNews 携帯版を使用する

対応バージョン

• OpenPNE2.10
• OpenPNE2.12

入力フォームの作成

管理画面「デザイン ＞ テンプレート挿入」から「【携帯版】 h_home 2」などに以下を入力してください。

({t_form m=ktai a=do_h_home_update_my_news})
<table width="100%" bgcolor="#({$ktai_color_config.bg_05})">
<tr><td>
<hr color="#({$ktai_color_config.border_01})" size="3">
<font color="#({$ktai_color_config.font_02})">My News!</font>　({if $c_member.profile.PNE_MY_NEWS_DATETIME.value})({$c_member.profile.PNE_MY_NEWS_DATETIME.value|date_format:"%m/%d %H:%M"}) 更新({/if})<br>
<textarea rows="1" name="prof_my_news">({$c_member.profile.PNE_MY_NEWS.value})</textarea>
<input type="hidden" name="ksid" value="({$PHPSESSID})">
<input type="submit" value="変更">
</td></tr>
</table>
</form>

表示部分の作成

管理画面「デザイン ＞ テンプレート挿入」から「【携帯版】 f_home 2」などに以下を入力してください。

<table width="100%" bgcolor="#({$ktai_color_config.bg_05})">
<tr><td>
<font color="#({$ktai_color_config.font_02})">My News!</font>　({if $target_c_member.profile.PNE_MY_NEWS_DATETIME.value})({$target_c_member.profile.PNE_MY_NEWS_DATETIME.value|date_format:"%m/%d %H:%M"}) 更新({/if})<br>
({$target_c_member.profile.PNE_MY_NEWS.value})
</td></tr>
</table>

ポイント・ランクをフレンドホームにも表示させる

ポイント・ランク機能は、「日記を書く」「友人を招待する」などの特定のアクションを起こすことでメンバーに対してポイントが加算され、更にポイントに対応したランクの設定を行うことができる機能です。管理画面「SNS設定」の「ポイント・ランク使用設定」から使用の可否を選択することができます。

デフォルトの状態は他のメンバーのポイント・ランクを確認することはできませんが、管理画面「デザイン ＞ テンプレート挿入」から表示用のテンプレートを挿入することでフレンドホームにもポイント・ランクを表示させることができます。

表示部分の作成

管理画面「デザイン ＞ テンプレート挿入」から「【PC版】 f_home (h_prof) 4」などに以下を入力してください。

({if $rank.image_filename || $point})
<div class="parts" style="border: none;">
({if $rank.image_filename})
<p style="text-align: center;"><img src="({t_img_url filename=$rank.image_filename})" alt="({$rank.name})" /></p>
({/if})
({if $point})
<p style="text-align: center;">({$point}) point</p>
({/if})
</div>
({/if})

OpenPNE2.12より前のバージョンで使用するには

OpenPNE2.12より前のバージョンの場合、上記のテンプレートではレイアウトが崩れてしまいます。OpenPNE2.10での表示方法はこちらをご覧ください。

画面イメージ

Skype ボタンの設置

SkypeIDの設定

管理画面「SNS設定 ＞ プロフィール項目設定」からプロフィール項目追加を選択し、下記の項目を追加してください。

1. 項目名・・・SkypeID
2. 識別名・・・skype_id
3. 公開設定・・固定
4. 公開デフォルト値・・・フレンドまで公開
5. メンバー検索・・・表示しない
6. フォームタイプ・・・テキスト
7. 入力タイプ・・・文字列

Skype画像の登録

管理画面「画像・書き込み管理 ＞ 画像アップロード・削除」から画像のアップロードを行います。「通話中画像」「チャット中画像」の２種類の画像をご登録ください。

アップロード画像リストから、アップしたSkype画像を選択し、表示されるURLを保存してください。

表示部分の作成

管理画面「デザイン ＞ テンプレート挿入」から「【PC版】 f_home (h_prof) 4」などに以下を入力してください。

({if $target_c_member.profile.skype_id})
<div class="parts">
<script type="text/javascript" src="http://download.skype.com/share/skypebuttons/js/skypeCheck.js"></script>
<a href="skype:({$target_c_member.profile.skype_id.value})?call" onclick="return skypeCheck();">
<img src="【Skype通話の画像URL】" width="120" height="40" alt="通話" /></a>
&nbsp;
<a href="skype:({$target_c_member.profile.skype_id.value})?chat" onclick="return skypeCheck();">
<img src="【Skypeチャットの画像URL】" width="120" height="40" alt="チャット" /></a>
</div>
({/if})

（※【Skype通話の画像URL】【Skypeチャットの画像URL】は、先ほど保存したURLに書き換えます）

OpenPNE2.12より前のバージョンで使用するには

OpenPNE2.12より前のバージョンの場合、上記のテンプレートではレイアウトが崩れてしまいます。OpenPNE2.10での表示方法はこちらをご覧ください。

あしあと帳作成ボタンの表示

({if !$c_diary_list})
<div class="parts" style="text-align: center; padding: 10px;">
({t_form_block m=pc a=page_h_diary_add})
<input type="hidden" name="subject" value="あしあと帳" />
<input type="hidden" name="body" value="あしあと帳を作ってみました。
皆さんお気軽にコメントを残して下さい！" />
<input type="hidden" name="category" value="あしあと帳" />
<input type="submit" class="input_submit" value="まずは「あしあと帳」作成から" />
({/t_form_block})
</div>
({/if})

日記が1件も書かれていない場合に「あしあと帳作成ボタン」を表示する例となっています。

画面イメージ

お題日記機能の設置

表示部分の作成

<script type="text/javascript">
//<![CDATA[
function randomodai()
{
//お題データを用意します。好きなお題を追加してください。
var odaiData = [
"マイフレンドに一言", "マイブーム", "今欲しいもの", "昨日の晩御飯", "最近気になる人",
"楽しかった想い出", "悲しかった想い出", "恥ずかしかった出来事", "想い出の曲", 
"オススメの本", "オススメの曲", "オススメの映画", "好きな芸能人", "近所のおすすめスポット", 
"今日のファッション", "今日の髪型", "腹の立つ話", "信じられない話", "怒りの話", 
"ありえない話", "腹の立つ話", "信じられない話", "情けない話", "せつない話", "へこんだ話", 
"どうでもいい話", "私の弱点", "笑える話", "変な夢", "ダイエット", "好きなTV番組"
];
var i = Math.round(Math.random() * (odaiData.length - 1));
document.getElementById("odai_subject").value = "【お題日記】" + odaiData[i];
}
//]]>
</script>

<div class="parts" style="padding: 10px;">

<div style="text-align:center;">
({t_form_block m=pc a=page_h_diary_add})
<input type="hidden" id="odai_subject" name="subject" value="" />
<input type="hidden" name="body" value="今日のお題はこれ！
本文のみ修正して日記を書いてみましょう。" />
<input type="hidden" name="category" value="お題日記" />
<input type="submit" class="input_submit" value="今日のお題は？ Click! Click!" onclick="randomodai()" />
({/t_form_block})
</div>

<p style="margin-top: 10px; text-align: center;">
みんなのお題日記は<a href="({t_url m=pc a=page_h_diary_list_all keyword=【お題日記】})"><strong>コチラ</strong></a></p>

</div>

内容の変更

管理画面「デザイン ＞ テンプレート挿入」から、お題データの追加（"お題１","お題２"…）やボタンの名前（「今日のお題は？ Click! Click!」）、本文に挿入される文字列（「今日のお題はこれ！本文のみ…）を自由に変更してください。

OpenPNE2.12より前のバージョンで使用するには

OpenPNE2.12より前のバージョンの場合、上記のテンプレートではレイアウトが崩れてしまいます。OpenPNE2.10での表示方法はこちらをご覧ください。

PV集計を行う

Google Analytics

Google Analyticsで発行されたタグをOpenPNEの管理画面に設定することで、PVの集計が行えます。

NINJA TOOLS

​NINJA TOOLSも利用できます。携帯のPVも測定できます。

広告管理をする

OpenAds

!OpenAdsをOpenPNEとは別にインストールし、管理画面の設定で有効にします。 バナー領域やサイドバナー領域にセットするのが良いでしょう。

GoogleAdsense

!GoogleAdsenseを利用することも可能です。

小窓でカスタマイズ

OpenPNEには他の機能サービスとマッシュアップさせるための「小窓CMD」と言う機構が備わっています。

• pne-cmd
• pne-cmd-howto

ID連携でカスタマイズ

OpenPNEと他のアプリケーションをID連携させることで、OpenPNEのソースコードを直接編集しないでも機能追加することが出来ます。

MasterPNE

OpenPNEのメンバーIDをマスターにして、WikiやCMSなどの他のアプリケーションを追加機能として利用します。

• Geeklog
• Trac

pne-masterslave

SlavePNE

外部のアプリケーション・認証システムを親としてOpenPNEを連携させます。

• LDAP
• POP3
• ActiveDirectory

等に対応しています。

pne-masterslave

WikiInclude(DIRECTORYNAVI)?