Life is Adventure!

SiteBarとGoogle Browser Sync | Home | BBCodeタグ一覧

BBCode設置手順

1.サーバのルートディレクトリに保存
(1)OPENPNE_DIR/webapp/lib/smarty_pligins
  BBCodeをHTMLタグに変換するプラグイン

(2)OPENPNE_DIR/webapp_ext/modules/pc/templates
  BBCode入力と日記でコメントするときのテンプレート

(3)OPENPNE_DIR/public_html/css
  BBCode用のボタンやタグのスタイル

(4)OPENPNE_DIR/public_html/skin/bbcode
  各種ボタン画像

(5)OPENPNE_DIR/public_html/js
  BBCode操作のための外部Javascript    
※カラーピッカー用のprototype.js と javascriptsディレクトリはオプション。prototype.jsは置き換えることになるのでバックアップを取っておく。予期しない不具合発生のときは無効にする。

2.config.php 設定
 ①define('USE_EXT_DIR', true); になっていることを確認する。
 ②カラーピッカーを有効にするために、最後に次の一行を追加する。
  define('BBCODE_USE_SCRIPTACULOUS', true);  
 ③サーバ上の/var/templates_c 以下を空にする。

3.BBCode用スタイルシート設定
  public_html/default.css に @import url(./bbcode.css); を追加する。

4.既存テンプレートをBBCodeに対応させる(readme.txt参照)
 PC用5種類、携帯用1種類、メール用1種類の合計7種類を変更する。

 4.1 表示系(HTML変換あり)
  BBCodeをHTMLに変換するためのコード bbcode2html を追加する。
   c_home.tpl  「コミュニティ説明文」
   c_topic_list.tpl  「トピック一覧」
   c_event_list.tpl  「イベント一覧」
   fh_review_list_member.tpl
   h_review_list_product.tpl
   h_review_search.tpl

※ c_home.tpl の場合、
({$c_commu.info|nl2br}) ⇒ ({$c_commu.info|nl2br|bbcode2html})
※ c_event_list.tpl ほかの場合
({$item.body|nl2br}) ⇒ ({$item.body|nl2br|bbcode2html})

 4.2 表示系(HTML変換なし)
   c_com_topic_find.tpl
   fh_comment_list.tpl
   fh_diary_list.tpl
   h_com_find_all.tpl
   h_diary_list_all.tpl
   h_com_topic_find_all.tpl

({$item.body|t_truncate:"120"}) をつぎのように書き換える。
({$item.body|bbcode2del|t_truncate:"120"})

 4.3 新規追加・編集系(BBCode入力支援機能追加)
c_edit.tpl
c_event_add.tpl
c_event_edit.tpl
c_topic_add.tpl
c_topic_edit.tpl
h_com_add.tpl
h_diary_add.tpl  新しく日記を作成
h_diary_edit.tpl
h_review_add_write.tpl
h_review_edit.tpl

[例] h_diary_add.tpl の場合
-------
<div style="padding:4px 3px;">
({* BBCode *})
({ext_include file="inc_bbcode.tpl"})

<textarea class="text" name="body" rows="15" cols="50" style="width:415px">
({$form_val.body})</textarea>


-------

 4.4 確認系(追加、変更後の確認)
c_event_add_confirm.tpl
c_event_write_confirm.tpl
c_topic_add_confirm.tpl
c_topic_write_confirm.tpl
fh_diary_comment_confirm.tpl
h_com_add_confirm.tpl
h_diary_add_confirm.tpl
h_diary_edit_confirm.tpl
h_review_add_write_confirm.tpl

({$form_val.body|nl2br})  ⇒ ({$form_val.body|nl2br|bbcode2html})
({$form_val.info|nl2br}) ⇒  ({$form_val.info|nl2br|bbcode2html})

 4.5 詳細表示 bbcode2html +コメント書込み(BBCode入力支援機能追加)
fh_diary.tpl  「日記の本文」と「日記のコメント書込み」
c_topic_detail.tpl  「トピックの説明」と「新しく書き込む」
c_event_detail.tpl  「イベントの詳細」と「新しく書き込む」

[例]日記の本文
({$target_diary.body|nl2br|bbcode2html|t_url2cmd:'diary'|t_cmd:'diary'})
[例]日記のコメント
({$item.body|nl2br|bbcode2html|t_url2cmd:'diary'|t_cmd:'diary'})

入力系は、({ext_include file="inc_bbcode.tpl"}) を追加する。
-------
<div style="padding:4px 3px;">
({* BBCode *})
({ext_include file="inc_bbcode.tpl"})

<textarea class="text" name="body" rows="15" cols="50" style="width:415px">
({$form_val.body})</textarea>
</div>
-------

 4.6 携帯での表示系(HTML変換あり)
  入力はできない。表示を可能にする。旧版ではBBCode除去だけだった。
c_bbs.tpl
fh_diary.tpl

c_bbs.tplでは、次の三行に変更する。
({$c_commu_topic.body|bbcode2html|t_url2a_ktai|nl2br})

({$c_commu_topic.body|bbcode2html|t_url2a_ktai|nl2br})

({$item.body|bbcode2html|t_url2a_ktai|nl2br})

fh_diary.tpl
({$target_c_diary.body|bbcode2html|t_url2a_ktai|nl2br})

({$c_diary_comment_.body|bbcode2html|t_url2a_ktai|nl2br})

 4.7 メール系(HTML変換なし)
m_ktai_bbs_info.tpl
m_pc_bbs_info.tpl
({$body}) を ({$body|bbcode2del}) に変更する。

5.独自BBCodeタグを有効化する(オプション)  

[member] ... メンバーのプロフィールへの簡易リンク
[diary] ... 日記への簡易リンク
[topic] ... トピックへの簡易リンク
[event] ... イベントへの簡易リンク
[commu] ... コミュニティへの簡易リンク。[community]も同じ効果
[review] ... レビューへの簡易リンク

[member]1[/member] というように記述しておけば、BBCodeからHTMLに変換して表示する際に、メンバーIDが1のメンバーのプロフィールへのリンクが自動的に生成される。 [diary]や[commu]なども同様で、 【日記タイトル】(メンバー名さん) に変換される。

「リンクを挿入」ボタンで、
  http://URL/?m=pc&a=page_fh_diary&target_c_diary_id=4649&comment_count=39
というURLを貼り付けた場合は、日記のURLであると判断し、IDを抽出して、
   [diary]4649[/diary] に変換される。

独自タグを有効にするために、config.php 末尾に、つぎの一行を追加する。
define('BBCODE_USE_PNE_TAG',true);

※「ドッチ」モジュール http://openpneplus.sourceforge.jp/の有効化
define('BBCODE_USE_DOCCI_TAG',true);

6.トピック・イベント・日記に『日記でコメント』ボタンを配置(オプション)
 新規に日記を書くためのウィンドウを表示するプラグイン。
 必要なテンプレートファイルをを設置した後、config.php の末尾に次の行を追加する。

define('BBCODE_USE_DIARY_COMMENT_ON_DIARY',true); //日記にボタンを表示
define('BBCODE_USE_TOPIC_COMMENT_ON_DIARY',true); //トピックにボタンを表示
define('BBCODE_USE_EVENT_COMMENT_ON_DIARY',true); //イベントにボタンを表示

7.動作確認

・日記の記述や表示、日記に対するコメントの記述や表示
・コミュニティの説明文の記述や表示
・トピックの本文やコメントの記述や表示
・イベントの本文やコメントの記述や表示
・レビューのレビュー内容の記述や表示
・日記やトピックなどの検索結果に表示される本文の表示

※テスト用のタグを記載したファイル
bbcode_smarty_test_all.txt ... 独自タグ(docci除く)を含む全タグ
bbcode_smarty_test1.txt ... 上記ファイルの前半部分
bbcode_smarty_test2.txt ... 上記ファイルの中盤部分
bbcode_smarty_test3.txt ... 上記ファイルの後半部分(独自タグ除く)
bbcode_smarty_test_pnetags.txt ... 独自タグ(docci除く)のみ


2.12系では、管理画面の「デザイン」-「配色・CSS変更」で、カスタムCSSを追加する。 解凍したフォルダにあるbbcode_css.txtの内容を貼り付ける。
今日の言葉: 

counter