ArticleLiveテンプレートカスタマイズガイド

ArticleLiveには、あなたのニーズに合わせてウェブサイトのルックアンドフィールをカスタマイズするために使用できる強力な テンプレートシステムがあります。サーバー側のすべてのPHPコードは、レイアウトおよびHTMLとは分かれているため、HTMLとCSSを理解するだけ でカスタマイズできます。 ArticleLiveは、世界中のウェブデザイナーおよびウェブサイトオーナーが素晴らしい外観のウェブサイトを作成するために使用しています。このガ イドでは、どのファイルを編集する必要があるのか？、テンプレートファイルやCSSファイルをニーズに合わせて変更するには？など、テンプレートシステム がどう作用するかを学びます。

テンプレートファイルの構造

ArticleLiveのテンプレートは、［ArticleLive］フォルダ内の［templates］フォルダにあります。ここに は、システム内で使用可能なすべてのテンプレートのリストがあります。各テンプレートフォルダ内には、以下のようなファイルとフォルダのリストがありま す：

  • バックアップ
    ここは、コントロールパネル内からテンプレートファイルを編集する際、バックアップが自動的に保管される場所です。

  • 画像
    ここには、このテンプレート用の画像が保管されます。テンプレートに挿入する画像は、すべてここに保存する必要があります。

  • パネル
    すべてのパネルファイルは、ここに保管されます。パネルファイルについての説明は、以下を参照してください。

  • スニペット
    パネルフォルダ内には、スニペットフォルダがあります。すべてのスニペットは、ここに保管されます。スニペットについては、後ほど説明します。

  • プレビュー
    各テンプレートに対して、コントロールパネル内で使用される画像プレビューは、このフォルダに保管されます。

  • スタイル
    内部で使用されているCSSファイルは、ここに保管されます。このフォルダにあるさまざまなスタイルシートについての詳細は、以下で説明します。

このフォルダ内のHTMLファイルは、レイアウトファイルと呼ばれます。（説明は以下参照。）各HTMLファイルは、ウェブサイトの異 なるセクションに対応しています。

  • Articles.html
    このレイアウトファイルには、記事がどのように表示されるかについての情報が記述されており、記事が読み込まれる際に使用されます。

  • Authors.html
    これは、著者ページ用のレイアウトファイルで、著者の詳細について参照する際に使用されます。

  • Blogs.html
    このレイアウトファイルは、ブログエントリの表示に一致します。

  • Categories.html
    これは、カテゴリをクリックする際に表示されるレイアウトファイルです。

  • Default.html
    これは、「ホーム」ページのレイアウトファイルです。ArticleLiveウェブサイトを最初に訪問する際に使用されるレイアウトファイルです。カスタ マイズを開始する場合に、通常、最初に編集するファイルです。

  • Error.html
    これは、ウェブサイト上でエラーが発生する際に使用されるレイアウトファイルです。このファイルをカスタマイズする必要はありません。

  • Maintenance.html
    このレイアウトファイルは、コントロールパネルで［メンテナンスのため停止中］オプションを選択する際に使用されます。このファイルをカスタマイズする必 要はありません。

  • News.html
    これは、ニュース項目を参照する際に使用されるレイアウトファイルです。

  • Other.html
    このレイアウトファイルは、「テンプレートの折り返し」機能用に使用されます。詳細については、以下を参照してください。

  • Pages.html
    ArticleLiveで「ウェブページ」を作成する際、常にこのレイアウトファイルが使用されます。

  • PrintArticle.html
    ユーザーが[記事の印刷]をクリックすると、Articles.htmlの代わりにこのレイアウトファイルが使用されます。通常、印刷版の記事の外観を変 更したい場合以外は、このファイルをカスタマイズする必要はありません。ユーザーが[記事の印刷]をクリックすると、Articles.htmlの代わり にこのレイアウトファイルが使用されます。通常、印刷版の記事の外観を変更したい場合以外は、このファイルをカスタマイズする必要はありません。

レイアウト、パネル、スニ ペットファイル

ArticleLiveテンプレートシステムにあるすべてのファイルは、レイアウトファイル、パネルファイルまたはスニペットのいずれ かです。テンプレートシステムには、HTMLコードとプレースホルダ（挿入される別のファイルを認識）のみが含まれています。プレースホルダは、%%で始 まり、%%で終わります。

例：%%Panel.PageHeader%%

  • レイアウトファイル：レイアウトファイルには、通常、該当するウェブページのレイアウ トが含まれています。通常、いくつかのパネルファイルが含まれています。すべてのレイアウトファイルは、テンプレートフォルダのルートに保管されていま す。レイアウトファイルからのサンプルコードのいくつかは、以下のように見えるでしょう。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
	<html%%Config.TextDirection%% xmlns="http://www.w3.org/1999/xhtml"> 
<head><title>%%Page.WindowTitle%%</title>
<meta http-equiv="Content-Type" content="text/html; charset=%%Config.Charset%%">
<meta name="Description" content="%%Config.WebSiteDescription%%" /> 
<meta name="Keywords" content="%%Config.WebSiteKeywords%%" />
<link href="%%Config.CurrentTemplatePath%%/Styles/%%Config.StyleWidth%%.css" type="text/css" rel="stylesheet" /> 
<link href="%%Config.CurrentTemplatePath%%/Styles/%%Config.SiteColor%%.css" type="text/css" rel="stylesheet" />
<link href="%%Config.CurrentTemplatePath%%/Styles/styles.css" type="text/css" rel="stylesheet" /> 
</head>
<body>
<!-- start #bgcontain layout code -->
<div id="bgcontain">               
	%%Panel.PageHeader%%
	<div id="container">

	 <div class="content"> 
<!-- This text is retrieved from the "home" page inside the control panel --> 
	 %%GLOBAL_HomePageHeader%%
	 %%Panel_RecentNewsPanel%%
	 %%Panel.FeaturedArticlesPanel%%
	 %%Panel.RecentArticlesPanel%%
<!-- This text is retrieved from the "home" page inside the control panel --> 
 	 %%GLOBAL_HomePageFooter%%

 </div>   
  %%Panel.DefaultLeftColumnPanel%%
	%%Panel.DefaultRightColumnPanel%%
  </div> 
	<!-- wrapper -->
	 %%Panel.PageFooter%%
	</div> 
 <!-- end #bgcontain layout code --> 
  </body> 
</html>

  • パネルファイル：パネルファイルは、通常、ウェブページの1ブロックまたは1セクショ ンを指します。（たとえば、PageHeaderの場合、）通常、別のパネルファイルとスニペットが含まれています。パネルファイルは、「%% Panel.PanelName%%」というプレースホルダ（「PanelName」は、「.html」に続く、［パネル］フォルダ内に保管されている ファイルの名前）が付いて、レイアウトファイル、または別のパネルファイル内に含まれています。
    たとえば、「%%Panel.PageHeader%%」は、［/articlelive/テンプレート/テンプレート名/パネル /PageHeader.html］ファイルがそのプレースホルダに代わってロードされることを表します。

<div class="header">
<h1><a href='%%GLOBAL_HomePagePath%%'>%%GLOBAL_WebSiteName%%</a></h1>
 <div id="menu">
  <ul>
   %%SNIPPET_MenuLinks%%
  </ul>
 </div>
 <div class="TopMenu"> 
  %%Panel_SiteMenuPanel%%
 </div>
 <div class="HeaderSearch">
  %%Panel_SmallSearchPanel%%
 </div>
</div>

  • スニペットスニペットは、HTMLの繰り返し使用される部分です。リストのような（例 えば Category Name）循環するアイテムに対するサーバー側のPHPコードによって使用されます。スニペットに別のスニペットを含めることも できます。スニペットは、[/テンプレート名/Panels/Snippets]フォルダ内に配置され、 「%%SNIPPET_SnippetName%%」を使用して（SnippetNameはファイル名）含まれています。 たとえば、「%%SNIPPET_MenuLinks%%」は、［/articlelive/テンプレート/テンプレート名 /Panels/Snippets/MenuLinks.html］がロードされるファイルを指します。 

<div class="Item"><IMG src='%%GLOBAL_imgpath%%/icon_Article.gif' 
align=absmiddle>&nbsp;<a href='%%GLOBAL_url%%'>%%GLOBAL_text%%</a></div>

この図では、ArticleLiveでウェブページを作成するために、レイアウトファイル、パネル、スニペットがどのように相互作用す るのかを説明します：

 

これは、スニペッ ト（NewsList.html）を複数回、順にロードするパネル（RecentNewsPanel.html）をロードするレイアウトファイル （default.html）の一例です：

 

プレースホルダ

前述のように、さまざまな機能を実行するプレースホルダがあります。パネルプレースホルダは、Panelという単語で始まり、スニペッ トは、Snippetという単語で始まります。別の種類のプレースホルダもあります：

  • Panel - パネルファイルのプレースホルダを指します。例：%%Panel.PageHeader%%

  • Config - コントロールパネルのあなたの[設定]ページから編集できる構成ファイルに含まれているテキストに対するプレースホルダを指します。 例：%%Config.WebsiteDescription%%

  • LNG (Language) - Languageプレースホルダは、[articlelive/includes/language]フォルダ内に保管されている言語ファイルからテキス トを表示します。 例： %%LNG_NewAuthorIntro%%

  • Global - Globalデータは、PHPを使用してサーバー側に設定されます。 通常、Globalプレースホルダ用の変数は、[articlelive/includes/display]フォルダ内に保管されるパネルと一致する PHPファイルによって設定されます。通常、これらのプレースホルダは、PHPに習熟した上級ユーザー以外は、変更する必要はありません。これには、記事 コンテンツ、タイトル、日付、著者など、動的に計算される必要のあるデータが含まれます。例：%%GLOBAL_AuthorName%%

特定のGlobal変数をどのように設定するかを変更したい場合には、そこで使用されているパネルファイルと同じ名前のPHPファイル を変更できます。たとえば、ViewArticlePanel.html（記事のタイトルを表示するために使用されている）にある「%% GLOBAL_Title%%」を変更するには、 ［articlelive/includes/display/ViewArticlePanel.php］を変更します。

変数名は、Globalプレースホルダの名前と同じPHPファイル内で設定されています。たとえば、この例では、$GLOBALS [‘Title’]になるので、$GLOBALS[‘Title’] = などと検索して、変数が設定されている場所を見つけることができます。

テンプレートのラップ

ArticleLive独自の機能として、HTMLファイルの周りをテンプレートでラップするという機能があります。ラップすること で、ArticleLiveのその他のページも全く同じような外観に見えます。

ラッ プするには：

ステップ1.　[articlelive/html] フォルダ内（何も無い場合には、htmlフォルダを作成）に、HTMLファイルを 置きます。たとえば、以下のようなコードを含む、「readme.html」というHTMLファイルがあるとしましょう：

<b>This is my readme html file</b></br></br>
This is line 2 of my readme html file

こ のように見えます：

この「readme.html」ファイルを[articlelive/html]フォルダに置きます。

ステップ2. 　http://www.yourdomain.com/pages/html/readme.htmlからこのファイルにアクセスできます。

（このURLに「pages」部分が追加されていることに注意してください。これにより、ArticleLiveは、そのファイルを解析し、そのページの 周りにテンプレートをラップできます。）

このように見えるでしょう：

ArticleLiveのテンプレートは、自動的にこのファイルでラップされます。作業しているテンプレートによって、見え方が異なる ことに注意してください。

Include関数を使用して、外部ファイルおよびスクリプトを含める

ArticleLiveのレイアウトまたはパネルファイル内に、includeタグを使用して、ArticleLiveの外部のファイ ルを含めることができます。外部ファイルは、テンプレートでラップされ、レンダリングされます。これは、前述のテンプレートのラップ機能と似ていますが、 よりコントロールすることができます。Include関数により、PHPなどのスクリプトファイルだけでなくHTMLファイルも含めることができます。こ れは、Photo galleryや、Pollなどのような第三者のスクリプトを含めたい場合に、非常に役立ちます。

Include関数により、あなたのウェブサーバーやURLで見つかるローカルファイルを外部ファイルに含めることができます。

例：

基本的な使い方：
%%Include.myfile.html%%

フルパスローカルファイル：
%%Include./home/mysite/public_html/otherfiles/myfile.html%%

相対パスローカルファイル（...という3つのドットに気付きましたか？その関数機能には、Includeという文字列のすぐ後に、1 つドットが必要なことに留意してください。）
%%Include.../../../otherfiles/myfile.html%%

外部URL：
%%Include.http://www.myotherwebsite.com/latestNews.php%%