それでは、クラックしてみましょう…
新しいテーマの作成
あなたのMoodleテーマを作成するためのベーステーマを見つけることは、あなたがする必要がある最初のことです。標準テーマのコピーを作成し、この記事の一部で行ったように名前を変更したり、標準テーマに基づいた親テーマを使用したりすることができます。
ここで重要な点は、Moodleに付属している標準テーマがMoodleテーマ作成プロセスの基礎であるということです。 他のすべてのMoodleのテーマは、このテーマに基づいている必要があり、通常は標準のテーマとの違いを説明します。 このメソッドは機能し、Moodleのテーマ設定を始めるための簡単な方法ですが、テーマが正しく表示されないか、正しく機能しない可能性のある新しい機能がMoodleに追加される可能性があるため、問題が発生します。 標準テーマは、Moodleの新しいリリースが開始される前に常に更新されます。 したがって、標準テーマのコピーを作成してスタイルを変更する場合は、親テーマも使用することを確認することをお勧めします。 このようにして、親テーマは、標準テーマのコピーに加えた変更とともに、基本テーマになります。
ただし、最初のテーマを作成する別の方法があり、それはstandardwhiteなどの標準テーマに非常に近いテーマのコピーを作成し、これをテーマとして使用することです。 その後、moodleは標準テーマを基本テーマとして使用し、上部（親）のstandardwhiteテーマに加えた変更を適用します。 私たちがやっているのは、標準とstandardwhiteテーマの違いを説明することだけです。 これは、Moodle開発者が新しいMoodle機能を最新のものにするために標準テーマに変更を加えることがあるため、これが優れています。 これは、moodleの更新ごとに、標準のテーマ、フォルダが自動的に更新されることを意味し、Moodleの更新によって引き起こされる厄介な表示の問題を回避します。
Moodleテーマを設定する方法は完全にあなた次第です。 あなたが望むものに近いテーマを見て、本当に多くの変更が必要ではない場合は、必要なスタイルのほとんどがすでに書かれているので、親テーマを使 しかし、他のテーマとはまったく異なるテーマを作成したい場合や、実際にMoodleのテーマに入りたい場合は、標準シートのコピーを使用するのが最善です。
それでは、さまざまなテーマ設定を使用するときの違いを見て、これらの異なる方法がテーマ化プロセスにどのような影響を与えるかを見てみましょう。
- C:Program FilesApache Software FoundationApache2.2htdocsthemeでテーマフォルダを参照します。
- テーマのフォルダを右クリックしてコピーを選択して、標準テーマをコピーします。
- コピーしたテーマをテーマディレクトリ（現在使用しているディレクトリと同じディレクトリ）に貼り付けます。
- 標準フォルダのコピーの名前をblackandblueまたは選択したい他の名前に変更します（大文字やスペースを使用しないことを忘れないでください）。
- Moodleサイトを開き、サイト管理外観|テーマ|テーマセレクタ|に移動し、作成したばかりのblackandblueテーマを選択します。
y ouは、前のスクリーンショットに示されているテーマに黒と青のテーマというヘッダーがあることに気づいたかもしれません。 これは、フロントページの設定ページの完全なサイト名にこれを追加したためです。
アクションの時間–親テーマを設定する
- ウェブブラウザを開き、Moodleサイトに移動し、管理者としてログインします。
- サイト管理|外観|テーマ|テーマセレクタに移動し、それがまだ選択されていない場合は、あなたのblackandblueテーマを選択します。
- blackandblueフォルダのルートを参照し、設定を右クリックします。phpファイルを開き、|ワードパッドで開くを選択します。
-
デフォルトの標準テーマをベースとして使用しながら、このテーマと親テーマを使用できるように、このファイルに四つの変更を加える必要があります。 変更は次のとおりです。
THEME THEME->sheets=array('user_styles');
THEME THEME->standardsheets=true;
parent THEME->parent='autumn';
THEME THEME->parentsheets=array('styles');これらのステートメントのそれぞれを見てみましょう。回して
$THEME->sheets=array('user_styles');これには、blackandblueテーマ、つまりuser_stylesのためにこれに含めるすべてのスタイルシートファイルの名前が含まれています。
THEME THEME->standardsheets=true;
このパラメータは、標準テーマのスタイルシートを含めるために使用されます。 これがTrueに設定されている場合、標準テーマのすべてのスタイルシートが使用されます。 あるいは、必要な順序で個々のスタイルシートをロードするために、配列として設定することもできます。 これをTrueに設定したので、標準テーマのすべてのスタイルシートを使用します。
$THEME->parent='秋';
この変数は、現在のテーマの前に含まれる親テーマとしてテーマを使用するように設定できます。 これにより、実際のファイルを変更することなく、別のテーマを簡単に変更できるようになります。
par THEME->parentsheets=array('styles');この変数は、親テーマのすべてのスタイルシートまたは個々のファイルのいずれかを選択するために使用できます。 スタイルを含めるように設定されています。親テーマ、すなわち秋からのcssファイル。 秋のテーマにはスタイルシートが1つしかないため、この変数をTrueに設定できます。 いずれにせよ、あなたは同じ結果を持つことになります。
- themeblackandblueconfigを保存します。php、およびwebブラウザウィンドウを更新します。 次のスクリーンショットのようなものが表示されます。 あなたのブロックは以下のものとは異なるかもしれませんが、これを無視することができます。
ちょうど何が起こったのですか？
さて、あなたは秋のテーマ（Patrick Malleyによる）を親として使用する標準テーマのコピーを持っています。 ヘッダーが正しくなく、適切な秋のテーマヘッダーが表示されていないことに気づいたかもしれません。 これは、基本的に標準テーマのコピーを使用しており、このテーマのヘッダーが上記のものであるためです。 この階層に含まれるのはCSSファイルのみなので、標準テーマのヘッダーを編集するまでHTMLの変更は表示されません。htmlファイル。
go heroを持っている–別の親テーマを選択してください
戻って、上のテーマのいくつかを見てみましょうMoodle.org そして、あなたが好きなものをダウンロードしてください。 このテーマをblackandblueテーマの設定に親テーマとして追加します。phpファイルですが、今回はそのテーマから使用するスタイルシートを選択します。 そのスタイルシートが明確にラベル付けされているように、学校のテーマに戻るには、この演習のための良いものです。 したがって、ヘッダーとフッターのファイルをコピーする
秋のテーマのCSSファイルと標準テーマのHTMLファイルを使用していることを示すには、ヘッダーをコピーhtmlとフッター。Patrick Malleyの秋のテーマからhtmlファイルをblackandblueテーマのフォルダに貼り付けます。 あなたは常にちょうどac tual標準テーマフォルダから再びそれらをコピーすることができますように、あなたのヘッダーとフッターのファイルを上書き
アクション–ヘッダーをコピーする時間。htmlとフッター。htmlファイル
- 秋のテーマのフォルダを参照し、両方のヘッダーを強調表示します。htmlとフッター。Ctrlキーを押しながら、それらの両方をクリックすることにより、htmlファイル。 選択したファイルを右クリックし、コピーを選択します。
- blackandblueテーマのフォルダを参照し、右クリックして貼り付けを選択します。
- ブラウザウィンドウに戻り、F5ボタンを押してページを更新します。 あなたは今、完全な秋のテーマが表示されます。
ちょうど何が起こったのですか？
秋のテーマのヘッダーをコピーしました。htmlとフッター。あなたのblackandblueのテーマにhtmlファイルなので、あなたは完全な秋のテーマが働いて見ることができます。 おそらく実際にはヘッダーを使用しません。htmlとフッター。これはMoodleのテーマ設定プロセスがどのように機能するかの例に過ぎないので、コピーしたばかりのhtmlファイルです。
だから、あなたは今、その親テーマとして秋のテーマを使用しているblackandblueと呼ばれる標準的なテーマの変更されていないコピーを持っています。 このテーマを変更するために今すぐ行う必要があるのは、blackandblueテーマフォルダ内のCSSファイルを編集することだけです。
Theme folder housework
ただし、ヘッダーとは別に標準テーマの正確なコピーがあるため、最初に行う必要があることがいくつかあります。htmlとフッター。htmlファイル。 このコピーされたフォルダーには、使用するテーマに設定した唯一のファイルがuser_stylesだったため、必要のないファイルがあります。設定内のcssファイル。以前のphpファイル。 これはあなたが行った最初の変更でした：
THEME THEME->sheets=array('user_styles');
user_style。cssファイルはblackandblueテーマのフォルダに存在しないため、作成する必要があります。 また、新しいblackandblueテーマは1つのスタイルシート、つまりuser_stylesのみを使用するため、存在する他のCSSファイルを削除する必要があります。次のセクションで作成するcssファイル。
アクションの時間–スタイルシートの作成
- blackandblueフォルダ内の任意の場所を右クリックし、新しいテキストドキュメント|を選択します。
- このテキストドキュメントの名前をuser_stylesに変更します。再度右クリックし、名前の変更を選択することにより、css。
アクションの時間-不要なCSSファイルを削除する
- 次のCSSファイルを選択し、選択したファイルを右クリックして削除を選択して削除します。
- css
- style_ie6.css
- style_ie6.css
- style_ie7.css
- styles_layout.css
- スタイル_moz.css
{背景: #000000;}
何があったの?
最後の2つのタスクで、user_styleという名前の空のCSSファイルを作成しました。あなたのblackandblueテーマのフォルダ内のcss。 次に、blackandblueテーマのフォルダー内のすべてのCSSファイルを削除しました。 これらは標準テーマフォルダ内のCSSファイルのコピーにすぎず、blackandblueテーマの設定で標準テーマをベースとして使用するようにテーマを設定しています。phpファイル。
いくつかの変更を行いましょう
今、あなたはそれを望むようにあなたのテーマを設定しました、つまり、あなたは標準のテーマをベースとして、秋のテーマを親 上に移動し、あなたのuser_styleにいくつかの変更を行います。cssファイルは、これがあなたのテーマにどのような影響を与えるかを確認し、すべての設定を確認できるようにします。phpファイルの設定は正しいです。 現在のスタイルはすべて秋のテーマから継承されていることを忘れないでください。
アクションチェックの時間
- 現在のテーマ（blackandblueである必要がありますが、秋のテーマのように見えます）でMoodleサイトを開きます。
- blackandblueテーマのフォルダに移動し、user_styleを右クリックします。cssファイルを開き、開くを選択します。 このファイルは完全に空白にする必要があります。
-
body要素のCSSの次の行を入力し、fiファイルを保存します。
body{
background:#000000;
}
-
今すぐあなたのブラウザウィンドウを更新します。 背景が黒になっていることがわかります。
注：Firebugを使用して使用されているスタイルを識別する場合、それらがどこにあるのか、またはどのスタイルがページのその要素を制御しているのかが この例は、user_styleに貼り付けたbody{background:#000000;}コードです。cssファイル。 そのスタイルを識別するためにFirebugを使用していた場合、それは見つかりませんでした。 代わりに、私はちょうど秋のテーマからCSSファイルを見てみました。 私がここで言おうとしているのは、常に周りを突くことと試行錯誤の要素があるということです。
すべてがうまくいくようですね。 空のuser_styleに1つのスタイル宣言を追加しました。cssファイルは、背景色を変更し、ブラウザで変更を確認しています。 これで、親テーマがどのように機能するかがわかり、Firebugからuser_styleにスタイルをコピーするだけでよいことがわかりました。cssファイルと変更する必要があるスタイル宣言を編集します。
