Drupalのノード編集フォームは
タイトル:
[ ]
のような形になっており、どうも日本人にはしっくり来ません。
特に、編集者のリテラシーが低い場合はなかなかうまくゆきません。
CSSでテーブルライクな表示にしたり、テンプレートの中でレンダリング調整したりしましたが、利用しているテーマに手を入れられなかったり、他のフィールド系モジュールを追加すると表示が崩れてしまったりして、なかなかうまくいきません。
なんとか安全に日本人好みのテーブル表示の形式にできないでしょうか?
ノード編集フォームをテーブル表示形式にしたい
OTHER FAQ
カテゴリ | Core Ver. | 関連モジュール | タイトル |
---|---|---|---|
ユーザ | 7.34 | ip_ranges | ログインアタック対策は? |
JavaScript | 7.34 | PHP | PHPからJavaScriptに変数値を渡したい |
コンテンツの作成 | 7.31 | CKEditor | CKEditorの新規生成ダイアログ内の初期値の変更 |
サイトの構築 | 7.31 | Views | ブロックViewsの絞り込みが表示されない |
言語 | 7.28 | vim | vimで全角が化けてしまう |
GoogleMaps | 7.28 | Javascript | IE9でGoogle Map APIを利用した住所情報所得がうまくゆかない |
アップデート | 7.28 | Views | Pagerが表示されなくなった |
アップデート | 7.28 | DisableMessages | モジュールのアップデートガイダンスを非表示にしたい |
ユーザの管理 | 7.27 | PHP | 新規ユーザーの追加ができない |
サイトの構築 | 7.27 | Context block | ページ別、カテゴリ別等でブロックの表示有無を簡単にするには |
チューニング | 7.26 | PHP | DrupalはNginxで動く? |
排他 | 7.26 | lock | Viewsモジュールの設定ページのような排他機能 |
コンテンツの作成 | 7.26 | PHP | ノード内の一部(フィールド)を変更する |
テーマ | 7.23 | hook | ページや状況によってテーマを切り替える |
ユーザ | 7.23 | User | 長い投稿者名の表示が切れる |
サイトの環境設定 | 7.23 | Image Style | 画像スタイルの使い方(Crop) |
サイトの構築 | 7.23 | Conditional fields | ノード編集フォームを動的にしたい |
コンテンツの作成 | 7.23 | maxlength | テキストフィールドの最大長のチェック&カウントダウン |
ユーザ | 7.23 | PHP | user_load_multiple()の復帰値 |
ブロック | 7.23 | 伸縮するfieldsetブロックを追加したい |
コメント
たしかに、安全にというのは難しいようです。レンダリング構造
パーマリンク Submitted by actbrain on 2015/07/01 17:37.
たしかに、安全にというのは難しいようです。レンダリング構造(階層)を変更したり、階層を増やす拡張モジュールもいたりと。
参考までに、一番安全かとおもわれるテーブル化を紹介します。
手順は以下のようになります。
1.hook_theme()により、オリジナルラッパーを追加する。
2.追加したオリジナルラッパーを標準ラッパー(form)の直前に実行させる。
3.追加したオリジナルラッパー内で<table> </table>でラップする。
4.hook_form_alter()により、各フィールドフォームを<tr><th>ラベル</th><td>フォーム</td></tr>でラップする。
※ 例えば、本来
〜
<div class="field-type-number-integer field-name-field-price field-widget-number form-wrapper" id="edit-field-price">
<div id="field-price-add-more-wrapper">
<div class="form-item form-type-textfield form-item-field-price-und-0-value">
<label for="edit-field-price-und-0-value">
価格
<span class="form-required" title="このフィールドは必須です。">*</span>
</label>
<input type="text" id="edit-field-price-und-0-value" name="field_price[und][0][value]" value="1000" size="12" maxlength="10" class="form-text required">
<span class="field-suffix">円</span>
</div>
</div>
</div>
〜
なようになっているところを、
〜
<tr>
<th>
価格
<span class="form-required" title="このフィールドは必須です。">*</span>
</th>
<td>
<div class="field-type-number-integer field-name-field-price field-widget-number form-wrapper" id="edit-field-price">
<div id="field-price-add-more-wrapper">
<div class="form-item form-type-textfield form-item-field-price-und-0-value">
<input type="text" id="edit-field-price-und-0-value" name="field_price[und][0][value]" value="1000" size="12" maxlength="10" class="form-text required">
<span class="field-suffix">円</span>
</div>
</div>
</div>
</td>
</tr>
〜
とすることを狙っています。
以下、具体的な処理を示します。
// 1.hook_theme()により、オリジナルラッパーを追加する。
/**
* Implements hook_theme().
*/
function モジュール名_theme() {
return array(
'モジュール名_table_form' => array(
'render element' => 'form',
),
);
}
// 3.追加したオリジナルラッパー内で<table> </table>でラップする。
function theme_モジュール名_table_form($variables) {
$element = $variables['form'];
$prefix = '<table><tbody>'; // クラス等は自由に付ける
$suffix = '</tbody></table>';
return $prefix.$element['#children'].$suffix;
}
/**
* Implement hook_form_alter() {
*/
function モジュール名_form_alter(&$form, $form_state, $form_id) {
// 2.追加したオリジナルラッパーを標準ラッパー(form)の直前に実行させる。
array_unshift($form['#theme_wrappers'], 'モジュール名_table_form');
_モジュール名_erase_title_display($form); //
// 4.hook_form_alter()により、各フィールドフォームを<tr><th>ラベル</th><td>フォーム</td></tr>でラップする。
// フィールド単位の制御
foreach ($form as $field_name => &$field) {
if (strlen($field_name) && strpos($field_name, 0, 1) != '#' && isset($field) && is_array($field) && !empty($field['#type'])) {
$label = $required = $display = $visibility = '';
// 全フィールドを捜査し、$label〜$visibilityを取得
// $label:タイトル
// $required:入力必須
// $display:行そのものの表示有無
// $visibility:th(タイトル)の表示有無
if (isset($field['#type'])) {
if ($field['#type'] == 'container') {
foreach ($field as $n => &$f) {
if (strlen($n) && substr($n, 0, 1) != '#' && isset($f) && is_array($f)) {
if (isset($f['#title'])) {
$label = $f['#title'];
$required = !empty($f['#required']);
break;
}
}
}
}
elseif (isset($field) && is_array($field)) {
if (isset($field['#title'])) {
$label = $field['#title'];
$required = !empty($field['#required']);
}
}
}
if (!empty($required)) {
$label .= '<span class="form-required" title="このフィールドは必須です">*</span>';
}
if (!$label) {
if ($field_name == 'actions') {
$visibility = 'visibility: hidden;';
}
else $display = 'display: none;';
}
// tr.class.// CSS装飾のためtrにクラスを付ける
$tr_class = str_replace('_', '-', $field_name).'-tr';
// th, td.
foreach (array('#prefix', '#suffix') as $type) {
if (!isset($field[$type])) {
$field[$type] = '';
}
}
// ラップ
$field['#prefix'] = str_replace(
array('[tr_class]', '[tr_style]', '[th_style]', '[label]'),
array($tr_class, $display, $visibility, $label),
'<tr class="[tr_class]" style="[tr_style]"><th style="[th_style]">[label]</th><td>'
).$field['#prefix'];
$field['#suffix'] .= '</td></tr>';
}
}
}
// フォーム内の全てのタイトルを'invisible'にする(再帰的)
function _モジュール名_erase_title_display(&$form) {
if (isset($form) && is_array($form)) {
foreach ($form as $field_name => &$field) {
if (strlen($field_name) && substr($field_name, 0, 1) != '#' && isset($field) && is_array($field)) {
if (isset($field['#title'])) {
$field['#title_display'] = 'invisible';
}
_モジュール名_erase_title_display($field);
}
}
}
}
ページ