كيفية تغيير حجم نص صفحة الويب باستخدام PHP وCSS

استخدم PHP وCSS لتغيير حجم نص صفحات الويب - عند تصميم موقع الويب الخاص بك، ضع في اعتبارك شيئًا واحدًا: ليس كل الزوار من الشباب الأذكياء، وليسوا بالضرورة على دراية كاملة بالطرق المختلفة لاستخدام متصفحات الويب.

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

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

سيوضح لك هذا الدليل كيفية إضافة أداة تغيير حجم النص الوظيفية هذه إلى صفحات الويب الخاصة بك باستخدام PHP وCSS، لذا تابع وأضف إمكانية الوصول هذه إلى موقع الويب الخاص بك واحصل على أقصى استفادة من المستخدمين الذين لديهم أكثر من 50 نقطة مجد، تابع القراءة وستفعل ذلك تعلم كيفية استخدامه.

ملاحظة: يفترض هذا الدليل أن لديك Apache وPHP مثبتين بالفعل.

كيف يعمل؟

قبل كتابة التعليمات البرمجية، من المفيد قضاء بعض الوقت في فهم كيفية عمل أداة تغيير حجم النص. تحتوي كل صفحة على الموقع على سلسلة من عناصر التحكم التي تسمح للمستخدم بتحديد حجم نص الصفحة: صغير ومتوسط ​​وكبير. يتوافق كل حجم خط مع ورقة أنماط CSS التي تحفظ قواعد عرض الويب للصفحة أحجام نص الصفحة.

عندما يقوم المستخدم بالاختيار، يقوم PHP بتخزين حجم الخط الذي حدده المستخدم في متغير الجلسة، ثم يعيد تحميل صفحة الويب. ستقرأ الصفحة حجم الخط المحدد من متغير الجلسة وتستدعي ورقة الأنماط المقابلة ديناميكيًا لتحديثها أعد عرض الصفحة بحجم خط أصغر أو بحجم خط أكبر.

العملية

: يبدأ إنشاء صفحة ويب

بإنشاء مستند HTML أولاً، أكمل محتوى العنصر النائب كمثال:
القائمة أ:

حجم النص: صغير |. href="resize.php?s=medium">متوسط ​​|.

لوريميبسوم دولور سيت أميت،
consecteturadipisicingelit، sed do eiusmodtemporincididuntutlabore et dolore
ماجنا أليكا
إلى الحد الأدنى من النشاط، ممارسة التمارين الرياضية ullamcolaboris nisi utaliquip ex ea
com.commodoconsequat.
Duisauteirure dolor في إعادة النظر في
voluptateveliteessecillumdoloreeufugiatnullapariatur.
Excepteursintoccaecatcupidatat غير proident، Sunt in culpa qui
officiateseruntmollitanim id estlaborum.

انتبه بشكل خاص إلى الارتباطات التشعبية النصية الموجودة أعلى الصفحة، حيث يشير كل ارتباط تشعبي إلى ملف نصي يسمى resize.php ويمرره بحجم الخط المحدد عبر طريقة URL GET.

احفظ هذا المستند في دليل خادم الويب الخاص بك بامتداد .php، على سبيل المثال، Index.php.

الخطوة 2: إنشاء أوراق الأنماط

بعد ذلك، قم بإنشاء ملفات ورقة أنماط لكل حجم نص: Small.css، وmeditation.css، وlarge.css. هذا هو محتوى ملف Small.css:

body {.
الخط: 10 بكسل
}

وبالمثل، يمكنك إنشاء Medium.css وlarge.css، باستخدام 17px و25px على التوالي، وحفظ ملفات ورقة الأنماط هذه في نفس الدليل مثل صفحة الويب التي تم إنشاؤها في الخطوة السابقة.

الخطوة 3: إنشاء آلية لتغيير حجم النص

كما هو موضح أعلاه، يمكن لصفحة الويب "معرفة" ملف ورقة الأنماط الذي سيتم تحميله من خلال البحث عن متغيرات الجلسة المحددة مسبقًا. يتم التحكم في متغيرات الجلسة من خلال ملف البرنامج النصي resize.php (راجع القائمة ب )، يتم تنشيط هذا الملف عندما ينقر المستخدم على الزر لتغيير حجم النص الموجود أعلى صفحة الويب. هذا هو محتوى resize.php:

القائمة B

// بدء الجلسة
// استيراد الحجم المحدد إلى الجلسة
session_start();
$_SESSION['textsize'] = $_GET['s'];
header("الموقع: " . $_SERVER['HTTP_REFERER']);
?>

هذا أمر بسيط للغاية. عندما يقوم المستخدم بتحديد حجم نص جديد، يحصل resize.php على قيمة حجم الخط من خلال طريقة GET ويخزنها في متغير الجلسة $_SESSION['textsize']، ثم يقوم بإعادة ضبط المتصفح بشكل مباشر إلى الصفحة المفتوحة أصلاً.

بالطبع، لا يزال هناك مكون مفقود هنا: صفحة الويب ذكية بما يكفي لاكتشاف حجم النص المحدد حاليًا بواسطة المستخدم تلقائيًا وتحميل ورقة الأنماط المقابلة لإضافة هذه الوظيفة، افتح ملف صفحة الويب الخاص بك Index.php وأضفه العبارة التالية في بداية الملف (انظر القائمة C):

القائمة C

// بدء الجلسة
// استيراد المتغيرات
session_start();
// قم بتعيين حجم النص الافتراضي لهذه الصفحة
إذا (!isset($_SESSION['textsize'])) {
$_SESSION['textsize'] = 'متوسط';
}
?>

يجب عليك أيضًا إضافة رابط ورقة الأنماط بين العناصر... كما يلي:
اكتب = "نص/CSS">

هذه هي القائمة D. يجب أن يبدو ملف Index.php الكامل كما يلي:

القائمة D:

// start session
// استيراد المتغيرات
session_start();
// قم بتعيين حجم النص الافتراضي لهذه الصفحة
إذا (!isset($_SESSION['textsize'])) {
$_SESSION['textsize'] = 'متوسط';
}
?>

اكتب = "نص/css">

حجم النص: صغير |. href="resize.php?s=medium">متوسط ​​|

لوريميبسوم دولور سيت أميت,
consecteturadipisicingelit، sed do eiusmodtemporincididuntutlabore et dolore
ماجنا أليكا
إلى الحد الأدنى من النشاط، ممارسة التمارين الرياضية ullamcolaboris nisi utaliquip ex ea
com.commodoconsequat.
Duisauteirure dolor في إعادة النظر في
voluptateveliteessecillumdoloreeufugiatnullapariatur.
Excepteursintoccaecatcupidatat غير proident, sunt in culpa qui
officiateseruntmollitanim id estlaborum.

يجب أن يكون من السهل جدًا فهم كيفية عمل ذلك. عندما يتم تحميل صفحة ويب، فإنها تستأنف الجلسة الحالية وتتحقق مما إذا كان المتغير $_SESSION['textsize'] يطابق حجم الخط المحدد حاليًا، ثم تقوم بتحميل ورقة الأنماط المقابلة ديناميكيًا. من خلال العنصر، والذي سيؤدي إلى إعادة عرض صفحة الويب تلقائيًا بالحجم الصحيح. يختلف الاستخدام المشترك لـ PHP وCSS قليلاً عن الطريقة التقليدية، التي تستخدم JavaScript لتغيير ورقة أنماط CSS ديناميكيًا. بالمقارنة مع طريقة JavaScript، فإن ميزة طريقة PHP هي أنك لا تحتاج إلى الاعتماد على دعم العميل بالنسبة لجافا سكريبت، تقلق بشأن إنشاء عمل مخصص لمتصفح معين، فربما تجد أن هذا الأسلوب يعمل بشكل جيد في المرة القادمة التي تجلس فيها لتصميم موقع ويب، ولتكن البرمجة سعيدة!