web-dev-qa-db-ja.com

3.3での新しいテンプレートの作成

私は最初の新しいテンプレートを作成しています-非常に初心者。

私は自分でゼロから作成し、これをJoomla 3.3テンプレートに変換する静的なHTML5およびCSS3 Webサイトを持っています。

基本的なテンプレートの作成方法などのチュートリアルをいくつか読んだことがありますが、すべてを手に入れる時間がないので、CSSスタイルをすべて使用して何も無視できる高速なソリューションが必要です。 Joomlaから。

私はいくつかのスタイルを付けようとしました<div>タグを自分のインデックスまたは（カスタムhtml）の下のモジュールとしてタグ付けしますが、cssルールをオーバーライドするcssスタイルがいくつかあるので、joomlaからすべてを削除し、新しいテンプレートをクリーンに保ちます。

私はこれを私のindex.phpの中に入れました

$doc = JFactory::getDocument();
$doc->addStyleSheet($this->baseurl . '/media/jui/css/bootstrap.min.css');
$doc->addStyleSheet($this->baseurl . '/media/jui/css/bootstrap-responsive.css');
$doc->addStyleSheet('templates/' . $this->template . '/css/style.css');
$doc->addScript('/templates/' . $this->template . '/js/main.js', 'text/javascript');

でも私をオーバーライドする主なスタイルはこのラインから来ていると思います

<jdoc:include type="head" />

それがもたらすものを私は知りません。

joomla-3.3.xtemplatescss
4
Elhamy

テンプレートを実行するときの一般的なルールは、_<jdoc:include type="head" />_の後にafter独自のCSSファイルをロードすることです。この方法でCSSルールを最終的に決定できるため、これは重要です。ただし、これはテンプレートで$doc->addStyleSheet()を使用しないことも意味します。代わりに、jdocステートメントの後に、プレーンHTMLとして頭に書き込むだけです。

テンプレート内にJavaScriptまたはCSSファイルを追加するためにAPIを引き続き使用する理由は1つあります。これは、拡張機能によっても読み込まれる可能性のあるアセットを読み込む場合です。次に、Joomlaは1回だけロードされるように注意しますが、それ以外の場合は2回ロードされている可能性があります。

したがって、APIを使用してbootstrapファイルをロードすることは理にかなっていますが、独自のテンプレートスタイル（style.css）とJavaScript（main.js）は、jdocタグの後にハードコードしてロードする必要があります。

補足：Bootstrap CSSはJHtmlBootstrap::loadCSS()を使用してロードできます（ http://api.joomla.org/cms-3/classes/JHtmlBootstrap .html＃method_loadCss ）これは、テンプレート内で実行すると完全に正常ですが、拡張機能内でこの呼び出しを使用しないでください。

ただし、Bootstrap LESSファイルから作業し、そこから独自のCSSファイルをコンパイルする方が理にかなっている場合があります。それから、必要なものを混合して一致させ、すでに提供されているミックスインと変数を活用することもできます。 Bootstrapによる。

6
Bakual

残念ながら、Joomlaはこのように動作しません。 Joomlaテンプレートを作成するには、コンポーネントをインポートするjdocタグなどの動的要素が必要です。

<jdoc:include type="head" />も要件であり、非常に便利です。基本的に、拡張機能から<head>に挿入されるはずのすべてのスクリプト、リンク、その他すべてを取得し、そこに挿入します。たとえば、graph.jsを必要とするモジュールがあるとします。これをインポートするには、次のようなものを使用します。

JHtml::_('script', JUri::root() . 'modules/my_module/js/graph.js');

これで、<jdoc:include type="head" />が上記のコードを取得して<head>に挿入し、手動で実行する必要がなくなりました。したがって、広告を削除しないでください。また、Joomlaに同梱されるいくつかのコアスクリプトにも必要になります。

サイトでモジュールを使用したい場合は、HTMLコードをindex.phpに追加するだけでは適切に機能せず、動的であると期待できません。これが私たちが使用する理由です：

<jdoc:include type="modules" name="position-7" />

これは、コード化されたモジュールとHTML構造をインポートします。 canただし、次のようにモジュールをラップするカスタムHTMLを追加します。

<div class="sidebar">
    <div class="sidebar-inner">
        <jdoc:include type="modules" name="position-7" />
    </div>
    <div class="sidebar-inner">
        <jdoc:include type="modules" name="position-8" />
    </div>
</div>

それはそれほど複雑ではありません、そしてそれは人生をとても単純にします。 Joomlaは静的なアプローチに基づいていないため、その動作方法に固執する必要があります。

4
Lodder

私が最初に始めたとき、標準のJoomlaテンプレートはそれほどきれいではなかったので、それは初心者にとっては良かったです。

次のようなヘッドセクションがあります...

<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/layout.css?v=20140508" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/menus.css?v=20140508" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/modules.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/styles.css?v=20140508" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/print.css" type="text/css" media="print" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/peter.css?v=20140508-6" type="text/css" />

特に、スタイルシートはaddStyleSheetの "Nice"方法に含まれていないため、最後に、配置された場所に残ります。動的に追加されたスタイルシートは、<jdoc:include type="head" />ポイントに挿入されます。

テンプレートで何が起こっているかとは、スタイルシートが最初にロードされ、次に動的に追加されたJoomlaスタイルシートが最後に追加されることです。それはすべて、addStyleSheet関数が呼び出される場所によって異なります。

テンプレートに必要なものがすべて揃っていることに自信があり、追加の動的ビットを追加する必要がない場合（フロントエンドエディターなど）、または追加する拡張機能がある場合は、<jdoc:include type="head" />、少なくとも初心者用テンプレート。

または...付属のヘッドの外の固定ポイントにスタイルシートを追加するだけです。

初心者を超えると、おそらくヘッドセクションを含める必要があります。動的コンテンツを操作する方法はいくつかありますが、初心者向けではありません。たとえば、デバッグ用に、ログインしているユーザーであれば、カスタム拡張を使用して動的に追加するスタイルシートがあります。

1
Peter Wiseman

スタイルがオーバーライドされている場合は、Bootstrapのcssが原因であることに疑いの余地はありません。これは、いくつかの高特異性セレクターを使用しているためです。

静的サイトはBootstrapを使用していますか？そうでない場合は、ほとんどの場合、Joomlaテンプレートにそれがない方が良いでしょう。あなたはそれだけで戦うことになります。これはあなたがすでに見たものだと思います。

静的サイトがBootstrapを使用しなかった場合も、ここでのLESSに関するすべての話を忘れて、あなたが行ったように、独自のCSSとJSを単に含めることができます。 JoomlaテンプレートでBootstrapを使用する必要があります。

1
Seth Warburton