web-dev-qa-db-ja.com

テンプレートの開発/調整のワークフロー

通常、私は既存の無料のテンプレートを調整し、色とフォントを変更するだけです。問題は、私がすでにJoomlaページをオンラインに持っているときに、テンプレートCSSを変更する最も簡単な方法は何ですか？

現在、私は Chrome Development Tools を使用して、プレビューの特定のスタイルを検索および調整しています。気に入った場合は、管理領域のオンラインエディタでテンプレートのcssファイルを直接調整します。

私が最初に始めたとき、何もコンテンツを持っていなかったとき、私はJoomlaでローカルWebサーバーを使用しました。これには、CSSとphpコードの記述に適切なIDEを使用できるという利点がありました。すでにいくつかのコンテンツがありますが、自分のコンテンツで行った変更がどのように見えるかを確認したいと思います。

これは基本的な質問であることは承知していますが、誰かが既存のサイトのデザインを調整したいときに望ましいワークフローはありますか？

templatesfonts
16
halirutan

Akeebaを使用してライブサイトを複製し、ローカルにインストールして、必要に応じて調整します。 SSH/FTPが終了したら、変更したファイルをライブサイトに戻します。

ライブサイトで「微調整」するのが無分別である理由はたくさんあります…

10
Seth Warburton

使いやすさ、自動化、コストのいずれに重点を置いているかに応じて、ここにはいくつかのオプションがあります。

  • ホストがリモートアクセスをサポートしている場合は、ローカルインストールで以前とまったく同じことを行いますが、一度インストールしたら、ローカルのJoomlaインストールを変更して、ライブのリモートMySQLデータベースをconfiguration.phpで使用するようにします。ただし注意してください-DBの変更はライブにロールオーバーされます...

  • extplorerのようなコンポーネントを使用して、ブラウザーでテンプレートファイルを直接編集し、別のタブを開いてサイトを表示し、引き続きChromeの開発ツール。 extplorerはコードのカラーリングを備えており、小さな変更をすばやく行うのに最適です。

  • バージョン管理システムを使用して変更をプッシュアウトします。たとえば、選択したIDEを使用して、ローカルのJoomlaインストールでテンプレートを開発し、そのテンプレートをリポジトリに保存します。完了したら、変更をライブサイトにコミットします。コミット後フックを使用して、これらの変更を作業バージョンとしてチェックアウトします。設定は複雑ですが、間違えた場合は常に古いテンプレートバージョンにロールバックできることを意味します。リモートMySQLを追加して、ローカルとライブのデータの一貫性を確保します。

  • 適切なテンプレート/テンプレートフレームワークの支払い-私の会社では YooTheme テンプレートを使用しています。このテンプレートフレームワークには「Customizr」と呼ばれる機能があります。これは基本的に、左側に数百のCSS変数（まあ、LESS変数）と右側にライブプレビューを備えた2ペインのウィンドウです。これらの変数は、ガターパディングからメニュー項目のテキストシャドウまで、およびその間のすべてのテンプレートのほぼすべての要素を制御します。変更はプレビューで即座に適用され、複数の「スタイル」を定義できるため、さまざまな変数構成で遊ぶことができます。これはすべて言った、他のテンプレートフレームワークが非常に類似した機能を持っていると確信しています。

注意：私はユーザーとして以外はextplorerやYooThemeとは関係ありません。

10
codinghands

CSSの変更だけの場合は、Chrome開発ツールでプレビューし、 Cloud9 や ShiftEditなどのオンライン開発環境を使用してください。 FTP経由でサーバーに直接接続し、適切なIDEを使用して、ライブサイトに微調整を加えることができます。

ただし、サイトを破壊する可能性のある大きな変更については、これをお勧めしません（数年前に私は難しい方法を学びました）。これらについては、ローカルサーバー（または無料のVM from koding.com ））をセットアップし、サイトを Akeeba で複製して使用することをお勧めしますGit *を使用して、変更がテストされたらライブサイトに変更をプッシュします。

* GitHub でコードを公開したくない場合は、 BitBucket を使用することをお勧めします。

6
Adam B

方法1

私が使用した1つの方法は、独自のcssファイルをテンプレートのindex.phpファイルに追加することです。これは、ユーザーである場合にのみラップして追加できます。

これを拡張する方法は、ユーザーがCSSファイルを追加する単純なプラグインを作成することです。これを使用して、デフォルトの管理テンプレートに変更を加えました。これは、次の更新で置き換えられる可能性があるテンプレートを直接変更しないようにするためです。

何かのようなもの...

class plgSystemBB extends JPlugin {
    public function onBeforeCompileHead() {

    if (JFactory::getUser()->username == 'my.login.name.goes.here')
    {
        JFactory::getDocument()->addStylesheet("/templates/protostar/css/test.css");
    }

    if(!JFactory::getApplication()->isAdmin()){
        return;
    }   

    JFactory::getDocument()->addStylesheet("/templates/isis/css/admin-extra.css");
}

方法2

テンプレートの変更をプレビューするには、テンプレートを複製して、複製で変更を加えることができます。これらの変更を表示するには、テンプレートに優先する「？template = test」をURLに追加します。 「test」を、複製に使用することにした任意の名前に置き換えます。

スタイルだけでなく、テンプレート全体を複製する必要があることに注意してください。スタイルとテンプレートの両方は、管理GUIで複製できます。

URLのスタイルを上書きすることはできないと思います。 [PW：J3では、URLのスタイルをオーバーライドできることがわかりました。方法3を参照してください。]

方法3

方法2に似ていますが、スタイルがあります。 「テスト」スタイルを使用し、メインテンプレートを変更してテストスタイルシートを含めます。 URLのスタイルを上書きするには、？templateStyle =を追加します。ここで、テンプレートの識別子（数値など）です。

5
Peter Wiseman