テンプレートのカスタマイズ [Plone3.3]

不要な機能は非表示にするなどの設定を行う。テンプレートやスタイルシートとして提供されているものはスキンフォルダにコピーして編集すれば良い。

新しいスキンの追加

portal_skins の Properties で設定する。Plone のデフォルトでは Plone Default というスキンになっている。Plone ではスキンは機能毎に細かく分かれていて、Layers 欄の上のフォルダ内から順番に探して、一番最初に見つかったものが利用される。Plone Default スキンでは、変更したいもののみ portal_skin/custom にコピーして編集すれば変更される。

レイヤの追加

変更点を全て custom フォルダ内で行ってもよいが、プロダクト等ごとにレイヤを追加することでわかりやすくなる。工学ではPlone Default スキンに univ_skins レイヤを追加して各サイト共通の CSS を記述する。 テンプレート等の格納フォルダとして portal_skins 内に新しくスキン格納用のフォルダ（univ_skins）を追加しておく。Layers の custom 直下に新しく作ったフォルダを書くことで、このフォルダに作成すると custom の次に優先して適用されることになる。

Layers :
   custom
   univ_skins
    :
   以下 Plone Default の Layers と同じ

スキンの追加

さらに新しくスキンを作成する。まず上記同様、 portal_skins 内に新しくスキン格納用のフォルダ（skin_xxx）をスキンごとに追加しておく。次に portal_skins の Properties タブを開き Add a new skin より新しくスキンを追加する。

Name : School Skin xx
Layers :
   custom
   skin_xxx
   univ_skins
    :
   以下 Plone Default の Layers と同じ

以上で追加したスキンを、Plone上のサイト設定→テーマから選択できるようになる。

スタイルシートの登録

スタイルシートは PloneCustom.css をスキンフォルダにコピーして、変更部分のみ追加すれば設定できる。これとは別に独自のスタイルシートファイルを作成するには portal_css に登録することで利用できる。あらかじめ、スキンフォルダにここで登録する CSS ファイルを作成しておく。

スタイルシートの追加

Add a new stylesheet より、次の設定を追加する。ここでは kyotouniv.css という名前の CSS ファイルを登録する。

ID : kyotouniv.css
Title : Kyoto Univ CSS
CSS Media : all

自動的に ploneCustom.css の次に優先される CSS となるが、これは順番を入れ替えることで設定できる。

テンプレート

検索結果の修正

portal_skins/plone_forms/search をスキンフォルダにコピーして編集する。

検索結果に検索ボックスやアドバンス検索へのリンクを表示しない

  <form name="searchform" 
        action="search"
-       class="searchPage">
+       class="searchPage" tal:condition="nothing">

検索結果にこの検索結果のフィード(RSS)配信を購読するを表示しない

  <p class="discreet"
-    tal:condition="syntool/isSiteSyndicationAllowed">
     tal:condition="nothing">

検索結果に作成者等を表示しない

  <span class="documentAuthor"
-     i18n:translate="label_by_author">
+     i18n:translate="label_by_author" tal:condition="nothing">

検索結果にカテゴリを表示しない

  <span tal:define="categories result/Subject|nothing"
-     tal:condition="categories">
-     tal:condition="nothing">

検索結果に関連性を表示しない

  <span class="relevance" 
-     tal:condition="result/data_record_normalized_score_">
+     tal:condition="nothing">

検索結果にコンテンツタイプのアイコンを表示しない

- <img tal:replace="structure item_icon/html_tag" />

公開プロセスの修正

portal_skins/plone_forms/content_status_history をスキンフォルダにコピーして編集する。

説明文を表示しない

- <p i18n:translate="description_publishing_process_short">
+ <p i18n:translate="description_publishing_process_short" tal:condition="nothing">

発行日時を表示しない

- <div class="field" tal:define="error errors/effective_date | nothing;">
+ <div class="field" tal:define="error errors/effective_date | nothing;"
+      tal:condition="nothing">
    <label i18n:translate="label_effective_date">Publishing Date</label>

終了日時を表示しない

  <div class="field"
-      tal:define="error errors/expiration_date | nothing;">
+      tal:define="error errors/expiration_date | nothing;"
+      tal:condition="nothing">
    <label i18n:translate="label_expiration_date">Expiration Date</label>

コメント欄を表示しない

- <div class="field">
+ <div class="field" tal:condition="nothing">
    <label for="comment"

アドバンス検索画面を消去する

portal_skins/plone_forms/search_form  をスキンフォルダにコピーして編集する。

- <div metal:fill-slot="main">
+ <div metal:fill-slot="main" tal:condition="nothing">

連絡フォームにアクセスしても表示しないようにする

portal_skins/plone_templates/contact-info をスキンフォルダにコピーして編集する。

  <div metal:fill-slot="main"
-      tal:define="email_from_address portal/email_from_address">
+      tal:define="email_from_address portal/email_from_address" tal:condition="nothing">

authorにアクセスしても表示しないようにする。

portal_skins/plone_content/author をスキンフォルダにコピーし変更する。

  <metal:main fill-slot="content"
-     tal:define="errors options/state/getErrors;">
+     tal:define="errors options/state/getErrors;" tal:condition="nothing">

folder listing での作成者へのリンクを表示しない

portal_skins/plone_content/folder_listing をスキンフォルダにコピーして編集する。Title 欄は「Standard view」とする必要がある。

- <a href="#"
-    tal:attributes="href
-        string:${context/@@plone_portal_state/navigation_root_url}/author/${item_creator}"
-    tal:content="python:author and author['fullname'] or item_creator"
-    tal:omit-tag="not:author">
-   Bob Dobalina
- </a>
+ <span
+     tal:content="python:author and author['fullname'] or item_creator"
+     tal:omit-tag="not:author"
+     i18n:name="author">
+    Bob Dobalina
+ </span>

folder_tabular_view での作成者へのリンクを表示しない

portal_skins/plone_content/folder_tabular_view をスキンフォルダにコピーして編集する。Title 欄は「Tabular view」とする必要がある。

- <a href="#"
-    tal:attributes="href
-        string:${context/@@plone_portal_state/navigation_root_url}/author/${item_creator}"
-    tal:content="python:author and author['fullname'] or item_creator"
-    tal:omit-tag="not:author">
-   Bob Dobalina
- </a>
+ <span
+     tal:content="python:author and author['fullname'] or item_creator"
+     tal:omit-tag="not:author">
+    Bob Dobalina
+ </span>

ファイルビューでテキストの内容を非表示

portal_skins/plone_content/file_view をスキンフォルダにコピーして編集する。

- <div tal:condition="python: content_type.startswith('text')">
+ <div tal:condition="nothing">

RSS出力項目を変更する

デフォルトの RSS 出力では、ページの作成者等も出力されてしまうため、これをタイトル、リンク、説明、最終更新日のみ出力するように変更する。portal_skins/plone_templates/rss_template をスキンフォルダにコピーして編集する。

- <tal:block repeat="brain python: objects">
-   :
- </tal:block>

+ <tal:block repeat="brain python: objects">
+     <item rdf:about="" tal:attributes="rdf:about obj_item/getURL|obj_item/absolute_url"
+                        tal:define="obj_item brain/getObject|nocall:brain">
+         <title tal:content="obj_item/pretty_title_or_id">Title</title>
+         <link tal:content="obj_item/Identifier">Identifier</link>
+         <description tal:content="obj_item/Description">
+             Description
+         </description>
+         <dc:date tal:define="date python: obj_item.effective() or obj_item.modified()"
+                  tal:content="python: date.HTML4()">Effective date</dc:date>
+     </item>
+ </tal:block>

ページにページトップへのリンクを作成する

portal_skins/plone_content/document_view をスキンフォルダにコピーして編集する。

+ <div id="pagetop">
+ <a href="#" tal:attributes="href string:#visual-portal-wrapper">Page Top</a>
+ </div>

</tal:main-macro>

イベントタイプの修正

イベントのタイトル直下に掲載日欄を設ける

portal_skins/plone_content/event_view をスキンフォルダにコピーして編集する。

  <div tal:replace="structure provider:plone.belowcontenttitle" />

+ <div class="posted_date">
+     <div tal:replace="python:test(language=='ja', u'\u63b2\u8f09\u65e5 : ', 'Posted : ')">
+         Posted :
+     </div>
+     <div tal:replace="python:here.toLocalizedTime(here.Date())">
+         2008/02/13
+     </div>
+ </div>

イベントにイベントの種類を表示しない

portal_skins/plone_content/event_view をスキンフォルダにコピーして編集する。

- <tr>
-     <th i18n:translate="event_what">What</th>
-     <td>
-         <metal:field use-macro="python:here.widget('subject', mode='view')">
-         Categories
-         </metal:field>
-     </td>
- </tr>

イベントをカレンダーへ追加にvCalを表示しない

portal_skins/plone_content/event_view をスキンフォルダにコピーして編集する。

- <a href="#"
-       tal:attributes="href string:$here_url/vcs_view"
-       title="Add this item to your vCal calendar"
-       i18n:attributes="title title_add_to_vcal;">
-        <img tal:replace="structure here/icon_export_vcal.png" src="" alt="" />
-        <span i18n:translate="label_add_to_vcal">vCal</span></a><br />

イベントの日付表示方法の変更

開催日時を「（開始日時）-（終了日時）」の形式に変更する。開始日時と終了日時が同じであれば終了日時を表示しない。portal_skins/plone_content/event_view をスキンフォルダにコピーして編集する。

  <tal:differentday tal: ...
    :
        <span metal:define-slot="inside" 
+             tal:define="notime python:here.start().AMPMMinutes() == '12:00 am' and here.end().AMPMMinutes() == '12:00 am'"
              class="explain"
-             tal:content="python:here.toLocalizedTime(here.start(),
+             tal:content="python:test(notime, toLocalizedTime(here.start()), toLocalizedTime(here.start(),
-             long_format=1)">Start Date Time</span>
+             long_format=1))">Start Date Time</span>
      </abbr>
-     <span i18n:translate="event_to">to</span> <br />
+     - 
    :
        <span metal:define-slot="inside"
+             tal:define="notime python:here.start().AMPMMinutes() == '12:00 am' and here.end().AMPMMinutes() == '12:00 am'"
              class="explain"
-             tal:content="python:here.toLocalizedTime(here.end(),
+             tal:content="python:test(notime, toLocalizedTime(here.end()), toLocalizedTime(here.end(),
-             long_format=1)">End Date Time</span>
+             long_format=1))">End Date Time</span>
      </abbr>
  </tal:differentday>
  <tal:sameday tal: ...
    :
-     <span i18n:translate="event_from">from</span>
-     <span i18n:translate="event_to">to</span>
+     - 
      <abbr metal:define-macro="enddatesame-field-view"
+         tal:condition="python:not here.start().AMPMMinutes() == here.end().AMPMMinutes()"

ログアウト時に表示ページに戻る

ログアウト時にログインフォームではなく、表示していたページを表示する。portal_skins/plone_login/logged_out をスキンフォルダにコピーして編集する。

+ <div tal:condition="came_from" tal:content="python:request.RESPONSE.redirect(came_from)" />
  <div tal:condition="python: not auth" i18n:translate="login_form_disabled">

404ページを変更する

portal_skins/plone_templates/default_error_message をスキンフォルダにコピーして編集する。次のタグの中身を更新すれば良い。

<div tal:condition="python:err_type=='NotFound'">

工学では次の部分を表示しないように変更する。

- <p i18n:translate="description_site_error_mail_site_admin">
+ <p i18n:translate="description_site_error_mail_site_admin" tal:condition="nothing">

  :

- <p i18n:translate="description_site_error_thank_you">
+ <p i18n:translate="description_site_error_thank_you" tal:condition="nothing">

選択されたグローバルタブに応じたCSS変更用のタグを追加

コンテンツ全体を囲む div タグに、選択されたグローバルタブの id とページの言語識別用のタグを、class 属性として付与しておく。portal_skins/plone_templates/main_template をスキンフォルダにコピーして編集する。

- <div id="visual-portal-wrapper">
+ <div id="visual-portal-wrapper"
+      tal:attributes="class python:'site-' +
+          here.selectedTabs('index_html', here, portal_tabs)['portal']
+          + ' lang-'  + here.Language()">

folder_listing で File タイプのものには直接ダウンロードリンクを付ける

スキンフォルダにダウンロードリンク用の画像を file_save.png という名前で作成しておく。次に、portal_skins/plone_content/folder_listing をスキンフォルダにコピーして編集する。

       Item Title
   </a>
+   &nbsp;
+  <a href="#"
+      tal:condition="python:item_type == 'File'"
+      tal:attributes="href python:item_url+'/download'">
+       <img src="file_save.png">
+  </a>

最上位フォルダにリダイレクトするスクリプトを作成する

あるフォルダにアクセスしたときに、index.htmlがなければフォルダ内の一番上のフォルダにリダイレクトする機能を付けるため、次のようなスクリプトを作成する。スクリプト名は topContent としてスキンフォルダに作成する。

REQUEST=context.REQUEST

obj_path = '/'.join(context.getPhysicalPath())
results = context.portal_catalog.searchResults(
    id = 'index.html',
    path = {'query' : obj_path, 'depth' : 1} )
if results:
    url = context.absolute_url() + '/index.html'
else:
    results = context.portal_catalog.searchResults(
        Type = 'Folder',
        path = {'query' : obj_path, 'depth' : 1},
        sort_on = 'getObjPositionInParent', )
    if results:
        url = context.absolute_url() + '/' + str(results[0].id)
    else:
        url = context.absolute_url()

REQUEST.RESPONSE.redirect(url)

呼び出し方は

http://plone/FolderA/topContent

と呼び出すことで、index.html がなければ FolderA フォルダ内の最上位フォルダが開かれる。FolderA 内にフォルダがない場合は、FolderA が開かれる。これを portal_actions などで指定すれば実現できる。

リンクに相対パスの指定可とする

リンクに相対パスを指定し、リンクをフォルダのデフォルトビューとした場合、リンク先の階層がずれてしまうため、これを修正する。portal_skins/plone_content/link_redirect_view をスキンフォルダにコピーして編集する。

   if redirect_links and not can_edit:
-      return context.REQUEST.RESPONSE.redirect(context.getRemoteUrl())
+      remote_url = context.getRemoteUrl()
+      if remote_url[:7]!='http://' and remote_url[:8]!='https://':
+          remote_url = context.aq_parent.absolute_url() + '/' + remote_url
+      return context.REQUEST.RESPONSE.redirect(remote_url)

 

CSS

状態の変更に「ポリシー」を表示しない

dl#plone-contentmenu-workflow a#policy { display: none; }

新規項目を追加に「制限」を表示しない

dl#plone-contentmenu-factories a#settings { display: none; }

Kupuで「現在の列を整列」を非表示とする

#kupu-tabledrawer-alignchooser{ display: none; }

イベントの編集ページからイベントの種類を隠す

#event-base-edit #archetypes-fieldname-eventType { display: none; }

イベントの編集ページから参加できる方を隠す

#event-base-edit #archetypes-fieldname-attendees { display: none; }

編集ページの「分類」から各項目を隠す

関連項目

#archetypes-fieldname-relatedItems { display: none; }

場所

#archetypes-fieldname-location { display: none; }

編集ページから「所有者」を隠す

 #fieldsetlegend-ownership { display: none; }

編集ページの「設定」から各項目を隠す

コメントを許可する

#archetypes-fieldname-allowDiscussion { display: none; }

ナビゲーションに含まない

#archetypes-fieldname-excludeFromNav { display: none; }

次／前ナビゲーションを有効にする

#archetypes-fieldname-nextPreviousEnabled { display: none; }

プレゼンテーションモード

#archetypes-fieldname-presentation { display: none; }

コンテンツ一覧

#archetypes-fieldname-tableContents { display: none; }

編集ページから変更メモを隠す

#cmfeditions_version_comment_block { display: none; }

編集ページから「説明」を隠す

#archetypes-fieldname-description { display: none; }