Websiteテーマの構成

※このウェブサイトは「Websiteテーマ」をベースに構築されています。

テーマの作成方法については「テーマの作成」ドキュメントをご覧ください。

テーマの適用

  • システムまたはワークスペースメニューの「ツール」から「テーマの管理」を選択して表示
  • 「Website」テーマを選択
  • 「適用」をクリックして、テーマを適用

テーマの管理画面

テーマのサムネイル

テーマの構成要素

※ このドキュメントは、Ver1.001 のWebサイトテーマをベースに書かれています。Ver1.0とは構成が異なりますのでご注意ください。

メニュー

メニューとは、これまでの PowerCMSにはなかったもので、URLをグループ化したものです。出力されたアーカイブであればモデルによらずウェブページ、記事、一覧、カテゴリなど、どんなページでも含めることができます。

メニューの編集

ウェブページ

トップページのメインビジュアル部分や、並んでいる各ブロックは、非公開のページをインクルードしています。mt:pagesブロックタグに include_draft="1"属性を指定することで、非公開のページを含めることができます。

ウェブページの編集画面

ウィジェット

ウィジェットは、テキストブロック、背景画像、背景色、文字色を指定できるブロックです。class指定により様々な装飾付きブロックを作成できます。ウェブページに複数指定可能な関連付けが設定されており、Websiteテーマでは、メインページとなるウェブページにトップページに並べたいウィジェットを関連づけてページを構成しています。

ウィジェットの編集

タグ「@main_page」の付いた非公開のウェブページを1件読み込むビュー

<mt:setcontext context="tag" name="@main_page" container="page">
  <mt:pages limit="1" include_draft="1" cols="id" include_workspaces="this">
    <mt:pagewidgets class="jumbotron">
      <mt:include module="(Website) Main Page Widget" widget_class="jumbotron">
    </mt:pagewidgets>
  </mt:pages>
</mt:setcontext>

インクルード・モジュール「(Website) Main Page Widget」

<div class="<mt:var name="widget_class" escape> widget-panel <mt:widgetbasename>" style="background-color:<mt:widgetbackcolor escape>; color:<mt:widgetforecolor escape>;<mt:if tag="widgetimageurl">background-image:url(<mt:widgetimageurl>)</mt:if>">
  <mt:widgetbackcolor escape setvar="widgetbackcolor">
  <div style="background-color:rgba(<mt:hex2rgba hex="$widgetbackcolor">)">
    <mt:if name="widget_class" eq="jumbotron">
      <mt:widgetbody convert_breaks="auto" decode_html _eval="1">
    <mt:else>
      <mt:widgetbody convert_breaks="auto" _eval="1">
    </mt:if>
  </div>
</div>

フォーム

問い合わせフォームを作成できるモデルです。これまでの PowerCMS とほぼ同様の方法で作成・管理ができます。ビュー(テンプレート)単位でフォームを関連づけることができ、トップページのビューに、お問い合わせ(Contuct US)フォームを関連付け設定しています。

フォームの編集

記事

時系列で管理できる、これまでの PowerCMSの記事に相当するものですが、PowerCMS Xでは、例えばページ、ウィジェットなど、あらゆるモデルを時系列で管理できます。WebSiteテーマでは、トップページに最新記事、最新記事一覧、年別記事一覧、カテゴリ別記事一覧が含まれます。

テーマのカスタマイズ

テーマの言語切り替え

Websiteテーマは、日本語と英語に対応しています。言語を切り替えるには、システムまたはスペースの右上の「設定」から設定画面に遷移し、「言語設定」を変更してから再構築してください。

ローカライズに対応するビューは、transファンクションタグか、languageモディファイアを利用します。

<mt:trans phrase="Latest News" language="$language">
<mt:var name="archive_title" language="$language">

テーマの配色の変更

各ビューの先頭で読み込んでいる「(Website) Site Config」の中で、body_class変数を空の値にすると、グレーを基調とした配色に「black」を指定すると、(このウェブサイトのような配色)黒ベースの配色になります。

<mt:setvar name="body_class" value="cerezo">