Loading...

תוסף וורדפרס SVG Support

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

Scarable וקטור גרפיקה (SVG) הופכים מקום שכיח בעיצוב אינטרנט מודרני, המאפשר לך להטביע תמונות עם גודל קובץ קטן כי הם מדרגיים לכל גודל חזותי ללא אובדן איכות.

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

המטרה העיקרית של זה היא לאפשר עיצוב ואנימציה של אלמנטים SVG שלך. בדרך כלל אפשרויות הסטיילינג שלך מוגבלות בעת שימוש embedobjectאו imgתגים בלבד.

מאפיינים

  • תמיכה ב- SVG עבור ספריית המדיה שלך
  • הזן את קוד ה- SVG שלך
  • עובד עם יישומון תמונה חדשה (וורדפרס 4.8+)
  • סגנון אלמנטים SVG ישירות באמצעות CSS
  • הנפשת רכיבי SVG באמצעות CSS ו- JS
  • דף הגדרות סופר קל עם הוראות
  • הגבל את יכולת ההעלאה של SVG למנהלי מערכת בלבד
  • הגדר מותאם אישית css בכיתה היעד
  • פשוט מאוד לשימוש – מפשט את השימוש המורכב של קבצי SVG

נוֹהָג

ראשית, להתקין ולהפעיל תמיכה SVG (תוסף זה).

לאחר ההפעלה, תוכל פשוט להעלות תמונות SVG לספריית המדיה שלך כמו כל קובץ אחר.

כמנהל מערכת, באפשרותך לעבור לדף הגדרות מנהל המערכת ‘הגדרות’> ‘תמיכה ב- SVG’ ולהגביל את העלאות הקבצים של SVG למנהלי מערכת בלבד ואפילו להגדיר קבוצת CSS מותאמת אישית למיקוד, אם תרצה בכך.

אם אתה רק צריך להעלות קבצי SVG כדי להשתמש בתמונות, אתה לא צריך להפעיל את “מצב מתקדם”. השארת זה מושבת מבטיח סקריפט Frontend לא enqueued ואת ההגדרות מיותרות להישאר מוסתרים.

לשימוש מתקדם: הפעל את “מצב מתקדם” תחת הגדרות> תמיכה ב- SVG.

כאשר המצב המתקדם מופעל, תוכל להטביע את תמונות ה- SVG שלך בדיוק כמו שתעשה תמונה סטנדרטית עם הוספת הוספה (בתצוגת טקסט) למחלקה "style-svg"(או למחלקה המותאמת אישית שהגדרת) לתגי IMG שברצונכם שתוסף זה יחליף עם קוד SVG בפועל.

לדוגמה:

<img class="style-svg" alt="alt-text" src="image-source.svg" />

אוֹ

<img class="your-custom-class" alt="alt-text" src="image-source.svg" />

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

אתה יכול להסיר את כל התכונות האחרות מתוך תג IMG כפי שהוא ייעלם בכל מקרה.

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

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

שים לב: אם ה- SVG שלך אינו מוצג, סביר להניח שהוא מוצג עם 0 גובה ורוחב. במקרה זה, יהיה עליך להגדיר את הגובה והרוחב ב- CSS שלך עבור קובצי SVG להצגה נכונה.

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

בִּטָחוֹן

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

מָשׁוֹב

  • אני פתוח להצעות שלך משוב – תודה על השימוש SVG תמיכה!
  • תגית אותי @benbodhi בטוויטר #svgsupport

הערה: אני מקווה שתאהב את הפלאגין הזה! הקדש רגע כדי לדרג אותו ולחץ על ‘פועל’ תחת תאימות עם הגירסה של WordPress.

תרגומים

אתה יכול לתרום את התרגום שלך כאן .
חדש לתרגום וורדפרס? קרא את המדריך מתרגם כדי להתחיל.

נקודות זכות

תוסף על ידי Benbodhi @benbodhi

תודה ipokkel על הצעותיו קוד תרומות.
תודה laurosello על תרומתו קוד.
לוגו מאת W3C, CC BY 2.5, https://commons.wikimedia.org/w/index.php?curid=1895005 .

להורדת התוסף
2018-05-14T11:11:43+00:00
יצירת קשר
close slider