web-dev-qa-db-ja.com

Omegaサブテーマでカスタムパネルレイアウトをどのように作成しますか？

Omegaパネルレイアウトの1つに基づいて新しいカスタムパネルレイアウトを作成し、それをOmegaサブテーマに配置したいのですが、これを行う方法が見つからないようです。

これまでのところ、サブテーマ.infoファイルに以下を追加しました。

; PLUGINS
plugins[panels][layouts] = panels/layouts

次に、作業したいレイアウト（omega_12_twocol_6_6_bricks）を使用して名前を変更し、これをsites/all/themes/mycustom/panels/layouts/omega_12/mycustom_12_twocol_6_6_bricksにコピーしました。次に、mycustom_12_twocol_6_6_bricksディレクトリ内のすべてのファイルの名前を変更して、「omega」を「mycustom」に置き換えました。次に、私のmycustom_12_twocol_6_6_bricks.incファイル内で変更しました：

function omega_omega_12_twocol_6_6_bricks_panels_layouts() {
  $items['omega_12_twocol_6_6_bricks'] = array(
    'title' => t('Two Column 6-6 bricks'),
    'category' => t('Omega: 12 Column Grid'),
    'icon' => 'omega_12_twocol_6_6_bricks.png',
    'theme' => 'omega_12_twocol_6_6_bricks',
    'admin css' => '../omega_panels_admin_12.css',
    'regions' => array(
      'top' => t('Top'),
      'left_above' => t('Left above'),
      'right_above' => t('Right above'),
      'middle' => t('Middle'),
      'left_below' => t('Left below'),
      'right_below' => t('Right below'),
      'bottom' => t('Bottom'),
    ),
  );

  return $items;
}

に

function mycustom_omega_12_twocol_6_6_bricks_panels_layouts() {
  $items['mycustom_12_twocol_6_6_bricks'] = array(
    'title' => t('My Custom Two Column 6-6 bricks'),
    'category' => t('Omega: 12 Column Grid'),
    'icon' => 'mycustom_12_twocol_6_6_bricks.png',
    'theme' => 'mycustom_12_twocol_6_6_bricks',
    'admin css' => '../omega_panels_admin_12.css',
    'regions' => array(
      'top' => t('Top'),
      'left_above' => t('Left above'),
      'right_above' => t('Right above'),
      'middle' => t('Middle'),
      'left_below' => t('Left below'),
      'right_below' => t('Right below'),
      'bottom' => t('Bottom'),
    ),
  );

  return $items;
}

また、.csファイルに記載されているようにadmin cssファイルを相対ディレクトリにコピーし、すべてのキャッシュをクリアしてupdate.phpを実行しましたが、新しいパネルを追加するときに新しいレイアウトが表示されません。

私が使用しているモジュールのバージョンは次のとおりです。

  • Drupal 7.22
  • パネル3.3
  • オメガ3.1

ここでどんな助けも感謝します。

どうもありがとう

panelstheming
5
Dan Murfitt

基本的なプロセスは次のとおりです。

MYTHEME.infoファイルを編集します。

; PLUGINS
plugins[panels][layouts] = panels/layouts

Panel/layouts/mypanelにディレクトリを作成します

Includeパネル/layouts/mypanel/mypanel.incを作成します

/**
 * Implements hook_panels_layouts().
 */
function mytheme_mypanel_panels_layouts() {
  $items['mypanel'] = array(
    'title' => t('My Panel'),
    'category' => t('My Site'),
    'icon' => 'mypanel.png',
    'theme' => 'mypanel',
    'regions' => array(
      'top' => t('Top'),
      'left' => t('Left column'),
      'right' => t('Right column')
    ),
  );

  return $items;
}

50x75のmypanel.pngを作成し、panels/layouts/mypanel/mypanel.pngとして配置します

テンプレートファイルをpanel/layouts/mypanel/mypanel.tpl.phpとして作成します。

<div class="panel-display mypanel" <?php if (!empty($css_id)) { print "id=\"$css_id\""; } ?>>
    <div class="panel-panel mypanel-top grid-16 alpha omega">
        <div class="inside"><?php print $content['top']; ?></div>
    </div>

    <div class="panel-panel mypanel-left prefix-1 grid-4 alpha">
        <div class="inside"><?php print $content['left']; ?></div>
    </div>

    <div class="panel-panel mypanel-right grid-9 suffix-1 omega">
        <div class="inside"><?php print $content['right']; ?></div>
    </div>
</div>

アップロードしてキャッシュをクリアし、パネルページを作成できるかどうかを確認します。 10回のうち9回、Panelsがカスタムパネルレイアウトを取得する際の問題は、インクルードファイルまたはテンプレートファイルの名前が間違っていることに関係しています。

7
mpdonadio

既存のレイアウトのフォルダーの1つをサイトのテーマディレクトリにコピーして、テンプレートまたはアウトラインとして使用します。これは、名前を変更します（例：twocol）。テーマの名前がmythemeの場合、twocolフォルダーは/ sites/all/themes/mytheme/layouts/twocolにコピーされます。

このフォルダには4つのファイルが含まれています。これらのファイルは次のとおりです。

  1. twocol.png、レイアウトのスクリーンショット。
  2. twocol.css、レイアウトのスタイルシート。
  3. twocol.incには、hook_panels_layouts（）の実装のみが含まれています。
  4. panel-twocol.tpl.php、レイアウトのテンプレートファイル。

ファイルの名前を変更する必要があります。 onerowtwocolsという、1行2列のシンプルなレイアウトを作成します。ファイル名のすべてのtwocols名をonerowtwocolsに置き換えます。ただし、panels-twocol.tpl.phpは、onerowtwocols.tpl.phpに名前を変更する必要があります（つまり、名前からpanels-も削除します）。フォルダの名前もonerowtwocolsに変更することを忘れないでください。

ここで、テーマの情報ファイルを変更する必要があります。この例では、/ sites/all/themes/mythemeのルートテーマフォルダーにあり、mytheme.infoと呼ばれています。 Drupalこのテーマのカスタムパネルレイアウトを含むフォルダーの場所を指定するには、ファイルの下部に次の行を追加します。

; Panels layouts. You can place multiple layouts under the "layouts" folder.
plugins[panels][layouts] = layouts

タイトルはDrupalで表示され、t()関数でラップされ、翻訳可能になります。'title '=> t（' 1行2列 '）を使用します。 。

レイアウトのスクリーンショットは次です。「icon」=>「onerowtwocols.png」となります。テーマは、次のように、.tpl.php拡張子を除いたテンプレートファイルの名前になります： 'theme' => 'onerowtwocols' ,.

CSS： 'css' => 'onerowtwocols.css' ,.

パネル配列では、レイアウトが完了したらコンテンツを配置できる領域を定義します。各領域に新しいアイテムを追加するだけで、次のようになります。

'panels' => array(
    'top' => t('Top'),
    'left' => t('Left side'),
    'right' => t('Right side')
),

次のようなプラグイン配列（.incファイル内）が見つかります。

$plugin = array(
  'title' => t('One row two columns'),
  'category' => t('onerowtwocols'),
  'icon' => 'onerowtwocols.png',
  'theme' => 'onerowtwocols',
  'css' => 'onerowtwocols.css',
  'regions' => array(
    'top' => t('Top'),
    'right' => t('Right side'),
    'left' => t('Left side')
  ),
);

...そのため、上記の手順を使用して、その配列を編集するだけです（かなり明白です）。レイアウトを最もよく表すようにスクリーンショットを編集します。元のpngファイルのファイルサイズ（ピクセル単位）を維持して、Panelsユーザーインターフェイスで見た目がきれいになるようにします。

それでは、実際のレイアウトパーツを開始しましょう。 onerowtwocols.tpl.phpを開いて、2列のレイアウトがどのように設定されているかを確認してください。小さなPHPスニペットのようなprint $ content ['left'];は、コンテンツを追加できる領域を定義するために使用されます。既存のHTMLを部分的に使用して、独自のHTMLの一部を変更します。外側のdivが始まり、外側のdivに進みます。外側のdivはほぼ同じままで、1つのクラスのみを独自のものに変更します。

<div class="panel-display panel-1row2cols clearfix" <?php if (!empty($css_id)) { print "id=\"$css_id\""; } ?>>
    <!-- Our content goes here -->
</div>

Div内のPHPスニペットにより、PanelsユーザーインターフェイスからCSSを使用できるようになります。そのままにしておきますが、スタイルシートを介してのみCSSを使用して、スタイルをPHPから分離することをお勧めします。 。次に、2つの行を作成します。

<div class="panel-display panel-1row2cols clearfix" <?php if (!empty($css_id)) { print "id=\"$css_id\""; } ?>>
    <div class="panel-1row2cols-row clearfix"><!-- Our content goes here --></div>
    <div class="panel-1row2cols-row clearfix"><!-- Our content goes here --></div>
</div>

固定の幅と高さを設定しないため、両方の行に同じクラスを指定できます。次に、下の行に2つの列を作成します。

<div class="panel-display panel-1row2cols clearfix" <?php if (!empty($css_id)) { print "id=\"$css_id\""; } ?>>
    <div class="panel-1row2cols-row clearfix"><!-- Our content goes here --></div>
    <div class="panel-1row2cols-row clearfix">
        <div class="panel-1row2cols-left"><!-- Our content goes here --></div>
        <div class="panel-1row2cols-right"><!-- Our content goes here --></div>
    </div>
</div>

最後に、onerowtwocols.incファイルで使用した名前を使用して、エリアを追加します。

<div class="panel-display panel-1row2cols clearfix" <?php if (!empty($css_id)) { print "id=\"$css_id\""; } ?>>
    <div class="panel-1row2cols-row clearfix"><?php print $content['top']; ?></div>
    <div class="panel-1row2cols-row clearfix">
        <div class="panel-1row2cols-left"><?php print $content['left']; ?></div>
        <div class="panel-1row2cols-right"><?php print $content['right']; ?></div>
    </div>
</div>

これは、編集するファイルが1つだけ残っていることを意味します。cssファイルです。レイアウトを配置する領域に合わせるため、固定幅は指定しません。

外側のdivと行は100％になります。

.panel-1row2cols {
    width: 100%;
}
.panel-1row2cols-row{
    width: 100%;
}
Our columns will float to the left and to the right:
.panel-1row2cols-left {
    float: left;
}
.panel-1row2cols-right {
    float: right;
}

最後に、他のレイアウトで実際に表示されるようにキャッシュをクリアして、レイアウトを使用できるようにする必要があります。

4
user13530