כיצד לשלב את עורך גוטנברג עם הדגשת תחביר של Prism בוורדפרס

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

למרבה המזל, בעיה זו נפתרת בקלות על ידי Prism.js — ספרייה קלת משקל, מהירה וניתנת להרחבה להדגשת תחביר.

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

תבנית בת (חשוב)

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

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

שלב 1: הכנת מבנה הקבצים

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

1. prism.js — ספריית Prism עצמה, אותה נוריד.
2. prism.css — ערכת העיצוב הסטנדרטית של Prism.
3. prism-init.js — סקריפט העזר הקטן שלנו שיפיח חיים בהכל.
4. functions.php — הקובץ הראשי להוספת פונקציונליות לוורדפרס.
5. style.css — גיליון הסגנונות הראשי של תבנית הבת שלכם, בו נוסיף את התיקונים שלנו.

שלב 2: הורדת הגרסה הנכונה של Prism.js

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

1. עברו לדף ההורדה הרשמי: Prism.js Download.
2. בעמוד, בחרו:
   • רמת דחיסה (Compression level): Minified (לטעינה מהירה יותר באתר).
   • במקטע Languages, סמנו את השפות שאתם צריכים. לדוגמה, הקפידו לבחור Python.
   • גללו מטה למקטע Plugins וסמנו שלושה תוספים:
     • Line Numbers (למספור שורות).
     • Copy to Clipboard Button (עבור כפתור "העתק").
     • Normalize Whitespace (תוסף שימושי להצגה נכונה של הזחות).
3. לחצו על הכפתורים הכחולים DOWNLOAD JS ו-DOWNLOAD CSS.
4. מקמו את הקבצים שהורדתם prism.js ו-prism.css בתיקייה הראשית של תבנית הבת שלכם.

שלב 3: יצירת סקריפט האתחול

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

צרו קובץ בשם prism-init.js בתיקיית התבנית שלכם והדביקו בו את הקוד הבא:

/**
 * קובץ: prism-init.js
 * מטרה: אתחול הדגשת תחביר של Prism.js והוספת כפתורי "העתק".
 */
document.addEventListener("DOMContentLoaded", function () {
    // בדיקה האם ספריית Prism הראשית נטענה
    if (typeof Prism === 'undefined') {
        console.error("שגיאה קריטית: ספריית Prism.js לא נטענה.");
        return;
    }

    // הפעלת ההדגשה עבור כל בלוקי הקוד בעמוד.
    Prism.highlightAll();

    // הוספת כפתור "העתק" לכל בלוק
    const codeBlocks = document.querySelectorAll('pre[class*="language-"]');
    codeBlocks.forEach(preElement => {
        if (preElement.querySelector('.code-copy-btn')) { return; }
        const codeElement = preElement.querySelector('code');
        if (!codeElement) { return; }

        const button = document.createElement('button');
        button.className = 'code-copy-btn';
        button.type = 'button';
        button.innerText = 'העתק';
        button.setAttribute('aria-label', 'העתק קוד ללוח');

        button.addEventListener('click', () => {
            navigator.clipboard.writeText(codeElement.innerText).then(() => {
                button.innerText = 'הועתק!';
                button.disabled = true;
                setTimeout(() => {
                    button.innerText = 'העתק';
                    button.disabled = false;
                }, 2000);
            }).catch(err => {
                console.error('שגיאה בהעתקה: ', err);
                button.innerText = 'שגיאה';
            });
        });

        preElement.appendChild(button);
    });
});

שלב 4: חיבור הכל בקובץ functions.php

כעת עלינו להורות לוורדפרס לטעון את קבצי ה-CSS וה-JS החדשים שלנו. עלינו להוסיף גם קצת "קסם" שיכין אוטומטית את בלוקי הקוד מגוטנברג לעיבוד על ידי Prism.

פתחו את קובץ ה-functions.php שלכם והוסיפו לו את הקוד הבא:

<?php
// 1. הוספת סגנונות של תבנית האב ותבנית הבת לתור
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    // CSS של תבנית האב (למשל, Neve)
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

    // CSS ראשי של תבנית הבת
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( 'parent-style' ),
        wp_get_theme()->get('Version')
    );

    // CSS של Prism
    wp_enqueue_style(
        'prism-css',
        get_stylesheet_directory_uri() . '/prism.css',
        array( 'child-style' ),
        '1.29.0' // גרסה לדוגמה
    );
}

// 2. הוספת Prism.js והסקריפטים המותאמים שלנו לתור
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts' );
function my_theme_enqueue_scripts() {
    // Prism JS
    wp_enqueue_script(
        'prism-js',
        get_stylesheet_directory_uri() . '/prism.js',
        array(),
        '1.29.0', // גרסה לדוגמה
        true
    );

    // סקריפט אתחול מותאם אישית
    wp_enqueue_script(
        'prism-init-js',
        get_stylesheet_directory_uri() . '/prism-init.js',
        array( 'prism-js' ),
        wp_get_theme()->get('Version'),
        true
    );
}

// 3. הוספה אוטומטית של קלאסים לבלוקי קוד
add_filter( 'the_content', 'auto_format_code_blocks', 9 );
function auto_format_code_blocks( $content ) {
    // בלוקים רגילים של <pre><code>
    $content = preg_replace_callback(
        '/\<pre\>(\<code[^>]*\>)/',
        function ( $matches ) {
            return '\<pre class="line-numbers"\>\<code class="language-python line-numbers"\>';
        },
        $content
    );

    // בלוקי גוטנברג <pre class="wp-block-code"><code>
    $content = preg_replace_callback(
        '/\<pre class="wp-block-code([^"]*)"\>(\<code[^>]*\>)/',
        function ( $matches ) {
            return '\<pre class="wp-block-code' . $matches[1] . ' line-numbers"\>\<code class="language-python line-numbers"\>';
        },
        $content
    );

    return $content;
}
?>

שלב 5: נגיעות אחרונות בקובץ style.css

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

הוסיפו את הקוד הבא לסוף קובץ ה-style.css שלכם:

/*
 Prism.js: תיקונים ושיפורים
*/

/* 1. הסרת כל פסי הגלילה ואפשור גלישת שורות */
pre[class*="language-"] {
    white-space: pre-wrap !important;   /* מאפשר גלישת שורות */
    word-break: break-word;             /* שובר מילים ארוכות */
    max-height: none !important;        /* מסיר מגבלת גובה מתבנית האב */
    overflow: hidden !important;        /* מסתיר את כל פסי הגלילה */
}

/* 2. סגנונות עבור כפתור "העתק" */
.code-copy-btn {
    position: absolute;
    left: 12px; /* שינוי ל-left עבור RTL */
    right: auto;
    top: 12px;
    background: #e7e7e7;
    border: none;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 13px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s ease;
}

pre:hover .code-copy-btn {
    opacity: 1;
}

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