XoopsCubeLegacy テーマ : photograph 掲載日: 2011-10-15 UpDate 2015-08-16 説明 2015-08-16 XoopsX対応として修正しました。
XCL2.1x(HD1.04)・XCL2.2用のテーマです。
Xoops Cube Legacy 2.2 で動作確認しました。
基本は2カラム構成として左カラムを固定、右側メインカラムを可変幅のリキッドデザインのテーマとしました。
テーマ名のとおり写真をメインとしたサイトをイメージして画面をデザインしています。(実現できているかどうかは、別にして)
このテーマは、高機能な写真等アルバムモジュールである「webphoto」を利用することを想定しています。
「webphoto」を用いることで、テーマのヘッダー部分に人気の高い画像7枚を自動で表示可能、「webphoto」のテンプレート修正等により表示をテーマに合わせて最適化しているなど、写真を綺麗に見せることをメインにしたテーマとなっています。(さらに、カスタマイズによりヘッダー部分にスライドショー(カルーセル表示)も可能)
画像ポップアップなど、jQuery等のjavascriptを利用しているので、javascript許可環境にて閲覧した方が機能を有効に利用できるようになっています。
また、CSS3を利用して角丸やボックスの影、メニューのアクションなどを表現していますので、できれば FireFox 等のモダンブラウザでの閲覧が望ましいですが、IE6などの古いブラウザでもある程度の互換性を確保するため PIE.htc というjavascript を利用してクロスブラウザ対策を行っています。
テーマ photograph では、xugj_assign.phpを用いたメニューを採用しており、メインメニュー項目を自動で左カラムに表示します。
また、フッター部分にはユーザーメニュー項目を自動で表示するので、xoopsの互換モジュールである「メインメニュー」「ユーザーメニュー」を利用しない運用が可能となっています。
基本は、左サイドカラムと右メインカラムの2グリッドデザインですが、右カラムを表示した場合はメインカラム内で中央カラムの幅が狭まり、その右側に右カラムが出現するように設定しています。
utf8とeucのlanguageファイルを用意しましたので、eucでも動作すると思います。
(eucについては、動作環境がないので未確認ですが・・・)
ヘッダーに表示される「webphoto」の画像については、カテゴリ選択や表示枚数の変更などのカスタマイズが可能です。
メニューは、Xoops Users Group Japan(XUGJ) で GIJOEさんが提唱された xugj_assign.php を利用したメニューを採用しています。
通常のメインメニューに表示されるのと同じ項目が自動で表示されるので、メニューの項目を編集する必要もありません。
http://www.xugj.org/modules/d3forum/index.php?topic_id=125 なお、同封しているものは、オリジナルの xugj_assign.php から少し変更しているので、xugj_assign_photograph.php という名称に変更しています。
jQuery.js + jquery.jgrowlプラグインを利用して、画面遷移せずにリダイレクト表示できるので、スピーディーでセンスの良い表示が可能となっています。
なお、本テーマには、domifaraさん作成のphpファイルによるインクルード方法を用いております。
domifaraさん、ありがとうございます。
(javascriptオフ時には、リダイレクトの文字などがボックス表示されます。)
jQueryについては、domifaraさんによるXCL2.2対応措置がとられており、jQueryの二重読み込み防止や他のjavascriptとのバッティングを可能な限り避ける仕組みが用いられております。
(xugj_already_js.php をXCL2.1対応版に差し替えております。)
インストール インストールはテーマのアップロード+αが必要です。(X-updateを利用した場合は不要)
まずは、解凍してできあがったフォルダ「photograph」をFTPにてサイトのテーマ・ディレクトリへコピーしてください。
次に、「photograph」フォルダ内にある PIE.htc というファイルをサイトのルート(XOOPS_ROOT_PATH)にコピーしてください。
完了したらあとは通常のテーマと同様、管理画面の「互換モジュール」「テーマの管理」でこのテーマを使用する設定としてください。
これでテーマとしての利用は可能ですが、「webphoto」の表示をこのテーマに最適化するため、次の手順でテーマ下テンプレート利用のための作業や xugj_block 等の smartyプラグイン 利用のための作業を行ってください。
【テーマ下テンプレートが利用可能な場合】
ご利用になっている xoops がテーマ下テンプレート利用可能な場合は、本テーマディレクトリ下にある 「templates」ディレクトリに収納されたカスタマイズ済みのテンプレートを利用するようになります。
この場合、xugj_date や xugj_block を利用しますので、本テーマ下の「up/plugin」フォルダに収納されている modifier.xugj_date.php と function.xugj_block.php をFTPにてサイトの「plugin」ディレクトリにコピーしてください。(既に存在する場合は不要)
「plugin」ディレクトリは、XCL2.1x と XCL2.2 では場所が違うのでご注意ください。
XCL2.1xの場合 /XOOPS_ROOT_PATH/class/smarty/plugins/
XCL2.2の場合 /XOOPS_TRUST_PATH/libs/smarty/plugins/ または
/XOOPS_TRUST_PATH/libs/smartyplugins/ (preload「HdXoopsTplHook.class.php」を使っている場合)
【テーマ下テンプレートが利用できない場合】
もし、テーマ下テンプレートを利用できない環境の場合、本テーマ下の「up/preload」フォルダにある HdXoopsTplHook.class.php をFTPにてサイトの「preload」ディレクトリに、本テーマ下の「up/plugin」フォルダにある resource.db.php をサイトの「plugin」ディレクトリにそれぞれコピーしてください。
詳細はこちらを参照して下さい。
http://xoops.peak.ne.jp/md/news/index.php?page=article&storyid=450【テーマ下テンプレート利用可能だが、本テーマのテーマ下テンプレートを使いたくない場合】
逆に、ご利用になっている xoops がテーマ下テンプレート利用可能な状態であって、本テーマ下のテンプレートを使いたくない場合は、テーマ下にある「templates」ディレクトリを削除してください。(当該ディレクトリ内の個別のテンプレートを削除するのも良いでしょう。)
■理由:テーマ下テンプレート利用可能なxoops(HDなど)では、次の優先順位でテンプレートを読み込むため
1 テーマ下テンプレート
2 現在ActiveなDBテンプレート
3 Default(DB)テンプレート
つまり、テンプレートを変更しようとして、Altsysで「現在ActiveなDBテンプレート」をいくら修正しても、テーマ下テンプレートがある場合はそちらが優先されてしまうのです。
【Wordpress(XPressME Integration Kit)を利用している場合】
XPressME Integration Kit は、ブログシステムである Wordpress を取り込んで xoopsのモジュールとして利用できるので、非常に高度なブログを構築することが可能です。
http://ja.xpressme.info/ 本テーマでは、このモジュール用にカスタマイズしたCSSも実装しているので、ある程度は本テーマに合った表示が可能となってはいます。
しかし、このモジュールの場合、テーマ下テンプレートはもちろんDBテンプレートによる表示カスタマイズが出来ない構造であるため、テーマに合った表示に最適化するには、モジュール下に専用のテーマを追加する必要があります。
今回、本テーマを作成・配布するにあたり、本テーマに合ったWordpress用のテーマ「magazine」を同封していますので、次の要領にて作業してみてください。(既に同じWordpress用のテーマがある場合は必要ありません。)
1 本テーマにある「up/wordpress」フォルダ下の「wp-content」フォルダをFTPにてサイトの /modules/wordpress/ ディレクトリにコピーする。(ここでは、同モジュールをwordpressというディレクトリ名にてインストールしていると仮定)
2 「Wordpress管理」の「XPressMe」「表示設定」にて、表示モード設定項目のXPressMeの表示モードの選択を「XOOPSモード」に、XOOPSモードで使用するテーマを選択で「magazine」を選択して、下部の更新ボタンを押して設定を更新・反映させる。
カスタマイズ【メニュー表示項目の変更】
このテーマでは、xugj_assign_phpを用いたメニュー表示を行いますが、インストールして初回表示した時に、メインメニュー表示する設定となっているメニュー項目を自動で引用してきます。(表示用のキャッシュファイルを自動作成して利用)
従って、モジュールの管理にてモジュールの表示名を変えたり、並び順を「0」として非表示指定した場合でも、テーマのメニュー表示は以前作成したキャッシュファイルを利用することから、変更した表示となりません。
そのような場合、FTPソフトを使って、cacheディレクトリ内の theme_photograph_menus_****.php を削除してください。
再度、サイトを表示した際に、新しくメニュー用のキャッシュファイルが自動生成されます。
なお、domifaraさん作成の「xugjメニューキャッシュリフレシュ 管理画面モジュール」を利用すると、FTPソフトを使わずにキャッシュファイルの削除ができるので、便利だと思います。(domifaraさん、ありがとうございます。)
http://xoops123.com/modules/d3downloads/index.php?page=singlefile&cid=10&lid=66【ヘッダーのサムネイル画像表示について】
ヘッダーに表示される画像は、xugj_block という smartyプラグインを利用して「webphoto」のサムネイル画像を利用しています。
本テーマの初期状態では、2番目のカテゴリの写真につき人気順に7枚のサムネイルを表示する設定としており、本テーマディレクトリ内の theme_mc_contents.html というファイルを編集することにより、設定の変更が可能です。(編集の際は、UTF-8が扱える秀丸等のエディターをご利用ください。)
編集するのは、同ファイル内の次の記述部分です。
<{xugj_block file="modules/webphoto/blocks/blocks.php" func="b_webphoto_tophits_p_show" opt="webphoto,30,2,1,0,5,0,1,0,0,0,300" item="block"}>
同ファイル内の上部にもコメントとして記載していますが、opt 部分がオプションを指定する部分で、先頭から順に次のような指定となっています。
0.dirname ← webphoto
1.表示数 ← 例 5
2.カテゴリ限定 ←ここでカテゴリ番号を指定する 例 0 (カテゴリ指定しない)
3.サブカテゴリも対象カテゴリ限定のとき有効 ←はい 1 いいえ 0
4.写真・動画・メディアのタイトルの最大表示文字数 ←例 20
5.写真・動画・メディアの列数 ←例 1
6.キャッシュ時間 ←例 キャシュ無し 0
デフォルトでは、モジュール「webphoto」のディレクトリを webphoto としてインストールした場合の設定としていますが、他の名称に変えている場合は適宜そのディレクトリ名に変更してください。
次の表示数は7、その次のカテゴリは2となっていますが、これらも必要に応じて変更してください。
その他のオプションは特に変更する必要はないと思います。
また、デフォルトでは人気順(トップヒット)のサムネイル画像を表示する設定としていますが、func="b_webphoto_tophits_p_show" を変更することにより、新着一覧などに変えることができます。
●カテゴリナンバー2の人気順(トップヒット)7枚を表示する場合
<{xugj_block file="modules/webphoto/blocks/blocks.php" func="b_webphoto_tophits_p_show" opt="webphoto,30,2,1,0,5,0,1,0,0,0,300" item="block"}>
●カテゴリナンバー2の新着順 7枚を表示する場合
<{xugj_block file="modules/webphoto/blocks/blocks.php" func="b_webphoto_topnews_p_show" opt="webphoto,30,2,1,0,5,0,1,0,0,0,300" item="block"}>
●全ての画像につき、新着順に7枚を表示する場合
<{xugj_block file="modules/webphoto/blocks/blocks.php" func="b_webphoto_topnews_p_show" opt="webphoto,30,0,1,0,5,0,1,0,0,0,300" item="block"}>
【モジュールの表示設定のリセット】
このテーマでは、各モジュールの表示をこのテーマに合わせた表示に変更するため、専用のCSSを用いて本来のCSS設定を上書きするようにしています。
もし、必要がない場合は、theme.html 35行目にある次の記述部分を削除またはコメントアウトしてください。
<link rel="stylesheet" type="text/css" media="screen" href="<{$xoops_imageurl}>modules.css" charset="utf-8" />