■ユーザーズフォーラム リニューアルのお知らせ
新規投稿は新ユーザーズフォーラムにお願いします。
このフォーラムは閲覧専用のアーカイブです。

固定ページにヘッダー画像を表示させる方法を教えて下さい。

Masamichi > 固定ページにヘッダー画像を表示させる方法を教えて下さい。 @ 2014/1/25 1:17
お世話になります。

昨年の12月より
ベイサーCMSを利用させて頂いております。

こちらを参考にさせて頂きまして、
なんとかHPがカタチになってきたのですが、
行き詰まってしまいました・・・

作成しているページはこちらです。
http://perrotta-kitchen.com/

Ecologyテーマ(バージョン:Ecology2.0 v0.7)を
ベースにさせて頂いております。

CMSのバージョンは、baserCMS 2.1.2を
導入させて頂いております。

デフォルトでトップページ(index.php)には、
ヘッダ画像(メインスライダー)が表示されるのですが、
他の各固定ページにもヘッダー画像を表示させたいのです。

default.phpを触ってみても
うまく行かず悩んでおります。

固定ページの上部にメインスライダーや
ヘッダー画像(img src="任意の画像">)を
TOPページの様に表示させるにはどうしたら良いでしょうか。

色々テストしたり、調べてみたりしたのですが、
どうしても行き詰まってしまい、
投稿させて頂きましたm(_ _)m

◆実現したいこと

・各固定ページに任意のヘッダー画像を表示

および、

任意の固定ページにTOPページの様に
スライダー画像を表示させることです。

どうぞよろしくお願い致します。


■ブラウザ環境
FireFox・Chrome・IE・Safali

■ BaserCMSのバージョン:2.1.2
■ レンタルサーバー名: heteml
■ スマートURLの利用: [OFF]
■ 設置フォルダ: [http://ooo.com/]
■ 利用しているデータベース:  [MySQL5.6]
■ PHPスキル 初心者

■ BaserCMS: 3.0.15〜4.1.5
■ サーバー名: mixhost・x-server・さくら・ロリポップ
■ スマートURLの利用: [共に]
■ 設置フォルダ: [共に]
■ データーベース MySQL5.6
■ PHPスキル[C]

goichi > Re: 固定ページにヘッダー画像を表示させる方法を教えて下さい。 @ 2014/1/25 10:46
引用:
固定ページの上部にメインスライダーや
ヘッダー画像(img src="任意の画像">)を
TOPページの様に表示させるにはどうしたら良いでしょうか。

どのようにサイトを組み立てているかにもよると思いますが、例えばdefault.phpの中に
<?php if($bcBaser->isTop()): ?>
	<?php $bcBaser->element('MainSlider') ?>
<?php endif; ?>

というような記述があると思います。トップページなら、スライダーを呼び出すという分岐処理だと思いますので、分岐をとっぱらって
<?php $bcBaser->element('MainSlider') ?>

だけにしてみたら、どうなりますか? 他のページでも表示されませんか?

もし、各ページで任意の画像にしたいということであれば、1.同じような条件分岐をPHPで作成するか、2.ページをカテゴリ毎にわけ、カテゴリ別にレイアウトファイル(←それぞれ表示する画像が違うようにしておく)を用意しておくか(baserCMSにカテゴリ毎にレイアウトファイルを設定する機能が最初からついています)、3.普通に各ページの編集画面で画像を入れ込むかだと思います。

たぶん、3が一番簡単です。もし、レイアウトファイルで指定している部分に画像を表示したいということであれば、2をおすすめします。
ただ、本来はページのデザインが出来上がった段階で、どこまでをレイアウトファイルで指定して、どこからページ管理で処理&エレメント化するのかを決めるなど、HTMLのコーディングやテーマ化する前に整理する部分だと思うので、既成品(テーマ)をカスタマイズするとなると、CSSの調整など余計な手間があるかも知れません・・・。
Masamichi > Re: 固定ページにヘッダー画像を表示させる方法を教えて下さい。 @ 2014/1/25 13:42
goichiさま

早々のご返信、
誠にありがとうございます。

引用:

どのようにサイトを組み立てているかにもよると思いますが、例えばdefault.phpの中に
<?php if($bcBaser->isTop()): ?>
	<?php $bcBaser->element('MainSlider') ?>
<?php endif; ?>

というような記述があると思います。トップページなら、スライダーを呼び出すという分岐処理だと思いますので、分岐をとっぱらって
<?php $bcBaser->element('MainSlider') ?>

だけにしてみたら、どうなりますか? 他のページでも表示されませんか?


goichiさまの仰る通り、投稿前に分岐処理を取ってみたのですが、
他の固定ページで、うまく表示されません・・・

この様になります。


画像のページはこちらです。
(画像の様な症状になりますので、通常の状態にしてあります。1/25日時点)

セットしているスライダー画像が、
縦にずら〜っと表示されてしまいます。
(TOPページは正常です)

そこで、defaultページに、上記のソースの下に、
下記のソースを追記してみました。

<?php if($bcBaser->isPerrotta()): ?>
	<?php $bcBaser->element('MainSlider') ?>
<?php endif; ?>


TOPをPerrottaに変えてみたのですが、
うまく表示されません・・・

↑書き方が分からないです・・・


goichiさまのアドバイス通り、まずは3からやってみようと思うのですが、
実際にどの様なコードを各固定ページに書けば良いでしょうか・・・

TOPページの様に、
焦げ茶色の背景画像部分に任意の画像を
表示させたいと思っております。



どうぞよろしくお願い致します。

■ BaserCMS: 3.0.15〜4.1.5
■ サーバー名: mixhost・x-server・さくら・ロリポップ
■ スマートURLの利用: [共に]
■ 設置フォルダ: [共に]
■ データーベース MySQL5.6
■ PHPスキル[C]

goichi > Re: 固定ページにヘッダー画像を表示させる方法を教えて下さい。 @ 2014/1/25 16:10
こんにちは。

引用:
TOPをPerrottaに変えてみたのですが、
うまく表示されません・・・

まず、PHPについて、私の説明不足でした。すみません。元々使われている「isTop()」という関数は、いま開いているページがTOPページかどうかを判定するために、予め用意されたものです。私がお伝えしたかったのは、カスタマイズすれば、このような関数(関数でなくても、何かしらページの状態を判定するプログラム)を自作することも可能、という事でした。
ただ、この方法はプログラムに慣れた方なら簡単かもしれませんが、普段、プログラムに触れない方には面倒な部分があるかも知れませんね・・・。

・・・となると、2か3の方法ですが・・・その前に・・・

先ほど、元々あった条件分岐部分を外してもらった時、(添付画像を拝見した感じでは)トップページ以外の固定ページでデザインが大幅に崩れるものの、画像自体はズラッと表示したと思います(意図どおりスライドするかどうかは別として・・・)。おそらく、CSSやJavaScriptを環境にあうように調整する必要があるのだと思います。(もともと他人の作った既成物をカスタマイズするわけですから、独自部分については、それらの調整が必要不可欠になってきます。)
実際には2番目の案、「カテゴリ毎にレイアウトファイルを設定する」を応用した方法にするのが、何だか一番良さそうな気がしますが(後述します)、どの方法をとるにしても、ホームページ制作なのでHTML、CSS、JavaScriptの問題はついて回ると思います。そうしたHTML、CSSなどの部分は、baserCMSに限らない所も多いですし、仮にこのフォーラムで質問しても、ちょっと回答が付きにくいかもしれません。

さて、添付していただいた画像の中で、どこにスライダーを表示したいかを指示してある画像がありましたね。それを見る限りでは、スライダーを表示したい場所というのは、個別のページ管理で管理する部分ではなく、レイアウトテンプレート(デフォルトの場合は、default.php)に該当するHTMLが書かれている箇所ではないかと思います。そこで、やはりレイアウトテンプレートを複数作成し、それをページ毎に読み込む方法が良いかもしれません(カテゴリ毎でなくともイケます)。例えば・・・

/app/werbroot/themed/テーマ名/layouts/

の中に、default.phpをコピーして、好きな名前で保存しておきます(このフォルダ内に入れたPHPファイルは、レイアウトテンプレートとして管理画面から選択できるようになります)。コピーした各ファイルは、そのままだとdefault.phpと何ら変わりませんので、スライドショー(画像)部分を表示している箇所をカスタマイズします。
画像を表示しているのは、前にも出てきましたが、やはり
<?php if($bcBaser->isTop()): ?>
    <?php $bcBaser->element('MainSlider') ?>
<?php endif; ?>

という部分です。この3行を消してしまって、好きなようにHTMLなりJavascriptなりを書き込みます(最後の方に、画像の設定部分を別のエレメントファイルにして、それを読み込む方法を補足してあります)。そうして作ったレイアウトテンプレートを、例えば「sample.php」として保存したとします。

今度はbaserCMSの管理画面からページ管理を行います。
お使いのバージョンならば、ページの編集画面の下の方に、オプションとして、PHP等のコードを書くための欄があると思います。そこに
<?php $bcBaser->layout('sample'); ?>

といれてください。この関数は、この関数が書かれたページのレイアウトファイルを、デフォルトのものから指定のものへ切り替えます。カテゴリ単位でなくても、こうしてコード入力欄にいれておけば、ページ単位で機能すると思います。

最後に、少し蛇足かも知れませんが参考までに・・・
先ほど、条件分岐の所で出てきたPHP構文ですが、その中に
<?php $bcBaser->element('MainSlider') ?>

という一文があったかと思います。これは「MainSlider」という名前のエレメントファイル(表示用に切り分けられたパーツ)を呼び出すという関数で、エレメントファイル自体は
/app/webroot/themed/テーマ名/elements/
の中に入っています(ここで呼び出されている「MainSlider」も、MainSlider.phpという名前で保存されていますね)。このMainSlider.phpは、スライドする画像やメッセージを変更できるようになっていると思いますので、これをコピーして、MainSlider02.phpというようにし、スライドする画像を好きなように変更します。そうすれば、レイアウトテンプレートから「MainSlider.php」と「MainSlider02.php」のどちらを呼び出すかによって、表示するスライドショーを変更する事が出来ます。なお、トップページ以外で読み込む事が前提なので(当たり前ですが)、呼び出しの際はisTop()関数など不要で、
<?php $bcBaser->element('MainSlider02') ?>

として呼び出します。
ということで、今回、レイアウト毎(ページ毎)に読み込むスライドショーを変更するということであれば、スライドショーごとにエレメントファイルと、それを呼び出すレイアウトテンプレートを作ってやり、ページごとに前述の関数($bcBaser->layout();)を使って、呼び出したいレイアウトテンプレートを呼び出せると思います。

今回は、スライドショー部分がJQuery(javascript)を使っていますし、元々のテーマにはない事を独自で追加しようとしているので、PHPファイルだけ触れば、ご希望の事ができるわけではありませんが、baserCMS部分でいうと、だいたい上のような情報があれば、実現できると思います。頑張ってみてください(^^)



Masamichi > Re: 固定ページにヘッダー画像を表示させる方法を教えて下さい。 @ 2014/1/25 18:00
goichiさま

大変わかり易く丁寧なご回答、
誠にありがとうございます!

また、回答しづらい質問をしてしまい
誠に申し訳なく思っております。。。

それにも関わらず、
丁寧な解説を下さいまして
本当にありがとうございました。

また、回答を書かれるのにも
貴重なお時間を使わせてしまったと思います。。。

お陰様で、仕組みと方法がよく解りました!

今夜挑戦して、実現させます!

またこちらで
ご報告させていただきます。


goichiさま
本当にありがとうございます!!!


■追記させて頂きます。(2月6日)

上記の内容ですが、
ほぼほぼ実現致しましたので、
ご報告させて頂きます。


goichiさまのアドバイス通り、
*分岐処理を外したテンプレートを作成し、
全ページで読み込ませました。
(TOPページだけ実行する記述)

■分岐処理を外したテンプレート

・default.php をコピーした default2.php (レイアウト一覧内)

・header.php
(こちらにもヘッダー背景画像の分岐処理がありました)

この2点を変更し、default2.php を読み込ませました。 


読み込ませる方法で、思うように行かなかったので、
少し書かせて頂きます。


固定ページの下にあるオプション(コード)からは、
何故か読み込ませることが出来ませんでした。。。
(出来ると思うのですが・・・)


そこで、【サイト基本設定】 → 【オプション】 → 【ルートレイアウトテンプレート】より、
作成したテンプレートを読み込ませることで、全固定ページで実現しました。


また、ブログ記事やお問い合わせ(contact)のページにも、
それぞれの【基本設定】→ 【オプション】から、
上記のテンプレートを読み込ませることで、実現致しました。

こちらが、そのサイトになります。
http://perrotta-kitchen.com/


アドバイスを下さった、goichiさま、
また他の皆さまの投稿のお陰で、

何度と無く問題が解決し、
なんとかカタチになりました。

本当にありがとうございました。

今後ともどうぞよろしくお願い致します。


P.S.

上記の実現により、新たな問題が発生しましたので、
別のページで投稿させて頂きますm(_ _)m
(解決したら関連事項としてリンクさせて頂きます)

◆新たに発生した問題(こちらも解決済み)

■ BaserCMS: 3.0.15〜4.1.5
■ サーバー名: mixhost・x-server・さくら・ロリポップ
■ スマートURLの利用: [共に]
■ 設置フォルダ: [共に]
■ データーベース MySQL5.6
■ PHPスキル[C]