XOOPSサイトの外観(テンプレート)作成方法 の印刷用ページ

XOOPSサイトの外観は、いわゆるXOOPSテーマのテンプレートと言われるもので、XOOPSのthemesフォルダ内にもオリジナルのテンプレートが梱包されています。そのままオリジナルテンプレート内のフォルダ内に設置されているtheme.htmlとstyle.cssを変更することによって色、デザインなどサイトの概観を変更することも可能です。もし最初から自分でテンプレートを作成するのにはそれなりの労力と時間が必要となり、自由に変えることができるとはいうもののデザインのセンスがなければかなり困難でしょう。

手っ取り早く綺麗なテンプレートを組み入れるにはXOOPSテーマのテンプレート作成サイトから既に作成されたテンプレートを探し出しそのまま組み込むことです。しかしながら無料のテンプレートで探すとしても以前に比べて格段に作成サイトが少なくなってきたのは否めません。なかなか自分の気に入ったものが見つからないというのが現状です。

もう1つの方法は、一般のスマートフォン対応のフリーのテンプレートの中から気に入ったものを探し出し編集して組み込むという方法があります。実際このサイトもこの方法で作成しています。フリーのWebテンプレートは検索サイトで「free css web template」と検索すれば無料のテンプレートサイトを探し出すことができます。

ただし、ほとんど英語が主体になっていて、そのまま日本語で表示すると外観イメージが全く違うものになってしまいます。従って主にフォントの大きさ、種類などCSSの変更は余儀なくしなければなりません。また、選択したテンプレートによっては特色があり場合によってはxoopsのテーマとしてうまく反映されなかったり、あるいはXOOPS各モジュール内のテンプレートを変更する必要性が出てきたりします。

以下では、このフリーのテンプレートを探し出し組み込むという方法の要点を備忘録として記録しておきたいと思います。実施にあたって、まずは選択したテンプレートがローカルサーバーで使い物になるかどうかをテストした方が無難です。
  1. テンプレートを選択する
    自分の気に入ったテンプレート(できればスマートフォン対応のテンプレートを選択)を探し出しダウンロードします。
  2. XOOPSテンプレート設置場所
    設置場所は、HTML(サイトのURL)/themes/ここに名前を付けたテンプレートフォルダ(CSS、SCRIPTなどが含まれている)を設置
  3. theme.htmlを作成する
    選択したテンプレートフォルダの中には本体(index.html)、右サイドバー(right-sidebar)、左サイドバー(left-sidebar)のテンプレートが含まれている場合があります、その場合、どれをテンプレートとして利用するかを決定し、そのテンプレートをtheme.htmlと名前を変更します。
  4. レイアウトを決定する
    もともとxoopsのテーマは4列、下記の5つのブロックで構成されています。
    中央-中央ブロック
    中央-左ブロック
    中央-右ブロック
    左ブロック
    右ブロック
  5. 上記の5つのブロックを3で決定したtheme.htmlの中にどう配置するか予め決定します。
次にXOOPS内に納められている記事等の情報をtheme.html上に表示するにはXOOPS Smarty変数を利用して反映します。
以下必要なXOOPS Smarty変数の具体的利用方法を掲載しています。
  1. テンプレートの<head>~</head>間を編集する<br>
    xoopsではthemesフォルダ内のテンプレートフォルダ内にCSS、SCRIPTなどが含まれている為、オリジナルのままではこれらは反映されません。この場合、XOOPS Smarty変数を利用してフォルダ内のファイルにアクセスします。

    例えば
    <link rel="stylesheet" href="assets/css/main.css" />
    ・<{$xoops_imageurl}>=現在のテーマまでのURLを表示
    <link rel="stylesheet" href="<{$xoops_imageurl}>assets/css/main.css" />

    となります。同様にオリジナルテンプレート内のファイルにアクセスするものは全て編集します。
    また以下のようなXOOPS独自のスマーティ変数についても追加します。
    ・サイト名とページタイトルの表示
    <title><{$xoops_sitename}> - <{$xoops_pagetitle}></title>
    ・サイトの文字コード(※XOOPSのサイトがの文字コード(通常UTF-8)と選択したテンプレートの文字コードが一致しないと不具合が発生します。)
    <meta charset="<{$xoops_charset}>" />
    ・METAタグ(ROBOTS) ロボット型検索エンジンへの対応
    <meta name="robots" content="<{$xoops_meta_robots}>" />
    ・METAタグ(キーワード) サイトの内容を表すものです。
    <meta name="keywords" content="<{$xoops_meta_keywords}>" />
    ・METAタグ(Description) サイトの内容を説明する一般的なタグです。
    <meta name="description" content="<{$xoops_meta_description}>" />
    ・METAタグ(RATING)閲覧対象年齢層の指定
    <meta name="rating" content="<{$xoops_meta_rating}>" />
    ・METAタグ(作成者)
    <meta name="author" content="<{$xoops_meta_author}>" />
    ・METAタグ(コピーライト)サイト上の情報に対するの著作権情報を定義します。
    <meta name="copyright" content="<{$xoops_meta_copyright}>" />
    ・生成元
    <meta name="generator" content="XOOPS Cube" />
    ・各モジュールヘッダーの追加
    <!-- RMV: added module header -->
    <{$xoops_module_header}>
    ・xoopsのjavascriptの読み込みを行う
    <script type="text/javascript">
    <!--
    <{$xoops_js}>
    // -->
    </script>

  2. テンプレートの<body>~</body>間を編集する
    4で決定したレイアウトに従って表示させたい部分を編集します。
    各モジュールの記事内容については
    <{$xoops_contents}>
    で表示します。

    これと5つのブロック表示を行います。各5ブロックの基本的な表示方法は
    中央-中央ブロックの表示 = $xoops_ccblocks
    中央-左ブロックの表示 = $xoops_clblocks
    中央-右ブロックの表示 = $xoops_crblocks
    左ブロックの表示 = $xoops_lblocks
    右ブロックの表示 = xoops_rblocks
    を利用して表示します。

    表示したい位置に下記のようなブロックを設置します。
    例えば$xoops_ccblocks =中央-中央ブロックの表示の場合、

    <{if $xoops_showcblock == 1}>
    <{foreach item=block from=$xoops_ccblocks}>
    <{if !$block.title|strstr:"none"}>
    <h2><{$block.title}></h2>
    <{/if}>
    <div><{$block.content}></div>
    <{/foreach}>
    <{/if}>


    となります。
  3. 管理画面→互換モジュール→全般設定の変更
    デフォルト・サイトテーマの一覧から編集したテンプレートフォルダを選択する
    themes/ ディレクトリからの自動アップデートを有効にする の項目を「はい」に設定する
基本的な編集は以上です。これでサイトに組み込んだテーマが反映されます。あとは自分のイメージ通りに表示されるか確認を行います。場合によってはもともとのXOOPSオリジナルCSSも追加する必要があります。また各モジュールのテンプレート内で固定したtableタグが使われているなどしているとスマートフォンには反映されないのでモジュールのテンプレートを変更する必要性もあります。