কোনও ফর্ম থিম করতে কোনও টেমপ্লেট ফাইল কীভাবে ব্যবহার করবেন?


50

যদিও দ্রুপালের নোড, মন্তব্য, ব্লক এবং অন্যান্য অনেকগুলি থিম টেম্পলেট ফাইলগুলি (যেমন নোড.টিপিএলপিএফপি) ব্যবহার করে থিমযুক্ত করা হয়েছে, ফর্মগুলি একটি ভিন্ন গল্প। ফর্মগুলির জন্য কোনও থিম টেম্পলেট ফাইল নেই। কাস্টম থিম টেমপ্লেট ব্যবহার করতে আমি কীভাবে একটি নির্দিষ্ট ফর্ম পেতে পারি?

উত্তর:


73

কোনও ফর্ম প্রদর্শনের জন্য টিপিএল ফাইলটি ব্যবহার করা সম্পূর্ণ যুক্তিসঙ্গত। অনুরূপ ফলাফল অর্জনের জন্য আপনি প্রচুর বহিরাগত সিএসএস এবং #prefix/ #suffixবৈশিষ্ট্যগুলি ব্যবহার করতে পারেন , তবে টিপিএল ব্যবহার করে আপনাকে আপনার যুক্তি এবং উপস্থাপনা স্তরগুলির পৃথকীকরণের প্রয়োজন হবে না এবং পছন্দ মতো কুরুচিপূর্ণ সিএসএস নির্বাচককে লক্ষ্য করতে হবে না #user-login label। দ্রুপাল 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 / টেমপ্লেট / ফর্ম / 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); ?>

এটি ফাউন্ডেশন ব্যবহার করছে , যা আমাদের এইরকম একটি ফর্ম দেয়:

এখানে চিত্র বর্ণনা লিখুন


দেখে মনে হচ্ছে আপনি mytheme_theme () ফাংশনে একটি রিটার্নের স্টেটটি ভুলে গেছেন
সেল_স্পেস

আপনি ঠিক বলেছেন, আমি এটি যুক্ত করেছি।
চার্লি শ্লিয়েসার

5
খুব গুরুত্বপূর্ণ নোটটি হ'ল, কোড স্নিপেটের নীচে, print drupal_render_children($form)যা ফর্মটি আসলে জিনিসগুলি করে তোলে :)।
ক্রিস রকওয়েল

ভাল উত্তর. আমি যুক্ত করতে পারি যে আপনি engineডিফল্টরূপে কিছু ব্যবহার করছেন না তবে অতিরিক্তভাবে নির্দিষ্ট করা দরকার । যেমন 'engine' => 'twig'
দুধভস্কি

1
চমৎকার উত্তর. মনে রাখবেন যদি আপনি যেমন থিম একজন প্রশাসক ফর্ম করতে চান user_profile_formবা user_register_form। সেই দৃশ্যে আপনাকে হয় ক) এডমিন থিমটিতে আপনার থিংসিং করতে হবে (বা যদি আপনি বেস অ্যাডমিন থিমটি পরিবর্তন করতে না পারেন তবে এটি বন্ধ করে দিতে পারেন) বা খ) আপনার থিসিংটি একটি কাস্টম মডিউলে রাখুন। অন্যথায় আপনার থিসিং দেখা যাবে না।
থেরোবাইওয়াক

18

আপনাকে একটি মডিউল বা টেম্পলেট.এফপিতে হুক_ফর্ম_ল্টার () প্রয়োগ করতে হবে এবং ফর্মটির # থিম সম্পত্তি সেট করতে হবে :

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

এবং তারপরে ফর্মটি যুক্ত করুন - ফর্মটি রেন্ডার করতে ফর্ম কোডের সাথে user_login.tpl.php টেমপ্লেট যুক্ত করুন:

<?php print drupal_render_children($form) ?> 

1
#themeসম্পত্তি তাই খুবই সহজ এবং প্রথমবার সত্যিই, উত্তর নিচে কম অতি রহস্যময় জন্য উল্লেখ করা হয়। এটি অবশ্যই আমার প্রিয় পদ্ধতি।
ম্যাট ফ্লেচার

1
আমি এই কোডটি পরীক্ষা করেছি এবং এটি প্রত্যাশার মতো কাজ করে।
ভ্লাদসভিটস্কি

14

যদিও আপনি কিমলালুনোর সমাধানটি আমি ব্যক্তিগতভাবে ব্যবহার করতে সক্ষম হতে পারি।

কোনও ফর্মের জন্য টেমপ্লেট ফাইলের প্রয়োজনীয়তার কারণ কী? যদি আপনি কোনও বিদ্যমান ফর্মের জন্য কিছুটা আলাদা মার্কআপ চান কারণ এটি হয়? যদি তাই হয় তবে আপনি hook_form_alter()ফর্মটি রেন্ডার করার আগে পরিবর্তন করতে ব্যবহার করতে পারেন । ফর্ম এপিআই ব্যবহার করে আপনি সমস্ত ফর্ম ক্ষেত্রগুলি এইচটিএমএল উপাদান ইত্যাদি ইনজেক্ট করতে পারেন mod

এখানে আমি এর একটি উদাহরণ 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;
  }
}

উপরের উদাহরণটি একটি ডিআইভি-র মধ্যে পুরো ফর্মটি আবৃত করে যা ব্যাকগ্রাউন্ডের রঙটিকে লাল করে ফেলার জন্য একটি ইনলাইন শৈলী রয়েছে। এটি ফর্মের শুরুতে সহায়তা পাঠ্যের একটি অনুচ্ছেদও যুক্ত করে।

উপরের কোডটি লোড হয়ে গেলে আমার ব্যবহারকারী লগইন ফর্মটি এখন দেখতে দেখতে এটিই দেখাচ্ছে:

কাস্টমাইজড লগইন ফর্ম

আরও তথ্যের জন্য ফর্ম এপিআই রেফারেন্স দেখুন: ফর্ম এপিআই রেফারেন্স


1
এই উদাহরণে কেবল ইনলাইন শৈলীর ব্যবহার স্পষ্ট করা কেবল উদাহরণটিকে সহজ করে তোলা। আমি ইনলাইন স্টাইলগুলি ব্যবহার করার পরামর্শ দিচ্ছি না এবং আপনার ক্লাস ব্যবহার করা উচিত।
ক্যামসোফট

আমি কোনও ফর্ম রেন্ডারিংয়ের জন্য একটি টেম্পলেট ফাইল ব্যবহার করে সমর্থন করছি না; প্রকৃতপক্ষে, আমি এও বলেছি যে আমি কোনও ফর্ম রেন্ডার করতে কোনও টেম্পলেট ফাইল ব্যবহার করি নি (আমি আসলে কোনও মডিউলের কোডটি পরিবর্তন করেছি যা কোনও ফর্মের জন্য টেমপ্লেট ফাইল ব্যবহার করছিল), এবং সেই দ্রুপাল টেম্পলেট ব্যবহার করে না ফর্ম রেন্ডার ফাইল।
কিমলালুনো

5
আপনি যদি মার্কআপকে আমূল পরিবর্তন করতে চান তবে কী হবে? কখনও কখনও একটি টেমপ্লেট ফাইল আরও ভাল বিকল্প।
cossovich

6
একটি ফর্ম লজিক নির্মাতার গন্ধে মার্কআপ।
চার্লি শ্লিয়েসার

1
যদিও এই সমাধানটি বেশিরভাগ ক্ষেত্রে কাজ করে, ফর্ম রেন্ডারিংটি একটি এজ্যাক্স কলব্যাকে রিফ্রেশ করা হলে এটি প্রকৃতপক্ষে ভেঙে যেতে পারে
প্যাট্রিকস

13

ফর্মের জন্য আমার কখনই টেম্পলেট ফাইল ব্যবহার করার দরকার নেই।
আমি যতদূর দেখতে পাচ্ছি, ড্রুপাল কোর কোড থিম ফাংশন ব্যবহার করে, যখন কোনও ফর্ম, বা কোনও ফর্মের অংশটি একটি নির্দিষ্ট উপায়ে রেন্ডার করা প্রয়োজন; একটি থিম ফাংশন যা ড্রপাল_রেন্ডার () কে কল করে যে কোনও কারণে সাধারণত যথেষ্ট।

প্রশ্নের জবাব দিতে, কোনও ফর্মের জন্য একটি টেমপ্লেট ফাইল তৈরি করা কোনও ফর্মের জন্য নয় এমন একটি টেম্পলেট ফাইল তৈরি করা থেকে আলাদা নয়।

ফর্ম নির্মাতা কলব্যাকের নাম থিম ফাংশন হিসাবে ব্যবহার করে একটি থিম ফাংশন সংজ্ঞায়িত করুন। কোডটি নিম্নলিখিতগুলির মতো হওয়া উচিত:

/**
 * 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()


আমি আমার থিম ফাংশন / টেমপ্লেটটি ব্যবহার করার জন্য সম্ভবত কিছু অন্যান্য মডিউল দ্বারা সংজ্ঞায়িত ফর্মকে কীভাবে পরামর্শ দেব?
শফিউল

সেট $form['#theme']
কিমলালুনো

1
কাজ করছে না, যখন আমি ফর্মটি জমা দিচ্ছি, এটি ফর্ম_সবিট ফাংশনে যাবে না
gbstack

1

মূল লগইন ফর্মের জন্য নিম্নলিখিত উপাদানটি শৈলীযুক্ত করার জন্য নির্বাচকগুলি ব্যবহার করে আমি সর্বদা আমার সিএসএস ফাইল যুক্ত করে স্টাইল করব

#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

আপনার যা স্টাইল করতে হবে তার যদি কোনও আইডি বা পর্যাপ্ত নির্ভুল নির্বাচক hookনা থাকে তবে এইচটিএমএলকে খুব বেশি শনাক্তকারী যুক্ত করার জন্যও পদ্ধতির ব্যবহার করা প্রয়োজন ।

আইএমও উপাদানগুলিতে ইনলাইন স্টাইল ব্যবহার করে একটি খুব খারাপ অনুশীলন যা ব্যবহার classএবং ব্যবহারের দ্বারা অবচয় এবং প্রতিস্থাপন করা উচিতid


0

কোনও ফর্ম থিম করার জন্য, আপনি থিমিং ড্রুপাল 7 ফর্মগুলিতে (সিএসএস এবং জেএস সহ) ব্যাখ্যা করে একটি কাস্টম সিএসএস ব্যবহার করতে পারেন ।

মূলত আপনার এই পদক্ষেপগুলি সম্পাদন করা দরকার:

  1. Hook_menu () ব্যবহার করে ফর্মের জন্য একটি পাথ নিবন্ধন করুন
  2. ফর্মটি সংজ্ঞায়িত করুন
  3. Hook_theme () দিয়ে একটি থিম ফাংশন নিবন্ধন করুন
  4. থিম ফাংশন লিখুন
  5. সিএসএস এবং জাভাস্ক্রিপ্ট ফাইলগুলি তৈরি করুন

-2

আমি নিশ্চিত যে আপনি ফর্মগুলির জন্য একটি টেম্পলেট ব্যবহার করতে সক্ষম হলেন তবে টেমপ্লেটটি প্রথম স্থানে নিবন্ধ করতে আপনাকে hook_theme ব্যবহার করতে হবে। আমি একটি অবস্থা যেখানে ফর্ম ছিল সত্যিই ভিত্তিক টেবিল হতে প্রয়োজন বদলে div ভিত্তি করে এবং সহজ #prefix এবং #suffix পরিবর্তন সত্যিই এটা টুকরা করলেন না। আগ্রহী হলে আমি সম্ভবত একটি উদাহরণ চেষ্টা করে দেখতে পারি।

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.