テンプレートのカスタマイズ [Plone4.0]
不要な機能は非表示にするなどの設定を行う。テンプレートやスタイルシートとして提供されているものはスキンフォルダにコピーして編集すれば良い。
テンプレート
メインテンプレートの修正
portal_skins/sunburst_templates/main_template をスキンフォルダにコピーして編集する。
IE9でエディタが動作しない点の対応
IE9でTinyMCEが動作しないため、metaタグを変更してIE8モードで表示されるように対処しておく。
- <meta http-equiv="X-UA-Compatible" content="IE=edge" /> + <meta http-equiv="X-UA-Compatible" content="IE=emulateIE8" />
選択されたポータルタブのidクラス属性を追加
コンテンツ全体を囲む div タグに、選択されたポータルタブの id 識別用のタグを、class 属性として付与しておく。
- <div id="visual-portal-wrapper">
+ <div id="visual-portal-wrapper"
+ tal:define="actions python:context.portal_actions.listFilteredActionsFor(context);
+ portal_tabs actions/portal_tabs | python:[];
+ selected_tab python:here.selectedTabs('index_html', here, portal_tabs)['portal'];"
+ tal:attributes="class python:'site-' + selected_tab">
検索結果の修正
portal_skins/plone_forms/search をスキンフォルダにコピーして編集する。
検索結果に検索ボックスやアドバンス検索へのリンクを表示しない
<form name="searchform"
action="search"
class="searchPage"
- tal:condition="not:is_advanced_search">
+ tal:condition="nothing">
検索結果にこの検索結果のフィード(RSS)配信を購読するを表示しない
<p class="discreet" - tal:condition="context/portal_syndication/isSiteSyndicationAllowed"> + tal:condition="nothing">
検索結果に作成者等を表示しない
<span class="documentAuthor" - i18n:translate="label_by_author"> + i18n:translate="label_by_author" tal:condition="nothing">
検索結果にカテゴリを表示しない
<span tal:define="tags result/Subject|nothing" - tal:condition="tags"> + tal:condition="nothing">
イベントテンプレートの修正
日付表示方法の変更
開始日時と終了日時が同じであれば終了日時を表示しないようにする。表示形式は「開始時刻 - 終了時刻」のようにする。portal_skins/plone_content/event_view をスキンフォルダにコピーして編集する。
<th i18n:translate="event_when">When</th>
- <td>
+ <td class="when">
:
<tal:sameday tal:condition="python:context.start().Date() == context.end().Date()" : - i18n:translate="event_when_sameday"> + > <span tal:replace="python:toLocalizedTime(context.start())" - i18n:name="date"> + > Start Date Time</span> - <br i18n:name="linebreak" /> - from : - i18n:name="starttime"> + > : - </abbr> to + </abbr> - <abbr metal:define-macro="enddatesame-field-view" + tal:condition="" : - i18n:name="endtime"> + >
イベントのiCalリンクをタイトル直下に移動
portal_skins/plone_content/event_view をスキンフォルダにコピーして編集する。
+ <div class="social-links" style="text-align:right; margin: 0 10px 10px 0;">
+ <a href="#"
+ tal:define="here_url context/@@plone_context_state/object_url;"
+ tal:attributes="href string:$here_url/ics_view"
+ title="Download this event in iCal format"
+ i18n:attributes="title title_add_to_ical;"
+ style="border: none;"
+ class="ical">
+ <img tal:replace="structure context/icon_export_ical.png" src="" alt="" />
+ <span i18n:translate="label_add_to_ical">iCal</span>
+ </a>
+ </div>
<div class="eventDetails vcard">
:
- <tr>
+ <tr tal:condition="nothing">
<th i18n:translate="heading_add_to_calendar">Add event to calendar</th>
イベントの連絡先名称・メール・電話番号を同じセルにまとめる
portal_skins/plone_content/event_view をスキンフォルダにコピーして編集する。
<tr tal:define="contact_email context/contact_email;
+ contact_phone context/contact_phone;
contact_name python:context.contact_name() or None;"
- tal:condition="python:contact_name or contact_email">
+ tal:condition="python:contact_name or contact_email or contact_phone">
- <th i18n:translate="contact_name">Contact Name</th>
+ <th tal:content="python:test(context.Language()=='ja',u'\u9023\u7d61\u5148','Contact')">Contact</th>
<td class="contact">
- <a id="parent-fieldname-contactEmail"
- tal:condition="contact_email"
- tal:replace="structure python: context.spamProtect(mailaddress=contact_email, mailname=contact_name, cssclass='email fn')" />
- <span class="fn"
- tal:condition="not: contact_email"
- tal:content="contact_name" />
+ <div class="contact_name"
+ tal:condition="contact_name"
+ tal:content="contact_name" />
+ <div class="contact_email"
+ tal:condition="contact_email">
+ <a tal:replace="structure python: context.spamProtect(mailaddress=contact_email, mailname=contact_email, cssclass='email fn')" />
+ </div>
+ <div class="contact_phone"
+ tal:condition="contact_phone">
+ <metal:field use-macro="python:context.widget('contactPhone', mode='view')">Phone number</metal:field>
+ </div>
</td>
</tr>
- <tr tal:condition="context/contact_phone">
- <th i18n:translate="contact_phone">Contact Phone</th>
- <td class="tel">
- <metal:field use-macro="python:context.widget('contactPhone', mode='view')">
- Phone number
- </metal:field>
- </td>
- </tr>
イベントURLをテーブル内に表示する
portal_skins/plone_content/event_view をスキンフォルダにコピーして編集する。
+ <tr tal:condition="context/event_url|nothing">
+ <th>URL</th>
+ <td class="url">
+ <a class="url"
+ tal:define="field python:context.getField('eventUrl');"
+ tal:attributes="href context/event_url"
+ tal:content="context/event_url" />
+ </td>
+ </tr>
</tbody>
:
- <p tal:condition="context/event_url|nothing">
- <a class="url"
- href="event_url"
- i18n:translate="event_more_information"
- tal:define="field python:context.getField('eventUrl');"
- id="parent-fieldname-eventUrl"
- tal:attributes="href context/event_url">
- More information about this event…</a>
- </p>
イベントのカテゴリを表示しない
portal_skins/plone_content/event_view をスキンフォルダにコピーして編集する。
- <tr tal:condition="context/Subject">
+ <tr tal:condition="nothing">
アドバンス検索画面を消去する
portal_skins/plone_forms/search_form をスキンフォルダにコピーして編集する。
- <div metal:fill-slot="main"> + <div metal:fill-slot="main" tal:condition="nothing">
folder listing での作成者へのリンクを表示しない
portal_skins/plone_content/folder_listing をスキンフォルダにコピーして編集する。Title 欄は「Standard view」とする必要がある。
- <a href="#"
- tal:attributes="href string:${navigation_root_url}/author/${item_creator}"
- tal:content="author/name_or_id"
- tal:omit-tag="not:author"
- i18n:name="author">
- Bob Dobalina
- </a>
+ <span
+ tal:content="python:author and author['fullname'] or 'unknown'"
+ 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:${navigation_root_url}/author/${item_creator}"
- tal:content="author/name_or_id"
- tal:omit-tag="not:author">
- Bob Dobalina
- </a>
+ <span
+ tal:content="python:author and author['fullname'] or 'unknown'"
+ 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にpublisherとcreatorを表示しないように変更する。portal_skins/plone_templates/rss_template をスキンフォルダにコピーして編集する。
- <dc:publisher tal:content="obj_item/Publisher">Publisher</dc:publisher> - <dc:creator tal:condition="creator" tal:define="author python:getMemberInfo(creator)" tal:content="python:author and author['fullname'] or creator">Creator</dc:creator>
ページにページトップへのリンクを作成する
portal_skins/plone_content/document_view をスキンフォルダにコピーして編集する。
+ <div id="pagetop">
+ <a href="#" tal:attributes="href string:#content ">Page Top</a>
+ </div>
</metal:content-core>
ログアウト時に表示ページに戻る
ログアウト時にログインフォームではなく、表示していたページを表示する。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">
folder_listing で File タイプのものには直接ダウンロードリンクを付ける
スキンフォルダにダウンロードリンク用の画像を file_save.png という名前で作成しておく。次に、portal_skins/plone_content/folder_listing をスキンフォルダにコピーして編集する。
Item Title </a> + + <a href="#" + tal:condition="python:item_type == 'File'" + tal:attributes="href python:item_url+'/download'"> + <img src="file_save.png"> + </a>
authorページを表示しない
portal_skins/plone_content/author を変更する。
- <metal:main fill-slot="content" + <metal:main fill-slot="content" tal:condition="nothing"
編集ページのledgendタブの数を変更する
6個以上になるとプルダウンリストになるため、これを10個以上に変更する。portal_skins/plone_ecmascript/form_tabbing.js を変更する。
- var threshold = legends.length > 6; + var threshold = legends.length > 10;
不十分な権限ページの Site Administrator へのリンクを外す
portal_skins/plone_login/insufficient_privileges をスキンフォルダにコピーして編集する。
- <span i18n:name="site_admin"><a href="#"
- i18n:translate="label_site_administration"
- tal:attributes="href string:${context/portal_url}/contact-info">site administration</a></span>.
+ <span i18n:name="site_admin"><span
+ i18n:translate="label_site_administration">site administration</span></span>.
RSSのタイトルをサイト名に変更
RSSのタイトルをサイト名に変更する。なお事前に日本語タイトルは、Plone ルートの Properties タブで title_ja として追加されているものとする。portal_skins/plone_templates/rss_template をスキンフォルダにコピーして編集する。
- <title tal:content="context/pretty_title_or_id">The title</title>
+ <title tal:define="portal python:context.portal_url.getPortalObject();
+ site_title portal/title | nothing;
+ site_title_ja portal/title_ja | nothing;"
+ tal:content="python:(context.Language()=='ja' and site_title_ja) and site_title_ja or site_title">The title</title>
編集機能をCSSで隠す
不要な機能は隠しておく方が使いやすいため、SEOに関係のない編集機能はCSSで隠してしまう。たとえば、編集ページから「変更メモ」を隠すにはCSSに次のように記述する。
#cmfeditions_version_comment_block { display: none }