it-swarm-ko.com

템플릿 파일을 사용하여 양식을 테마로 만드는 방법은 무엇입니까?

Drupal의 노드, 주석, 블록 및 기타 많은 것들이 테마 템플릿 파일 (node.tpl.php와 같은)을 사용하여 테마 화되는 반면, 폼은 다른 이야기입니다. 폼에 대한 테마 템플릿 파일은 없습니다 사용자 정의 테마 템플릿을 사용하기 위해 특정 양식을 얻으려면 어떻게해야합니까?

49
Chaulky

양식을 표시하기 위해 tpl 파일을 사용하는 것이 완전히 합리적입니다. 외부 CSS와 #prefix/#suffix 속성은 비슷한 결과를 얻을 수 있지만 tpl을 사용하면 로직과 프리젠 테이션 레이어를 분리 할 필요가 없으며 #user-login label. 다음은 Drupal 7 ...의 예입니다.

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/template/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); ?>

이것은 Foundation 을 사용하여 다음과 같은 형식을 제공합니다.

enter image description here

73
Charlie Schliesser

모듈 또는 template.php에서 hook_form_alter ()를 구현하고 양식의 # theme 속성을 설정해야합니다.

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

그런 다음 새로운 테마를 구현하십시오.

/**
 * 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',
    ),
  );
}

그런 다음 form--user_login.tpl.php 템플릿에 다음 코드를 추가하여 양식을 렌더링하십시오.

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

Kiamlaluno의 솔루션을 사용할 수는 있지만 개인적으로는 그렇지 않습니다.

양식에 템플릿 파일이 필요한 이유는 무엇입니까? 기존 양식에 대해 약간 다른 마크 업을 원하기 때문입니까? 그렇다면 hook_form_alter()을 사용하여 양식을 렌더링하기 전에 수정할 수 있습니다. Form API를 사용하면 html 요소 등을 주입하는 모든 양식 필드를 수정할 수 있습니다.

다음은 표준 drupal 로그인 폼 블록을 수정하는 hook_form_alter())의 예입니다.

/**
 * 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;
  }
}

위의 예는 배경색을 빨간색으로 바꾸는 인라인 스타일의 DIV 내에서 전체 양식을 래핑합니다. 또한 양식의 시작 부분에 도움말 텍스트 단락을 추가합니다.

위의 코드가로드되면 내 사용자 로그인 양식이 나타납니다.

Customised login form

자세한 내용은 Form API 참조를 참조하십시오. Form API Reference

13
Camsoft

실제로 양식에 템플릿 파일을 사용할 필요가 없었습니다.
내가 볼 수있는 한, Drupal 핵심 코드는 양식 또는 양식의 일부를 특정 방식으로 렌더링해야하는 경우 테마 기능을 사용합니다. drupal_render () 호출은 일반적으로 모든 목적에 충분합니다.

질문에 답하기 위해 양식의 템플리트 파일을 작성하는 것은 양식이 아닌 템플리트 파일을 작성하는 것과 다르지 않습니다.

테마 함수로 양식 빌더 콜백의 이름을 사용하여 테마 함수를 정의하십시오. 코드는 다음과 유사해야합니다.

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

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

양식에 $form['field_1'] 값이 포함되어 있으면 템플릿 파일에서 해당 값을 $field_1로 사용할 수 있습니다. 템플릿 파일은 template_preprocess_mymodule_form()에서 전달 된 모든 값을 사용할 수도 있습니다.

12
kiamlaluno

핵심 로그인 양식에 대해 다음과 같이 스타일을 지정할 요소를 식별하기 위해 선택기를 사용하여 CSS 파일에 추가하여 스타일을 지정합니다.

#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;
}

위의 내용은 간단히 sites/all/themes/theme-name/css/theme-name.css

스타일을 지정해야하는 항목에 ID 또는 충분히 정확한 선택기가없는 경우 HTML을 추가하기 위해 hook 접근 방식을 사용하여 식별자를 추가해야합니다.

요소에 인라인 스타일을 사용하는 IMO는 매우 나쁜 방법이며 더 이상 사용되지 않고 classid

1
Richard Harrison

양식을 테마로 지정하려면 Themeing Drupal 7 양식 (CSS 및 JS 포함) 에 설명 된대로 사용자 정의 CSS를 사용할 수 있습니다. .

기본적으로 다음 단계를 수행해야합니다.

  1. Hook_menu ()를 사용하여 폼의 경로를 등록하십시오
  2. 양식 정의
  3. Hook_theme ()을 사용하여 테마 함수 등록
  4. 테마 기능 작성
  5. CSS 및 JavaScript 파일 작성
0
shasi kanth