כיצד לאפשר Inline SVG בעורך התוכן של וורדפרס

האם וורדפרס מאפשרת Inline SVG בתוכן הפוסטים כברירת מחדל? התשובה הקצרה: באופן חלקי. וורדפרס שומרת קוד <svg> רק עבור משתמשים בעלי ההרשאה unfiltered_html, והלשונית ״ויזואלי״ בעורך הקלאסי מסירה אותו אצל כולם.

השלבים הבאים מיועדים להדבקת קוד SVG (<svg>, <path>, <rect> וכדומה) ישירות בעורך. כדי להעלות קבצי SVG לספריית המדיה, עיינו בסניפט כיצד לאפשר העלאת קבצי SVG בוורדפרס.

הפעלת Inline SVG בעורך הקלאסי (TinyMCE)

TinyMCE, העורך שמאחורי העורך הקלאסי והבלוק ״קלאסי״, מסיר כל אלמנט שאינו חלק מסכמת ה-HTML5 שלו, ואלמנטים של SVG אינם חלק ממנה. כדי למנוע זאת, הוסיפו את הקוד הבא לקובץ functions.php של תבנית הבת שלכם:

function override_mce_options( $initArray ) {
    $opts = '*[*]';
    $initArray['valid_elements']          = $opts;
    $initArray['extended_valid_elements'] = $opts;
    return $initArray;
}
add_filter( 'tiny_mce_before_init', 'override_mce_options' );

כיצד הקוד עובד

tiny_mce_before_init מסנן את מערך ההגדרות שוורדפרס מעבירה ל-TinyMCE לפני שהעורך נטען. וורדפרס מפעילה אותו בעורך הקלאסי ובבלוק ״קלאסי״ שבעורך הבלוקים.

valid_elements אומר ל-TinyMCE אילו תגיות ומאפיינים לשמור. משמעות הערך *[*] היא כל אלמנט עם כל מאפיין, כך שקוד ה-SVG שורד את המעבר בין הלשוניות ״ויזואלי״ ו״טקסט״.

שימו לב ש-*[*] מבטל את סינון האלמנטים של TinyMCE עבור כל התגיות, לא רק עבור SVG.

TinyMCE ממיר את viewBox לאותיות קטנות (viewbox). זה לא פוגע בפועל, מכיוון שמנתח ה-HTML של הדפדפן משחזר את הכתיב הנכון עבור Inline SVG.

מה וורדפרס שומרת בפועל: unfiltered_html ו-KSES

ההגדרה של TinyMCE משנה רק את העורך בדפדפן. מה שנשמר בפועל במסד הנתונים נקבע בצד השרת על ידי KSES, מסנן ה-HTML של וורדפרס:

• למנהלים ולעורכים באתר בודד יש unfiltered_html. התוכן שלהם לא מסונן, כך שה-Inline SVG נשמר כפי שנכתב.
• למחברים ולתורמים אין את ההרשאה הזו. KSES מסיר את <svg>, <path> ושאר תגיות ה-SVG בזמן השמירה, בלי קשר למה שהעורך מציג.
• ברשת אתרים (Multisite), רק למנהלי רשת יש unfiltered_html. הגדרת DISALLOW_UNFILTERED_HTML כ-true בקובץ wp-config.php מסירה אותה מכולם.

בעורך הבלוקים, הבלוק HTML מותאם פועל לפי אותו כלל. אין צורך בפילטר של TinyMCE עבורו, מכיוון שהבלוק הזה לא משתמש ב-TinyMCE, אבל משתמשים ללא unfiltered_html עדיין יאבדו את ה-SVG כשהפוסט יישמר.

הפעלת תגיות SVG בטוחות למחברים ולתורמים

אם משתמשים ללא unfiltered_html צריכים אייקונים פשוטים כ-Inline SVG, הוסיפו את אלמנטי ה-SVG ואת המאפיינים שלהם לרשימת ההיתרים (allowlist) של KSES עבור תוכן פוסטים. כל מה שלא ברשימה, כמו תגיות <script> ומאפייני onload, עדיין יוסר:

function savvy_allow_inline_svg( $tags, $context ) {
    if ( 'post' !== $context ) {
        return $tags;
    }

    $tags['svg'] = array(
        'xmlns'       => true,
        'viewbox'     => true,
        'width'       => true,
        'height'      => true,
        'fill'        => true,
        'class'       => true,
        'role'        => true,
        'aria-hidden' => true,
        'aria-label'  => true,
        'focusable'   => true,
    );
    $tags['g']      = array( 'fill' => true, 'stroke' => true, 'transform' => true );
    $tags['title']  = array();
    $tags['path']   = array( 'd' => true, 'fill' => true, 'stroke' => true, 'stroke-width' => true, 'stroke-linecap' => true, 'stroke-linejoin' => true, 'fill-rule' => true, 'clip-rule' => true, 'transform' => true );
    $tags['circle'] = array( 'cx' => true, 'cy' => true, 'r' => true, 'fill' => true, 'stroke' => true, 'stroke-width' => true );
    $tags['rect']   = array( 'x' => true, 'y' => true, 'width' => true, 'height' => true, 'rx' => true, 'ry' => true, 'fill' => true, 'stroke' => true, 'stroke-width' => true );

    return $tags;
}
add_filter( 'wp_kses_allowed_html', 'savvy_allow_inline_svg', 10, 2 );

שמות המאפיינים נכתבים באותיות קטנות (viewbox), מכיוון ש-KSES משווה אותם באותיות קטנות. שמרו על רשימה קצרה והימנעו מהיתר ל-<use>, <foreignObject>, href או style אלא אם אתם באמת צריכים אותם.

שאלות נפוצות

הנה כמה שאלות שעולות לא מעט לגבי Inline SVG בעורך של וורדפרס: