ช่วยสร้างประเภทโพสต์สไลด์โชว์ที่กำหนดเองพร้อมกล่อง Meta ที่กำหนดเอง?


16

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

  • ชื่อ (ฟิลด์ข้อความ)
  • รูปภาพ (อาจเป็นฟิลด์ข้อความสำหรับ URL img หรือรายการแบบเลื่อนลงที่แสดงรูปขนาดย่อของรูปภาพที่แนบมากับโพสต์)
  • รหัสฝัง (พื้นที่ข้อความ)
  • คำอธิบาย (wysiwyg)
  • ซ่อนสไลด์ (ช่องทำเครื่องหมายเพื่อใช้ซ่อนสไลด์ชั่วคราวโดยไม่ลบ)
  • ลบสไลด์ (ปุ่มที่ลบเนื้อหาของโพสต์ฟิลด์เมตาที่ถูกกรอกด้วยสไลด์นี้)

ฉันต้องการปุ่มที่ช่วยให้ฉัน "เพิ่มสไลด์" ดังนั้นเมื่อมีการคลิกมันก็เพิ่ม Meta Custom Box "Slide" อีกอันซึ่งซ้ำซ้อนกับช่องแรก ขณะนี้ฉันเพิ่งมี metaboxes 15 รายการและมีการตั้งค่าเทมเพลตสไลด์โชว์ในลักษณะที่ว่าถ้ามีเพียง 5 ในเมตาบอชเท่านั้นที่จะถูกเติมเข้าไปในนั้นจะมีเพียง 5 สไลด์เท่านั้นที่แสดง

ท้ายที่สุดฉันต้องการสั่งซื้อสไลด์อีกครั้งไม่ว่าจะโดย "ลากแล้วปล่อย" หรือฟิลด์ข้อความอื่นที่ฉันสามารถพิมพ์หมายเลขคำสั่งซื้อ

ฉันได้รับมันเกือบที่ฉันต้องการด้วยปลั๊กอิน "เขตข้อมูลเพิ่มเติม"และความช่วยเหลือเกี่ยวกับรหัสจาก Rarst ด้วยปลั๊กอิน "เขตข้อมูลเพิ่มเติม" ฉันมีเขตข้อมูลต่อไปนี้ในแต่ละ metabox:

  • ชื่อ (ฟิลด์ข้อความ)
  • รูปภาพ (รายการแบบเลื่อนลงของภาพที่แนบมากับโพสต์)
  • รหัสฝัง (พื้นที่ข้อความ)
  • คำอธิบาย (wysiwyg)
  • ซ่อนสไลด์ (ช่องทำเครื่องหมายเพื่อใช้ซ่อนสไลด์ชั่วคราวโดยไม่ลบ)

นี่คือภาพหน้าจอของวิธีติดตั้งผ่านปลั๊กอิน "More Fields":

ข้อความแสดงแทน

ปัญหาของเรื่องนี้คือไม่มีทางที่จะลบสไลด์เมื่อมันเกิดขึ้นเพราะ "More Fields" ไม่ได้ใช้<?php delete_post_meta($post_id, $key, $value); ?>ที่ใดก็ได้ ปัญหาอื่น ๆ ของปลั๊กอินก็คือมันไม่น่าเชื่อถือมากเกินไปและทำลายบ่อยครั้งด้วยการอัพเดท

ฉันสามารถใช้โซลูชันที่คล้ายกันกับ metaboxes ที่กำหนดเองของฉันซึ่งรวมถึง:

  • ชื่อ (ฟิลด์ข้อความ)
  • รูปภาพ (ฟิลด์ข้อความสำหรับ URL img)
  • รหัสฝัง (พื้นที่ข้อความ)
  • คำอธิบาย (พื้นที่ข้อความ)
  • ซ่อนสไลด์ (ช่องทำเครื่องหมายเพื่อใช้ซ่อนสไลด์ชั่วคราวโดยไม่ลบ)

ด้วยการใช้งานนี้ฉันไม่สามารถรับเขตข้อมูล TinyMCE หลายอันเพื่อใช้งานหรือกล่องดร็อปดาวน์รูปภาพ รหัส TinyMCE ที่ดูเหมือนว่าจะทำงานจนกว่าฉันจะเพิ่มรหัสที่สร้างสำเนาที่เพิ่มขึ้นของ metabox แรกที่จุดที่ฉันได้รับข้อผิดพลาดนี้ด้านขวาเหนือสนามที่ปุ่ม TinyMCE Warning: array_push() [function.array-push]: First argument should be an array...ที่ควรจะเป็น:

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

ฉันกำลังจัดการการอัปโหลดภาพผ่านทางกล่อง "ภาพที่น่าสนใจ" ในตัวในแถบด้านข้างแม้ว่าฉันจะไม่สนใจเมตาโบท็อกซ์ที่กำหนดเองซึ่งพูดว่า "อัปโหลดภาพ" ที่ด้านบนของแผงการเขียน

ในที่สุดฉันกำลังมองหาสไลด์โชว์ที่คล้ายกันนี้: http://www.nytimes.com/slideshow/2010/08/10/science/20100810angier-1.html ฉันต้องการให้ฉันมีวิดีโอเป็นเนื้อหาในสไลด์แทนที่จะเป็นรูปภาพ ฉันต้องการแผงผู้ดูแลระบบที่ใช้งานง่ายและสัญชาตญาณสำหรับนักเขียนของฉัน (พวกเขาไม่เข้าใจเทคโนโลยีมากนักและไม่น่าเชื่อถือโดยใช้ html และ / หรือรหัสย่อ) ในกรณีที่ไม่ชัดเจนจากตัวอย่างทุกสไลด์ควรสร้างการดูหน้าเว็บใหม่

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

ข้อความแสดงแทน

นอกจากนี้คุณยังสามารถดูภาพหน้าจอที่มากขึ้นของมันในการดำเนินการในที่เก็บ WordPress

นี่คือรหัสของฉันทั้งหมด:

ฟังก์ชั่นการตั้งค่าประเภทโพสต์สไลด์โชว์และการแบ่งหน้าสไลด์โชว์: http://loak.pastebin.com/g63Gf186

รหัสต้นฉบับจากDeluxeBloggingTips.com (DBT) ที่ฉันใช้ Metaboxes เป็น: http://loak.pastebin.com/u9YTQrxf

รุ่นของรหัส DBT ที่ฉันแก้ไขเพื่อให้รุ่นที่เพิ่มขึ้นของ metabox เดียวกัน: http://loak.pastebin.com/WtxGdPrN

เวอร์ชัน DBT ที่แก้ไขแล้วซึ่งChris Burbridgeสร้างขึ้นเพื่ออนุญาตให้ TinyMCE หลายอินสแตนซ์: http://loak.pastebin.com/Mqb3pKhx ด้วยรหัสนี้ TinyMCEs จะทำงานได้

การดัดแปลงรหัส Burbridge ของฉันที่พยายามรวมส่วนเพิ่มของฉันและฟิลด์ที่ให้คุณเลือกรูปภาพจากรายการแบบหล่นลงของภาพทั้งหมดที่แนบมากับโพสต์: http://loak.pastebin.com/xSuenJTK ในความพยายามนี้ TinyMCE เสียและเมนูแบบเลื่อนลงไม่ทำงาน

อาจไม่เป็นไร แต่ในกรณีที่คุณสงสัยนี่คือรหัสที่ฉันใช้เพื่อดึงรหัสฝังจากเมตาโพสต์ที่กำหนดเองปรับขนาดแล้วใส่ในโพสต์: http://loak.pastebin.com / n7pAzEAw

นี่เป็นคำถามเดิมที่แก้ไขแล้วเพื่อสะท้อนถึงสถานะปัจจุบันของโครงการและตอบคำถามที่โพสต์ในความคิดเห็น ขอบคุณChris_O ที่ให้รางวัลกับสิ่งนี้ นอกจากนี้ต้องขอบคุณRarstและจัสตินที่ช่วยฉันออกจากที่มีจำนวนมากในเรื่องนี้ที่ฟอรั่ม ThemeHybrid.com ฉันใช้เวลาหลายชั่วโมงกับปัญหานี้และติดขัด (ฉันใช้เวลาสองสามชั่วโมงกับคำถามนี้) ความช่วยเหลือใด ๆ ที่จะได้รับการชื่นชมอย่างมาก.


คุณสามารถวาดภาพที่คล้ายกันที่แสดงภาพรวมทั้งหมดเช่นร่างหรือดังนั้น? ฉันคิดว่ามีประโยชน์ที่จะเข้าใจความต้องการของคุณดีขึ้น
hakre

ฉันเพิ่มตัวอย่างลงไปด้านล่าง หากสิ่งนี้ยังไม่ชัดเจนเพียงพอให้ฉันรู้
matt

ยังไม่ชัดเจนใช่ไหม
ด้าน

ใคร? เป็นสิ่งนี้หรือไม่
ด้าน

@Hakre คุณอยู่ที่นั่นเหรอ?
matt

คำตอบ:


6

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

หลายช่อง

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

นี่คือแกนหลักของการทำงานหลายวิดเจ็ตในแถบด้านข้าง:

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

ลากแล้ววาง

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

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

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

สรุป

สิ่งที่ฉันรวบรวมจากโพสต์ของคุณคือคุณมีวิธีแก้ไขปัญหาที่ใช้การได้:

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

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

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

ระหว่าง SlideDeck, เขตข้อมูลเพิ่มเติมและรหัสที่กำหนดเองที่คุณรวบรวมมาคุณได้มีโซลูชันส่วนใหญ่อยู่ในมือแล้ว ... คุณเพียงแค่ต้องทำให้มันทำงานร่วมกันในเวลาเดียวกัน ฉันจะให้ความสำคัญกับการนำรูทมาใช้ก่อนที่จะเพิ่มการปรุงแต่ง JavaScript - การสร้างแก้ไขปรับแต่งบันทึกและลบสไลด์มีความสำคัญมากกว่า IMO รับสิ่งที่แตกออกก่อน จากนั้นรับระบบการสั่งซื้อลง จากนั้นคุณสามารถมุ่งเน้นที่การทำให้ TinyMCE ทำงานบนหน้าเว็บได้หลายอินสแตนซ์


ขอบคุณสำหรับความช่วยเหลือ! ในขณะนี้นี่เป็นทักษะเล็กน้อยของฉัน แต่จะทำหน้าที่เป็นแนวทางที่ดีในกระบวนการเรียนรู้ ฉันรู้ "คลาส" และรู้ว่าฉันใช้คลาสกับโค้ด metaboxes แล้ว แต่ฉันยังไม่เข้าใจ อีกสิ่งหนึ่งที่ฉัน "ระวัง" แต่ไม่เข้าใจก็คือการใช้อาร์เรย์
matt

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

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

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

คุณกำลังบอกว่ามันช่วยประหยัดเวลาในส่วนหน้าของเว็บไซต์หรือไม่? เหตุใดจึงเป็นเช่นนั้นหากแสดงสไลด์ครั้งละหนึ่งภาพเท่านั้น
matt

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.