site2014のテーマを利用しているサイトを 2.6.0.1 にアップデートしてみた


v2.1 でテーマとしては site2014 をベースにカスタマイズしているサイトを v2.6.0.1 にアップデートする作業を行った際のメモを残しておきます。

システムのアップデート

まずは、置き換えるべきファイルをアップデートします。 最近ですと ablogcms2601update.php を利用すると簡単に置き換えるべきファイルを1ファイルをアップロードして、ブラウザで表示すると自動で行ってくれます。(一応、バックアップを取ってから使ってみてください)

システムのアップデートをした際に、サイトの設定が個別に書かれている部分があります。以下の3つが大事ですので、その点をチェックください。

  • /private/config.system.yaml
  • /php/ACMS/User
  • /themes/**ご利用のテーマ**

テーマの修正

2.5系以降にアップデートする際には、テンプレートの書き換えが必要になります。テーマを作る際には、head 部分の共通部分はインクルードするようにする事で1ファイルで管理できるようにカスタマイズしていきましょう。

JavaScript について

JavaScript の読み込みが 2.5 以降は変更になり index.js から acms.js になりました。a-blog cms で提供している標準の JavaScript だけであれば、これまで通りに jQuery を自動読み込みしますが、他のプラグインを利用されるような場合には、acms.js の前に読み込むように指定してください。

<script src="/js/library/jquery/jquery-1.11.1.min.js" charset="UTF-8"></script>
<!-- BEGIN_MODULE Js -->
<script type="text/javascript" src="/acms.js{arguments}" charset="UTF-8" id="acms-js"></script><!-- END_MODULE Js -->

CSS について

css については、acms.css から管理ページ側のCSSが分離する事になり acms-admin.css を別で読み込む必要も出てきました。

site2014 では以下のように書かれています。

<link href="/css/normalize.css" rel="stylesheet">
<link href="/css/acms.min.css" rel="stylesheet">

acms-admin.css ( acms-admin.min.css ) を追加で読み込むようにします。

<link href="/css/normalize.css" rel="stylesheet">
<link href="/css/acms.min.css" rel="stylesheet">
<link href="/css/acms-admin.min.css" rel="stylesheet">

ここで大事なのが、 acms.css は表で利用しているスタイルで、acms-admin.css は管理ページ用のスタイルになっている。a-blog cms は一般のデザインの中に、更新フォームを表示させて管理ページ側のデザインに入らなくてもサイトの運用ができるようにしている関係上、表側にも acms-admin.css が必要になります。

site2014 をカスタマイズして作られたテーマであれば、その頃の古い acms.css を利用しないとレイアウトが崩れてしまいます。そのためアップデート前に使われていた、以下のファイルやフォルダを利用されているテーマ ( site2014 )の中にコピーしてください。

  • 旧 /themes/system/acms.css ( acms.min.css )
  • 旧 /themes/system/font
  • 旧 /themes/system/image/marker

 

 

できるだけ、バージョンアップでテンプレートを触らないで済むようにしていますが、新しい機能によるテンプレート部分の追加や、改善のための仕様変更による部分でアップデートの手数が増える事もありますが、できるだけ新しいバージョンを使ってください。よろしくお願いします。


関連記事

この記事のハッシュタグ から関連する記事を表示しています。

JavaScript ライブラリ htmx と a-blog cms は相性が良さそうだ

Chat GPT が書く a-blog cms の紹介ブログ記事

PhotoCollage.js を a-blog cms のブログテーマに実装してみた

2023年の a-blog cms を振り返って

エントリー新規投稿画面で次のエントリーコードっぽいものを placeholder に表示させるカスタマイズ

a-blog cms Training Camp 2023

最新記事

カテゴリー

アーカイブ

ハッシュタグ