OpenPNE 2.12 カスタマイズ
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
[[OpenPNE on FreeBSD 7.1]]
&lastmod;
#contents
----
*TimeZone 再び [#x0ef7787]
http://blog.sarabande.jp/post/10552966084
http://kngy.net/2011/04/28/php5-timezone-warning/
PHP5をUPしたらタイムゾーン変更がきかなくなったった(ﾟ◇ﾟ)ｶﾞｰﾝ
PHP 5.4 から putenv(“TZ=..”) の廃止とタイムゾーンが未定義...
//putenv('TZ=America/Puerto_Rico');
date_default_timezone_set('Asia/Dubai');
//putenv('TZ=Asia/Dubai');
*TimeZoneの変更 [#y801f1a0]
ロシア / 中央連邦管区 / モスクワ
Russia / Central Federal District / Moscow Europe/Moscow
またはW-SU
(MSK) +3
(MSD) +4
ニュージーランド / オークランド
New Zealand / Auckland Pacific/Auckland
(NZST) +12
(NZDT) +13
http://k-ishik.seesaa.net/archives/200704-1.html
ニュージーランドの例である。ニュージーランドでは、標準の...
TZ="NZST-12.00:00NZDT-13:00:00,M10.1.0,M3.3.0"
http://archive.linux.or.jp/JM/html/LDP_man-pages/man3/tzs...
と有るので、/usr/home/openpne_est/config.php
putenv('TZ=Europe/Moscow');
putenv('TZ=MSK-3.00:00MSD-4:00:00,M3.5.0,M10.5.0');
*OpnePNE 2.12.* to 2.12.*+1 upgrade [#d9066bd4]
piano:root {422} % tar cvfzp openpne_back.tar.gz openpne
piano:root {428} % tar xvfzp OpenPNE-2.12.10.tar.gz
piano:root {429} % cp -rp OpenPNE-2.12.10/ openpne/
piano:root {430} % chown -R www:www openpne
*WYSIWYGエディタの追加 [#cf6cc6e4]
**TinyMCE [#a6833745]
FCKeditor等と比べ、HTMLタグのサニタイズ設定の柔軟さ等が特...
http://tinymce.moxiecode.com/download.php から最新版と ...
からランゲージパックをDL
日本語環境での対応プラグインなどは
http://sourceforge.jp/projects/tinymce-ja/
<script src="http://sourceforge.jp/projects/tinymce-ja/re...
**fckeditor [#jb702bd6]
http://www.fckeditor.net/
http://www.fckeditor.net/whatsnew
からDLしてきて、解凍して、/usr/home/openpne_JP/public_htm...
http://piano.smb.net/~openpne_JP/js/fckeditor/_samples/de...
で動作確認
***管理画面のインフォメーション編集にFCKeditorを設置 [#kc...
http://bestpc.s153.xrea.com/pukiwiki/pukiwiki.php?WYSIWYG...
cd /usr/home/openpne_JP/webapp/modules/admin/templates
cp edit_c_admin_info.tpl /usr/home/openpne_JP/webapp_ext...
vi /usr/home/openpne_JP/webapp_ext/modules/admin/templat...
({* 追加 ここから *})
<script type="text/javascript" src="./js/fckeditor/fcked...
<script type="text/javascript">
<!--
var sBasePath = "./js/fckeditor/";
var oFCKeditor = new FCKeditor( 'body' ) ;
oFCKeditor.BasePath = sBasePath ;
oFCKeditor.Height = 300 ;
oFCKeditor.ToolbarSet = 'OpenPNE' ;
oFCKeditor.ReplaceTextarea() ;
//-->
</script>
({* 追加 ここまで *})
***OpenPNE用ボタンの組合せを用意 [#h05cfd19]
/public_html/js/fckeditor/fckconfig.js
という定義ファイルに、FCKEditorのボタンの組合せが記述して...
fckconfig.js を開き、
FCKConfig.ToolbarSets["OpenPNE"] = [
['Source','DocProps','-','Save','NewPage','Preview','-'...
['Cut','Copy','Paste','PasteText','PasteWord','- ','Pri...
'/',
['Bold','Italic','Underline','StrikeThrough','- ','Subs...
['OrderedList','UnorderedList','-','Outdent','Indent'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyF...
['Link','Unlink','Anchor'],
['Image','Flash','Table','Rule','Smiley','SpecialChar...
'/',
['TextColor','BGColor'],
['FitWindow','-','About']
] ;
という記述を追加すればOKです。
ボタンの並びの区切りは、[ ],'/','-',
という記号で、3段階の区切りが設定できるようです。
FCKConfig.ToolbarSets?["Default"]の定義が参考になるでしょ...
apachectl restart
管理画面のインフォメーション編集にFCKeditorが現れる。 :)
が動作するとき「未知のツールバー」というダイアログが3回で...
http://www.xugj.org/modules/QandA/index.php?post_id=7311
***日記に設置 [#b7b0497f]
cd /usr/home/openpne_JP/webapp/modules/pc/templates
cp h_diary_edit.tpl /usr/home/openpne_JP/webapp_ext/modu...
cp h_diary_add.tpl /usr/home/openpne_JP/webapp_ext/modul...
({* 追加 ここから *})
<script type="text/javascript" src="./js/fckeditor/fcked...
<script type="text/javascript">
<!--
var sBasePath = "./js/fckeditor/";
var ofckeditor = new fckeditor( 'body' ) ;
ofckeditor.BasePath = sBasePath ;
ofckeditor.Height = 300 ;
ofckeditor.ToolbarSet = 'OpenPNE' ;
ofckeditor.ReplaceTextarea() ;
//-->
</script>
({* 追加 ここまで *})
-ToolbarSet?を指定しないと、Defaultという全部入りのボタン...
-Defaultの他に、Basicというシンプルなものも標準で用意され...
-ボタンの組合せは、
/public_html/js/FCKeditor/fckconfig.js
という定義ファイルに記述してある。手書きで修正すればOK
***OpenPNE用にボタンの組合せを用意 [#f72ed1d3]
/public_html/js/FCKeditor/fckconfig.js
という定義ファイルに、FCKEditorのボタンの組合せが記述して...
これを手書きで修正して、新たにOpenPNE用のセットを作ってみ...
fckconfig.js を開き、
FCKConfig.ToolbarSets["OpenPNE"] = [
['Source','DocProps','Save','NewPage','Preview','Templa...
['Cut','Copy','Paste','PasteText','PasteWord','Print','...
'/',
['Bold','Italic','Underline','StrikeThrough','Subscript...
['OrderedList','UnorderedList','Outdent','Indent'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyF...
['Link','Unlink','Anchor'],
['Image','Flash','Table','Rule','Smiley','SpecialChar',...
'/',
['TextColor','BGColor'],
['FontFormat','FontSize'],
['FitWindow','-','About']
];
という記述を追加すればOKです。
ボタンの並びの区切りは、
-[ ],
-'/',
-'-',
という記号で、3段階の区切りが設定できます。
FCKConfig.ToolbarSets?["Default"]の定義を参考にして、いろ...
*OpenPNE テンプレートのカスタマイズ [#q0c295a1]
**OpenPNE, Smarty [#fb88fc52]
OpenPNE は Smarty を使用していますが、そのテンプレートを...
ディレクトリは下記になります。
オリジナルのテンプレート
/openpne/webapp/modules/pc/templates/
カスタマイズ用のテンプレート
/openpne/webapp_ext/modules/pc/templates/
/openpne/webapp_ext/modules/pc/templates/ ディレクトリは...
次にカスタマイズしたいテンプレートをオリジナルのテンプレ...
次に /openpne/config.php の
define('USE_EXT_DIR', false);
を
define('USE_EXT_DIR', true)
に変更すれば、カスタマイズ用ディレクトリにテンプレートが...
カスタマイズ失敗してもカスタマイズ用のテンプレートを削除...
この /openpne/webapp_ext/ ディレクトリはテンプレート以外...
http://www.syuhari.jp/blog/archives/tag/smarty
http://trac.openpne.jp/wiki/pne-xhtmlcss/tips
*プロフィールのニックネームを氏名に変更 [#d13ec83f]
以前のバージョンだと、http://bestpc.s153.xrea.com/pukiwik...
/OpenPNE_DIR/webapp/modules/admin/validate/do/update_c_a...
で設定するようなので、ニックネームを氏名に変更。
*設置後のOpenPNEのカスタマイズ 見た目編 [#y955ad42]
スタイル指定の例追加するスタイル指定の記述の例を紹介しま...
始めに、セレクタについて簡単に説明をします。
body { スタイル宣言 }
.partsHeading { スタイル宣言 }
#Container { スタイル宣言 }
#Body .homeMainTable th { スタイル宣言 }
#Body, #Container { スタイル宣言 }
開き中括弧 { の前に body や .partsHeading などと書いてあ...
-1行目はセレクタが body です。これは「body要素(bodyタグに...
-2行目はセレクタが .partsHeading です。これは「クラス名が...
-3行目はセレクタが #Container です。これは「ID名が "Conta...
-4行目はセレクタが #Body .homeMainTable th です。これは「...
-5行目はセレクタが #Body, #Container です。これは「#Body ...
**全体に背景画像を表示する [#r7d1a259]
body {
background-image: url(画像のURL);
}
#Body, #Container {
background-color: transparent;
}
body要素に対して背景画像を指定します。
配色設定から指定できる背景色が #Body と #Container に適用...
**全体をセンタリングする（右揃えにする） [#i5e81f61]
#Container {
margin: 0 auto;
}
左右のmarginをautoにすることで、ボックスは中央に配置され...
#Container {
margin-left: auto;
}
左のmarginだけをautoにすることで、ボックスは右寄せになり...
**home系のメインテーブルの見出し部分を変える [#u1361139]
home系とは、h_home, f_home, c_home のことです。プロフィー...
#Body .homeMainTable th {
border-color: #FF0000;
background-color: #000000;
color: #FFFFFF;
font-weight: bold;
}
#Body .homeMainTable tr:first-child th,
#Body .homeMainTable tr.first-child th {
border-color: #00FF00;
}
homeMainTable クラスのパーツの中にある、th要素（テーブル...
"first-child" と記述している部分は、テーブルの1行目のth要...
**日記やトピック記事の画像をセンタリングする [#hafaa78c]
#Body ul.photo {
text-align: center;
}
#Body ul.photo li {
margin: 0 10px;
}
photo クラスのul要素に対して、インラインをセンタリングす...
日記は diaryDetailBox クラス、トピックは topicDetailBox ...
*OpenPNE 画像の保存、表示方法 [#id20b1c2]
OpenPNE Add comments OpenPNE で写真のアップロード機能を作...
**画像を保存するテーブル c_image [#u1e3fc1b]
OpenPNE では画像をDB に保存しています。保存するテーブル名...
このテーブルにはプロフィール写真や日記の写真、スキンの画...
CREATE TABLE c_image (
c_image_id int(11) NOT NULL auto_increment,
filename text NOT NULL,
bin longblob NOT NULL,
r_datetime datetime NOT NULL default '0000-00-00 00:00:...
`type` text,
PRIMARY KEY (c_image_id),
KEY filename (filename(100))
) ENGINE=MyISAM DEFAULT CHARSET=utf8;filename
画像のファイル名、任意につけていいみたいですが、プロフィ...
m_2_1188204858.jpg
という感じです。
最初の 「m 」はたぶんプロフィール写真を表す文字、
次の「２」はプロフィール写真のNo（2番目にアップした写真）
次の10桁の数字は多分 time() 関数で取得したアップロードし...
bin
base64_encode した画像ファイルのバイナリデータ
type
画像のタイプ( jpg | gif | png )
r_datetime
登録日時
**DBに格納された画像の表示 [#s872b55b]
***表示方法 [#rcb575ff]
c_image テーブルに格納した画像を表示するHTML
<img src="/img.php?filename=m_2_1188204858.jpg&w=180&h=1...
Smarty のタグで書くと
<img src="({t_img_url filename=$pet.image1 w=180 h=180})">
filename に c_image.filename を指定して、
w, h に幅と高さの最大値を指定する。
幅と高さは最大値を超えると自動的にリサイズする。
http://www.syuhari.jp/blog/archives/tag/smarty
***アルバムの画像の大きさ [#ub64aa2d]
http://trac.openpne.jp/changeset/6764
終了行:
[[OpenPNE on FreeBSD 7.1]]
&lastmod;
#contents
----
*TimeZone 再び [#x0ef7787]
http://blog.sarabande.jp/post/10552966084
http://kngy.net/2011/04/28/php5-timezone-warning/
PHP5をUPしたらタイムゾーン変更がきかなくなったった(ﾟ◇ﾟ)ｶﾞｰﾝ
PHP 5.4 から putenv(“TZ=..”) の廃止とタイムゾーンが未定義...
//putenv('TZ=America/Puerto_Rico');
date_default_timezone_set('Asia/Dubai');
//putenv('TZ=Asia/Dubai');
*TimeZoneの変更 [#y801f1a0]
ロシア / 中央連邦管区 / モスクワ
Russia / Central Federal District / Moscow Europe/Moscow
またはW-SU
(MSK) +3
(MSD) +4
ニュージーランド / オークランド
New Zealand / Auckland Pacific/Auckland
(NZST) +12
(NZDT) +13
http://k-ishik.seesaa.net/archives/200704-1.html
ニュージーランドの例である。ニュージーランドでは、標準の...
TZ="NZST-12.00:00NZDT-13:00:00,M10.1.0,M3.3.0"
http://archive.linux.or.jp/JM/html/LDP_man-pages/man3/tzs...
と有るので、/usr/home/openpne_est/config.php
putenv('TZ=Europe/Moscow');
putenv('TZ=MSK-3.00:00MSD-4:00:00,M3.5.0,M10.5.0');
*OpnePNE 2.12.* to 2.12.*+1 upgrade [#d9066bd4]
piano:root {422} % tar cvfzp openpne_back.tar.gz openpne
piano:root {428} % tar xvfzp OpenPNE-2.12.10.tar.gz
piano:root {429} % cp -rp OpenPNE-2.12.10/ openpne/
piano:root {430} % chown -R www:www openpne
*WYSIWYGエディタの追加 [#cf6cc6e4]
**TinyMCE [#a6833745]
FCKeditor等と比べ、HTMLタグのサニタイズ設定の柔軟さ等が特...
http://tinymce.moxiecode.com/download.php から最新版と ...
からランゲージパックをDL
日本語環境での対応プラグインなどは
http://sourceforge.jp/projects/tinymce-ja/
<script src="http://sourceforge.jp/projects/tinymce-ja/re...
**fckeditor [#jb702bd6]
http://www.fckeditor.net/
http://www.fckeditor.net/whatsnew
からDLしてきて、解凍して、/usr/home/openpne_JP/public_htm...
http://piano.smb.net/~openpne_JP/js/fckeditor/_samples/de...
で動作確認
***管理画面のインフォメーション編集にFCKeditorを設置 [#kc...
http://bestpc.s153.xrea.com/pukiwiki/pukiwiki.php?WYSIWYG...
cd /usr/home/openpne_JP/webapp/modules/admin/templates
cp edit_c_admin_info.tpl /usr/home/openpne_JP/webapp_ext...
vi /usr/home/openpne_JP/webapp_ext/modules/admin/templat...
({* 追加 ここから *})
<script type="text/javascript" src="./js/fckeditor/fcked...
<script type="text/javascript">
<!--
var sBasePath = "./js/fckeditor/";
var oFCKeditor = new FCKeditor( 'body' ) ;
oFCKeditor.BasePath = sBasePath ;
oFCKeditor.Height = 300 ;
oFCKeditor.ToolbarSet = 'OpenPNE' ;
oFCKeditor.ReplaceTextarea() ;
//-->
</script>
({* 追加 ここまで *})
***OpenPNE用ボタンの組合せを用意 [#h05cfd19]
/public_html/js/fckeditor/fckconfig.js
という定義ファイルに、FCKEditorのボタンの組合せが記述して...
fckconfig.js を開き、
FCKConfig.ToolbarSets["OpenPNE"] = [
['Source','DocProps','-','Save','NewPage','Preview','-'...
['Cut','Copy','Paste','PasteText','PasteWord','- ','Pri...
'/',
['Bold','Italic','Underline','StrikeThrough','- ','Subs...
['OrderedList','UnorderedList','-','Outdent','Indent'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyF...
['Link','Unlink','Anchor'],
['Image','Flash','Table','Rule','Smiley','SpecialChar...
'/',
['TextColor','BGColor'],
['FitWindow','-','About']
] ;
という記述を追加すればOKです。
ボタンの並びの区切りは、[ ],'/','-',
という記号で、3段階の区切りが設定できるようです。
FCKConfig.ToolbarSets?["Default"]の定義が参考になるでしょ...
apachectl restart
管理画面のインフォメーション編集にFCKeditorが現れる。 :)
が動作するとき「未知のツールバー」というダイアログが3回で...
http://www.xugj.org/modules/QandA/index.php?post_id=7311
***日記に設置 [#b7b0497f]
cd /usr/home/openpne_JP/webapp/modules/pc/templates
cp h_diary_edit.tpl /usr/home/openpne_JP/webapp_ext/modu...
cp h_diary_add.tpl /usr/home/openpne_JP/webapp_ext/modul...
({* 追加 ここから *})
<script type="text/javascript" src="./js/fckeditor/fcked...
<script type="text/javascript">
<!--
var sBasePath = "./js/fckeditor/";
var ofckeditor = new fckeditor( 'body' ) ;
ofckeditor.BasePath = sBasePath ;
ofckeditor.Height = 300 ;
ofckeditor.ToolbarSet = 'OpenPNE' ;
ofckeditor.ReplaceTextarea() ;
//-->
</script>
({* 追加 ここまで *})
-ToolbarSet?を指定しないと、Defaultという全部入りのボタン...
-Defaultの他に、Basicというシンプルなものも標準で用意され...
-ボタンの組合せは、
/public_html/js/FCKeditor/fckconfig.js
という定義ファイルに記述してある。手書きで修正すればOK
***OpenPNE用にボタンの組合せを用意 [#f72ed1d3]
/public_html/js/FCKeditor/fckconfig.js
という定義ファイルに、FCKEditorのボタンの組合せが記述して...
これを手書きで修正して、新たにOpenPNE用のセットを作ってみ...
fckconfig.js を開き、
FCKConfig.ToolbarSets["OpenPNE"] = [
['Source','DocProps','Save','NewPage','Preview','Templa...
['Cut','Copy','Paste','PasteText','PasteWord','Print','...
'/',
['Bold','Italic','Underline','StrikeThrough','Subscript...
['OrderedList','UnorderedList','Outdent','Indent'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyF...
['Link','Unlink','Anchor'],
['Image','Flash','Table','Rule','Smiley','SpecialChar',...
'/',
['TextColor','BGColor'],
['FontFormat','FontSize'],
['FitWindow','-','About']
];
という記述を追加すればOKです。
ボタンの並びの区切りは、
-[ ],
-'/',
-'-',
という記号で、3段階の区切りが設定できます。
FCKConfig.ToolbarSets?["Default"]の定義を参考にして、いろ...
*OpenPNE テンプレートのカスタマイズ [#q0c295a1]
**OpenPNE, Smarty [#fb88fc52]
OpenPNE は Smarty を使用していますが、そのテンプレートを...
ディレクトリは下記になります。
オリジナルのテンプレート
/openpne/webapp/modules/pc/templates/
カスタマイズ用のテンプレート
/openpne/webapp_ext/modules/pc/templates/
/openpne/webapp_ext/modules/pc/templates/ ディレクトリは...
次にカスタマイズしたいテンプレートをオリジナルのテンプレ...
次に /openpne/config.php の
define('USE_EXT_DIR', false);
を
define('USE_EXT_DIR', true)
に変更すれば、カスタマイズ用ディレクトリにテンプレートが...
カスタマイズ失敗してもカスタマイズ用のテンプレートを削除...
この /openpne/webapp_ext/ ディレクトリはテンプレート以外...
http://www.syuhari.jp/blog/archives/tag/smarty
http://trac.openpne.jp/wiki/pne-xhtmlcss/tips
*プロフィールのニックネームを氏名に変更 [#d13ec83f]
以前のバージョンだと、http://bestpc.s153.xrea.com/pukiwik...
/OpenPNE_DIR/webapp/modules/admin/validate/do/update_c_a...
で設定するようなので、ニックネームを氏名に変更。
*設置後のOpenPNEのカスタマイズ 見た目編 [#y955ad42]
スタイル指定の例追加するスタイル指定の記述の例を紹介しま...
始めに、セレクタについて簡単に説明をします。
body { スタイル宣言 }
.partsHeading { スタイル宣言 }
#Container { スタイル宣言 }
#Body .homeMainTable th { スタイル宣言 }
#Body, #Container { スタイル宣言 }
開き中括弧 { の前に body や .partsHeading などと書いてあ...
-1行目はセレクタが body です。これは「body要素(bodyタグに...
-2行目はセレクタが .partsHeading です。これは「クラス名が...
-3行目はセレクタが #Container です。これは「ID名が "Conta...
-4行目はセレクタが #Body .homeMainTable th です。これは「...
-5行目はセレクタが #Body, #Container です。これは「#Body ...
**全体に背景画像を表示する [#r7d1a259]
body {
background-image: url(画像のURL);
}
#Body, #Container {
background-color: transparent;
}
body要素に対して背景画像を指定します。
配色設定から指定できる背景色が #Body と #Container に適用...
**全体をセンタリングする（右揃えにする） [#i5e81f61]
#Container {
margin: 0 auto;
}
左右のmarginをautoにすることで、ボックスは中央に配置され...
#Container {
margin-left: auto;
}
左のmarginだけをautoにすることで、ボックスは右寄せになり...
**home系のメインテーブルの見出し部分を変える [#u1361139]
home系とは、h_home, f_home, c_home のことです。プロフィー...
#Body .homeMainTable th {
border-color: #FF0000;
background-color: #000000;
color: #FFFFFF;
font-weight: bold;
}
#Body .homeMainTable tr:first-child th,
#Body .homeMainTable tr.first-child th {
border-color: #00FF00;
}
homeMainTable クラスのパーツの中にある、th要素（テーブル...
"first-child" と記述している部分は、テーブルの1行目のth要...
**日記やトピック記事の画像をセンタリングする [#hafaa78c]
#Body ul.photo {
text-align: center;
}
#Body ul.photo li {
margin: 0 10px;
}
photo クラスのul要素に対して、インラインをセンタリングす...
日記は diaryDetailBox クラス、トピックは topicDetailBox ...
*OpenPNE 画像の保存、表示方法 [#id20b1c2]
OpenPNE Add comments OpenPNE で写真のアップロード機能を作...
**画像を保存するテーブル c_image [#u1e3fc1b]
OpenPNE では画像をDB に保存しています。保存するテーブル名...
このテーブルにはプロフィール写真や日記の写真、スキンの画...
CREATE TABLE c_image (
c_image_id int(11) NOT NULL auto_increment,
filename text NOT NULL,
bin longblob NOT NULL,
r_datetime datetime NOT NULL default '0000-00-00 00:00:...
`type` text,
PRIMARY KEY (c_image_id),
KEY filename (filename(100))
) ENGINE=MyISAM DEFAULT CHARSET=utf8;filename
画像のファイル名、任意につけていいみたいですが、プロフィ...
m_2_1188204858.jpg
という感じです。
最初の 「m 」はたぶんプロフィール写真を表す文字、
次の「２」はプロフィール写真のNo（2番目にアップした写真）
次の10桁の数字は多分 time() 関数で取得したアップロードし...
bin
base64_encode した画像ファイルのバイナリデータ
type
画像のタイプ( jpg | gif | png )
r_datetime
登録日時
**DBに格納された画像の表示 [#s872b55b]
***表示方法 [#rcb575ff]
c_image テーブルに格納した画像を表示するHTML
<img src="/img.php?filename=m_2_1188204858.jpg&w=180&h=1...
Smarty のタグで書くと
<img src="({t_img_url filename=$pet.image1 w=180 h=180})">
filename に c_image.filename を指定して、
w, h に幅と高さの最大値を指定する。
幅と高さは最大値を超えると自動的にリサイズする。
http://www.syuhari.jp/blog/archives/tag/smarty
***アルバムの画像の大きさ [#ub64aa2d]
http://trac.openpne.jp/changeset/6764
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
