OpenPNEカスタマイズ

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

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

管理画面でカスタマイズ

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

デザインカスタマイズ

テンプレート設定

OpenPNE2.12からのテンプレートの設定についてはwiki:pne-xhtmlcss/tipsをご覧ください?。

!MyNewsを使用する

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

入力フォームの作成(暫定)

管理画面「テンプレート挿入」の「【PC版】 h_home 9」に以下を入力してください。

<div class="dparts formTable"><div class="parts">
<div class="partsHeading"><h3>My News!</h3></div>
<div class="partsInfo">
<p>({if $c_member.profile.PNE_MY_NEWS_DATETIME.value})({$c_member.profile.PNE_MY_NEWS_DATETIME.value|date_format:"%m/%d %H:%M"}) 更新({/if})</p>
</div>
<form action="./" method="post">
<input type="hidden" name="m" value="pc" />
<input type="hidden" name="a" value="do_h_home_update_my_news" />
<input type="hidden" name="sessid" value="({$PHPSESSID})" />
<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="&nbsp;変&nbsp;更&nbsp;" />
</div>
</form>
</div></div>

表示部分の作成(暫定)

管理画面「テンプレート挿入」の「【PC版】 f_home (h_prof) 7」に以下を入力してください。

({if $target_c_member.profile.PNE_MY_NEWS_DATETIME.value})

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

({/if})

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

OpenPNE2.10

OpenPNE2.10はOpenPNE2.12とテンプレートの書き方が違うため、上記のテンプレートではレイアウトが崩れてしまいます。OpenPNE2.10での表示方法はこちらをご覧ください。

OpenPNE2.10以前のバージョン

!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})
<div style="text-align:center; margin:0px 0px 10px 0px;">
<img src="img.php?filename=({$rank.image_filename})" alt="({$rank.name})" />
<p style="text-align:center">({$point})point</p>
</div>
({/if})

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

OpenPNE2.12以前バージョンはOpenPNE2.12とテンプレートの書き方が違うため、上記のテンプレートではレイアウトが崩れてしまいます。OpenPNE2.10での表示方法はこちらをご覧ください。

Skype ボタンの設置

SkypeIDの設定

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

①項目名・・・SkypeID
②識別名・・・skype_id
③公開設定・・固定
④公開デフォルト値・・・フレンドまで公開
⑤メンバー検索・・・表示しない
⑥フォームタイプ・・・テキスト
⑦入力タイプ・・・文字列

Skype画像の登録

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

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

表示部分の作成

管理画面「テンプレート挿入」の「【PC版】 f_home (h_prof) 4」に以下を入力してください （※【Skype通話の画像URL】【Skypeチャットの画像URL】は、先ほど保存したURLに書き換えます）

({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})

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

OpenPNE2.12以前バージョンはOpenPNE2.12とテンプレートの書き方が違うため、上記のテンプレートではレイアウトが崩れてしまいます。OpenPNE2.10での表示方法はこちらをご覧ください。

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

({if !$c_diary_list})
<div class="parts" style="text-align: center; padding: 10px;">
<form action="./" method="post">
<input type="hidden" name="m" value="pc" />
<input type="hidden" name="a" value="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="まずは「あしあと帳」作成から" />
</form>
</div>
({/if})

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

お題日記機能の設置

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)?