TOPページを特殊なレイアウトにする

出典: GeeklogJpWiki

Geeklogのページデザインは，TOPページを含めてすべて３列あるいは，２列で，TOPページのデザインだけを特別なレイアウトにする例をあまりみかけません。

が，Geeklogには，静的ページでTOPページの表示エリアで「ページ全体」というモードを選び，さらに，センターエリアにチェックすると，TOPページだけは，強制的に全画面に，指定のレイアウト（ブロックやヘッダ・フッタの表示を行うかどうか）で表示できます。

これを使って，Geeklogのページレイアウトをもっと楽しんでください。


目次

[編集]

トップページ全体レイアウト

トップページ（index.php）に対して，静的ページ機能で，どのようなレイアウトも可能です。

以下，すべてセンターエリアにチェックして，トップページに表示します。

表示エリア:ページ全体にすると，指定したレイアウトで表示します。

レイアウト:全画面表示（ヘッダ・フッタ・ブロックなし）　表示エリア:ページ全体
レイアウト:全画面表示（ヘッダ・フッタ・ブロックなし）　表示エリア:ページ全体
レイアウト:ヘッダ・フッタあり（ブロックなし）　表示エリア:ページ全体
レイアウト:ヘッダ・フッタあり（ブロックなし）　表示エリア:ページ全体
レイアウト:ヘッダ・フッタあり・左ブロックあり（右ブロックなし）　表示エリア:ページ全体
レイアウト:ヘッダ・フッタあり・左ブロックあり（右ブロックなし）　表示エリア:ページ全体
レイアウト:ヘッダ・フッタあり・左右ブロックあり　表示エリア:ページ全体
レイアウト:ヘッダ・フッタあり・左右ブロックあり　表示エリア:ページ全体
レイアウト:ヘッダ・フッタあり・ブロックなし 　表示エリア:ページ全体 コンフィギュレーションで右ブロックを常時表示のモードに指定あるいは $_CONF['show_right_blocks'] = 1; をテーマのfunctions.phpに記述
レイアウト:ヘッダ・フッタあり・ブロックなし 　表示エリア:ページ全体 コンフィギュレーションで右ブロックを常時表示のモードに指定あるいは $_CONF['show_right_blocks'] = 1; をテーマのfunctions.phpに記述

なお，ページ全体のモードで作成できる静的ページはひとつだけです。いくつも同時にページ全体で表示できるわけではないので当然ですが。最後に指定したページが有効になります。


[編集]

トップページ部分レイアウト

以下は，トップページの一部にレイアウトする方法です。そのため，レイアウトモードは無視されます。

表示エリア:ページの最上部
表示エリア:ページの最上部
表示エリア:注目記事の下
表示エリア:注目記事の下
表示エリア:ページの下部
表示エリア:ページの下部


[編集]

トップページのヘッダだけに特別にコンテンツを埋め込む

また，ＴＯＰページだけ，ヘッダに，Flashなどのコンテンツを埋め込みたい場合も多いでしょう。

ＴＯＰページだけに特定の静的ページコンテンツを埋め込む
ＴＯＰページだけに特定の静的ページコンテンツを埋め込む

そのような場合には，テンプレートheader.thtmlの，コンテンツを埋め込みたい場所に，次のコードを入れます。 

<?php if( COM_onFrontpage() ) { echo CUSTOM_getStaticpage('toppage_content' ); } ?>

これで，トップページ（home）の場合のみ，静的ページid toppage_content の内容を表示します。

静的ページid toppage_contentを作成すれば，トップページのみ，特別なデザインを差し込むことが可能になり，差し込むコンテンツは静的ページ管理画面でいつでも自由に変更できます。この静的ページをFlashなどのHTMLコンテンツだけでなく，PHPで記述すれば，さらに動的なページも可能です。

CUSTOM_getStaticpage()は，日本語拡張版で配布しています。

なお，PHPを埋め込めるテンプレートはheader.thtmlだけです。利用できる関数は，Wikiの開発者用ページGeeklog共通ライブラリ，特にlib-common.phpをご覧ください。

なお，phpを埋め込めるテンプレートは，ヘッダのみです。


[編集]

ヘッダテンプレートでPHPを使う

ヘッダテンプレート　header.thtmlでは，テンプレートで唯一，PHPを記述できます。

ログインしている場合にのみ，ログアウトへのリンクを表示させるには，以下のように記述します。 

<?php
 if (!empty ($_USER['uid']) && ($_USER['uid'] > 1)) {
        //ログアウト
        echo '<a href="/users.php?mode=logout">ログアウト</a>';
    } 
?>

使える関数は，Geeklog共通ライブラリ。


[編集]

テーマ変数を活用する

さらに，header.thtmlでは，テーマ変数として{home_id}{topic_id}{sp_id}{login_status}などが利用できます。詳しくは日本語化プラグインの管理画面をご覧ください。これを活用して話題別，静的ページ別，あるいはログイン前，ログイン後で異なるレイアウトが可能になります。

テーマ変数の利用例として，たとえば，ヘッダ内に次のようなスタイルシート読み込みを定義することで，話題別のスタイルを指定することが可能です。 <link rel="stylesheet" type="text/css" href="{layout_url}/topic_{topic_id}.css" title="○○"> topic_話題ID.css（話題の数だけ） topic_,css を用意しておきます。topic_,cssは，スタイルだけ定義して中身は空白にしておきます。

静的ページであれば，次のように指定します。 <link rel="stylesheet" type="text/css" href="{layout_url}/sp_{sp_id}.css" title="○○">

sp_静的ページID.css（静的ページの数だけ） sp_css を用意しておきます。sp_.cssは，スタイルだけ定義して中身は空白にしておきます。

テーマ変数は，標準でセットされたカスタム関数CUSTOM_templateSetVars()　にいくらでも追加して利用できます。


[編集]

ブロックごとに見栄えを変える

ブロックごとに，異なるテンプレートを指定する方法があります。

Geeklogには$_BLOCK_TEMPLATEがあるので，それをfunctions.phpで指定します。 例： 

 $_BLOCK_TEMPLATE['abc'] = 'blockheader-abc.thtml,blockfooter-abc.thtml';

これは，abcブロックなら　 'blockheader-abc.thtml,blockfooter-abc.thtml';　を使う，というものです。

これで，ブロックごとに，異なる見栄えが実現できます。

professionalテーマのfunctions.phpを参考にしてください。


[編集]

左ブロック｛leftblock｝をフッタに置く

functions.phpに以下の行を追記してください。 

$_CONF['left_blocks_in_footer'] = 1;


注意：

左ブロックをフッタに置くと，左ブロックを非表示にできない不具合があります。 そのためたとえば，静的ページの先頭idが_なら，ブロックを両方表示させない 場合には，以下のようにfunctions.phpに追記します。 

// 特定ページ（idによって右ブロックを非表示にしてその他は常時表示にする
if( strpos( $_SERVER['PHP_SELF'], '/staticpages/index.php/_' ) !== false ){
    $_CONF['left_blocks_in_footer'] = 0; // 1: 左ブロックを右側に配置したいとき 
    $_CONF['show_right_blocks'] = false;
} else {
    $_CONF['left_blocks_in_footer'] = 1; // 1: 左ブロックを右側に配置したいとき 
    $_CONF['show_right_blocks'] = true;
}


[編集]

右ブロック｛rightblock｝を常時表示する

$_CONF['show_right_blocks'] = true;

コンフィギュレーションで設定できますが，そうすると，すべてのテーマに対して行われるので，該当テーマだけに有効になる，テーマ内のfunctions.phpで記述するのがおすすめです。

特定ページ（idに_no_rightblockが含まれる）のみ，右ブロックを非表示にしてその他は常時表示にする場合は，以下のコードをfunctions.phpに記述してください。 

// 特定ページ（idに'''_no_rightblock'''が含まれる）のみ，右ブロックを非表示にしてその他は常時表示にする
if( strpos( $_SERVER['PHP_SELF'], '_no_rightblock' ) !== false ){
    $_CONF['show_right_blocks'] = false;
} else {
    $_CONF['show_right_blocks'] = true;
}


[編集]

すべてに共通する便利な活用方法

静的ページや記事，ブロックに静的ページのコンテンツを埋め込む場合は，自動タグ［staticpage_content:id］を利用してください。

その他，Geeklogが標準で提供している自動タグを活用すると便利です。

さらに，自動タグプラグインをインストールして，自動タグを自由に作成して利用してください。自動タグには２つまで引数を指定できます。


[編集]

特定ページだけ特定ページのコンテンツを表示させる

assistプラグインをインストールして、次の自動タグを利用することにより、特定のURLだけ，そのコンテンツを表示させることが可能になります。通常この自動タグを、ブロックのノーマルモードで記述します。自動タグを使う　にチェックして利用してください。 

[assist:staticpage_content id:静的ページID urlkey:URLの一部]

URLにurlkeyが含まれるページにのみ、指定された静的ページidのコンテンツを表示します。

これで、特定の静的ページの表示の際にのみ、特定のブロックに、指定された静的ページidのコンテンツを表示したり、 特定のプラグインの表示の際にのみ、特定のブロックに、指定された静的ページidのコンテンツを表示できます。

例:お問い合わせページ表示の際に、静的ページfor_contact_blockのコンテンツを特定のブロックに表示する 

[assist:staticpage_content id:for_contact_block urlkey:staticpages/index.php/contact]

例:カレンダーjpプラグイン表示の際にのみ、静的ページfor_event_blockのコンテンツを特定のブロックに表示する 

[assist:staticpage_content id:for_event_block urlkey:calendarjp]
"http://wiki.geeklog.jp/index.php/TOP%E3%83%9A%E3%83%BC%E3%82%B8%E3%82%92%E7%89%B9%E6%AE%8A%E3%81%AA%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88%E3%81%AB%E3%81%99%E3%82%8B" より作成
English German French