ערכת נושא אודיו וורדפרס מוצמדת

הועלה מחדש על ידי אפלטון

עוקב: 0

אני חושש שאני צריך להתחיל את זה עם סיפור רקע שלם, שכן המסע כאן הוא העיקר, לא כל כך הנושא.

בחור כתב לי לפני זמן מה ותיאר מצב שבו הוא נקלע. לחברה שלו יש חבורה של אתרי וורדפרס לרדיו ציבורי, שרבים מהם הם בעצם בתים לפודקאסטים. יש פונקציונליות ספציפית אחת שהוא חשב שתהיה אידיאלית עבור כולם: להחזיק נגן שמע "מוצמד". כאילו אתה יכול להפעיל פודקאסט, ואז להמשיך לנווט באתר מבלי שהפודקאסט הזה ייפסק.

קצת מסובך להשלים את זה בוורדפרס, מכיוון ש-WordPress עושה טעינות מחדש של עמודים מלאים כמו כל אתר רגיל אחר ולא עושה שום דבר מיוחד עם טיפול בקישורים או מניפולציה בהיסטוריה. כאשר דף נטען מחדש, כל אודיו בדף מפסיק לפעול. רק ככה האינטרנט עובד.

אז איך היית מוציא את זה באתר וורדפרס? ובכן, אתה יכול להפוך אותו לאתר וורדפרס חסר ראש ולבנות מחדש את כל החזית כאפליקציה יחידה. נשמע לי כיף, אבל הייתי מהסס לעשות את השיחה הזו רק לזה אחד דָבָר.

מה עוד יכולת לעשות? אתה יכול למצוא דרך לגרום לדף לעולם לא להיטען מחדש. אני זוכר שעשיתי את זה על אתר סטטי קטן לפני 10 שנים, אבל זה לא היה אתר וורדפרס מלא, ואפילו לא טרחתי לעדכן את כתובת האתר אז.

מה אם היית עושה את זה…

ייירט קליקים פנימיים על קישורים
Ajax עשתה את התוכן מכתובת האתר הזו
החליף את התוכן בדף בתוכן החדש הזה

אני אעשה את זה ב-jQuery מהיר בשבילך:

$("a").on("click", () => { const url = $(this).attr("href"); $.get(url + " main", (data) => { $("main").html(data); history.pushState({}, "", url); });
});

זה לא רחוק מלהיות ממש פונקציונלי. היית רוצה לצפות a popstate אירוע להתמודד עם כפתור החזרה, אבל זה רק עוד כמה שורות.

בעולם ההיפותטי הזה, היית מתכנן את האתר כך:

<html>
<!-- ... --> <body> <main></main> <audio src="" controls ...></audio>
</body>
</html>

אז כל זה <main> התוכן מוחלף, כתובת האתר משתנה, אבל שלך <audio> השחקן נשאר לבד כדי להמשיך לשחק בשקט. היית כותב יותר JavaScript כדי לתת לאנשים דרך לעדכן איזה פודקאסט מתנגן וכדומה.

מסתבר שיש כאן עוד על מה לחשוב. האם סקריפטים מוטבעים על התוכן הולכים לפעול? מה לגבי עדכון ה <title> גַם? יש מספיק חששות קצה שאתה כנראה תתעצבן בהתמודדות איתם.

רציתי לשחק עם החומר הזה, אז זרקתי ערכת נושא וורדפרס והגעתי אליו טורבו במקום לכתוב משהו בכתב יד. Turbo (הגרסה החדשה של Turbolinks) מיועדת בדיוק לכך. זו ספריית JavaScript שאתה מפיל על הדף (ללא תהליך בנייה, ללא הגדרות) וזה פשוט עובד. הוא מיירט קליקים פנימיים על קישורים, של Ajax לתוכן חדש וכו'. אבל יש לו תכונה מעניינת שבה אם תכניס data-turbo-permanent תכונה ברכיב HTML, הוא יחזיק אותו לאורך כל הטעינה מחדש. אז אני עשה את זה עבור נגן האודיו כאן.

אבל כאן העניין.

פשוט אין לי זמן לסיים את הפרויקט הזה כמו שצריך. היה כיף לקיים מחזה, אבל העניין שלי בו די התפוגג. אז אני אשאיר את זה בשקט לעת עתה:

It כמעט עובד, מינוס באג בולט אחד שהשמע מפסיק לנגן בניווט הראשון, ואז עובד לאחר מכן. אני בטוח שזה ניתן לתיקון, אבל פשוט אין לי הרבה עור במשחק הזה. אני מניח שאני פשוט אשתחווה ואשאיר את הקוד הזה בסביבה כדי שמישהו יוכל לאסוף אותו אם הוא שימושי עבורו.

דבר נוסף שמשחק כאן הוא ש-Turbo הוא מ-Basecamp, ול-Basecamp יש די מפוצץ לאחרונה גורם לזה להרגיש לא נהדר להשתמש בתוכנה שלהם. החריף בגלל העובדה שסם סטפנסון כתב 75% מטורבו והוא אמר שהוא לא יגע בה (או בפרויקטים קשורים אחרים) אלא אם כן התוכנה תועבר לבסיס שלה. טורבו כבר היה במקום רועד מאז שנראה מרכבה בהשוואה ל-Turbolinks, ועכשיו הוא פועל מאוד קרקע מסוקסת.

מקור: https://css-tricks.com/pinned-audio-wordpress-theme/

בול זמן: מאי 18, 2021