独自CSSファイルをサイトに読み込ませる

※CS-Cartへのファイルの追加・改変は自己責任でおこなってください。不安な方は、あらかじめバックアップをとってから作業することをおすすめします。

ショップを制作すると、どうしてもデザイン面でカスタマイズがしたくなる箇所が出てくると思います。

CS-Cartには、「My changes」というアドオンが標準搭載されています。ショップにオリジナルの機能や変更を加える際に使用するアドオンです。今回はこのアドオンを使用して、実際に独自cssファイルをショップフロントに適用させてみます。

まずは下準備として、管理画面 → アドオン → アドオンの管理画面にある「My changes」のステータスを有効にしておきましょう。

デフォルトの状態では「My changes」アドオンのファイルは

app/addons/my_changes にしかありません。

まずはdesignフォルダ内にもmy_changesフォルダを作成し、cssファイルを読み込ませる準備をします。

design/themes/テーマフォルダ/css/addonsフォルダ内に、「my_changes」フォルダを作成します。その後、「my_changes」フォルダ内に「styles.css」ファイルを追加します。この「styles.css」内に独自のスタイルを書き込んでいく形になります。

ただし、上記のようにCSSファイルを追加しただけではショップフロントにCSSファイルを読み込ませることはできません。CSSをショップ側に読み込ませるためのtplファイルを作成する必要があります。

まず、design/themes/テーマフォルダ/templates/addonsフォルダ内に「my_changes」フォルダを作成します。

「my_changes」フォルダ内に「hooks」フォルダを作成し、「hooks」フォルダ内に「index」フォルダを作成。

「index」フォルダ内に「styles.post.tpl」ファイルを作成します。

styles.post.tplファイルには、

{style src="addons/my_changes/styles.css"}

と記述を追加し保存することで、css/addons/my_changes/style.cssをショップフロントに読み込ませることができるようになります。

あとは、design/themes/お使いのテーマフォルダ/css/my_changes内に作成した「styles.css」に追加したいスタイルの記述をするようにしてください。

※この状態で「my_changes」アドオンをアンインストールしてしまうと、designフォルダ内の「my_changes」のファイルが消えてしまいます。

必ず、designフォルダ内の「my_changes」フォルダとその中のファイルは
var/themes_repository/お使いのテーマフォルダ/templates
と
var/themes_repository/お使いのテーマフォルダ/css
内にコピーしておくようにしてください。

CS-Cartでは、サイトの表示を高速化するために「システムキャッシュ」「テーマキャッシュ」という2種類のキャッシュを使用しています。

ただこのキャッシュというのが結構曲者で、今回のようにCSSやtplファイルを追加・編集した際にその変更がキャッシュの影響でサイト側に反映しないことがあります。なのでカスタマイズを行なった後は必ずキャッシュのクリアをおこない、表示・動作を確認してみてください。

キャッシュのクリアは、サイト管理画面のURLの後に「?cc&ctpl」をつけてアクセスをしてみてください。

例：https://サイトURL/admin.php?cc&ctpl

<<< 前の記事

学ぶ