ข้ามไปยังเนื้อหาหลัก

นักออกแบบแห่งวัน

ฝัง นักออกแบบแห่งวัน บนเว็บไซต์ของคุณ

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

วิธีการทำงาน

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

ต้องการใช้สคริปต์? เพิ่มคอนเทนเนอร์หนึ่งตัวและสคริปต์หนึ่งตัว: วิดเจ็ตจะวาดสไตล์ที่คุณเลือกด้วย data-dotd-variant (image, cta หรือ card) ในภาษาของที่อยู่สคริปต์เมื่อภาษานั้นพร้อมใช้งาน หากคุณไม่สามารถรันสคริปต์ได้ ให้ใช้เวอร์ชัน HTML ของรูปแบบเดียวกัน

รูปแบบ A: รูปภาพเท่านั้น

รูปภาพของวันนี้ เชื่อมต่อไปยัง นักออกแบบแห่งวัน ตัวเลือกที่เบาที่สุด

ตัวอย่างแบบสด

<a href="https://designeroftheday.com/th/" target="_blank" rel="noopener">
  <img src="https://competition.adesignaward.com/designer-of-the-day/today.png" alt="ภาพนักออกแบบแห่งวัน นำเสนอผู้สร้างสรรค์ที่มีวิสัยทัศน์ซึ่งได้รับการยกย่องในวันนี้" loading="lazy" style="max-width:100%;height:auto">
</a>
<div data-dotd="designeroftheday.com" data-dotd-variant="image"></div>
<script async src="https://designeroftheday.com/feature.js?lang=th"></script>

รูปแบบ B: รูปภาพและปุ่มเรียกร้องให้ดำเนินการ

รูปภาพของวันนี้พร้อมปุ่มเรียกร้องให้ดำเนินการด้านล่าง

ตัวอย่างแบบสด

<a href="https://designeroftheday.com/th/" target="_blank" rel="noopener" style="display:block;max-width:100%;color:inherit;text-decoration:none;text-align:center">
  <img src="https://competition.adesignaward.com/designer-of-the-day/today.png" alt="ภาพนักออกแบบแห่งวัน นำเสนอผู้สร้างสรรค์ที่มีวิสัยทัศน์ซึ่งได้รับการยกย่องในวันนี้" loading="lazy" style="display:block;max-width:100%;height:auto;margin:0 auto">
  <span style="display:block;margin-top:.5em;font:600 15px/1.3 system-ui,sans-serif">ค้นพบนักออกแบบแห่งวัน</span>
</a>
<div data-dotd="designeroftheday.com" data-dotd-variant="cta"></div>
<script async src="https://designeroftheday.com/feature.js?lang=th"></script>

รูปแบบ C: การ์ด Bootstrap

การ์ด Bootstrap ที่มีรูปภาพ ชื่อฟีเจอร์ ข้อความสั้น และปุ่มเรียกร้องให้ดำเนินการ หน้าเว็บของคุณต้องใช้ Bootstrap

ตัวอย่างแบบสด

<div class="card" style="max-width:24rem">
  <a href="https://designeroftheday.com/th/" target="_blank" rel="noopener"><img src="https://competition.adesignaward.com/designer-of-the-day/today.png" class="card-img-top" alt="ภาพนักออกแบบแห่งวัน นำเสนอผู้สร้างสรรค์ที่มีวิสัยทัศน์ซึ่งได้รับการยกย่องในวันนี้" loading="lazy"></a>
  <div class="card-body">
    <h5 class="card-title">นักออกแบบแห่งวัน</h5>
    <p class="card-text">A' Design Award แนะนำนักออกแบบผู้มีพรสวรรค์หรือสถาปนิกระดับโลกในแต่ละวัน ในฐานะนักออกแบบแห่งวัน โดยนำเสนอบุคคลเบื้องหลังผลงานสร้างสรรค์อันโดดเด่น ปรัชญาการออกแบบ โครงการเด่น และความสำเร็จของพวกเขา</p>
    <a href="https://designeroftheday.com/th/" class="btn btn-danger" target="_blank" rel="noopener">ค้นพบนักออกแบบแห่งวัน</a>
  </div>
</div>
<div data-dotd="designeroftheday.com" data-dotd-variant="card"></div>
<script async src="https://designeroftheday.com/feature.js?lang=th"></script>

ตัวเลือกที่ 3: JSON

สำหรับนักพัฒนา แอป และระบบอัตโนมัติ JSON ประกอบด้วยชื่อ คำอธิบาย ที่อยู่รูปภาพ ลิงก์ และวันที่ อนุญาตคำขอข้ามโดเมน

fetch("https://designeroftheday.com/feature.json?lang=th")
  .then(function (r) { return r.json(); })
  .then(function (d) {
    // d.name, d.feature, d.paragraph, d.image, d.url, d.date ...
  });

ตัวอย่างการตอบกลับ

{
    "domain": "designeroftheday.com",
    "name": "นักออกแบบแห่งวัน",
    "feature": "นักออกแบบแห่งวัน",
    "paragraph": "A' Design Award แนะนำนักออกแบบผู้มีพรสวรรค์หรือสถาปนิกระดับโลกในแต่ละวัน ในฐานะนักออกแบบแห่งวัน โดยนำเสนอบุคคลเบื้องหลังผลงานสร้างสรรค์อันโดดเด่น ปรัชญาการออกแบบ โครงการเด่น และความสำเร็จของพวกเขา",
    "description": "นักออกแบบแห่งวันแนะนำนักออกแบบผู้มีพรสวรรค์หรือสถาปนิกระดับโลกในแต่ละวัน โดยนำเสนอบุคคลผู้ยิ่งใหญ่เบื้องหลังผลงานสร้างสรรค์อันโดดเด่น ภูมิหลังทางวิชาชีพ ปรัชญาการออกแบบ โครงการเด่น และความสำเร็จที่ได้รับการยอมรับจาก A' Design Award and Competition อันทรงเกียรติ",
    "call_to_action": "ค้นพบนักออกแบบแห่งวัน",
    "date": "2026-11-08",
    "language": "th",
    "image": "https://competition.adesignaward.com/designer-of-the-day/today.png",
    "image_alt": "ภาพนักออกแบบแห่งวัน นำเสนอผู้สร้างสรรค์ที่มีวิสัยทัศน์ซึ่งได้รับการยกย่องในวันนี้",
    "url": "https://designeroftheday.com/th/",
    "feature_url": "https://competition.adesignaward.com/designer-of-the-day.html",
    "registry_url": "https://competition.adesignaward.com/designers-of-the-days.php",
    "embed_url": "https://designeroftheday.com/th/nam-sanoe/"
}

สิ่งที่ควรรู้

  • คงลิงก์รอบรูปภาพไว้ เพื่อให้ผู้เข้าชมของคุณสามารถค้นพบฟีเจอร์ฉบับเต็มได้
  • ใช้ที่อยู่รูปภาพที่แสดงด้านบนเสมอ และอย่าจัดเก็บสำเนา เพื่อให้หน้าเว็บของคุณเป็นปัจจุบันอยู่เสมอ
  • รูปภาพเป็นแบบตอบสนอง: จะไม่ขยายกว้างเกินคอนเทนเนอร์
  • ต้องการความช่วยเหลือหรือรูปแบบที่กำหนดเอง? กรุณาติดต่อเรา

โฆษณา

ค้นพบผลงานออกแบบที่ได้รับรางวัล

คำคมด้านการออกแบบประจำวัน

คำคมด้านการออกแบบประจำวัน

DesignAdage