إظهار شريط تقدم تحميل الصفحات تلقائياً

في عدة حالات ندخل إلى موقع معيَّن و عند البدأ في تصفحه تتأخر صفحاته في التحميل بعض الشيء… هذا يصبح مشكل كبير إذا كان صبيب الإنترنت ضعيف كما هو الحال في الوطن العربي لأن الزائر يمل من الإنتظار و يغادر الموقع ظناً منه أن الموقع لا يعمل أو به عطب خصوصاً إذا لم يتلقى أي رسالة أو إشعار يشير إلى أن الصفحة في طور التحميل.

اليوم سأشرح لك طريقة إظهار شريط تقدم تحميل الصفحات تلقائياً بواسطة Pace.js.

ما هو Pace.js؟

Pace.js هو عبارة عن إضافة jQuery تقوم بإظهار مأشر تقدم جميل بينما يتم تحميل الموقع في المتصفح و الجميل في الأمر هو أن تفعيلها لا يتطلب معرفة متقدمة بالبرمجة.

طريقة الإستعمال.

من أجل إستعمال هذه الإضافة فقط عليك إضافة ملف Pace.js و ملف CSS الخاص بالتصميم الذي تريده (ستجده في ملف themes الخاص بالإضافة) إلى القالب المفعَّل و بعدها وضع رابط الملفّين داخل وسم head.

مثال:

في هذا المثال سنستعمل تصميم Corner Indicator.

1- نقوم بإنشاء ملف جديد داخل المجلد الرئيسي للقالب المفعَّل نسميه مثلاً pace ثم نضع داخله ملف pace.js و ملف css.
2- نقوم بوضع رابطي الملفَّين في وسم head.

1	<script src="/wp-content/themes/yourtheme/pace/pace.js"></script>

2	<link href="/wp-content/themes/yourtheme/pace/pace-theme-corner-indicator.css" rel="stylesheet" />

يجب عليك إستبدال yourtheme بإسم قالبك.

بهذه الطريقة السهلة نكون قد قمنا بإضهار شريط تقدم تحمل الصفحات تلقائياً إلى موقعنا.

يمكنك معاينة النتيجة عند الإنتقال إلى مقالة أخرى أو تحديث هذه المقالة.

أنقر هنا لتحميل ملف الإضافة.

أنقر هنا لمشاهدة الديمو.

شاهد في Git Hub.

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

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

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

لأجل هذا سنقوم أولاً بإنشاء ملف جديد داخل الملف الرئيسي للقالب المفعل تحت إسم 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 يمكننا تخصيص صفحات, أقسام و عناصر أخرى داخل ووردبريس.