Pulse CMSのテンプレート構造を見てみよう

2016/10/17


こんにちは!@rie05です。

前回のインストール編では色々ご意見をいただきありがとうございました!

追記もしていますので、まだインストールできてないよーという方は是非ご一読ください。

今回はテンプレート構造編です!


テンプレートフォルダをチェックしてみよう

pulse.zipを解凍してそのままアップロードした方は、現在インストールした先のURLには

デフォルトテンプレートが下のような感じで表示されていると思います。

左がトップページ、右が下層ページのAboutページ。


まずはこのデフォルトテンプレートを触って、それぞれどこに何の要素が書かれているのか基本を見ていきましょう!


最初にチェックするのは、pulseフォルダの直下にある「template」フォルダ。

このフォルダが、WordPressで言うところのいわゆる「テーマ」フォルダになります。

サイトの外観を表示しているファイル一式が入っています。中身を見てみると・・・


layout.phpファイル、cssフォルダ、imgフォルダ、jsフォルダ。

phpは1ファイルだけですね。私も最初はもっとたくさんのファイルがあるのを

想定していたのですが、Pulse CMSテンプレートフォルダの中身はこれだけです。

あとは管理画面から「ページ」と「ブロック」の概念でサイトを作り上げていきます。

(ここは後述しますね)

それでは、唯一のphpファイルをお好みのエディタで開いてみましょう。

47行程で、ここには特に難しいphp記述はありません。


・・・


サッと目を通してみて、ピンと来た方はCMS慣れしている方かも。

このlayout.phpは、サイトの共通部分が書かれています。

例えば、WordPressではheader.phpやfooter.phpを切り分けてパーツテンプレートにする方法がありますが、

Pulse CMSでは基本的にこのlayout.php1枚で、共通部分を表示させています。

そして、共通部分以外のコンテンツは、Pulseタグである

<?php echo $parsedown->text($content); ?>

この1行で、表示させます。


デモサイトのデザインを例にしますね。

今このTOPページで赤くなっているところが

共通部分なのでlayout.phpに記述されているところです。

下層ページに行っても同じくです。

ヘッダーとフッター部分が共通ということですね。










そして間にあるコンテンツ部分が、

先程書いたPulseタグにて出力されているということになります。


じゃあそのタグで出力する内容はどこにあるんだろう?

ここで、「ページ」と「ブロック」の概念が登場します。









ページとブロック

この考え方がPulse CMSのキモで、シンプルである理由です。

まず管理画面を見てみましょう。

この管理画面はレスポンシブ対応もされてるので、

スマホからアクセスしても見やすいですよ。

その中にある、ページとブロックに注目します。









ページから見てみます。

ページをクリックしたところ。.txt(テキストファイル!)が並んでいます。

ページごとに、ページ名.txt形式で存在しているということになります。

home.txtがTOPページ。404.txtはページが見つからない場合のページ。

blog.txtはブログ記事のページ。

その他任意で、必要に応じて下層ページがあります。

アバウトページはabout.txtって感じですね。







home.txtをクリックして開いてみます。

いきなりcssが書いてありますが、

ここはTOPページのメインビジュアル部分の記述ですね。

デフォルトテンプレートではTOPページのみヘッダー部分が

背景画像が横幅いっぱいに表示されているので、

その部分のCSS記述です。

(もちろんこれは一例です。)














その後に、見慣れないタグがありますね。

これは、この後説明する「ブロック」を表示させるショートコードです。

ブロックを表示します:homeフォルダのhomeブロックを読んで下さい。

という意味になります。


では次にブロックを見ていきましょう。一度管理画面TOPに戻り、ブロックをクリック。

デフォルトではこんな感じに並んでいます。










先程の「ページ」の中にショートコードで指定してあったhome/homeブロックを見てみましょう。

homeフォルダの中にありそうですね。


じゃーん。TOPページの中央に表示されていたコンテンツ部分を発見しました。

そして、下にEmbed Tag:という表記がありますね。これが先程ページの中にあったショートコードです。

ブロックを作って、読み込みたいところにEmbed Tagを書く、いう運用ですね。


このブロックは、先程のページと違い編集画面に色々アイコンが並んでるのがわかるでしょうか。

他ブログツールやCMSなどでもよく見かける、WYSIWYGエディタになっています。

アイコンを実際に押してみると分かりますが、簡単にHタグをつけたり、太字にしたり、

画像やリンクを挿入したり・・・といったことができます。マークダウンでも書けますよ!

CSSを指定しておいてあげると、ソースコードなしで装飾された見出しが表現可能です。










でもソースコードがみたい!という場合には、1番左の「<>」のコードビューアイコンを押すと、

こんな感じで黒背景にソースコードがでてきます。

















layout.php、ページ、ブロック、と駆け足で説明してきましたが、

もう一度デフォルトテンプレート、デモサイトの下層ページAboutで図解しました。



最初にデフォルトテンプレートを色々いじってみると、構造が分かりやすくて良いですね。

ただ、画像中にも書きましたが、左ブロックには-leftをつけないといけない、みたいなルールはありません。

別に1ページ1ブロックでも良いのです。ページにすべて記述し、ブロックはなくっても良いのです。


テンプレート構造まとめ

ざっくりと把握できればひとまず十分です。

ただ私も初めて触っている時、「ここはページ?ブロック?」と違いが分かりにくかったので、

ページにはあまり更新しない基本的なレイアウトを書いて、ブロックに更新の多いコンテンツを書く。

という運用が良いです。

クライアントさんに渡す時も、ブロックのみで更新してもらうようにすると良さそうですね。


Pulse CMSのテンプレートは基本的にとてもシンプルで、

サイトを作るデザイナーさんが負担するプログラムコードが極端に少ないのが特徴です。

もちろん高カスタマイズをしようとするとphpを触りますが、基本機能で運用するのであれば

最初に設定するconfig.php、共通箇所を記述するlayout.php、この2ファイルしかphpファイルを開かないというシンプルさ。

(しかもphpコードに触れるのは一瞬だけ!)


サイトのデザインをPhotoshopやIllustratorやsketchでやって、コーディングをして、jsを読み込んで。

ここまでは普段のスキルで出来るけど、phpとなるとコピペが基本…

みたいなデザイナーさんにとってもとってもオススメしたいです。


記事が長くなったので管理画面TOPからいける他メニュー「ブログ」や「メディア」はまた次回!

テンプレート編は「オリジナルデザインからテンプレート化する」記事も書きたいと思いますのでお楽しみに〜。

comments powered by Disqus

Writer : Rie Seguchi
Pulse CMS エバンジェリスト 兼 コミュニティマネージャー
Five Dimension Graphics(5DG)という屋号でフリーランスデザイナーとして活動中。