17 เคล็ดลับ CSS ประหยัดเวลาสำหรับผู้ใช้ WordPress

เผยแพร่แล้ว: 2023-03-13

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

แม้ว่า WordPress จะมีธีมและเทมเพลตที่สร้างไว้ล่วงหน้ามากมาย แต่บางครั้งคุณจำเป็นต้องจัดการเรื่องต่างๆ ด้วยตัวเองและทำการปรับแต่งด้วย CSS

หากคุณเคยถามคำถามเหล่านี้ขณะทำงานบนเว็บไซต์ WordPress ของคุณ:

  • “ฉันจะลบปุ่ม 'อ่านเพิ่มเติม' ได้อย่างไร”
  • “ฉันจะเปลี่ยนสีของลิงค์นี้ได้อย่างไร”
  • “ฉันจะทำให้ลิงก์นี้คลิกไม่ได้แต่เก็บข้อความไว้บนหน้าได้อย่างไร”

…จากนั้นอ่านต่อเพื่อเรียนรู้เคล็ดลับ CSS อันมีค่าสำหรับเว็บไซต์ของคุณ

ในบทช่วยสอนนี้ เราจะครอบคลุมถึง:

  • เคล็ดลับ WordPress CSS
    1. จัดองค์ประกอบให้อยู่กึ่งกลางในแนวนอนและแนวตั้ง
    2. เปลี่ยนสีลิงค์
    3. ลบลิงก์
    4. ปิดการใช้งานลิงค์ (ลิงค์ยังคงมองเห็นได้ แต่ผู้ใช้ไม่สามารถคลิกได้)
    5. เปลี่ยนสีของลิงค์เมื่อโฮเวอร์
    6. ลิงค์สไตล์
    7. จัดสไตล์ปุ่ม
    8. เปลี่ยนแบบอักษรของส่วน
    9. สร้างส่วนหัวติดหนึบ
    10. สร้างส่วนหัวแบบติดหนึบพร้อมเอฟเฟกต์เงา
    11. เพิ่มสีพื้นหลังให้กับส่วน
    12. เปลี่ยนสีพื้นหลังของร่างกาย
    13. เปลี่ยนสีของคำหรือวลีเฉพาะ
    14. สร้างเส้นขอบรอบๆ รูปภาพ
    15. สร้างเอฟเฟกต์โฮเวอร์บนรูปภาพ
    16. จัดรูปแบบแบบฟอร์ม
    17. สร้างเค้าโครงที่ตอบสนอง
  • ยกระดับทักษะ CSS ของคุณไปอีกระดับ

เคล็ดลับ WordPress CSS

มีเพียงสองสิ่งที่คุณต้องรู้เพื่อใช้เคล็ดลับเหล่านี้คือ:

  • CSS ทำงานอย่างไร
  • วิธีเพิ่ม CSS ให้กับ WordPress

หมายเหตุ: CSS ไม่มีความเสี่ยง ดังนั้นหากคุณทำผิดพลาด คุณสามารถลบโค้ดของคุณหรือแก้ไขมันได้... มันจะไม่เสียหายอะไรเลย :)

เพื่อไม่ให้เป็นการรบกวน เรามาดูเคล็ดลับ CSS ที่ใช้งานได้จริงพร้อมตัวอย่างเพื่อให้คุณสามารถลองใช้บนเว็บไซต์ WordPress ของคุณเอง:

จัดองค์ประกอบให้อยู่กึ่งกลางในแนวนอนและแนวตั้ง

หากต้องการจัดกึ่งกลางองค์ประกอบ (เช่น รูปภาพ ข้อความ หรือ div) ทั้งแนวนอนและแนวตั้ง ให้ใช้โค้ด CSS ต่อไปนี้:

.element {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

ในโค้ดนี้ position: relative ถูกใช้เพื่อวางตำแหน่งองค์ประกอบที่สัมพันธ์กับบรรพบุรุษในตำแหน่งที่ใกล้ที่สุด top: 50% และ left: 50% ย้ายองค์ประกอบไปที่กึ่งกลางของคอนเทนเนอร์ สุดท้าย transform: translate(-50%, -50%) จะจัดกึ่งกลางองค์ประกอบทั้งแนวนอนและแนวตั้งโดยการเลื่อนกลับไป 50% ของความกว้างและความสูงขององค์ประกอบนั้นเอง

เปลี่ยนสีลิงค์

.item-class{
color : blue;
}

คุณสามารถใช้สีต่างๆ เช่น สีขาว สีดำ สีฟ้า สีแดง… แต่คุณอาจต้องการใช้สีที่เฉพาะเจาะจง

ในกรณีนี้ คุณสามารถทำได้ดังนี้:

.item-class{
color : #F7F7F7;
}

หากคุณต้องการสร้างชุดสีสำหรับการออกแบบเว็บไซต์ของคุณ ให้ลองใช้เครื่องมือ Paletton มันมีประโยชน์มาก!

หมายเหตุ: หากคุณต้องการรวมองค์ประกอบต่างๆ มันค่อนข้างง่าย

เช่น สมมติว่าคุณต้องการปิดการใช้งานการคลิกและเปลี่ยนลิงก์กลับเป็นสีดำ

คุณสามารถใช้รหัสนี้:

.item-class{
pointer-events : none;
color : black;
}

ลบลิงก์

.item-class{
display : none;
}

หมายเหตุ: บางครั้งคุณอาจต้องใส่ a หลังชั้นเรียนเพื่อให้ได้ผล เช่นนี้

.item-class a{
display : none;
}

ลองเพิ่ม a หรือการทดลองโดยไม่ใช้เพื่อดูว่าโค้ดของคุณใช้งานได้หรือไม่ เพียงเพิ่ม CSS บันทึก และตรวจสอบส่วนหน้าของคุณ

ปิดการใช้งานลิงค์ (ลิงค์ยังคงมองเห็นได้ แต่ผู้ใช้ไม่สามารถคลิกได้)

หมายเหตุ: เป็นการดีกว่าเสมอที่จะแก้ไข HTML เพื่อที่จะทำเช่นนี้ แต่ถ้า CSS อาจจะง่ายกว่าหรือเป็นวิธีแก้ปัญหาเดียวที่เป็นไปได้ ให้ใช้โค้ดนี้:

.item-class{
pointer-events: none;
}

เปลี่ยนสีของลิงค์เมื่อโฮเวอร์

คุณสามารถทำให้ลิงก์เปลี่ยนสีได้เมื่อผู้ใช้วางเมาส์เหนือลิงก์เหล่านั้นโดยใช้โค้ด CSS ต่อไปนี้:


a:hover {
color: red;
}

ในโค้ดนี้ ตัวเลือก a:hover กำหนดเป้าหมายลิงก์ทั้งหมดบนหน้าที่ผู้ใช้กำลังวางเมาส์เหนืออยู่ คุณสมบัติ color: red เปลี่ยนสีของข้อความเป็นสีแดง

ลิงค์สไตล์

หากต้องการจัดรูปแบบลิงก์บนเว็บไซต์ของคุณ ให้ใช้โค้ด CSS ต่อไปนี้:


a {
color: #0077cc;
text-decoration: none;
border-bottom: 1px solid #0077cc;
transition: all 0.2s ease-in-out;
}

a:hover {
color: #005299;
border-bottom: 1px solid #005299;
}

ในโค้ดนี้ a เลือกจะใช้เพื่อจัดรูปแบบลิงก์ทั้งหมดบนเพจ คุณสมบัติ color จะกำหนดสีของลิงก์ และคุณสมบัติ text-decoration จะลบการขีดเส้นใต้เริ่มต้น คุณสมบัติ border-bottom จะเพิ่มเอฟเฟกต์การขีดเส้นใต้ที่ละเอียดอ่อน คุณสมบัติ transition จะสร้างเอฟเฟกต์การเปลี่ยนแปลงที่ราบรื่นเมื่อผู้ใช้วางเมาส์เหนือลิงก์ ตัวเลือก a:hover ใช้เพื่อจัดรูปแบบลิงก์เมื่อผู้ใช้เลื่อนเมาส์ไปเหนือลิงก์นั้น

จัดสไตล์ปุ่ม

ใช้รหัสต่อไปนี้เพื่อจัดสไตล์ปุ่ม:


.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}

ในโค้ดนี้ คุณสมบัติต่างๆ ถูกใช้เพื่อจัดสไตล์ปุ่ม รวมถึงคุณสมบัติ background-color และ color สำหรับลักษณะของปุ่ม คุณสมบัติ padding สำหรับขนาดของปุ่ม และคุณสมบัติ cursor เพื่อเปลี่ยนตัวชี้เมาส์เมื่อวางเมาส์เหนือปุ่ม

เปลี่ยนแบบอักษรของส่วน

เปลี่ยนแบบอักษรของส่วนของเว็บไซต์ของคุณโดยใช้โค้ด CSS ต่อไปนี้:


.section {
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
}

ในโค้ดนี้ คุณสมบัติ font-family จะตั้งค่าแบบอักษรเป็น Arial หรือแบบอักษร sans-serif ที่คล้ายกัน คุณสมบัติ font-size จะกำหนดขนาดแบบอักษรเป็น 16 พิกเซล และคุณสมบัติ line-height จะกำหนดระยะห่างระหว่างบรรทัดของข้อความเป็น 1.5 คูณด้วยขนาดตัวอักษร

สร้างส่วนหัวติดหนึบ

หากคุณต้องการสร้างส่วนหัวที่คงที่ที่ด้านบนของหน้าในขณะที่ผู้ใช้เลื่อน คุณสามารถใช้โค้ด CSS ต่อไปนี้:


.header {
position: fixed;
top: 0;
left:0;
width: 100%;
background-color: #333;
color: #fff;
z-index: 9999;
}

ในโค้ดนี้ position: fixed จะแก้ไขส่วนหัวที่ด้านบนของวิวพอร์ต และคุณสมบัติ top: 0 จะวางตำแหน่งไว้ที่ด้านบนสุดของหน้า width: 100% ช่วยให้มั่นใจว่าส่วนหัวจะขยายความกว้างทั้งหมดของวิวพอร์ต background-color color ใช้ในการจัดรูปแบบส่วนหัว และคุณสมบัติ z-index: 9999 ช่วยให้มั่นใจได้ว่าส่วนหัวจะปรากฏที่ด้านบนขององค์ประกอบอื่นๆ ทั้งหมดในหน้า

สร้างส่วนหัวแบบติดหนึบพร้อมเอฟเฟกต์เงา

หากต้องการสร้างส่วนหัวแบบติดหนึบพร้อมเอฟเฟกต์เงาที่คงอยู่ที่ด้านบนของหน้าในขณะที่ผู้ใช้เลื่อน ให้ใช้โค้ด CSS นี้:


header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #fff;
z-index: 999;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.content {
padding-top: 100px;
}

ในโค้ดนี้ position: fixed ที่ ใช้เพื่อแก้ไขส่วนหัวที่ด้านบนของหน้า คุณสมบัติ top: 0 และ left: 0 วางตำแหน่งส่วนหัวที่มุมซ้ายบนของหน้า width: 100% กำหนดความกว้างของส่วนหัวให้เป็นความกว้างเต็มหน้า คุณสมบัติ background-color จะกำหนดสีพื้นหลังของส่วนหัว และคุณสมบัติ z-index ช่วยให้มั่นใจได้ว่าส่วนหัวจะปรากฏที่ด้านบนขององค์ประกอบอื่นๆ บนเพจ ในที่สุด คุณสมบัติ box-shadow จะเพิ่มเอฟเฟกต์เงาเล็กน้อยให้กับส่วนหัว ตัวเลือก .content ใช้เพื่อเพิ่มการเสริมที่ด้านบนของหน้า เพื่อให้เนื้อหาไม่ถูกครอบคลุมโดยส่วนหัวคงที่

อีบุ๊กฟรี
แผนงานทีละขั้นตอนของคุณสู่ธุรกิจการพัฒนาเว็บที่ทำกำไรได้ ตั้งแต่การเข้าถึงลูกค้ามากขึ้นไปจนถึงการขยายขนาดอย่างบ้าคลั่ง

โดยการดาวน์โหลด ebook นี้ ฉันยินยอมที่จะรับอีเมลจาก WPMU DEV เป็นครั้งคราว
เราเก็บอีเมลของคุณไว้เป็นส่วนตัว 100% และไม่เป็นสแปม

อีบุ๊กฟรี
วางแผน สร้าง และเปิดตัวไซต์ WP ถัดไปของคุณโดยไม่มีปัญหาใดๆ รายการตรวจสอบของเราทำให้กระบวนการนี้ง่ายและทำซ้ำได้

โดยการดาวน์โหลด ebook นี้ ฉันยินยอมที่จะรับอีเมลจาก WPMU DEV เป็นครั้งคราว
เราเก็บอีเมลของคุณไว้เป็นส่วนตัว 100% และไม่เป็นสแปม

เพิ่มสีพื้นหลังให้กับส่วน

คุณต้องการเพิ่มสีพื้นหลังให้กับส่วนของเว็บไซต์ของคุณหรือไม่? จากนั้นใช้โค้ด CSS ต่อไปนี้:


.section {
background-color: #f2f2f2;
padding: 20px;
}

ในโค้ดนี้ คุณสมบัติ background-color: #f2f2f2 จะกำหนดสีพื้นหลังเป็นสีเทาอ่อน และคุณสมบัติ padding: 20px จะเพิ่มพื้นที่ 20 พิกเซลรอบๆ เนื้อหาภายในส่วนดังกล่าว

เปลี่ยนสีพื้นหลังของร่างกาย

เพิ่มโค้ดนี้เพื่อเปลี่ยนสีพื้นหลังของเนื้อหาเว็บไซต์ของคุณ:


body {
background-color: #f5f5f5;
}

ในโค้ดนี้ คุณสมบัติ background-color จะกำหนดสีพื้นหลังเป็นสีเทาอ่อน

เปลี่ยนสีของคำหรือวลีเฉพาะ

หากต้องการเปลี่ยนสีของคำหรือวลีเฉพาะภายในบล็อกข้อความ คุณสามารถใช้โค้ด CSS ต่อไปนี้:


p span {
color: red;
}

ในโค้ดนี้ ตัวเลือก p span กำหนดเป้าหมายองค์ประกอบ span ใด ๆ ที่ปรากฏภายในองค์ประกอบ p จากนั้น คุณสามารถล้อมคำหรือวลีที่คุณต้องการกำหนดเป้าหมายด้วยองค์ประกอบ span ใน HTML ของคุณได้ ดังนี้

<p>Lorem ipsum dolor sit amet, <span>consectetur adipiscing elit</span>. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

สิ่งนี้จะทำให้วลี “consectetur adipiscing elit” ปรากฏเป็นสีแดง

สร้างเส้นขอบรอบๆ รูปภาพ

ต่อไปนี้เป็นวิธีเพิ่มเส้นขอบรอบรูปภาพ:


img {
border: 2px solid #ccc;
}

ในโค้ดนี้ คุณสมบัติ border จะกำหนดความกว้าง สไตล์ และสีของเส้นขอบ ค่า 2px กำหนดความกว้างของเส้นขอบเป็น 2 พิกเซล solid กำหนดสไตล์เป็นเส้นทึบ และ #ccc กำหนดสีเป็นสีเทาอ่อน

สร้างเอฟเฟกต์โฮเวอร์บนรูปภาพ

ใช้ข้อมูลโค้ดนี้เพื่อสร้างเอฟเฟกต์โฮเวอร์บนรูปภาพ:


img:hover {
opacity: 0.8;
}

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

จัดรูปแบบแบบฟอร์ม

จัดรูปแบบแบบฟอร์มบนเว็บไซต์ของคุณด้วยโค้ด CSS ต่อไปนี้:


form {
background-color: #f2f2f2;
padding: 20px;
border-radius: 5px;
}

form label {
display: block;
margin-bottom: 10px;
}

form input[type="text"], form input[type="email"], form textarea {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: none;
border-radius: 3px;
box-shadow: 0 0 5px #ccc;
}

form input[type="submit"] {
background-color: #4CAF50;
border: none;
color: #fff;
padding: 10px 20px;
border-radius: 3px;
cursor: pointer;
}

ในโค้ดนี้ คุณสมบัติต่างๆ จะถูกใช้ในการจัดรูปแบบแบบฟอร์ม รวมถึงคุณสมบัติ background-color padding และ border-radius สำหรับลักษณะที่ปรากฏโดยรวมของแบบฟอร์ม ตัวเลือก form label ใช้เพื่อจัดรูปแบบป้ายกำกับที่เกี่ยวข้องกับแต่ละฟิลด์แบบฟอร์ม form input[type="text"], form input[type="email"], form textarea ใช้เพื่อจัดสไตล์ฟิลด์อินพุตต่างๆ ในแบบฟอร์ม ตัว form input[type="submit"] ใช้เพื่อจัดสไตล์ปุ่มส่ง

สร้างเค้าโครงที่ตอบสนอง

หากคุณต้องการสร้างเลย์เอาต์แบบตอบสนองที่ปรับขนาดหน้าจอต่างๆ ให้ใช้โค้ด CSS ต่อไปนี้:


@media (max-width: 768px) {
/* Styles for screens smaller than 768px */
.container {
width: 100%;
}

.menu {
display: none;
}

.mobile-menu {
display: block;
}
}

@media (min-width: 769px) {
/* Styles for screens larger than 768px */
.container {
width: 768px;
margin: 0 auto;
}

.menu {
display: block;
}

.mobile-menu {
display: none;
}
}

ในโค้ดนี้ กฎ @media ใช้เพื่อระบุสไตล์ที่แตกต่างกันสำหรับขนาดหน้าจอที่แตกต่างกัน กฎ @media กฎแรกกำหนดเป้าหมายหน้าจอที่มีความกว้างสูงสุด 768px และกฎ @media กฎที่สองกำหนดเป้าหมายหน้าจอที่มีความกว้างขั้นต่ำ 769px ตัวเลือกต่างๆ ภายในกฎ @media แต่ละรายการใช้เพื่อปรับเค้าโครงและรูปลักษณ์ของเพจตามขนาดหน้าจอ

เคล็ดลับ CSS อีกหนึ่งข้อ…

คุณอาจพบว่าโค้ดของคุณไม่ทำงานแม้ว่าคุณจะทำทุกอย่างถูกต้องแล้วก็ตาม อาจเป็นเพราะว่ามีโค้ด CSS ที่แสดงสิ่งที่แตกต่างจากโค้ดของคุณอยู่แล้ว

หากต้องการแทนที่สิ่งนี้ เพียงเพิ่ม !important ดังนี้:

.item-class{
pointer-events: none !important;
}

นี่เป็นเพียงตัวอย่างเล็กๆ น้อยๆ ของวิธีปฏิบัติที่คุณสามารถใช้ CSS เพื่อปรับปรุงเว็บไซต์ WordPress ของคุณได้

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

ยกระดับทักษะ CSS ของคุณไปอีกระดับ

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

  • 10 เคล็ดลับง่ายๆ สำหรับการเรียนรู้ CSS สำหรับ WordPress – เคล็ดลับการปฏิบัติสำหรับผู้เริ่มต้นที่ต้องการเรียนรู้ CSS โดยเฉพาะสำหรับใช้กับ WordPress ครอบคลุมทุกอย่างตั้งแต่การทำความเข้าใจไวยากรณ์ CSS ไปจนถึงการใช้เฟรมเวิร์ก CSS
  • การเรียนรู้และการอ้างอิง CSS สำหรับ WordPress – คู่มือที่ครอบคลุมสำหรับการเรียนรู้และการอ้างอิง CSS โดยเฉพาะสำหรับใช้กับ WordPress เนื้อหาครอบคลุมหัวข้อต่างๆ เช่น การใช้เครื่องมือปรับแต่ง WordPress การทำความเข้าใจตัวเลือก CSS และการทำงานกับธีมลูก
  • 7 เว็บไซต์ที่ดีที่สุดในการค้นหาตัวอย่าง CSS และแรงบันดาลใจ – กำลังมองหาแรงบันดาลใจสำหรับโค้ด CSS ของคุณหรือไม่? บทความนี้แสดงรายการเว็บไซต์เจ็ดแห่งที่เสนอตัวอย่าง CSS และตัวอย่างที่คุณสามารถใช้บนเว็บไซต์ WordPress ของคุณเอง
  • วิธีจัดรูปแบบรูปภาพบนเว็บไซต์ WordPress ของคุณด้วย CSS – รูปภาพเป็นส่วนสำคัญของเว็บไซต์ใด ๆ และบทความนี้นำเสนอเคล็ดลับในการจัดรูปแบบโดยใช้ CSS คุณจะได้เรียนรู้วิธีเพิ่มเส้นขอบ เปลี่ยนขนาดและการจัดแนวรูปภาพ และอื่นๆ อีกมากมาย
  • วิธีเพิ่ม CSS ที่กำหนดเองให้กับเว็บไซต์ WordPress ของคุณ – บทความนี้จะแนะนำคุณเกี่ยวกับกระบวนการเพิ่ม CSS ที่กำหนดเองให้กับเว็บไซต์ WordPress ของคุณ โดยใช้ทั้งเครื่องมือปรับแต่งและปลั๊กอินในตัว
  • ปลั๊กอิน CSS ฟรีสำหรับการแก้ไขเว็บไซต์ WordPress ของคุณ – บทความนี้แสดงรายการปลั๊กอิน CSS ฟรีบางส่วนที่ช่วยให้คุณสามารถแก้ไขเว็บไซต์ WordPress ของคุณได้ ทำให้ง่ายต่อการดูผลกระทบของการเปลี่ยนแปลง CSS ของคุณแบบเรียลไทม์
  • 14 เครื่องมือแอนิเมชั่น CSS ที่ยอดเยี่ยมสำหรับ WordPress – หากคุณต้องการเพิ่มแอนิเมชั่นให้กับเว็บไซต์ WordPress ของคุณโดยใช้ CSS บทความนี้จะแสดงเครื่องมือเจ๋ง ๆ ที่คุณสามารถใช้เพื่อทำมัน
  • เพิ่มเลย์เอาต์ก่ออิฐและกริดให้กับเว็บไซต์ WordPress ของคุณโดยใช้ CSS – บทความนี้อธิบายวิธีใช้ CSS เพื่อเพิ่มเลย์เอาต์ก่ออิฐและกริดให้กับเว็บไซต์ WordPress ของคุณ สร้างการออกแบบที่ดึงดูดสายตามากขึ้น
  • 25 เคล็ดลับจากผู้เชี่ยวชาญสำหรับการเข้ารหัส CSS Cleaner สำหรับ WordPress – หากคุณต้องการปรับปรุงความสะอาดและความสามารถในการอ่านโค้ด CSS ของคุณ บทความนี้เสนอเคล็ดลับจากผู้เชี่ยวชาญ 25 ข้อในการทำเช่นนั้น
  • 25 เคล็ดลับระดับมืออาชีพสำหรับการปรับปรุงเวิร์กโฟลว์ CSS ของคุณ – เคล็ดลับในการปรับปรุงเวิร์กโฟลว์ CSS ของคุณ ตั้งแต่การใช้ตัวประมวลผลล่วงหน้า CSS ไปจนถึงการใช้เครื่องมือสำหรับนักพัฒนาเบราว์เซอร์เพื่อแก้ไขข้อบกพร่องโค้ดของคุณ

คลิกลิงก์เพื่อเรียนรู้เพิ่มเติมและเริ่มปรับปรุงเว็บไซต์ WordPress ของคุณวันนี้

ผู้ร่วมให้ข้อมูล

ธูป ขอขอบคุณสมาชิก WPMU DEV Antoine จาก Incensy ที่ร่วมเสนอแนวคิดสำหรับโพสต์นี้และตัวอย่าง CSS หลายตัวอย่างที่ใช้ด้านบน ตรวจสอบโปรไฟล์พันธมิตรตัวแทนของ Incensy สำหรับรายละเอียดเพิ่มเติม

เราพลาดเคล็ดลับ CSS ดีๆ ที่คุณได้รับระหว่างทางไปหรือเปล่า? เราชอบที่จะเรียนรู้เกี่ยวกับพวกเขาในความคิดเห็น!