วิธีเปลี่ยนขนาดข้อความของหน้าเว็บโดยใช้ PHP และ CSS

ใช้ PHP และ CSS เพื่อเปลี่ยนขนาดข้อความของหน้าเว็บ - เมื่อออกแบบเว็บไซต์ของคุณ โปรดคำนึงถึงสิ่งหนึ่ง: ไม่ใช่ผู้เยี่ยมชมทุกคนจะเป็นคนหนุ่มสาวที่สดใส และพวกเขาไม่จำเป็นต้องคุ้นเคยกับวิธีการต่างๆ ในการใช้เว็บเบราว์เซอร์

เมื่อออกแบบเว็บไซต์ โปรดคำนึงถึงสิ่งหนึ่ง: ไม่ใช่ผู้เยี่ยมชมทุกคนจะเป็นคนหนุ่มสาวที่สดใส และพวกเขาไม่จำเป็นต้องคุ้นเคยกับวิธีต่างๆ ในการใช้เว็บเบราว์เซอร์ นักออกแบบที่ชาญฉลาดเข้าใจสิ่งนี้และมักจะรวมคุณสมบัติการเข้าถึงพิเศษต่างๆ ในการออกแบบเว็บไซต์ เพื่อให้แม้แต่ผู้อาวุโสหรือผู้พิการก็สามารถใช้เว็บไซต์ได้อย่างง่ายดายและสะดวกสบายโดยไม่ต้องใช้ความพยายามเป็นพิเศษ

ตัวปรับขนาดข้อความเป็นหนึ่งในคุณสมบัติการเข้าถึงที่มีประสิทธิภาพสูงสุดที่เว็บไซต์ใดๆ อาจต้องการ กล่าวโดยสรุปก็คือ มันเป็นเครื่องมือที่ใช้ในการเปลี่ยนขนาดข้อความของหน้าเว็บ โดยปกติจะใช้เพื่อทำให้ข้อความมีขนาดใหญ่ขึ้นเพื่อให้อ่านง่ายขึ้น เบราว์เซอร์จำนวนมากมาพร้อมกับคุณสมบัตินี้ แต่ผู้เริ่มต้นเว็บไม่ทราบวิธีใช้คุณสมบัตินี้ ดังนั้น นักออกแบบเว็บไซต์จึงมักจะใช้คุณสมบัตินี้โดยการวางปุ่มที่ใช้งานง่ายบนหน้าเว็บแต่ละหน้า

คู่มือนี้จะแสดงให้คุณเห็นถึงวิธีการเพิ่มขนาดข้อความที่ใช้งานได้นี้ให้กับหน้าเว็บของคุณโดยใช้ PHP และ CSS ดังนั้น ดำเนินการต่อและเพิ่มการเข้าถึงนี้ให้กับเว็บไซต์ของคุณ และใช้ประโยชน์จากผู้ใช้ที่มีความชื่นชอบมากกว่า 50 คะแนน อ่านต่อแล้วคุณจะ เรียนรู้วิธีใช้มัน

หมายเหตุ: คู่มือนี้ถือว่าคุณได้ติดตั้ง Apache และ PHP แล้ว

มันทำงานอย่างไร?

ก่อนที่จะเขียนโค้ด คุณควรใช้เวลาทำความเข้าใจวิธีการทำงานของตัวปรับขนาดข้อความก่อน แต่ละหน้าบนไซต์ประกอบด้วยชุดการควบคุมที่อนุญาตให้ผู้ใช้เลือกขนาดข้อความของหน้า: เล็ก กลาง และใหญ่ ขนาดตัวอักษรแต่ละขนาดสอดคล้องกับสไตล์ชีต CSS ที่บันทึกข้อความที่ใช้สำหรับกฎการแสดงผลเว็บ ขนาดข้อความหน้า

เมื่อผู้ใช้ทำการเลือก PHP จะจัดเก็บขนาดแบบอักษรที่ผู้ใช้เลือกไว้ในตัวแปรเซสชัน จากนั้นจะโหลดหน้าเว็บใหม่ เพจจะอ่านขนาดแบบอักษรที่เลือกจากตัวแปรเซสชันและเรียกสไตล์ชีตที่เกี่ยวข้องแบบไดนามิกเพื่ออัปเดต เรนเดอร์หน้าใหม่ด้วยขนาดตัวอักษรที่เล็กลงหรือขนาดตัวอักษรที่ใหญ่ขึ้น

กระบวนการ

: การสร้างเว็บเพจ

เริ่มต้นด้วยการสร้างเอกสาร HTML ขั้นแรก กรอกเนื้อหาของตัวยึดตำแหน่งให้ครบถ้วนเป็นตัวอย่าง:
รายการ A:

ขนาดตัวอักษร: เล็ก |. href="resize.php?s=medium">กลาง |. ใหญ่

Loremipsum dolor นั่ง
consecteturadipisicingelit, sed ทำ eiusmodtemporincididuntutlabore และ dolore
แม็กนา อลิควา
โฆษณาขั้นต่ำ veniam, การออกกำลังกายแบบ quisnostrud ullamcolaboris nisi utaliquip ex ea
สินค้าโภคภัณฑ์
Duisauteirure dolor ในการแก้แค้นใน
voluptatevelitessecillumdoloreeufugiatnullapariatur.
Excepteursintoccaecatcupidatat ไม่ภูมิใจ, อาทิตย์ใน culpa qui
ทำหน้าที่รับราชการ id estlaborum

ให้ความสนใจเป็นพิเศษกับไฮเปอร์ลิงก์ข้อความที่ด้านบนของหน้า ไฮเปอร์ลิงก์แต่ละรายการจะชี้ไปที่ไฟล์สคริปต์ที่เรียกว่า resize.php และส่งผ่านขนาดตัวอักษรที่เลือกผ่านวิธี URL GET

บันทึกเอกสารนี้ในไดเร็กทอรีเว็บเซิร์ฟเวอร์ของคุณด้วยนามสกุล .php เช่น index.php

ขั้นตอนที่ 2: สร้างสไตล์ชีต

ถัดไป สร้างไฟล์สไตล์ชีตสำหรับข้อความแต่ละขนาด: small.css, medium.css และ large.css นี่คือเนื้อหาไฟล์ของ small.css:

body {
แบบอักษร: 10px
}

ในทำนองเดียวกัน คุณสามารถสร้าง medium.css และ large.css ได้โดยใช้ 17px และ 25px ตามลำดับ และบันทึกไฟล์สไตล์ชีตเหล่านี้ในไดเร็กทอรีเดียวกันกับหน้าเว็บที่สร้างขึ้นในขั้นตอนก่อนหน้า

ขั้นตอนที่ 3: สร้างกลไกการเปลี่ยนขนาดข้อความ

ตามที่แนะนำข้างต้น หน้าเว็บสามารถ "รู้" ไฟล์สไตล์ชีตที่จะโหลดโดยการค้นหาตัวแปรเซสชันที่กำหนดไว้ล่วงหน้า ตัวแปรเซสชันจะถูกควบคุมผ่านไฟล์สคริปต์ resize.php (ดูรายการ B ) ไฟล์นี้จะเปิดใช้งานเมื่อผู้ใช้คลิกปุ่มเพื่อเปลี่ยนขนาดข้อความที่ด้านบนของหน้าเว็บ นี่คือเนื้อหาของ resize.php:

List B

// start session
// นำเข้าขนาดที่เลือกเข้าสู่เซสชัน
session_start();
$_SESSION['textsize'] = $_GET['s'];
header("ตำแหน่ง: " . $_SERVER['HTTP_REFERER']);
?>

ง่ายมาก เมื่อผู้ใช้เลือกขนาดข้อความใหม่ resize.php จะได้รับค่าขนาดตัวอักษรผ่านวิธี GET และเก็บไว้ในตัวแปรเซสชัน $_SESSION['textsize'] จากนั้นจึงรีเซ็ตเบราว์เซอร์ ไปยังหน้าเดิมที่เปิดอยู่

แน่นอนว่ายังมีองค์ประกอบที่ขาดหายไปที่นี่: หน้าเว็บฉลาดพอที่จะตรวจจับขนาดข้อความที่ผู้ใช้เลือกในปัจจุบันโดยอัตโนมัติและโหลดสไตล์ชีตที่เกี่ยวข้อง หากต้องการเพิ่มฟังก์ชันนี้ ให้เปิดไฟล์หน้าเว็บของคุณindex.php และเพิ่ม คำสั่งต่อไปนี้ที่จุดเริ่มต้นของไฟล์ (ดูรายการ C) :

รายการ C

// เซสชันเริ่มต้น
//นำเข้าตัวแปร
session_start();
// กำหนดขนาดตัวอักษรเริ่มต้นสำหรับหน้านี้
ถ้า (!isset($_SESSION['ขนาดข้อความ'])) {
$_SESSION['textsize'] = 'ปานกลาง';
-
?>

คุณควรเพิ่มลิงก์สไตล์ชีทระหว่าง ... องค์ประกอบดังต่อไปนี้:
ประเภท = "ข้อความ/css">

นี่คือ Listing D ไฟล์ index.php ที่สมบูรณ์ควรมีลักษณะดังนี้:

Listing D:

// start session
//นำเข้าตัวแปร
session_start();
// กำหนดขนาดตัวอักษรเริ่มต้นสำหรับหน้านี้
ถ้า (!isset($_SESSION['ขนาดข้อความ'])) {
$_SESSION['textsize'] = 'ปานกลาง';
-
?>

type="text/css">

ขนาดตัวอักษร: เล็ก |. href="resize.php?s=medium">กลาง |

Loremipsum dolor นั่ง amet
consecteturadipisicingelit, sed ทำ eiusmodtemporincididuntutlabore และ dolore
แม็กนา อลิควา
โฆษณาขั้นต่ำ veniam, การออกกำลังกายแบบ quisnostrud ullamcolaboris nisi utaliquip ex ea
สินค้าโภคภัณฑ์
Duisauteirure dolor ในการแก้แค้นใน
voluptatevelitessecillumdoloreeufugiatnullapariatur.
Excepteursintoccaecatcupidatat ไม่ภูมิใจ, อาทิตย์ใน culpa qui
ทำหน้าที่รับราชการ id estlaborum

มันควรจะง่ายมากที่จะทำความเข้าใจวิธีการทำงานนี้ เมื่อโหลดหน้าเว็บ หน้าเว็บจะกลับมาทำงานต่อในเซสชันปัจจุบันและตรวจสอบว่าตัวแปร $_SESSION['textsize'] ตรงกับขนาดตัวอักษรที่เลือกในปัจจุบันหรือไม่ จากนั้นจึงโหลดสไตล์ชีตที่เกี่ยวข้องแบบไดนามิก ผ่านองค์ประกอบ ซึ่งจะทำให้หน้าเว็บแสดงผลซ้ำในขนาดที่ถูกต้องโดยอัตโนมัติ การใช้ PHP และ CSS ร่วมกันจะแตกต่างจากวิธีดั้งเดิมเล็กน้อย ซึ่งใช้ JavaScript เพื่อเปลี่ยนสไตล์ชีต CSS แบบไดนามิก ข้อดีของวิธี PHP ก็คือคุณไม่จำเป็นต้องพึ่งพาการสนับสนุนของลูกค้า สำหรับ JavaScript ไม่ต้องกังวลกับการสร้างงานสำหรับเบราว์เซอร์บางตัวโดยเฉพาะ บางทีคุณอาจพบว่าวิธีนี้ใช้ได้ผลดีในครั้งต่อไปที่คุณนั่งลงเพื่อออกแบบเว็บไซต์ ขอให้มีความสุขกับการเขียนโค้ด!