it-swarm-tr.com

Bir form teması için şablon dosyası nasıl kullanılır?

Drupal) içindeki düğümler, yorumlar, bloklar ve daha pek çok şey tema şablonu dosyaları (node.tpl.php gibi) kullanılarak temalı olsa da, formlar farklı bir öyküdür. Özel bir tema şablonu kullanmak için belirli bir formu nasıl edinebilirim?

49
Chaulky

Bir formu görüntülemek için bir tpl dosyası kullanmak tamamen mantıklıdır. Benzer sonuçlar elde etmek için çok sayıda yabancı CSS ve #prefix/#suffix Özellikleri kullanabilirsiniz, ancak tpl'leri kullanarak mantık ve sunum katmanlarınızın ayrılmasını engellemenize gerek yoktur. t #user-login label gibi çirkin CSS seçicilerini hedeflemek zorunda. İşte Drupal 7] 'de bir örnek ...

Mytheme/template.php:

function mytheme_theme($existing, $type, $theme, $path) {
    // Ex 1: the "story" node edit form.
    $items['story_node_form'] = array(
        'render element' => 'form',
        'template' => 'node-edit--story',
        'path' => drupal_get_path('theme', 'mytheme') . '/template/form',
    );

    // Ex 2: a custom form that comes from a custom module's "custom_donate_form()" function.
    $items['custom_donate_form'] = array(
        'render element' => 'form',
        'template' => 'donate',
        'path' => drupal_get_path('theme', 'mytheme') . '/template/form',
    );

    return $items;
}

custom_donate_form ():

function custom_donate_form($form, &$form_state) {
    $form['first_name'] = array(
        '#type' => 'textfield',
        '#attributes' => array('placeholder' => t('First name')),
    );
    $form['last_name'] = array(
        '#type' => 'textfield',
        '#attributes' => array('placeholder' => t('Last name')),
    );
    $form['address'] = array(
        '#type' => 'textfield',
        '#attributes' => array('placeholder' => t('Address')),
    );
    $form['city'] = array(
        '#type' => 'textfield',
        '#attributes' => array('placeholder' => t('City')),
    );
    $form['state'] = array(
        '#type' => 'select',
        '#options' => array(
            'default' => 'State',
            '...' => '...',
        ),
    );
    $form['Zip'] = array(
        '#type' => 'textfield',
        '#attributes' => array('placeholder' => t('Zip')),
    );
    $form['email'] = array(
        '#type' => 'textfield',
        '#attributes' => array('placeholder' => t('Email')),
    );
    $form['phone'] = array(
        '#type' => 'textfield',
        '#attributes' => array('placeholder' => t('Phone')),
    );
    $form['submit'] = array(
        '#type' => 'submit',
        '#value' => 'Submit',
    );

    return $form;
}

Mytheme/şablon/form/donate.tpl.php:

<div class="row">
    <div class="small-12 medium-12 large-8 columns">

        <div class="row">
            <div class="small-12 columns">
                <h5>Contact Information</h5>
            </div>
        </div>

        <div class="row">
            <div class="small-12 large-6 medium-6 columns">
                <?php print render($form['first_name']); ?>
            </div>
            <div class="small-12 large-6 medium-6 columns">
                <?php print render($form['last_name']); ?>
            </div>
        </div>

        <div class="row">
            <div class="small-12 medium-6 large-6 columns">
                <?php print render($form['address']); ?>
            </div>

            <div class="small-12 medium-6 large-6 columns">
                <?php print render($form['city']); ?>
            </div>
        </div>

        <div class="row">
            <div class="small-12 medium-3 large-3 columns">
                <?php print render($form['state']); ?>
            </div>

            <div class="small-12 medium-3 large-3 columns">
                <?php print render($form['Zip']); ?>
            </div>

            <div class="medium-6 large-6 columns"></div>
        </div>

        <div class="row">
            <div class="small-12 medium-6 large-6 columns">
                <?php print render($form['email']); ?>
            </div>

            <div class="small-12 medium-6 large-6 columns">
                <?php print render($form['phone']); ?>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="small-12 medium-12 large-8 large-offset-2 columns">
            <?php print render($form['submit']); ?>
        </div>
    </div>
</div>

<!-- Render any remaining elements, such as hidden inputs (token, form_id, etc). -->
<?php print drupal_render_children($form); ?>

Bu Vakıf kullanıyor, bu da bize böyle bir form veriyor:

enter image description here

73
Charlie Schliesser

Bir modül veya template.php dosyasına hook_form_alter () uygulamanız ve formun # theme özelliğini ayarlamanız gerekir:

/**
 * Implements hook_form_alter().
 */
function hook_form_alter(&$form, &$form_state, $form_id) {
  if ($form_id == 'user_login') {
    $form['#theme'] = array('overwrite_user_login');
  }
}

Ardından yeni tema uygulayın:

/**
 * Implements hook_theme().
 */
function hook_theme($existing, $type, $theme, $path){
  return array(
    'overwrite_user_login' => array(
      'render element' => 'form',
      'template' => 'form--user_login',
      'path' => $path . '/templates',
    ),
  );
}

Ve sonra formu oluşturmak için aşağıdaki kodla form - user_login.tpl.php şablonu ekleyin:

<?php print drupal_render_children($form) ?> 
17
mrded

Kiamlaluno'nun çözümünü şahsen kullanamayacak olsanız bile.

Bir form için şablon dosyasına ihtiyaç duyma nedeniniz nedir? Mevcut bir form için biraz farklı işaretleme yapmak istediğiniz için mi? Öyleyse, formu oluşturulmadan önce değiştirmek için hook_form_alter() kullanabilirsiniz. Form API'sini kullanarak tüm form alanlarını enjekte ederek html öğelerini vb. Değiştirebilirsiniz.

Standart drupal giriş formu bloğunu değiştiren oluşturduğum hook_form_alter() örneği:

/**
 * Implements hook_form_alter().
 */
function MYMODULE_form_alter(&$form, &$form_state, $form_id) {

  switch ($form_id) {
    case 'user_login_block':

      // Form modification code goes here.
            $form['divstart'] = array(
                '#value' => '<div style="background-color: red;">',
                '#weight' => -1,
            );

            $form['instruct'] = array(
                '#value' => '<p>Enter your username and password to login</p>',
                '#weight' => 0,
            );          

            $form['divend'] = array(
                '#value' => '</div>',
                '#weight' => 4,             
            );
      break;
  }
}

Yukarıdaki örnek, formun tamamını arka plan rengini kırmızıya çevirmek için satır içi stile sahip bir DIV içine sarar. Ayrıca, formun başına bir yardım metni paragrafı ekler.

Yukarıdaki kod yüklendikten sonra kullanıcı giriş formum şu şekilde görünüyor:

Customised login form

Daha fazla bilgi için Form API referansına bakın: Form API Referansı

13
Camsoft

Aslında bir form için bir şablon dosyası kullanmak zorunda kalmadım.
Görebildiğim kadarıyla Drupal çekirdek kod, bir formun veya formun bir kısmının belirli bir şekilde oluşturulması gerektiğinde tema işlevlerini kullanıyor; call drupal_render () normalde herhangi bir amaç için yeterlidir.

Soruyu yanıtlamak için form için şablon dosyası oluşturmak, form için olmayan bir şablon dosyası oluşturmaktan farklı değildir.

Tema işlevi olarak form oluşturucu geri aramasının adını kullanarak bir tema işlevi tanımlayın. Kod aşağıdakine benzer olmalıdır:

/**
 * Implementation of hook_theme().
 */

 function mymodule_theme() {
   return array(
     'mymodule_form' => array(
       'template' => 'mymodule-form',
       'file' => 'mymodule.admin.inc',
       'arguments' => array('form' => NULL),
     ),
   );
 }

Form $form['field_1'] Değerini içeriyorsa, değeri şablon dosyasında $field_1 Olarak kullanılabilir. Şablon dosyası, template_preprocess_mymodule_form() öğesinden iletilen değerleri de kullanabilecektir.

12
kiamlaluno

Çekirdek giriş formu için aşağıdaki gibi stilize edilecek öğeyi tanımlamak için seçicileri kullanarak CSS dosyama ekleyerek her zaman stil veririm

#user-login
{
   border:1px solid #888;
   padding-left:10px;
   padding-right:10px;
   background-image: url(http://www.zaretto.com/images/zlogo_s.png);
   background-repeat:no-repeat;
   background-position:right;
}

#user-login label
{
    display: inline-block;
}

Yukarıdaki sadece sites/all/themes/theme-name/css/theme-name.css

Biçimlendirmeniz gereken bir kimlik veya yeterince doğru bir seçiciye sahip değilse, HTML ekleme tanımlayıcılarını değiştirmek için hook yaklaşımını kullanmak gerekir.

Öğelerde satır içi stil kullanan IMO, kullanımdan kaldırılması ve class ve id kullanımı ile değiştirilmesi gereken bir çok kötü uygulama

1

Bir formun teması için, Tema Drupal 7 Formlar (CSS ve JS dahil) bölümünde açıklandığı gibi özel bir css kullanabilirsiniz. .

Temel olarak şu adımları uygulamanız gerekir:

  1. Hook_menu () kullanarak forma giden yolu kaydetme
  2. Formu tanımlayın
  3. Hook_theme () ile bir tema işlevi kaydetme
  4. Tema işlevini yazma
  5. CSS ve JavaScript dosyalarını oluşturma
0
shasi kanth