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

提供: GeeklogJpWiki

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

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

headerは、<theme>/header.thtml footerは、<theme>/footer.thtmlを編集します。

目次

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

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

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

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

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

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


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

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

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


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

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

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

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

トップページに静的ページID'_toppage_content'を差し込む場合:

e.g.

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

※CUSTOM_getStaticpage()は、日本語拡張版に同梱しています。標準版には同梱していません。

または、Assistプラグインをインストールして、トップページにのみ静的ページを表示する自動タグを挿入します。

e.g.

{!!autotag assist:staticpage_content id:_toppage_content mode:home !!}

これで,トップページ(home)の場合のみ,静的ページid '_toppage_content' の内容を表示します。

バナープラグインでカテゴリheaderに複数バナーを挿入して、静的ページid '_toppage_content'には、以下の自動タグを記述することでランダムに画像を表示できます。バナープラグインの自動タグはバナータグのドキュメントを参照してください。

e.g.

{!!autotag randombanner:header !!}

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

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

ログインしている場合にログアウト等のコンテンツを記述した静的ページ'_logout' を,ログアウトしている場合にはログイン等のコンテンツ'_login'を表示させるには,以下のように記述します。

<?php
    if (COM_isAnonUser()){
        echo CUSTOM_getStaticpage('_login' );
    } else {
        echo CUSTOM_getStaticpage('_logout' );
    }
?>

その他よくつかうPHP

<?php if (COM_isAnonUser()){ ?>
        ログインしてください。
<?php } else { ?>
        ログイン中です。
<?php } ?>

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

Geeklog 1.7.1からはすべてのテンプレートで自動タグが利用できるようになりました。 自動タグ staticpage_content を利用して表示できます。

Caching Template Libraryの条件文を使う

Geeklog 2.1からは、テンプレートに複雑な条件文を記述できるようになりました。

詳しくは本家Wiki http://wiki.geeklog.net/index.php/Caching_Template_Library

ログインしているかどうかで変えたい場合の例:

{!if onlyloggedinusers}
  <div class="boldtext">Logged in users can do more here, thanks for logging in!</div>
{!else}
  <div class="boldtext">If you login, you can do more!</div>
{!endif}

テーマ変数がセットされているかどうかの判定 {var}がセットされていたら記述する

{!if var}
<li>{var}</li>
{!endif}

テーマ変数var1またはvar2がセットされていたら記述する

{!!if {var1} || {var2} !!}
<li>{var1} {var2}</li>
{!elseif}
<li>・・・</li>
{!endif}




non-SSLのときだけヘッダテンプレートに読み込む

テーマに、non-SSLのときだけ、header.thtmlに組み込みたいなら

<?php
$request_type = (strtolower($_SERVER['HTTPS']) == 'on' 
|| $_SERVER['HTTPS'] == '1' 
|| strstr(strtoupper($_SERVER['HTTP_X_FORWARDED_BY']),'SSL') 
|| strstr(strtoupper($_SERVER['HTTP_X_FORWARDED_HOST']),'SSL')) ? 'SSL' : 'NONSSL';

  if( $request_type != 'SSL'){
     echo CUSTOM_getStaticpage('_non_ssl_content');
  }

?>

テーマ変数を活用する

さらに,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;


注意:

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

// 特定ページ(idによって右ブロックを非表示にしてその他は常時表示にする
$url_current = COM_getCurrentURL();
if( strpos( $url_current, '/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'''が含まれる)のみ,右ブロックを非表示にしてその他は常時表示にする
$url_current = COM_getCurrentURL();
if( strpos( $url_current, '_no_rightblock' ) !== false ){
    $_CONF['show_right_blocks'] = false;
} else {
    $_CONF['show_right_blocks'] = true;
}


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

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

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

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


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

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]

TOP pageだけ、ブロックを表示させない

step 1. footer.thtml の {left_blocks}を以下に置き換えて、TOPページには表示させない。

<?php if( !COM_onFrontpage() ) { ?>{left_blocks}<?php } ?>    

または

<?php if( !COM_onFrontpage() ) { echo $this->get_var('left_blocks'); } ?>    


step 2. header.thtml

<body ..... class="... {home_id}">

このようにclass として日本語版パッケージで提供しているテーマ変数home_idを利用

step 3. テーマのcustom.cssに以下のようにhomeの場合のスタイルを追加。

body.left-center-right.home div#container div#wrapper div#centerblocks {
  width: 100%;
  max-width: 976px;  /*  Center Block Width =  Site All Width[W] -  Right Padding -  Left Padding */
  margin: 0;
  padding: 0;
}
個人用ツール