第4回 テーマの切り替え

これまではチュートリアルしか使用していませんでしたが、
今回からhtmlフォルダ内の素材をつかってテーマ作成を進めていきます!

レイアウトファイルの作成

■ テーマフォルダ(theme/corp/)内に「Layouts」というフォルダと「Elements」というフォルダを作成します。
■ 「Layouts」フォルダ内に「default.php」というファイルを作成します。(文字コードはUTF-8)
■ 「Elements」フォルダ内は今は空のままで問題ありません。
■ 添付しているhtmlフォルダ内のindex.htmlの内容をそのまま貼り付けてアップロードし、公開ページを確認してください。
全てのページがデザインの適用されていない素のページが表示されるはずです。

[公式チュートリアル P13]

make_Layouts.png

ぎゅっと画像にまとめてしまいましたが、フォルダの作成とテキストのコピーをしているだけです。

default.phpの文字コードをUTF-8にするのを忘れないようにしましょう。

CSSと画像のアップロード

■ htmlフォルダ内の css フォルダ、 img フォルダ、jsフォルダ をテーマフォルダ(theme/corp/)内に配置し、サーバーにアップロードします。
■ アップロードが完了しましたら、管理画面よりテーマを有効化します。

tutorial_14.png

[公式チュートリアル P14]

テーマに必要な画像、CSS、JSファイルをcorp直下にアップロードしましょう。

css_js_img_copy.png

これでテーマ適応に必要なファイルのアップロードが完了しました。
管理画面 > テーマ管理から corp を選択してテーマを有効化します。

その後、トップページにアクセスし、テーマが変更されている事を確認します。

素材となるhtmlフォルダとcorpフォルダの構成が異なっているため、
レイアウトが崩れ、画像が表示されていないページが表示されればOKです。

check.png

これはcssや画像が相対パスで書かれたままなので仕方がありません。
baserCMSにはパスを解決してくれる仕組みがあるので、今はそのままで大丈夫です。

まとめ

お疲れ様でした!

今回のチュートリアルでは、
・テーマに設定すると、/corp/Layouts/default.phpが呼び出される
・フォルダ構成が変わるので画像、CSS、JSファイルが読み込まれない
という事がわかりました。

次回以降、管理画面で設定したデータを表示させたり、画像・CSS・JSファイルを読み込む為のタグを埋め込んでいきます!

  • このエントリーをはてなブックマークに追加

あっきー

放浪システムエンジニア

ユーザーインターフェイスに重点をおいた設計を常に心がけ、常に最新情報を模索している。

こんな記事も書いています

RELATED