テーマ-最初から始める


30

何が優先開始する方法完全なサイト構築をから、スクラッチは?私のビルドは通常、完全にモックアップされたHTML5ワイヤフレームページから始まり、そこから機能をプラグインします。

しかし、プロジェクトの後半の段階では、ほとんどの場合、プラグインする必要のある機能のすべての領域を見つけることになります。通常、エンタープライズRMA、カスタマーマイアカウントセクションなどです。これは、1日目からMagentoテーマで開始することで回避できます。反対の見方では、CSSを記述し、デフォルトから構造を変更するのに等しい時間がかかる言われています。

Core "blank"テーマをベースに構築していますか?この空白のテーマのエンタープライズ版はありますか?ここでのベストプラクティスは何ですか?

回答:


32

したがって、これは究極の騒動を引き起こし、すべてのMagento開発者のグレインに反しますが、local.xmlを使用しないテーマ設定のための堅実なプロセスを持っています()

私たちは常にbase/default(およびenterprise/defaultEEの)テンプレートを削除しますが、CSSをゼロにします。すべてのデザインがバニラマジェントストアの構造レイアウトに特に適しているわけではありませんが、defaultテーマを出発点として使用することをお勧めします。テンプレート作成中に、必要に応じて未使用のmethods / loops / htmlなどを削除できます。

テーマを開始するとき

EEの場合

最初にこの拡張機能をインストールし、テーマのフォールバックレベルを取得します-後でコピーしたテーマファイルを削除するときに。

その包み

まず、パッケージを作成し、base/defaultテーマ全体をコピーすることから始めます。そのため、たとえば(私たち自身のWebサイトだとすると、パッケージと呼びますsonassi

cd ./app/design/frontend
mkdir sonassi
cp -par base/default sonassi/default
mkdir sonassi/default/layout/custom

テンプレート

最終的な目標は、必要に応じて変更する各ファイルをコピーして貼り付ける必要はなく、テーマ内のファイルを編集するだけです。

ただし、ファイルを編集するたびに、Magento Commerceヘッダーを削除し、適切なヘッダー/識別子を追加して、ファイルをカスタムテンプレートとしてマークします。

/*
* @category    Template
* @package     sonassi_default
* @copyright   Copyright (c) 2013 Sonassi
*/

このヘッダーは、後で最終的なテンプレートのクリーンアップを行うときに目的を果たします。ディレクトリとディレクトリを再帰的diffに実行するため、変更されていないものはすべて削除します。base/default/templatesonassi/default/template

これにより、変更されたファイルのみが残り、パッケージ全体が変更された最小限のファイルに削減されます。

レイアウトファイル

独自の標準コアモジュールを使用しますsonassi.coreはい、常にモジュールの名前空間に一意の識別子を付けます-他の会社が同じ名前を選んだ場合の競合を防ぎます(例:fishpig / wordpressとsonassi / wordpress)


非ローカルレイアウトの方法論

<core>
  <rewrite>
    <layout>Sonassi_Core_Model_Core_Layout</layout>
    <layout_update>Sonassi_Core_Model_Core_Layout_Update</layout_update>
  </rewrite>
</core> 

次に、二度と必要としない機能を追加する2つの魔法のクラスlocal.xml

class Sonassi_Core_Model_Core_Layout 
    extends Mage_Core_Model_Layout
{
    /**
     * Loyout xml generation
     *
     * @return Mage_Core_Model_Layout
     */
    public function generateXml()
    {
        $xml = $this->getUpdate()->asSimplexml();
        $removeInstructions = $xml->xpath("//remove");
        if (is_array($removeInstructions)) {
            foreach ($removeInstructions as $infoNode) {
                $attributes = $infoNode->attributes();
                $blockName = (string)$attributes->name;
                if ($blockName) {
                    $unremoveNodes = $xml->xpath("//unremove[@name='".$blockName."']");
                    if (is_array($unremoveNodes) && count($unremoveNodes) > 0) {
                        continue;
                    }
                    $ignoreNodes = $xml->xpath("//block[@name='".$blockName."']");
                    if (!is_array($ignoreNodes)) {
                        continue;
                    }
                    $ignoreReferences = $xml->xpath("//reference[@name='".$blockName."']");
                    if (is_array($ignoreReferences)) {
                        $ignoreNodes = array_merge($ignoreNodes, $ignoreReferences);
                    }

                    foreach ($ignoreNodes as $block) {
                        if ($block->getAttribute('ignore') !== null) {
                            continue;
                        }
                        $acl = (string)$attributes->acl;
                        if ($acl && Mage::getSingleton('admin/session')->isAllowed($acl)) {
                            continue;
                        }
                        if (!isset($block->attributes()->ignore)) {
                            $block->addAttribute('ignore', true);
                        }
                    }
                }
            }
        }
        $this->setXml($xml);
        return $this;
    }
}

そして

class Sonassi_Core_Model_Core_Layout_Update 
    extends Mage_Core_Model_Layout_Update
{

    public function getFileLayoutUpdatesXml($area, $package, $theme, $storeId = null)
    {
        if (null === $storeId) {
            $storeId = Mage::app()->getStore()->getId();
        }
        /* @var $design Mage_Core_Model_Design_Package */
        $design = Mage::getSingleton('core/design_package');
        $layoutXml = null;
        $elementClass = $this->getElementClass();
        $updatesRoot = Mage::app()->getConfig()->getNode($area.'/layout/updates');
        Mage::dispatchEvent('core_layout_update_updates_get_after', array('updates' => $updatesRoot));
        $updateFiles = array();
        foreach ($updatesRoot->children() as $updateNode) {
            if ($updateNode->file) {
                $module = $updateNode->getAttribute('module');
                if ($module && Mage::getStoreConfigFlag('advanced/modules_disable_output/' . $module, $storeId)) {
                    continue;
                }
                $updateFiles[] = (string)$updateNode->file;

                // custom theme XML contents
                $updateFiles[] = 'custom/'.(string)$updateNode->file;    

                // custom theme XML override
                $updateFiles[] = 'local/'.(string)$updateNode->file;            
            }
        }

        // custom local layout updates file - load always last
        $updateFiles[] = 'local.xml';
        $layoutStr = '';
        foreach ($updateFiles as $file) {
            $filename = $design->getLayoutFilename($file, array(
                '_area'    => $area,
                '_package' => $package,
                '_theme'   => $theme
            ));
            if (!is_readable($filename)) {
                continue;
            }
            $fileStr = file_get_contents($filename);
            $fileStr = str_replace($this->_subst['from'], $this->_subst['to'], $fileStr);
            $fileXml = simplexml_load_string($fileStr, $elementClass);
            if (!$fileXml instanceof SimpleXMLElement) {
                continue;
            }
            $layoutStr .= $fileXml->innerXml();
        }
        $layoutXml = simplexml_load_string('<layouts>'.$layoutStr.'</layouts>', $elementClass);
        return $layoutXml;
    }

}

上記の2つのクラスは機能をMagentoに追加するため、拡張できますが、レイアウトXMLファイルを上書きすることはできません。レイアウトXMLの拡張性は、同じファイルの分離を維持できるため、私たちにとって重要ですcatalog.xmlcms.xmlなど-が、ブロックのみ(挿入/クローン/削除)を操作するために、レイアウトXMLの短い部分を追加する必要があります。

local.xml方法論は、あなただけの1面倒な管理不能のファイルにあなたの上書き変更内容を入力することです。

nolocal(例えば、それは修正されていることではなく、単一のファイルにすべての変更を置くよりも、あなたが適切なファイル名でファイルに入れ方法論手段catalog.xml) -単純に新しいファイルを作成することによってsonassi/default/layout/custom/catalog.xml- *でのみ修正

繰り返しますが、テンプレートの作成が完了したらsonassi/default/layoutcustomディレクトリ以外のコンテンツを削除するだけです。この方法でも、テンプレートと同様に、基本テンプレートに基づいた軽量の拡張テンプレートがあります。

スタイルシート

それらをすべて削除します。パッケージのCSSディレクトリにそれらをコピーすることはありません。JSにコピーします。これで、imagesand CSSディレクトリは最初から空になります。

現在、SASSを使用しているscssため、前処理済みCSS用の別のディレクトリ()と、メインスタイル/印刷CSSファイルへの出力があります。

テンプレートのクリーンアップ

先ほど述べたように、テンプレートテーマが完成したら、今度はクリーンアップできます。変更されていないファイルを削除し、最小限に抑えます。

cd ./app/design/frontend

PREFIX="cleantheme_"
THEME="sonassi/default"
diff -BPqr "base/default/template" "$THEME/template" | \
awk '{print $4}' | \
  while read FILE; do 
    DIR=$(dirname "$FILE")
    [ -d "$PREFIX$DIR" ] || mkdir -p "$PREFIX$DIR"
    [ -f "$PREFIX$FILE" ] || cp -pa "$FILE" "$PREFIX$FILE"
  done
cp -par "$THEME/layout" "$PREFIX$THEME/"

だからなぜだlocal.xml

それはあなたのためではなく、サードパーティのcommunityためであり、あなたのためでlocalあり、サードパーティのためでもあります。そのフェールバック、最後の手段、オーバーライドの最終宛先。

この方法でXMLを構造化すると、Magentoが最初にディレクトリとファイル構造を設定した方法とXMLが一致します。さらに、開発の継続性のために-それはより理にかなっており、消化するのがはるかに簡単であり、顕著なオーバーヘッドを追加しません。

Magentoは奇妙な製品であり、コミュニティは常識に基づいて独自のベストプラクティスを考案し、Magentoのコアチームが行うことを模倣しています。そのため、公式な方法はありません(ユニコーンがMagento-1のドキュメントを使用するまで)。しかし、これは私たちの方法です。

ですからこれは答えではなく一般的に直面している課題に取り組むための多くの方法の1つに過ぎないと言うこともできます。私たちの方法は最高だと思いますが。

sonassi.comから提供されたコンテンツ


1
あなたたちは信じられないほど創造的でない限り、何もありません。
-philwinkle

3
非常に良い記事と全面的な堅実なアドバイス。
ColinM

既存のファイル間で単にコピーしたり、local.xmlを使用したりするのではなく、レイアウトxmlを拡張するアプローチが気に入っています。最初にすべてのテンプレートファイルをコピーする代わりに、Magententoの「テンプレートのコピー」コマンドが気に入っています。このコマンドを使用すると、テンプレートを別のテーマに簡単にコピーして、適切なフォルダー構造に配置できます。または、最後に3テーマをクリーンアップするとき、n98-magerun.pharの「dev:theme:duplicates」コマンドをチェックアウトすると、変更されていないファイルのリストが生成されます。
ジムオハロラン

default/defaultCEインストール用にフォールバックするプラグインがあるのだろうか。おそらく、与えられたソースでハッキングするのはそれほど難しいことではなく、好奇心が強いだけです(これを噛む:カスタムテーマとサードパーティの拡張機能を考慮したMagentoテーマのフォールバック/階層
hakre

"...the same way that community is for you and local is for 3rd parties..."Magentoの方法は、ここで述べられているように、これとは逆の方法です。magentocommerce.com
wiki

7

エンタープライズ向けの空のブートストラップテーマを作成します。それはenterprise/defaultテーマそのCSSをクリーンアップし、「すべてのものをクリックして」、機能のスタイル設定を処理したことを確認します。製品グリッドビューのブードゥー教を忘れないでください。

利点の1つは、これにより、LESS(またはその他の)ワークフローを設定できることです。考えてみてください-空白のテーマは明るい色のテーマの良い出発点ですが、ダーク/ブラックのテーマに適応するように切り替えるには少し手間がかかります。何より、あなたがしなければならない組み込んだenterprise/defaultそうでなければ、壊れEEが最初からインストール持っているテーマを。


あなたは絶対に正しいです
-philwinkle
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.