Xoopsテーマのインストール方法

XOOPSのテーマは、多くのテーマ配布サイトでリンク切れとなっていたのが気になります。WordPressのテーマをネットで検索すると、リンク切れにあうことは、まずありません。やはり、現在、最も活発に活動しているのは、WordPressのようです。
今回は、XOOPSのテーマで、以前からよく使わせていただいていたOcean-Netのcocoaというテーマをインストールします。

スポンサーリンク

テーマのダウンロード

テーマの検索

CMS Theme Finder(cmsthemefinder.com)にアクセスして、テーマを選びます。

テーマの検索

テーマのダウンロード

テーマが決まりましたら、ダウンロードします。

テーマのダウンロード画面
スポンサーリンク

テーマのインストール

テーマの解凍

テホマの解凍画面

テーマのアップロード

テーマをサーバーにアップロードします。

WinSCPの起動

WinSCPの木と背う

themesフォルダにUPLOAD

アップロード画面

テーマの設定

サイトの起動

管理者メニューから「テーマ選択」タブをクリックします。

xoopsの管理画面

テーマの選択

該当のテーマにレを付して、「選択」をクリックします。

テーマの選択

テーマの確認

該当のテーマに変更されたか「ホームページ」をクリックして確認します。

ホームの選択画面

変更されました。が、ファンクション等が文字化けしています。
注意:メニューやフォーラム一覧は、別のテーマで入力していた内容です。このテーマに設定されてあるデータではありません。

文字化けしたサイト

文字化けの修正

TeraPadの起動

theme.htmlの文字コードを、TeraPadでUTF-8に変更します。

terapadの起動
tera

変更画面の表示

theme.htmlの表示

文字コード指定保存

何も変更せず、ファイル→文字/改行コード指定保存をクリックして、文字コードをUTF-8Nに変更して「OK」をクリックします。

文字コードの変更

theme.htmlのUPLOAD

文字コードをUTF-8に変更したtheme.htmlをWinSCPでUPLOADします。

theme.htmlのアップロード

文字化けの確認

文字化け解消の確認

テーマのカスタマイズ

ヘッダーに画像を挿入

ヘッダーに画像を挿入する為、hearder.htmlを変更します。

サイトのヘッダー画面

ヘッダー画像の挿入

以下のheader.pngを挿入します。

theme.htmlの表示

ヘッダー画像と、theme.htmlのupload

theme.htmlのアップロード

変更の確認

変更の確認画面

ヘッダーの横幅の変更

現在、760pxとなっているので、これを980pxとします。

980pxの画像の用意

style.cssの変更

style.cssの表示画面

style.cssと、画像のupload

style.cssと、画像のupload

コメント