Elementor תוסף להצגת טבלה מגוגל שיטס עם עדכון חי של הנתונים

[צביזון]

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

ראיתי כמה תוספים כאלו, כולם בתשלום (או שהם מוגבלים במס' עמודות / שורות).

אודה לתשובתכם.

 

[אלעזר 1]

ניסיתם להטמיע ב-IFRAME ?

יש גם את המאמר הזה של גוגל:

Make Google Docs, Sheets, Slides & Forms public - Computer - Google Docs Editors Help

 

[shraga0]

את זה ניסיתם?

Inline Google Spreadsheet Viewer

Embeds public Google Spreadsheets, Apps Scripts, or CSV files in WordPress posts or pages as HTML tables or interactive charts, and more.

wordpress.org

אמנם התוסף ללא תמיכה אבל נראה מהביקורות שהוא עדיין עובד.

 

[shraga0]

נעזרתי בchatGPT שהוביל אותי לאחר מספר נסיונות לתוצאה הרצויה:
1. במסמך הגוגל שיטס, ללחוץ על > קובץ > שיתוף > פרסום באינטרנט > בלשונית "קישור", יש לבחור את הגיליון הרצוי ולאחר מכן בחרו "ערכים מופרדים בפסיקים (.csv)". ואז להעתיק את הקישור שנוצר.
2. להתקין את התוסף Code Snippets, בתפריט שהוא יוצר ללחוץ על "הוסף חדש" שם לבחור בלשונית "Content HTML". להוסיף שם את הקוד הבא:

<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <?php
      $url = 'https://docs.google.com/spreadsheets/d/e/[YOUR-SPREADSHEET-ID]/pub?output=csv';
      if (($handle = fopen($url, "r")) !== FALSE) {
        while (($data = fgetcsv($handle, 1000, ",")) !== FALSE) {
          echo "<tr>";
          foreach ($data as $cell) {
            echo "<td>" . htmlspecialchars($cell) . "</td>";
          }
          echo "</tr>";
        }
        fclose($handle);
      }
    ?>
  </tbody>
</table>

חשוב כמובן להחליף את [YOUR-SPREADSHEET-ID] במזהה של ה Google Sheet הרלוונטי, אותו ניתן למצוא בכתובת הurl:

https://docs.google.com/spreadsheets/d/e/[YOUR-SPREADSHEET-ID]/edit#gid=0

לאחר מכן, ללחוץ על "Save Changes and Activate".

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

בהצלחה

 

[צביזון]

ניסיתם להטמיע ב-IFRAME ?

יש גם את המאמר הזה של גוגל:

Make Google Docs, Sheets, Slides & Forms public - Computer - Google Docs Editors Help

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

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

האם יש משהו להוסיף כדי שהטבלה תוצג בשלימות לכל גובהה?
וכן שהרוחב של הטבלה יותאם לרוחב העמודה באלמנטור?

 

[צביזון]

את זה ניסיתם?

Inline Google Spreadsheet Viewer

Embeds public Google Spreadsheets, Apps Scripts, or CSV files in WordPress posts or pages as HTML tables or interactive charts, and more.

wordpress.org

אמנם התוסף ללא תמיכה אבל נראה מהביקורות שהוא עדיין עובד.

אם זה בלי תמיכה, זה עלול בעוד תקופה להיות לא זמין, ואז כל העבודה שאעשה על בסיס זה תעלם.

נעזרתי בchatGPT שהוביל אותי לאחר מספר נסיונות לתוצאה הרצויה:
1. במסמך הגוגל שיטס, ללחוץ על > קובץ > שיתוף > פרסום באינטרנט > בלשונית "קישור", יש לבחור את הגיליון הרצוי ולאחר מכן בחרו "ערכים מופרדים בפסיקים (.csv)". ואז להעתיק את הקישור שנוצר.
2. להתקין את התוסף Code Snippets, בתפריט שהוא יוצר ללחוץ על "הוסף חדש" שם לבחור בלשונית "Content HTML". להוסיף שם את הקוד הבא:

<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <?php
      $url = 'https://docs.google.com/spreadsheets/d/e/[YOUR-SPREADSHEET-ID]/pub?output=csv';
      if (($handle = fopen($url, "r")) !== FALSE) {
        while (($data = fgetcsv($handle, 1000, ",")) !== FALSE) {
          echo "<tr>";
          foreach ($data as $cell) {
            echo "<td>" . htmlspecialchars($cell) . "</td>";
          }
          echo "</tr>";
        }
        fclose($handle);
      }
    ?>
  </tbody>
</table>

חשוב כמובן להחליף את [YOUR-SPREADSHEET-ID] במזהה של ה Google Sheet הרלוונטי, אותו ניתן למצוא בכתובת הurl:

https://docs.google.com/spreadsheets/d/e/[YOUR-SPREADSHEET-ID]/edit#gid=0

לאחר מכן, ללחוץ על "Save Changes and Activate".

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

בהצלחה

זה משהו מדאי מסובך למשתמש כמוני.
עריכה: על אף זאת ניסיתי, וזה לא עובד תקין.

אין תוסף תקין פעיל חינמי?

 

[אלעזר 1]

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

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

האם יש משהו להוסיף כדי שהטבלה תוצג בשלימות לכל גובהה?
וכן שהרוחב של הטבלה יותאם לרוחב העמודה באלמנטור?

עם מעט CSS תוכל להגדיר את הרוחב והגובה של ה-IFRAME בקלות
אפשר גם להגדיר את ה-width וה-height ישירות ל-IFRAME

 

[צביזון]

עם מעט CSS תוכל להגדיר את הרוחב והגובה של ה-IFRAME בקלות
אפשר גם להגדיר את ה-width וה-height ישירות ל-IFRAME

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

 

[shraga0]

אם זה בלי תמיכה, זה עלול בעוד תקופה להיות לא זמין, ואז כל העבודה שאעשה על בסיס זה תעלם.


זה משהו מדאי מסובך למשתמש כמוני.
עריכה: על אף זאת ניסיתי, וזה לא עובד תקין.

אין תוסף תקין פעיל חינמי?

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

[google_sheets_display id="your_file_id"]

כשבמקום your_file_id תדביקו את הID של קובץ הגוגל שיטס.
הID מופיע בURL של הקובץ בתבנית הזו:

https://docs.google.com/spreadsheets/d/e/[your_file_id]/pub?gid=0&single=true&output=csv

לדוגמא, אם הקישור שנוצר לכם בשלב א הוא:

https://docs.google.com/spreadsheets/d/e/2PACX-1vRDkpxP9pyiM-ZsDA6tTR8UgDAs7Ky83_nB6d5d5_QHlDpT2oXYEhB7AQp6b_its-Wk7C_9wTAr26m/pub?gid=0&single=true&output=csv

זה אומר שהID של הקובץ הוא:

2PACX-1vRDkpxP9pyiM-ZsDA6tTR8UgDAs7Ky83_nB6d5d5_QHlDpT2oXYEhB7AQp6b_its-Wk7C_9wTAr26m

ולכן השורטקוד יהיה:

[google_sheets_display id="2PACX-1vRDkpxP9pyiM-ZsDA6tTR8UgDAs7Ky83_nB6d5d5_QHlDpT2oXYEhB7AQp6b_its-Wk7C_9wTAr26m"]

לאחר מכן, יהיה ניתן לערוך את העיצוב באמצעות css מותאם אישית בהגדרות המתקדמות בוידג'ט.

 

[צביזון]

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

[google_sheets_display id="your_file_id"]

כשבמקום your_file_id תדביקו את הID של קובץ הגוגל שיטס.
הID מופיע בURL של הקובץ בתבנית הזו:

https://docs.google.com/spreadsheets/d/e/[your_file_id]/pub?gid=0&single=true&output=csv

לדוגמא, אם הקישור שנוצר לכם בשלב א הוא:

https://docs.google.com/spreadsheets/d/e/2PACX-1vRDkpxP9pyiM-ZsDA6tTR8UgDAs7Ky83_nB6d5d5_QHlDpT2oXYEhB7AQp6b_its-Wk7C_9wTAr26m/pub?gid=0&single=true&output=csv

זה אומר שהID של הקובץ הוא:

2PACX-1vRDkpxP9pyiM-ZsDA6tTR8UgDAs7Ky83_nB6d5d5_QHlDpT2oXYEhB7AQp6b_its-Wk7C_9wTAr26m

ולכן השורטקוד יהיה:

[google_sheets_display id="2PACX-1vRDkpxP9pyiM-ZsDA6tTR8UgDAs7Ky83_nB6d5d5_QHlDpT2oXYEhB7AQp6b_its-Wk7C_9wTAr26m"]

לאחר מכן, יהיה ניתן לערוך את העיצוב באמצעות css מותאם אישית בהגדרות המתקדמות בוידג'ט.

קודם כל אני חייב לציין שאחרי כל ההסבר הזה, זה באמת מוצג טוב ומוצלח!!!
תודה רבה!!!

אולם:

הוא לא מביא לי את עיצוב הטבלה (רקע/צבעים/גודל גופנים/הדגשות) שנמצא בגוגל שיטס.
הוא לא מדגיש שום שורה. לא שורת כותרת ולא שאר שורות שהיו מודגשות בטבלה.

גם הוא לא ממרכז את תוכן שורת הכותרת בתוך התא, אלא כל הטבלה מיושרת לימין.

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

איך ניתן לשלוט על כל הפרטים האלו?

אגב, של מי התוסף? זה לא מופיע בסיפרית התוספים בוורדפרס.

 

[צביזון]

שאלה נוספת: אם אני רוצה קישור רק לגיליון מסויים, איך ניתן לעשות זאת?

כשאני מבקש קישור לפי שלב א' לעיל, יש לי אפשרות לבקש קישור שיתאים לגיליון מסויים.

אבל כשאני לוקח מתוכו את ה-ID של קובץ, זה תמיד יראה את הגיליון הראשון, על אף שביקשתי קישור לגיליון השני.

כי מה שמשפיע בקישור על ההחלטה איזה גיליון יוצג, נמצא בחלק הקישור שאחרי ה-ID.

 

[צביזון]

@shraga0 לגבי השאלה ששאלתי בהודעה 11, מצאתי את הפתרון.

פתחתי את הקובץ של התוסף בתוכנת notepad, ומחקתי את מה שמוזרח בתמונה שלהלן,



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

בכזה אופן אני יכול להציג גליון ספציפי, איזה שאבחר.


אודה אם ניתן לסייע לי בענין מה ששאלתי בהודעה 10.

 

[shraga0]

קודם כל אני חייב לציין שאחרי כל ההסבר הזה, זה באמת מוצג טוב ומוצלח!!!
תודה רבה!!!

אולם:

הוא לא מביא לי את עיצוב הטבלה (רקע/צבעים/גודל גופנים/הדגשות) שנמצא בגוגל שיטס.
הוא לא מדגיש שום שורה. לא שורת כותרת ולא שאר שורות שהיו מודגשות בטבלה.

גם הוא לא ממרכז את תוכן שורת הכותרת בתוך התא, אלא כל הטבלה מיושרת לימין.

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

איך ניתן לשלוט על כל הפרטים האלו?

אגב, של מי התוסף? זה לא מופיע בסיפרית התוספים בוורדפרס.

אפשר לעצב את הטבלה באמצעות css בהגדרות של הוידג'ט שורטקוד

לאחר מכן, יהיה ניתן לערוך את העיצוב באמצעות css מותאם אישית בהגדרות המתקדמות בוידג'ט.

אגב התוסף הזה

Inline Google Spreadsheet Viewer

Embeds public Google Spreadsheets, Apps Scripts, or CSV files in WordPress posts or pages as HTML tables or interactive charts, and more.

wordpress.org

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

 

[צביזון]

אפשר לעצב את הטבלה באמצעות css בהגדרות של הוידג'ט שורטקוד


אגב התוסף הזה

Inline Google Spreadsheet Viewer

Embeds public Google Spreadsheets, Apps Scripts, or CSV files in WordPress posts or pages as HTML tables or interactive charts, and more.

wordpress.org

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

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

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

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


האם אפשר לקבל את הקוד בשביל להדביק בCSS על מנת לעצב את הטבלה באמצעות התוסף הפשוט שהבאת?

מה שאני רוצה זה אפשרות לעצב את הכותרת כך שהגופן יהיה מודגש/ממורכז ותהיה רקע לשורה בצבע שאבחר.

וכן השורה האחרונה מודגשת עם רקע ללא מרכוז.

 

[shraga0]

מה שאני רוצה זה אפשרות לעצב את הכותרת כך שהגופן יהיה מודגש/ממורכז ותהיה רקע לשורה בצבע שאבחר.

וכן השורה האחרונה מודגשת עם רקע ללא מרכוז.

בהגדרות הוידג'ט שורטקוד > מתקדם > css מותאם, תוסיף את הקוד הזה:

tr {
  text-align: center;
  background-color: green;
  color: white;
  font-weight: bold;
}

tr:first-child {
  text-align: center;
  background-color: red;
  color: white;
  font-weight: bold;
}

tr:last-child {
  background-color: blue;
  color: white;
  font-weight: bold;
}

 

[צביזון]

tr { text-align: center; background-color: green; color: white; font-weight: bold; } tr:first-child { text-align: center; background-color: red; color: white; font-weight: bold; } tr:last-child { background-color: blue; color: white; font-weight: bold; }

זה עובד מצוין. תודה רבה.
אם כי כאשר שמים צבע חלש בשורות, רואים את הצל של שורה כן שורה לא, אבל דווקא זה טוב לי.

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

יש דרך להגביל את הקוד רק לאלמנט הספציפי בו שמו אותו?

 

[shraga0]

#first-table tr {
  text-align: center;
  background-color: white;
  color: white;
  font-weight: bold;
}

#first-table tr:first-child {
  text-align: center;
  background-color: red;
  color: white;
  font-weight: bold;
}

#first-table tr:last-child {
  background-color: blue;
  color: white;
  font-weight: bold;
}

ב>מתקדם>פריסה> תגדירו לוידגט css id בשם first-table למשל. כך הגדרות הcss יחולו רק על הטבלה בשם first-table

יתכן שיש דרכים נכונות יותר לבצע זאת...

 

[צביזון]

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

[google_sheets_display id="your_file_id"]

כשבמקום your_file_id תדביקו את הID של קובץ הגוגל שיטס.
הID מופיע בURL של הקובץ בתבנית הזו:

https://docs.google.com/spreadsheets/d/e/[your_file_id]/pub?gid=0&single=true&output=csv

לדוגמא, אם הקישור שנוצר לכם בשלב א הוא:

https://docs.google.com/spreadsheets/d/e/2PACX-1vRDkpxP9pyiM-ZsDA6tTR8UgDAs7Ky83_nB6d5d5_QHlDpT2oXYEhB7AQp6b_its-Wk7C_9wTAr26m/pub?gid=0&single=true&output=csv

זה אומר שהID של הקובץ הוא:

2PACX-1vRDkpxP9pyiM-ZsDA6tTR8UgDAs7Ky83_nB6d5d5_QHlDpT2oXYEhB7AQp6b_its-Wk7C_9wTAr26m

ולכן השורטקוד יהיה:

[google_sheets_display id="2PACX-1vRDkpxP9pyiM-ZsDA6tTR8UgDAs7Ky83_nB6d5d5_QHlDpT2oXYEhB7AQp6b_its-Wk7C_9wTAr26m"]

לאחר מכן, יהיה ניתן לערוך את העיצוב באמצעות css מותאם אישית בהגדרות המתקדמות בוידג'ט.

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

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

 

[נוכחות]

אם עדיין יש צורך בעוד מידע תוכלו לכתוב כאן.

 

[צביזון]

אם עדיין יש צורך בעוד מידע תוכלו לכתוב כאן.

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