前回の『テーマのテンプレートとページタイプのおさらい』から、いきなりページリストのカスタマイズについてです。
実は10月27日の『concrete5 関西ユーザーグループ 第22回勉強会』で、ページリストのカスタマイズについてお話させていただきました。
というわけで、ホントは『ホーム』や『ナビゲーション』あたりの解説を先にした方が順序としてはいいのかも知れませんが、今回はページリストのカスタマイズについて解説します。
その前に、concrete5のブロックをカスタマイズするには、まず 『concrete5 のファイルシステム』と『カスタムテンプレート』を理解する必要があります。
ブロック修正の仕方と カスタムテンプレート の仕組み :: concrete5 Japan 日本語公式サイトに詳しく書いてありますので、まずはご覧ください。
動画を見ると、concrete5のバージョンがちょっと古いようですが、基本的には変わってないと思います。
カスタムテンプレートのファイルはどのように作ればいい？
カスタムテンプレートのファイルを作るのは全然難しくないです。
カスタマイズしたいブロックの『view.php』を複製すれば OK です。
で、複製したファイルをどうすればいいかというと…
まず、concret5をインストールしたディレクトリを見てください。
ユーザー領域とシステム領域
concret5をインストールしたディレクトリが『ユーザー領域』で、その中の『concrete』ディレクトリ以下が『システム領域』です。
両者を比べるとディレクトリの構成がよく似ている。
ここがポイント！
今回カスタマイズするページリストブロックを例にとって説明すると、『システム領域』にある『ページリストブロック』の『view.php』を複製します。
[text gutter=”false” toolbar=”false” light=”true”]
インストールしたディレクトリ/concrete/blocks/page_list/view.php ← 複製
[/text]
『システム領域』にある『ページリストブロック』の『view.php』を複製
複製したファイルを『ユーザー領域』の『blocks』ディレクトリに移動させるのですが、インストール直後には『blocks』ディレクトリには何もありません。
なので、『システム領域』のディレクトリを参考に同じディレクトリ構成にします。
ページリストのカスタムテンプレートディレクトリ
[text gutter=”false” toolbar=”false” light=”true”]
インストールしたディレクトリ/blocks/page_list/templates/
[/text]
この『templates』ディレクトリに先ほどの『view.php』を移動させます。
このとき、カスタムテンプレート名を『Custom Hogehoge』とする場合には、『view.php』を『custom_hogehoge.php』というファイル名に変更、または、『/custom_hogehoge/view.php』のようにします。
[text gutter=”false” toolbar=”false” light=”true”]
インストールしたディレクトリ/blocks/page_list/templates/custom_hogehoge.php
[/text]
もしくは、
[text gutter=”false” toolbar=”false” light=”true”]
インストールしたディレクトリ/blocks/page_list/templates/custom_hogehoge/view.php
[/text]
どちらでも『Custom Hogehoge』というカスタムテンプレートになります。
カスタムテンプレートを設定する場合、どちらの方法を使っても同じです。
後者の場合は、カスタマイズしたブロックが使われているときのみ css や js ファイル等を読み込ませることができます。
つまり、カスタムテンプレート個別の css ファイルや js ファイル等を設定できるということです。
例えば、サイト内で多用するカスタムテンプレートの場合は、前者の方法でカスタムテンプレートファイルを作り、スタイルやスクリプトなどはメインの css ファイル等に記述し、サイト内であまり使わないカスタムテンプレートの場合は後者の方法で、ブロックが使用されているページのみで css ファイル等を読み込ませるようにするとか…
上記の例以外でも、カスタマイズによって使い分けていただければいいと思います。
ここまでが、カスタムテンプレートファイルの作り方の説明なのですが、あくまでファイルを作った（『view.php』をコピーした）だけなので、カスタムテンプレートを設定しても何も適用されず標準のブロックのままの表示です。
というわけで、ここからが今回のメイン。
コピーした『view.php』ファイルのコードを変更して、ページリストをカスタマイズしていきます。
ページリストのカスタマイズ – ベーシック編
サンプルサイトでページリストを使っている箇所は、ホームの『最新情報』、最新情報ページの『お知らせ・新着情報一覧』、la paletteのお菓子ページの『おすすめのスイーツ』、それと各スイーツカテゴリページの『商品一覧』の4つです。
サンプルサイトでページリストを使っている箇所
❶ と ❷ は基本的に同じ、❸ と ❹ も基本的に同じなのですが、❸ のカスタムテンプレートには ❹ のカスタマイズをベースにページ属性による条件分岐を追加しています。
勉強会では、このうちの ❹ を使って解説しましたので、ブログでもこのページリストを使って解説したいと思います。
ページリストとは、指定した階層以下のページを表示するブロックですので、今回は、『ケーキ』ページ以下の階層にあるページを表示させます。
『ケーキ』ページ以下の階層にあるページを表示させる
新規ページを作成して『ページリストブロック』を追加します。
ページリストブロックを選択する
ページリストの設定は、『サイトの中の場所』の『他のページ以下の階層』を選択して、『ケーキ』ページを指定します。
とりあえず今回はそれ以外の設定は何もしません。
ページリストに表示するページの階層を指定します
『ケーキ』ページ以下の階層を表示したいので、『ケーキ』ページを選択します
すると、ページのタイトルがリンク付きでリスト表示されます。
でも味気ない…
ページリストが表示されました
このページのページリスト部分の HTML ソースを見てみましょう。
[html]
[/html]
↑ 見やすいように整形・変更しています。
<h3> タグを使ってますね 🙂
次に標準のページリストのコードを見てみます。
[text gutter=”false” toolbar=”false” light=”true”]
インストールしたディレクトリ/concrete/blocks/page_list/view.php ← このファイル
[/text]
[php highlight=”7,18,19,20,21,22,23,33″]
getRssUrl($b) : ”;
$th = Loader::helper(‘text’);
?>
entities($page->getCollectionName());
$url = $nh->getLinkToCollection($page);
$target = ($page->getCollectionPointerExternalLink() != ” && $page->openCollectionPointerExternalLinkInNewWindow()) ? ‘_blank’ : $page->getAttribute(‘nav_target’);
$target = empty($target) ? ‘_self’ : $target;
$description = $page->getCollectionDescription();
$description = $controller->truncateSummaries ? $th->shorten($description, $controller->truncateChars) : $description;
$description = $th->entities($description);
?>
getPages() ?>
getNext(t(‘Next’) . ‘ »’) ?>
[/php]
↑ ハイライト表示部分が HTML に書き出されているコード。（コメント行は削除しています）
ということは、7行目から33行目までのコードを <div class=”side-list”> などでラップして、そのクラスに対してスタイルを設定すれば、思ったようなデザインを適用できますよね。
実際にカスタムテンプレートファイルを作ってみます。
[text gutter=”false” toolbar=”false” light=”true”]
インストールしたディレクトリ/blocks/page_list/templates/side_list_basic/view.php
[/text]
標準のページリストブロックの『view.php』からコピーしたファイルを修正します。
[php highlight=”7,35″]
getRssUrl($b) : ”;
$th = Loader::helper(‘text’);
?>
entities($page->getCollectionName());
$url = $nh->getLinkToCollection($page);
$target = ($page->getCollectionPointerExternalLink() != ” && $page->openCollectionPointerExternalLinkInNewWindow()) ? ‘_blank’ : $page->getAttribute(‘nav_target’);
$target = empty($target) ? ‘_self’ : $target;
$description = $page->getCollectionDescription();
$description = $controller->truncateSummaries ? $th->shorten($description, $controller->truncateChars) : $description;
$description = $th->entities($description);
?>
getPages() ?>
getNext(t(‘Next’) . ‘ »’) ?>
[/php]
スタイルシートはこんな感じ…
[text gutter=”false” toolbar=”false” light=”true”]
インストールしたディレクトリ/blocks/page_list/templates/side_list_basic/view.css
[/text]
[css]
.side-list h3 {
margin: 0 0 10px;
font-size: .9em;
font-weight: normal;
}
.side-list h3 a {
color: #777;
text-decoration: none;
}
.side-list h3 a:hover {
color: #f00;
}
[/css]
標準のページリストブロックと比較するために、サイドバーにもページリストブロックを追加して、上記のカスタムテンプレートを設定してみます。
カスタムテンプレートを選択します
カスタムテンプレートが適用されました。
全然難しくないですね 😀
カスタムテンプレートが適用されました
このように、書き出されるコードを <div> でラップするのが、一番手っ取り早くて簡単です。
ただ、単純にコードをラップしただけなので、標準のスタイルが影響を及ぼすかも知れないということと、 <div> が増えてスマートじゃないですよね。
なので、<div class=”ccm-page-list”> を <div class=”side-list”> に変更した方がスッキリします。
ページリストというくらいなので、ついでに <h3> タグを <ul> タグを使ったリスト形式に変更して、『ページの説明』も使わないので <div class=”ccm-page-list-description”> 部分も削除します。
[php highlight=”7,8,18,20,22″]
getRssUrl($b) : ”;
$th = Loader::helper(‘text’);
?>
-
entities($page->getCollectionName());
- ” width=”14″ height=”14″ alt=”” title=”” />
$url = $nh->getLinkToCollection($page);
$target = ($page->getCollectionPointerExternalLink() != ” && $page->openCollectionPointerExternalLinkInNewWindow()) ? ‘_blank’ : $page->getAttribute(‘nav_target’);
$target = empty($target) ? ‘_self’ : $target;
$description = $page->getCollectionDescription();
$description = $controller->truncateSummaries ? $th->shorten($description, $controller->truncateChars) : $description;
$description = $th->entities($description);
?>
getPages() ?>
getNext(t(‘Next’) . ‘ »’) ?>
