ساخت صفحه ورود کابران
قطعا یکی از صفحاتی که در وب سایت های دروپالی خودمون نگاه ویژه ای بهش داریم ، صفحه مربوط به ورود کاربران ، ثبت نام و درخواست بازیابی رمز عبور هستش.
دراین آموزش قصد داریم تا یک صفحه ورود دروپالی زیبا رو طراحی کنیم.پیشنهاد میکنم برای انتخاب یک قالب یا تم برای این صفحه از سایت codepen یا از سایت bootsnipp استفاده کنید.
قالب دانلود شده ما برای صفحه ورود (دانلود قالب) ، دارای فایل های index.html و style.ss هستش/
ابتدا باید فایل style.css رو در سایت فراخوانی می کنیم/ برای این کار فایل Info رو باز و کد زیر به اون اضافه میکنیم :
stylesheets[all][] = css/style.css
نکته : بعد از هر تغییری در فایل info باید کش سایت رو خالی کنیم.
خوب تا این جا فقط یک فایل css فراخوانی کردیم.در ادامه باید فایل index.html رو در تم خودمون جایگذاری کنیم.
آدرس صفحه ورود کاربران در دروپال بصورت user/login هستش.همونطور که در آموزش نحوه نام گذاری فایل ها گفته شده بود یک فایل با نام page—user—login.tpl.php ایجاد میکنیم.
این صفحه دقیقا میتونه شامل هدر ، فوتر و هر بخش دیگه ای از صفحه اصلی سایت یا سایر صفحات سایت باشه.اما مهم ترین نکته فراخوانی ناحیه content در این صفحه هستش.پس کد زیر حتما باید در این صفحه وجود داشته باشه :
<?php print render($page['content']); ?>
در ادامه میرسیم به قراردادن کدهای مربوط به فرم های ورود ! یک فایل با نام user-login.tpl.php ایجاد و کدهای index.html رو داخل اون کپی میکنیم.
پس فایل ما بصورت زیر خواهد شد :
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4 col-md-offset-4">
<h1 class="text-center login-title">Sign in</h1>
<div class="account-wall">
<img class="profile-img" src="iamges/user.png"
alt="">
<h2><?php print render($intro_text); ?></h2>
<?php
if(user_is_anonymous()) {
$form = drupal_get_form('user_login_block');
print drupal_render($form);
}
?>
<a href="#" class="pull-right need-help">Need help? </a><span class="clearfix"></span>
</div>
<a href="<?php print base_path(); ?>user/register"> class="text-center new-account">Create an account </a>
</div>
</div>
</div>
خوب تا اینجا کار نهایی شده و اگر وارد صفحه user/login بشیم خواهیم دید که هیچ چیز تغییر نکرده !!! اشکال کار کجاست ؟
کاری که تا این لحظه انجام شده هیچ ایرادی نداره ، فقط چون ما داریم بلوک مربوط به فرم لاگین رو که در خود هسته هست تغییر میدیم ، باید در فایل template.php این صفحه رو معرفی کنیم تا فرم ما در اونجا نمایش داده بشه.
<?php
function THEME_NAME_theme() {
$items = array();
// create custom user-login.tpl.php
$items['user_login'] = array(
'render element' => 'form',
'path' => drupal_get_path('theme', 'THEME_NAME') . '/template',
'template' => 'user-login',
'preprocess functions' => array(
'nrghost_preprocess_user_login'
),
);
return $items;
}
?>
تنها کار باقی مانده ، خالی کردن کش هست که باید انجام بدیم تا تغییرات رو ببینیم.
برای صفحات درخواست گذرواژه و ثبت نام نیز دقیقا مانند همین مراحل انجام خواهد شد.
فایل page--user--register.tpl.php , page--user--password.tpl.php دقیقا مشابه page--user--login.tpl.php هستش.
تنها تغییرات بصورت زیر خواهد بود.
این کد مربوط به فایل template.php می باشد که برای هر سه بخش ورود ، ثبت نام و بازیابی رمزعبور قرارداده شده :
<?php
function THEME_NAME_theme() {
$items = array();
// create custom user-login.tpl.php
$items['user_login'] = array(
'render element' => 'form',
'path' => drupal_get_path('theme', 'THEME_NAME') . '/template',
'template' => 'user-login',
'preprocess functions' => array(
'nrghost_preprocess_user_login'
),
);
// create custom user-register-form.tpl.php
$items['user_register_form'] = array(
'render element' => 'form',
'path' => drupal_get_path('theme', 'THEME_NAME') . '/template',
'template' => 'user-register-form',
'preprocess functions' => array(
'nrghost_preprocess_user_register_form'
),
);
// create custom user-pass.tpl.php
$items['user_pass'] = array(
'render element' => 'form',
'path' => drupal_get_path('theme', 'THEME_NAME') . '/template',
'template' => 'user-pass',
'preprocess functions' => array(
'nrghost_preprocess_user_pass'
),
);
return $items;
}
?>
در فایل های user-register-form.tpl.php ، user-pass.tpl.php کدها بصورت زیر خواهد بود :
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4 col-md-offset-4">
<h1 class="text-center login-title">Sign in</h1>
<div class="account-wall">
<img class="profile-img" src="iamges/user.png"
alt="">
<h2><?php print render($intro_text); ?></h2>
<?php
print drupal_render_children($form);
?>
</div>
</div>
</div>
</div>
راه های ارتباط با ما
آدرس : دفتر شهریار : شهرک وائین ، بعثت 5 نبش سپیدار 10 پلاک 26
تلفن : 09370977406
ایمیل : drupalcenter.ir@gmail.com
ارتباط با مدیر سایت از طریق تلگرام