OpenPNE 2.12 カスタマイズの履歴(No.4)

2012-07-29 (日) 13:07:04

OpenPNE テンプレートのカスタマイズ
- OpenPNE, Smarty
プロフィールのニックネームを氏名に変更
設置後のOpenPNEのカスタマイズ見た目編
OpenPNE 画像の保存、表示方法
- 画像を保存するテーブル c_image
- DBに格納された画像の表示
  - 表示方法
  - アルバムの画像の大きさ

OpenPNE テンプレートのカスタマイズ†

OpenPNE, Smarty†

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/ ディレクトリはテンプレート以外でも webapp ディレクトリのファイルを上書きできます。 http://www.syuhari.jp/blog/archives/tag/smarty

http://trac.openpne.jp/wiki/pne-xhtmlcss/tips

↑

プロフィールのニックネームを氏名に変更†

以前のバージョンだと、http://bestpc.s153.xrea.com/pukiwiki/pukiwiki.php?%A5%CB%A5%C3%A5%AF%A5%CD%A1%BC%A5%E0%A2%AA%B2%F1%BC%D2%CC%BE　のように、「ニックネーム」が現れるファイルを全部変更するようですが、2.12 では、

/OpenPNE_DIR/webapp/modules/admin/validate/do/update_c_admin_config_word.ini

で設定するようなので、ニックネームを氏名に変更。

↑

設置後のOpenPNEのカスタマイズ見た目編†

スタイル指定の例追加するスタイル指定の記述の例を紹介します。どんなセレクタを指定すればいいのかについては後述します。

始めに、セレクタについて簡単に説明をします。

body { スタイル宣言 }
.partsHeading { スタイル宣言 }
#Container { スタイル宣言 }
#Body .homeMainTable th { スタイル宣言 }
#Body, #Container { スタイル宣言 }

開き中括弧 { の前に body や .partsHeading などと書いてあります。この部分をセレクタといいます。セレクタは、スタイル指定の対象が『どこ』なのかを指します。

1行目はセレクタが body です。これは「body要素(bodyタグに囲まれた範囲)」を対象とします。
2行目はセレクタが .partsHeading です。これは「クラス名が "partsHeading" の要素」を対象とします。
3行目はセレクタが #Container です。これは「ID名が "Container" の要素」を対象とします。
4行目はセレクタが #Body .homeMainTable th です。これは「#Body の中の .homeMainTable の中の th 要素」を対象とします。
5行目はセレクタが #Body, #Container です。これは「#Body と #Container」を対象とします。

↑

全体に背景画像を表示する†

body {
       background-image: url(画像のURL);
}
#Body, #Container {
       background-color: transparent;
}

body要素に対して背景画像を指定します。

配色設定から指定できる背景色が #Body と #Container に適用されているので、背景色を透明に指定します。

↑

全体をセンタリングする（右揃えにする）†

#Container {
       margin: 0 auto;
}

左右のmarginをautoにすることで、ボックスは中央に配置されます。

#Container {
       margin-left: auto;
}

左のmarginだけをautoにすることで、ボックスは右寄せになります。

↑

home系のメインテーブルの見出し部分を変える†

home系とは、h_home, f_home, c_home のことです。プロフィール確認ページ h_prof にも反映します。

#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要素だけを対象とするようなセレクタの記述です。

↑

日記やトピック記事の画像をセンタリングする†

#Body ul.photo {
       text-align: center;
}
#Body ul.photo li {
       margin: 0 10px;
}

photo クラスのul要素に対して、インラインをセンタリングする指定を記述します。 li要素は既存のスタイルで display: inline が指定されています。 li要素の左右のmarginを指定して画像の間隔を調整します。

日記は diaryDetailBox クラス、トピックは topicDetailBox クラスですが、共通の ul.photo をセレクタにすることでスタイル指定を共有できます。日記記事、トピック記事以外に、同じクラスが使われているイベント記事にも適用されます。

↑

OpenPNE 画像の保存、表示方法†

OpenPNE Add comments OpenPNE で写真のアップロード機能を作成していて調べたことをまとめておきます。

↑

画像を保存するテーブル c_image†

OpenPNE では画像をDB に保存しています。保存するテーブル名は c_image です。このテーブルにはプロフィール写真や日記の写真、スキンの画像などが保存されるようです。

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: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に格納された画像の表示†

↑

表示方法†

c_image テーブルに格納した画像を表示するHTML

<img src="/img.php?filename=m_2_1188204858.jpg&w=180&h=180&m=pc">

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

↑

アルバムの画像の大きさ†

http://trac.openpne.jp/changeset/6764

OpenPNE 2.12 カスタマイズ の履歴(No.4)