インターネットのロシア側ではほとんど何も見つかりませんでした-レビューも文書もありませんが、記事は表面的なものでした。 唯一の完全な情報は公式ウェブサイトにのみあります。
ロシアのインターネットとドキュメントの一部を読んで、Gantry 5を勉強することにしました。テンプレートエンジンとしてtwigを使用し、yaml形式で設定を保存することは追加のプラスでした。 ）
特徴
Gantry 5の主な機能についてはいくつかの記事がありますが、詳細については説明しませんが、何が原因であるかは理解できます（ただし、ユーザーの観点からは）。 残念ながら、テンプレートの作成方法についての単一行はありませんでした。 したがって、トピックの開発を基礎として、ツールの説明を試みます。
主な用語
粒子は主要な建築材料です。 簡単なのは1モジュールです。 次の3つのタイプがあります。
- 標準パーティクルとは、パーティクル自体のパラメータを考慮してページにデータを表示できるモジュールです（出力されるデータはパーティクル自体によって異なります）。
- 位置 -システムがリクエストで返した基本情報を含むパーティクル。 たとえば、記事のテキストやストア製品のリスト。
- 原子 -隠された要素、スクリプト。 たとえば、Google Analytics。
Gantry 5は、多数のネイティブフィールドタイプを使用します。 ここでリストと機能を知ることができます（alas、英語版ドキュメントのみ）
ファイル構造（水素）
水素は、 ここからダウンロードできる基本的なガントリー5テンプレートです 。 テンプレートの構造について話しますが、それに焦点を合わせます（この画像と似顔絵に従って独自のテンプレートを作成する価値があります）。
/ admin / -システムファイルの再定義（強く推奨）および管理パネルで使用できるいくつかのマテリアル（画像など）。
/ blueprints / -ディレクトリには、コンテンツ、ページの3つのディレクトリスタイルを含めることができます。
ここで、拡張子が.yamlのファイルには、フィールドに関するデータが格納されます。この情報は、後でscssのコンパイル時またはテンプレートの制御時に変数として使用できます。
/ config / -いくつかの設定と同様ですが、何人が実験を試みなかったのかは、それらが何のためであり、どのような役割を果たしているかを判断できませんでした。
/フォント/ -使用するフォント。 デフォルトでは、Gantry 5はそれらをGoogleから取得します。 これを回避するには、使用済みフォントをここに配置します。
/ gantry / -テーマの説明ファイルが.yaml形式で保存されるディレクトリ（テーマの説明と配色パターン）。
/ images / -テーマ画像のあるディレクトリ。テーマのカスタマイズに使用できます。
/ include / -Gantry 5とテーマの相互作用を担当するファイルを含むディレクトリ。
/ install / -長い間、このディレクトリの設定が何に責任があるのかを理解しようとしました。 内容に関しては、これはアクティベーション時にインストールされたトピックで作成されたマークアップの説明のようです。
/ layouts / -レイアウトテンプレートを保存するディレクトリ。 デフォルトでは、「Body only」、「Error」、「Offline」の3つの必須テンプレートが定義されています。
/ particles / -独自のパーティクルを保存するディレクトリ。 新しいパーティクルを決定するには、2つのファイル{name} .yamlおよび{name} .html.twigが含まれている必要があります。 最初は粒子の構成を記述し、2番目はそのレンダリングを担当します。
/ scss / -Gantry 5がコンパイルするscssファイルのディレクトリ。
/ views / -小枝テンプレートのあるディレクトリ。
テンプレートを作成する方法
インターネットでは、Gantry 5でテンプレートを操作する2つの方法を見つけることができました。
- RocketTheme自身が開発した軽量のHydrogenに基づいて子テーマを作成します。 彼らはこの方法の使用を提案しています。
- 水素テーマの最初の保存後に表示される/ custom /ディレクトリ内のトピック全体を説明します。 テーマの新しいバージョンがリリースされても、このディレクトリは更新されず、そのデータは失われません。 ただし、/ custom /は基本的にデータのキャッシュであり、すべての設定がそこに保存されるため、私はこの専門家ではないと考えています。 実際、作業は一時保管施設で行われており、顧客に提供することはなんとなく見苦しいことがわかりました。
古い格言のおかげで（あなたがうまくやりたいなら、自分でやりなさい）、 3番目の方法が選ばれました。
別のきれいなトピックを作成し、Gantry 5の操作方法を教えました（それほど難しくないため）。 さらに、このアプローチには利点があります。TGMプラグインのアクティベーショントピックに縫い込み、Gantry 5プラグインを含めて必須にしました。 したがって、テーマをアクティブにすると、必要なプラグインがすぐにインストールされます（さらに-ここにもっと便利なものを追加できます）。
順番に始めましょう
初期化
WPテーマ用のディレクトリを作成し、3つのファイルindex.php 、 style.css 、 functions.phpを 含め ます 。 水素テーマからincludeおよびgantryフォルダーをコピーします （このディレクトリには2つのファイルがあります。1つはPersetsで、2つ目はテーマオプションで、構成を記述するための基礎として使用します）。 style.cssでテーマを初期化し、 functions.phpファイルに次のコードを追加します。
//*****************************// //Gantry //*****************************// { // Gantry 5 $requiredGantryVersion = '5.4.0'; // Gantry 5 $gantry_include = get_stylesheet_directory() . '/includes/gantry.php'; // if ( ! file_exists( $gantry_include ) ) { $gantry_include = get_template_directory() . '/includes/gantry.php'; } $gantry = include_once $gantry_include; if ( ! $gantry ) { return; } // Gantry if ( ! $gantry->isCompatible( $requiredGantryVersion ) ) { $current_theme = wp_get_theme(); $error = sprintf('Please upgrade Gantry 5 Framework to v%s (or later) before using %s theme!', strtoupper( $requiredGantryVersion ), $current_theme->get( 'Name' ) ); if ( is_admin() ) { add_action( 'admin_notices', function () use ( $error ) { echo '<div class="error"><p>' . $error . '</p></div>'; }); } else { wp_die( $error ); } } /** @var \Gantry\Framework\Theme $theme */ $theme = $gantry['theme']; // $helpers = array( 'includes/helper.php', // ); foreach ( $helpers as $file ) { if ( ! $filepath = locate_template( $file ) ) { trigger_error( sprintf( 'Error locating %s for inclusion', $file ), E_USER_ERROR ); } require $filepath; } }
その後、テーマはすでにGantry 5で動作します。
はい、私は自分でトピックを収集しましたが、水素で勉強し、それをベースとして使用しました。 そして今、私はトピックとそのパフォーマンスを確信しています。何かが壊れた場合にどこを見るべきかを知っています。
開発モード
Gantry 5管理パネルを開くときに最初に注意する必要があるのは、開発者モードです。 テーマを開発するときは、常にオンにする必要があります。
Gantry 5には統合されたscssプリプロセッサがあり、スタイルファイルをオンザフライでコンパイルできます。 さらに、コンパイルは、プリプロセッサがGantry 5フィールドの値を変数として使用できるように設計されています。たとえば、/ blueprints / styles / body.yamlには、色を担当するフィールドがあり、その助けを借りてボディを変更する必要があります。 コードはscssで記述されています。
// body , // $body-color-1: #ffffff; body{ background: $body-color-1; }
コンパイル時に、管理パネルで色が設定されている場合、背景はそれに再描画されます;そうでない場合、ファイルにインストールされているデフォルトの色が使用されます。
パーティクルでこのような設定を使用する必要がある場合は、スタイル属性を介してパーティクル小枝テンプレートで指定する必要があります。
理想的には、scssファイルに含まれる変数と同じ数の設定フィールドを取得する必要があります。 これにより、最もカスタマイズ可能なテーマが作成されます。
さらに、Gantry 5では、いくつかの定義済みのカラースタイルを作成できます。 追加するものはありません。1つのスキームが選択され-色が1つ、別のスキームが選択され-色が変更されます。
そのため、Gantry 5をコンパイルすると、将来使用されるcssファイルが作成されます（多くのアクションが必要なため、開発中はファイルを絶えず再コンパイルするのは不便です）。 これが開発モードの目的です。 ページが更新されるたびに、新しいスタイルシートが作成されます。
開発モードの2番目の利点は、エラーメッセージとそれらに関するより完全な情報です。 たとえば、.twigテンプレートファイルを取得できない、またはその他の問題がある場合、Gantry 5は通知し、何が壊れているかを通知します。
レイアウトテンプレート
Gantry 5の適応性は、Nucleusタグシステムに基づいています。 スタイルファイルは、「ROOT / wp-content / plugins / gantry5 / engine / nucleus /」にあります。 テンプレートのscssで、4つのファイルを接続する必要があります。
@import "vendor/bourbon/bourbon"; @import "configuration/nucleus/base"; @import "nucleus/functions/base"; @import "nucleus/mixins/base";
同時に、それらを再定義する必要はありません;コンパイル中にプラグインからプルされます。
以前に接続されたスタイルのおかげで、それに続くパーティクルのレイアウト用のページレイアウトテンプレートを作成できます。
レイアウトテンプレートについては、 {theme directory} / layoutsディレクトリで説明しています 。 ページレイアウトを構成すると、テンプレートが管理パネルに表示され、パーティクルの配置に使用できます。
default.yamlテンプレートの説明の例を次に示します。
version: 2 # preset: image: gantry-admin://images/layouts/default.png // /admin/ # . layout: /header/: - [logo 30, position-header 70] /navigation/: - menu /main/: - position-breadcrumbs - system-messages - system-content /footer/: - position-footer - [copyright 40, spacer 30, branding 30] offcanvas: - mobile-menu
1つの重要な機能に注意する必要があります。1つのマークアップテンプレートから別のテンプレートへのパーティクルパラメータの継承です。 デフォルトでは、基本的なマークアップがあります。 その中で、主要な部分が構成されます-例えば、メニュー、ヘッダー、地下室。 また、他のテンプレートでは、これらの要素を継承できます（ただし、必要に応じて、継承を無効にできます）。
粒子の詳細
Gantry 5プラグインをインストールすると、11個のパーティクル、5個の位置、4個の事前定義された原子がデフォルトで使用可能になります。 私たちが彼らの行動に慣れていない場合、私たちはいつでも彼らを再定義し、必要なものを教えることができます。
単純な粒子
パーティクル自体は、ページテンプレートのどこにでも表示できる独立した独立したモジュールです。
ほとんどの場合、通常のパーティクルのセットで十分ですが、他とは異なるパーティクルを作成する必要がある場合（たとえば、住所や電話の出力など）はどうでしょうか。 必要なことは、パーティクルディレクトリに2つのファイルを作成することだけです（たとえば、 phone.yamlとphone.html.twig ）。 最初は粒子の構成を記述し、2番目は出力パターンを記述します。 phone.yamlでは 、パーティクルを説明し、その名前、説明、 パーティクルのタイプ（ atom 、 position ）およびアイコン（ Font Awesome ）を指定する必要があります。
位置と原子については、再定義しないでください。 同様のパーティクルが必要な場合は、それに基づいて新しいパーティクルをコピーして作成することをお勧めします。
一般的な印象
応答性、パーティクル、便利な管理パネル、興味深いソリューション、作業の高速化（すべての構成はファイルに保存されるため）、WordPress、Joomla、Grav、およびWordPressで使用すべきでないと思われるテクノロジで作業する機能により、このフレームワークが単なる開口部になりました。
テクノロジーの詳細な紹介の後、なぜそれについてほとんど知られていないのか理解できません。
現時点では、Gantry 5の唯一の欠点は、英語のドキュメント（どちら側を見るか）と、インターネットの私たちのセグメントのフレームワークに関する情報の不足です。
少し結論
この記事ではあまり語らないことを理解していますが、デバイスの詳細とガントリー5の各側面の操作を詳しく説明すると、おそらく長すぎるかもしれません。 トピックを徹底的に研究し、会話を続けるつもりです。