تخصيص صفحة تسجيل الدخول ووردبريس

في تدوينة سابقة رأينا طريقة تغيير شعار صفحة تسجيل دخول ووردبريس.

اليوم سنرى كيفية تخصيص صفحة تسجيل الدخول ووردبريس بطريقة سهلة جداً, بحيث ستستطيع إنشاء تنسيق جديد خاص بك لصفحة تسجيل الدخول.

لأجل هذا سنقوم أولاً بإنشاء ملف جديد داخل الملف الرئيسي للقالب المفعل تحت إسم admin-login.css ثم نقوم بإضافة وضيفة جديدة إلى ملف functiones.php أو إلى إضافتك المخصصة.

1	function saidweb2_0_login_css(){

2	$meta_css = '<link id="login_admin_css" rel="stylesheet" href="'. get_bloginfo( 'stylesheet_directory' ) .'/admin-login.css">';

3	echo $meta_css;

4

}

5	add_action('login_enqueue_scripts', 'saidweb2_0_login_css');

هذه الوضيفة تشير لووردبريس على أننا سنقوم بإستعمال ملف تنسيقات جديد admin-login.css لصفحة تسجيل الدخول, عن طريق الهوك login_enqueue_scripts.

بعدها نضيف وضيفتين أخرتين, الأولى تقوم بتغيير رابط الشعار و الثانية تقوم بتغيير إسمه.

1	//تغيير رابط الشعار

2	function saidweb2_0_logo_url() { return get_bloginfo('url'); }

3

4	//تغيير إسم الشعار

5	function saidweb2_0_logo_url_title() { returnget_bloginfo('name'); }

6

7	add_filter('login_headerurl', 'saidweb2_0_logo_url');

8	add_filter('login_headertitle', 'saidweb2_0_logo_url_title');

 إنشاء تنسيق جديد لصفحة تسجيل الدخول

أولا علينا التعرف على التنسيقات التي نريد تغييرها, لهذا نقوم بإستعمال Firebug أو Developer tools لكي نتمكن من تحديد كل عنصر html نريد تغيير تنسيقاته.

بعدها نقوم بوضع التنسيقات الجديد في ملف admin-login.css, مثلا لتغيير خلفية الصفحة نضع:

1	body.login {

2	background: #232B2D url(images/login-background.jpg) no-repeatcenter center;

3	background-size: cover;

4

}

في هذه الحالة قمنا بالإشارة إلى أن يكون للعنصر body مع الكلاص .login صورة كخلفية.

بهذه الطريقة نستطيع ملئ ملف admin-login.css حسب ذوقنا أو إحتياجاتنا.

مثال:

01	/* CSS Login WordPress */

02	body.login {

03	background: #232B2D url(images/login-background.jpg) no-repeatcenter center;

04	background-size: cover;

05

}

06	body.login h1 a {

07	background: url(images/logo.png) no-repeat 0 0;

08	margin: 5px auto;

09	width: 200px;

10	height: 60px;

11

12

}

13	body.login form {

14	background: #E0A072;

15	margin-top: 0;

16	border-radius: 20px;

17

}

18

19	body.login .button-primary{

20	background: #A55C27;

21	border:none;

22	border-radius: 20px;

23	box-shadow: none;

24	outline: 0;

25

}

26

27	body.login .button-primary:hover,

28	body.login .button-primary:focus{

29	background: #542E13;

30	border:none;

31	box-shadow: none;

32

}

33

34	body.login .message{

35	background: #A55C27;

36	border-color:#542E13;

37	margin-bottom: 5px;

38	border-radius: 20px;

39

}

40

41	body.login #nav {

42	background: #1D2425;

43	margin-top: 5px;

44	padding: 15px;

45	text-align: center;

46	border-radius: 20px;

47

}

48	body.login #nav a { color: #738E95; }

49

50	.login #backtoblog {

51	background: none repeat scroll 0 0 #1D2425;

52	padding: 15px;

53	border-radius: 20px;

54

}

إستنتاج:

بإستعمال بعض الوضائف الأساسية لووردبريس و بعض تقنيات css يمكننا تخصيص صفحات, أقسام و عناصر أخرى داخل ووردبريس.